Repository: django-components/django-components
Pull request #1127: refactor: prefix component ID with `c`
Author: login: JuroOravec
Created: 2025-04-14T09:46:21Z | Merged: 2025-04-14T10:01:16Z

This prefixes the Component IDs (accessible as `Component.id`) with a `c`, so that the ID always starts with a alphabet character.

See https://github.com/django-components/django-components/issues/1084#issuecomment-2779764174

I opted to add only `c` (for Components), instead of `djc`, because in HTML, the component ID is already used as `data-djc-id-xxxxxx` attribute. So adding `djc` would end up with having the `djc` in there twice.


Diff:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 17e951c07..c714902ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 #### Refactor
 
+- Component ID is now prefixed with `c`, e.g. `c123456`.
+
 - When typing a Component, you can now specify as few or as many parameters as you want.
 
     ```py
diff --git a/docs/concepts/fundamentals/render_api.md b/docs/concepts/fundamentals/render_api.md
index fff710b17..5da3498ac 100644
--- a/docs/concepts/fundamentals/render_api.md
+++ b/docs/concepts/fundamentals/render_api.md
@@ -51,6 +51,26 @@ multiple times, the ID will be different for each call.
 
 It is available as [`self.id`](../../../reference/api#django_components.Component.id).
 
+The ID is a 7-letter alphanumeric string in the format `cXXXXXX`,
+where `XXXXXX` is a random string of 6 alphanumeric characters (case-sensitive).
+
+E.g. `c1a2b3c`.
+
+A single render ID has a chance of collision 1 in 57 billion. However, due to birthday paradox, the chance of collision increases to 1% when approaching ~33K render IDs.
+
+Thus, there is currently a soft-cap of ~30K components rendered on a single page.
+
+If you need to expand this limit, please open an issue on GitHub.
+
+```python
+class Table(Component):
+    def get_context_data(self, *args, **attrs):
+        # Access component's ID
+        assert self.id == "djc1A2b3c"
+
+        return {}
+```
+
 ## Component inputs
 
 All the component inputs are captured and available as [`self.input`](../../../reference/api/#django_components.Component.input).
diff --git a/docs/reference/template_tags.md b/docs/reference/template_tags.md
index ef14eb0b6..83a26c18e 100644
--- a/docs/reference/template_tags.md
+++ b/docs/reference/template_tags.md
@@ -20,7 +20,7 @@ Import as
 
 
 
-<a href="https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1064" target="_blank">See source code</a>
+<a href="https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1037" target="_blank">See source code</a>
 
 
 
@@ -43,7 +43,7 @@ If you insert this tag multiple times, ALL CSS links will be duplicately inserte
 
 
 
-<a href="https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1086" target="_blank">See source code</a>
+<a href="https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1059" target="_blank">See source code</a>
 
 
 
@@ -67,7 +67,7 @@ If you insert this tag multiple times, ALL JS scripts will be duplicately insert
 
 
 
-<a href="https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1669" target="_blank">See source code</a>
+<a href="https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1655" target="_blank">See source code</a>
 
 
 
diff --git a/src/django_components/component.py b/src/django_components/component.py
index f19c03a9c..9f8cda0b3 100644
--- a/src/django_components/component.py
+++ b/src/django_components/component.py
@@ -39,6 +39,7 @@
 from django_components.component_media import ComponentMediaInput, ComponentMediaMeta
 from django_components.component_registry import ComponentRegistry
 from django_components.component_registry import registry as registry_
+from django_components.constants import COMP_ID_PREFIX
 from django_components.context import _COMPONENT_CONTEXT_KEY, make_isolated_context_copy
 from django_components.dependencies import (
     RenderType,
@@ -721,6 +722,11 @@ def id(self) -> str:
 
         Raises `RuntimeError` if accessed outside of rendering execution.
 
+        The ID is a 7-letter alphanumeric string in the format `cXXXXXX`,
+        where `XXXXXX` is a random string of 6 alphanumeric characters (case-sensitive).
+
+        E.g. `c1A2b3c`.
+
         A single render ID has a chance of collision 1 in 57 billion. However, due to birthday paradox,
         the chance of collision increases to 1% when approaching ~33K render IDs.
 
@@ -1076,6 +1082,7 @@ def render_to_response(
         use components as Django views with `component.as_view()`.
 
         Inputs:
+
         - `args` - Positional args for the component. This is the same as calling the component
           as `{% component "my_comp" arg1 arg2 ... %}`
         - `kwargs` - Kwargs for the component. This is the same as calling the component
@@ -1146,6 +1153,7 @@ def render(
         Render the component into a string.
 
         Inputs:
+
         - `args` - Positional args for the component. This is the same as calling the component
           as `{% component "my_comp" arg1 arg2 ... %}`
         - `kwargs` - Kwargs for the component. This is the same as calling the component
@@ -1267,7 +1275,7 @@ def _render_impl(
         # This is handled as a stack, as users can potentially call `component.render()`
         # from within component hooks. Thus, then they do so, `component.id` will be the ID
         # of the deepest-most call to `component.render()`.
-        render_id = gen_id()
+        render_id = COMP_ID_PREFIX + gen_id()
         metadata = MetadataItem(
             render_id=render_id,
             input=ComponentInput(
@@ -1500,7 +1508,7 @@ def on_html_rendered(html: str) -> str:
     # Thus, the returned renderer function accepts the extra HTML attributes that were passed from parent,
     # and returns the updated HTML content.
     #
-    # Because the HTML attributes are all boolean (e.g. `data-djc-id-a1b3c4`), they are passed as a list.
+    # Because the HTML attributes are all boolean (e.g. `data-djc-id-ca1b3c4`), they are passed as a list.
     #
     # This whole setup makes it possible for multiple components to resolve to the same HTML element.
     # E.g. if CompA renders CompB, and CompB renders a <div>, then the <div> element will have
diff --git a/src/django_components/constants.py b/src/django_components/constants.py
new file mode 100644
index 000000000..498464d60
--- /dev/null
+++ b/src/django_components/constants.py
@@ -0,0 +1,3 @@
+UID_LENGTH = 6
+COMP_ID_PREFIX = "c"
+COMP_ID_LENGTH = len(COMP_ID_PREFIX) + UID_LENGTH
diff --git a/src/django_components/dependencies.py b/src/django_components/dependencies.py
index d5a05d1da..ecfa39660 100644
--- a/src/django_components/dependencies.py
+++ b/src/django_components/dependencies.py
@@ -32,6 +32,7 @@
 from djc_core_html_parser import set_html_attributes
 
 from django_components.cache import get_component_media_cache
+from django_components.constants import COMP_ID_LENGTH
 from django_components.node import BaseNode
 from django_components.util.misc import is_nonempty_str
 
@@ -230,9 +231,9 @@ def set_component_attrs_for_js_and_css(
     # These are the attributes that we want to set on the root element.
     all_root_attributes = [*root_attributes] if root_attributes else []
 
-    # Component ID is used for executing JS script, e.g. `data-djc-id-a1b2c3`
+    # Component ID is used for executing JS script, e.g. `data-djc-id-ca1b2c3`
     #
-    # NOTE: We use `data-djc-css-a1b2c3` and `data-djc-id-a1b2c3` instead of
+    # NOTE: We use `data-djc-css-a1b2c3` and `data-djc-id-ca1b2c3` instead of
     # `data-djc-css="a1b2c3"` and `data-djc-id="a1b2c3"`, to allow
     # multiple values to be associated with the same element, which may happen if
     # one component renders another.
@@ -350,8 +351,8 @@ def insert_component_dependencies_comment(
 SCRIPT_NAME_REGEX = re.compile(
     rb"^(?P<comp_cls_id>[\w\-\./]+?),(?P<id>[\w]+?),(?P<js>[0-9a-f]*?),(?P<css>[0-9a-f]*?)$"
 )
-# E.g. `data-djc-id-a1b2c3`
-MAYBE_COMP_ID = r'(?: data-djc-id-\w{6}="")?'
+# E.g. `data-djc-id-ca1b2c3`
+MAYBE_COMP_ID = r'(?: data-djc-id-\w{{{COMP_ID_LENGTH}}}="")?'.format(COMP_ID_LENGTH=COMP_ID_LENGTH)
 # E.g. `data-djc-css-99914b`
 MAYBE_COMP_CSS_ID = r'(?: data-djc-css-\w{6}="")?'
 
diff --git a/src/django_components/perfutil/component.py b/src/django_components/perfutil/component.py
index 35728441d..30ba03ccc 100644
--- a/src/django_components/perfutil/component.py
+++ b/src/django_components/perfutil/component.py
@@ -4,6 +4,7 @@
 
 from django.utils.safestring import mark_safe
 
+from django_components.constants import COMP_ID_LENGTH
 from django_components.util.exception import component_error_message
 
 if TYPE_CHECKING:
@@ -56,11 +57,15 @@ def __repr__(self) -> str:
 component_renderer_cache: Dict[str, Tuple[ComponentRenderer, str]] = {}
 child_component_attrs: Dict[str, List[str]] = {}
 
-nested_comp_pattern = re.compile(r'<template [^>]*?djc-render-id="\w{6}"[^>]*?></template>')
-render_id_pattern = re.compile(r'djc-render-id="(?P<render_id>\w{6})"')
+nested_comp_pattern = re.compile(
+    r'<template [^>]*?djc-render-id="\w{{{COMP_ID_LENGTH}}}"[^>]*?></template>'.format(COMP_ID_LENGTH=COMP_ID_LENGTH)
+)
+render_id_pattern = re.compile(
+    r'djc-render-id="(?P<render_id>\w{{{COMP_ID_LENGTH}}})"'.format(COMP_ID_LENGTH=COMP_ID_LENGTH)
+)
 
 
-# When a component is rendered, we want to apply HTML attributes like `data-djc-id-a1b3cf`
+# When a component is rendered, we want to apply HTML attributes like `data-djc-id-ca1b3cf`
 # to all root elements. However, we have to approach it smartly, to minimize the HTML parsing.
 #
 # If we naively first rendered the child components, and then the parent component, then we would
@@ -90,8 +95,8 @@ def __repr__(self) -> str:
 #    The actual HTML output is stored in `component_renderer_cache`.
 # 2. The parent of the child component is rendered normally.
 # 3. If the placeholder for the child component is at root of the parent component,
-#    then the placeholder may be tagged with extra attributes, e.g. `data-djc-id-a1b3cf`.
-#    `<template djc-render-id="a1b3cf" data-djc-id-a1b3cf></template>`.
+#    then the placeholder may be tagged with extra attributes, e.g. `data-djc-id-ca1b3cf`.
+#    `<template djc-render-id="a1b3cf" data-djc-id-ca1b3cf></template>`.
 # 4. When the parent is done rendering, we go back to step 1., the parent component
 #    either returns the actual HTML, or a placeholder.
 # 5. Only once we get to the root component, that has no further parents, is when we finally
diff --git a/src/django_components/util/misc.py b/src/django_components/util/misc.py
index 267d2765c..2ebc97aff 100644
--- a/src/django_components/util/misc.py
+++ b/src/django_components/util/misc.py
@@ -6,6 +6,7 @@
 from types import ModuleType
 from typing import TYPE_CHECKING, Any, Callable, Iterable, List, Optional, Tuple, Type, TypeVar, Union
 
+from django_components.constants import UID_LENGTH
 from django_components.util.nanoid import generate
 
 if TYPE_CHECKING:
@@ -24,7 +25,7 @@ def gen_id() -> str:
     # See https://zelark.github.io/nano-id-cc/
     return generate(
         "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
-        size=6,
+        size=UID_LENGTH,
     )
 
 
diff --git a/src/django_components_js/README.md b/src/django_components_js/README.md
index 5c7f0fff8..f6eb3ad06 100644
--- a/src/django_components_js/README.md
+++ b/src/django_components_js/README.md
@@ -25,8 +25,8 @@ Components.registerComponentData(
 // we can run component's init function
 Components.callComponent(
   "table",  // Component name
-  12345,    // Component ID - An HTML element with corresponding
-            //                attribute (`data-djc-id-12345`) MUST
+  "c123456",    // Component ID - An HTML element with corresponding
+            //                attribute (`data-djc-id-c123456`) MUST
             //                be present in the DOM.
   "3d09cf", // Input ID
 );
diff --git a/tests/__snapshots__/test_benchmark_djc.ambr b/tests/__snapshots__/test_benchmark_djc.ambr
index 52dc28016..4a23fe007 100644
--- a/tests/__snapshots__/test_benchmark_djc.ambr
+++ b/tests/__snapshots__/test_benchmark_djc.ambr
@@ -11,7 +11,7 @@
           
   
           <!DOCTYPE html>
-          <html lang="en" class="h-full" data-djc-id-a1bc3e="" data-djc-id-a1bc4e="" data-djc-id-a1bc6a="" data-djc-id-a1bc79="" data-djc-id-a1bc7d="">
+          <html lang="en" class="h-full" data-djc-id-ca1bc3e="" data-djc-id-ca1bc4e="" data-djc-id-ca1bc6a="" data-djc-id-ca1bc79="" data-djc-id-ca1bc7d="">
           <head>
               <meta charset="UTF-8"/>
               <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
@@ -43,7 +43,7 @@
                           
           <div
               class="flex grow flex-col gap-y-5 overflow-y-auto px-6 pb-4 bg-neutral-900 text-neutral-200"
-           data-djc-id-a1bc83="">
+           data-djc-id-ca1bc83="">
               <div class="flex h-16 shrink-0 items-center">
                   DEMO
               </div>
@@ -53,9 +53,9 @@
                           
                                   
                   
-          <li x-data="bookmarks" class="pt-4" data-djc-id-a1bc9e="">
+          <li x-data="bookmarks" class="pt-4" data-djc-id-ca1bc9e="">
               
-          <div  data-djc-id-a1bcb1="">
+          <div  data-djc-id-ca1bcb1="">
               
               <span
                   class="py-2 text-sm group flex gap-x-3 rounded-md leading-6 font-semibold"
@@ -63,7 +63,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcba="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcba="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -88,7 +88,7 @@
                   bookmark: {&#x27;id&#x27;: 82, &#x27;text&#x27;: &#x27;Test bookmark&#x27;, &#x27;url&#x27;: &#x27;http://localhost:8000/bookmarks/9/create&#x27;, &#x27;edit_url&#x27;: &#x27;/edit/1/bookmark/82&#x27;},
               }"
               class="list-disc ml-8"
-           data-djc-id-a1bcb2="">
+           data-djc-id-ca1bcb2="">
               <div class="flex">
                   <a
                       href="http://localhost:8000/bookmarks/9/create"
@@ -99,7 +99,7 @@
                   </a>
   
                   
-          <div x-ref="bookmark_menu" @click="onMenuToggle" class="self-center cursor-pointer" data-djc-id-a1bcbb="">
+          <div x-ref="bookmark_menu" @click="onMenuToggle" class="self-center cursor-pointer" data-djc-id-ca1bcbb="">
               
               <span
                   class="p-0 hover:bg-neutral-700 hover:text-white transition group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -107,7 +107,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="inline hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcbc="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="inline hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcbc="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -127,7 +127,7 @@
   
                   <li>
                       
-          <div  data-djc-id-a1bcb4="">
+          <div  data-djc-id-ca1bcb4="">
               
               <a
                   href="/create/1/bookmark"
@@ -136,7 +136,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="mt-0.5 ml-1 hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 18px; height: 18px;" data-djc-id-a1bcbd="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="mt-0.5 ml-1 hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 18px; height: 18px;" data-djc-id-ca1bcbd="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -187,7 +187,7 @@
               
                   @keydown.escape="contextMenuItem.value = false"
               
-           data-djc-id-a1bcb5="">
+           data-djc-id-ca1bcb5="">
               
               
   
@@ -197,7 +197,7 @@
               role="menu"
               aria-orientation="vertical"
               x-anchor.bottom="contextMenuRef.value" x-show="contextMenuItem.value" x-cloak="" class="w-24 ml-8 z-40 mt-2 divide-y divide-gray-300 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-           data-djc-id-a1bcbe="">
+           data-djc-id-ca1bcbe="">
               
                   <div class="py-1" role="group">
                       
@@ -229,7 +229,7 @@
                               
                                   <li>
                                       
-          <div  data-djc-id-a1bca5="">
+          <div  data-djc-id-ca1bca5="">
               
               <a
                   href="/"
@@ -238,7 +238,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc2="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc2="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -259,7 +259,7 @@
                               
                                   <li>
                                       
-          <div  data-djc-id-a1bca6="">
+          <div  data-djc-id-ca1bca6="">
               
               <a
                   href="/projects"
@@ -268,7 +268,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc3="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc3="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -294,7 +294,7 @@
           <a
               href="/projects/1"
               class="p-2 !w-full inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline"
-           data-djc-id-a1bca7="">
+           data-djc-id-ca1bca7="">
           
   
               
@@ -310,7 +310,7 @@
                               
                                   <li>
                                       
-          <div  data-djc-id-a1bcab="">
+          <div  data-djc-id-ca1bcab="">
               
               <a
                   href="/page-3"
@@ -319,7 +319,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc4="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc4="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -340,7 +340,7 @@
                               
                                   <li>
                                       
-          <div  data-djc-id-a1bcac="">
+          <div  data-djc-id-ca1bcac="">
               
               <a
                   href="/page-4"
@@ -349,7 +349,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc5="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc5="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -370,7 +370,7 @@
                               
                                   <li>
                                       
-          <div  data-djc-id-a1bcad="">
+          <div  data-djc-id-ca1bcad="">
               
               <a
                   href="/page-5"
@@ -379,7 +379,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc6="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc6="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -400,7 +400,7 @@
                               
                                   <li>
                                       
-          <div  data-djc-id-a1bcae="">
+          <div  data-djc-id-ca1bcae="">
               
               <a
                   href="/faq"
@@ -409,7 +409,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc7="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc7="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -432,7 +432,7 @@
   
                           <li class="mt-auto">
                               
-          <div  data-djc-id-a1bcaf="">
+          <div  data-djc-id-ca1bcaf="">
               
               <a
                   href="/faq"
@@ -441,7 +441,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc8="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc8="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -458,7 +458,7 @@
       
   
                               
-          <div  data-djc-id-a1bcb0="">
+          <div  data-djc-id-ca1bcb0="">
               
               <span
                   class="p-2 hover:bg-neutral-700 hover:text-white transition group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -466,7 +466,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcc9="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="hover:bg-neutral-700 hover:text-white transition h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcc9="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -495,7 +495,7 @@
                               
           <div
               @sidebar_toggle="toggleSidebar" class="sticky top-0 z-30 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
-           data-djc-id-a1bc8b="">
+           data-djc-id-ca1bc8b="">
               <button
                   type="button"
                   class="-m-2.5 p-2.5 text-gray-700"
@@ -503,7 +503,7 @@
               >
                   <span class="sr-only">Open sidebar</span>
                   
-          <div  data-djc-id-a1bcca="">
+          <div  data-djc-id-ca1bcca="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -511,7 +511,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bccb="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bccb="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -552,7 +552,7 @@
           <nav
               aria-label="Breadcrumb"
               class="flex border-b border-gray-200 bg-white"
-           data-djc-id-a1bc8e="">
+           data-djc-id-ca1bc8e="">
               <ol
                   role="list"
                   class="mx-auto flex w-full max-w-screen-xl space-x-4 px-4 sm:px-6 lg:px-8"
@@ -572,7 +572,7 @@
                               
   
                               
-          <div  data-djc-id-a1bc4f="">
+          <div  data-djc-id-ca1bc4f="">
               
               <span
                   class="text-gray-400 hover:text-gray-500 group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -580,7 +580,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 20px; height: 20px;" data-djc-id-a1bc55="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 20px; height: 20px;" data-djc-id-ca1bc55="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -652,7 +652,7 @@
   
                   
                       
-          <div class="flex flex-col" data-djc-id-a1bc92="">
+          <div class="flex flex-col" data-djc-id-ca1bc92="">
               <ul class="flex border-b mb-5 bg-white">
                   
                       
@@ -700,7 +700,7 @@
                           <div class="absolute w-full h-full">
                               
                   
-          <ul role="list" class="flex flex-col gap-4" data-djc-id-a1bc97="">
+          <ul role="list" class="flex flex-col gap-4" data-djc-id-ca1bc97="">
               
                   <li class="py-5 group flex justify-between gap-x-6 border border-gray-300 pl-4 pr-6 bg-white">
                       <div class="flex min-w-0 w-full gap-x-4">
@@ -807,7 +807,7 @@
               x-data="tabs"
               data-init="{&quot;name&quot;: &quot;proj-right&quot;}"
               class="p-6 h-full flex flex-col"
-           data-djc-id-a1be32="">
+           data-djc-id-ca1be32="">
               <ul class="flex border-b text-sm">
                   
                       
@@ -912,7 +912,7 @@
           
               
                       
-          <div class="prose flex flex-col gap-8" data-djc-id-a1bc9b="" data-djc-id-a1bccd="" data-djc-id-a1bcd5="">
+          <div class="prose flex flex-col gap-8" data-djc-id-ca1bc9b="" data-djc-id-ca1bccd="" data-djc-id-ca1bcd5="">
               
               <div class="border-b border-neutral-300">
                   <div class="flex justify-between items-start">
@@ -926,7 +926,7 @@
           <a
               href="/edit/1/"
               class="not-prose bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bcdc="">
+           data-djc-id-ca1bcdc="">
           
   
               
@@ -983,7 +983,7 @@
   
               
               
-          <div class="prose border-b border-neutral-300 pb-8" data-djc-id-a1bcdd="">
+          <div class="prose border-b border-neutral-300 pb-8" data-djc-id-ca1bcdd="">
               <div class="flex justify-between items-start mb-4">
                   <h3 class="mt-0">Status Updates</h3>
                   
@@ -994,7 +994,7 @@
           <a
               href="/create/1/status_update"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bcea="">
+           data-djc-id-ca1bcea="">
           
   
               
@@ -1024,7 +1024,7 @@
           <a
               href="/edit/1/roles/"
               class="not-prose bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bce0="">
+           data-djc-id-ca1bce0="">
           
   
               
@@ -1039,10 +1039,10 @@
                       </div>
   
                       
-          <div x-data="project_users" data-djc-id-a1bce1="">
+          <div x-data="project_users" data-djc-id-ca1bce1="">
               
                   
-          <div @user_delete="onUserDelete" class="flow-root" data-djc-id-a1bceb="">
+          <div @user_delete="onUserDelete" class="flow-root" data-djc-id-ca1bceb="">
               <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                   <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                       <table class="min-w-full divide-y divide-gray-300">
@@ -1210,7 +1210,7 @@
           <a
               href="/edit/1/contacts/"
               class="not-prose bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bce9="">
+           data-djc-id-ca1bce9="">
           
   
               
@@ -1240,7 +1240,7 @@
           
               
                       
-          <div class="prose" data-djc-id-a1bc9b="" data-djc-id-a1bcd0="" data-djc-id-a1bcf2="">
+          <div class="prose" data-djc-id-ca1bc9b="" data-djc-id-ca1bcd0="" data-djc-id-ca1bcf2="">
               <h3>Notes</h3>
               
                   <div class="mt-8">
@@ -1252,7 +1252,7 @@
                                   </span>
                                   
                                       
-          <div  data-djc-id-a1bcf7="">
+          <div  data-djc-id-ca1bcf7="">
               
               <a
                   href="/edit/1/note/1/"
@@ -1261,7 +1261,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcfc="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcfc="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -1296,7 +1296,7 @@
           <a
               href="/create/1/note/1/"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bcf8="">
+           data-djc-id-ca1bcf8="">
           
   
               
@@ -1319,7 +1319,7 @@
                                   </span>
                                   
                                       
-          <div  data-djc-id-a1bcf9="">
+          <div  data-djc-id-ca1bcf9="">
               
               <a
                   href="/edit/1/note/2/"
@@ -1328,7 +1328,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bcfd="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bcfd="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -1363,7 +1363,7 @@
           <a
               href="/create/1/note/2/"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bcfa="">
+           data-djc-id-ca1bcfa="">
           
   
               
@@ -1390,7 +1390,7 @@
           <a
               href="/create/1/note/"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bcfb="">
+           data-djc-id-ca1bcfb="">
           
   
               
@@ -1413,7 +1413,7 @@
           
               
                       
-          <div class="prose" data-djc-id-a1bc9b="" data-djc-id-a1bcd1="" data-djc-id-a1bcff="">
+          <div class="prose" data-djc-id-ca1bc9b="" data-djc-id-ca1bcd1="" data-djc-id-ca1bcff="">
               <h3>Notes</h3>
               
                   <div class="mt-8">
@@ -1425,7 +1425,7 @@
                                   </span>
                                   
                                       
-          <div  data-djc-id-a1bd00="">
+          <div  data-djc-id-ca1bd00="">
               
               <a
                   href="/edit/1/note/1/"
@@ -1434,7 +1434,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd03="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd03="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -1469,7 +1469,7 @@
           <a
               href="/create/1/note/1/"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bd01="">
+           data-djc-id-ca1bd01="">
           
   
               
@@ -1496,7 +1496,7 @@
           <a
               href="/create/1/note/"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bd02="">
+           data-djc-id-ca1bd02="">
           
   
               
@@ -1519,7 +1519,7 @@
           
               
                       
-          <div class="prose" data-djc-id-a1bc9b="" data-djc-id-a1bcd2="" data-djc-id-a1bd05="">
+          <div class="prose" data-djc-id-ca1bc9b="" data-djc-id-ca1bcd2="" data-djc-id-ca1bd05="">
               <h3>Notes</h3>
               
                   <div class="mt-8">
@@ -1531,7 +1531,7 @@
                                   </span>
                                   
                                       
-          <div  data-djc-id-a1bd06="">
+          <div  data-djc-id-ca1bd06="">
               
               <a
                   href="/edit/1/note/2/"
@@ -1540,7 +1540,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd09="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="text-gray-400 hover:text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd09="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -1575,7 +1575,7 @@
           <a
               href="/create/1/note/2/"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bd07="">
+           data-djc-id-ca1bd07="">
           
   
               
@@ -1602,7 +1602,7 @@
           <a
               href="/create/1/note/"
               class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bd08="">
+           data-djc-id-ca1bd08="">
           
   
               
@@ -1625,21 +1625,21 @@
           
               
                       
-          <div class="flex flex-col gap-y-3" data-djc-id-a1bc9b="" data-djc-id-a1bcd3="" data-djc-id-a1bd0b="">
+          <div class="flex flex-col gap-y-3" data-djc-id-ca1bc9b="" data-djc-id-ca1bcd3="" data-djc-id-ca1bd0b="">
               
                   
           <div
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: true}"
               
-           data-djc-id-a1bd10="">
+           data-djc-id-ca1bd10="">
               <div
                   @click="togglePanel"
                   class="flex gap-x-2 prose pb-2 cursor-pointer"
               >
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd1c="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd1c="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -1647,7 +1647,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd24="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd24="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -1674,17 +1674,17 @@
                   
                           
                               
-          <div class="flex flex-col" data-djc-id-a1bd1d="">
+          <div class="flex flex-col" data-djc-id-ca1bd1d="">
               
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bd25="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bd25="">
               
               
                   <span class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 group-hover:bg-blue-500 transition">
                       
-          <div class="p-2" data-djc-id-a1bd29="">
+          <div class="p-2" data-djc-id-ca1bd29="">
               
               <span
                   class="text-white group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -1692,7 +1692,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-white h-6 w-6 shrink-0" style="width: 20px; height: 20px;" data-djc-id-a1bd2a="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-white h-6 w-6 shrink-0" style="width: 20px; height: 20px;" data-djc-id-ca1bd2a="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -1718,7 +1718,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="18" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bd28="">
+           data-djc-id-ca1bd28="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -1733,7 +1733,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd2b="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd2b="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -1741,7 +1741,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd31="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd31="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -1769,14 +1769,14 @@
               x-props="{
                   initAttachments: '[{&quot;url&quot;: &quot;http://localhost:8000/create/bookmmarks/9/&quot;, &quot;text&quot;: &quot;Test bookmark&quot;, &quot;tags&quot;: []}]'
               }"
-           data-djc-id-a1bd2c="">
+           data-djc-id-ca1bd2c="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bd32="">
+           data-djc-id-ca1bd32="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -1818,7 +1818,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd3c="">
+           data-djc-id-ca1bd3c="">
           
   
               
@@ -1838,7 +1838,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd3d="">
+           data-djc-id-ca1bd3d="">
           
   
               
@@ -1860,7 +1860,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd3e="">
+           data-djc-id-ca1bd3e="">
               <div>
                    
                   
@@ -1878,7 +1878,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bd44="">
+           data-djc-id-ca1bd44="">
           
   
               
@@ -1928,7 +1928,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd45="">
+           data-djc-id-ca1bd45="">
           
   
               
@@ -1950,7 +1950,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd46="">
+           data-djc-id-ca1bd46="">
           
   
               
@@ -1975,7 +1975,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd47="">
+           data-djc-id-ca1bd47="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -2016,7 +2016,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd4c="">
+           data-djc-id-ca1bd4c="">
           
   
               
@@ -2043,7 +2043,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd4d="">
+           data-djc-id-ca1bd4d="">
           
   
               
@@ -2093,14 +2093,14 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: true}"
               
-           data-djc-id-a1bd18="">
+           data-djc-id-ca1bd18="">
               <div
                   @click="togglePanel"
                   class="flex gap-x-2 prose pb-2 cursor-pointer"
               >
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd4e="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd4e="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -2108,7 +2108,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd50="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd50="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -2135,16 +2135,16 @@
                   
                           
                               
-          <div class="flex flex-col" data-djc-id-a1bd4f="">
+          <div class="flex flex-col" data-djc-id-ca1bd4f="">
               
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bd51="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bd51="">
               
               
                   
-          <div title="A dependent dependency has not been met!" data-djc-id-a1bd5d="">
+          <div title="A dependent dependency has not been met!" data-djc-id-ca1bd5d="">
               
               <span
                   class="text-black group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -2152,7 +2152,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-black h-6 w-6 shrink-0" style="width: 32px; height: 32px;" data-djc-id-a1bd5e="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-black h-6 w-6 shrink-0" style="width: 32px; height: 32px;" data-djc-id-ca1bd5e="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -2177,7 +2177,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="14" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bd52="">
+           data-djc-id-ca1bd52="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -2192,7 +2192,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd5f="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd5f="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -2200,7 +2200,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd65="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd65="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -2227,12 +2227,12 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bd60="">
+           data-djc-id-ca1bd60="">
               <div class="w-full bg-gray-100 text-sm p-2" style="min-height: 100px;">
                   
                       <span class="text-gray-500 italic">
                           
-          <div class="float-left pr-1" data-djc-id-a1bd66="">
+          <div class="float-left pr-1" data-djc-id-ca1bd66="">
               
               <span
                   class="text-gray-500 group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -2240,7 +2240,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd69="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd69="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -2263,7 +2263,7 @@
           <a
               href="/phase/1/PHASE_3"
               target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline"
-           data-djc-id-a1bd67="">
+           data-djc-id-ca1bd67="">
           
   
               
@@ -2286,7 +2286,7 @@
                   ...{ attachments: attachments.value },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd68="">
+           data-djc-id-ca1bd68="">
               <div>
                   
                       This output does not have any attachments.
@@ -2305,7 +2305,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bd6a="">
+           data-djc-id-ca1bd6a="">
           
   
               
@@ -2356,7 +2356,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd6b="">
+           data-djc-id-ca1bd6b="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -2412,14 +2412,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bd64="">
+           data-djc-id-ca1bd64="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bd6c="">
+           data-djc-id-ca1bd6c="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -2461,7 +2461,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd6d="">
+           data-djc-id-ca1bd6d="">
           
   
               
@@ -2481,7 +2481,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd6e="">
+           data-djc-id-ca1bd6e="">
           
   
               
@@ -2503,7 +2503,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd6f="">
+           data-djc-id-ca1bd6f="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -2522,7 +2522,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bd70="">
+           data-djc-id-ca1bd70="">
           
   
               
@@ -2572,7 +2572,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd71="">
+           data-djc-id-ca1bd71="">
           
   
               
@@ -2594,7 +2594,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd72="">
+           data-djc-id-ca1bd72="">
           
   
               
@@ -2619,7 +2619,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd73="">
+           data-djc-id-ca1bd73="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -2660,7 +2660,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd74="">
+           data-djc-id-ca1bd74="">
           
   
               
@@ -2687,7 +2687,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd75="">
+           data-djc-id-ca1bd75="">
           
   
               
@@ -2727,7 +2727,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bd53="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bd53="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -2744,7 +2744,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="21" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bd54="">
+           data-djc-id-ca1bd54="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -2759,7 +2759,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd76="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd76="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -2767,7 +2767,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd78="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd78="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -2795,14 +2795,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bd77="">
+           data-djc-id-ca1bd77="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bd79="">
+           data-djc-id-ca1bd79="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -2844,7 +2844,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd7a="">
+           data-djc-id-ca1bd7a="">
           
   
               
@@ -2864,7 +2864,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd7b="">
+           data-djc-id-ca1bd7b="">
           
   
               
@@ -2886,7 +2886,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd7c="">
+           data-djc-id-ca1bd7c="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -2905,7 +2905,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bd7d="">
+           data-djc-id-ca1bd7d="">
           
   
               
@@ -2955,7 +2955,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd7e="">
+           data-djc-id-ca1bd7e="">
           
   
               
@@ -2977,7 +2977,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd7f="">
+           data-djc-id-ca1bd7f="">
           
   
               
@@ -3002,7 +3002,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd80="">
+           data-djc-id-ca1bd80="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -3043,7 +3043,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd81="">
+           data-djc-id-ca1bd81="">
           
   
               
@@ -3070,7 +3070,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd82="">
+           data-djc-id-ca1bd82="">
           
   
               
@@ -3110,7 +3110,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bd55="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bd55="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -3127,7 +3127,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="22" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bd56="">
+           data-djc-id-ca1bd56="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -3142,7 +3142,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd83="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd83="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -3150,7 +3150,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd85="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd85="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -3178,14 +3178,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bd84="">
+           data-djc-id-ca1bd84="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bd86="">
+           data-djc-id-ca1bd86="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -3227,7 +3227,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd87="">
+           data-djc-id-ca1bd87="">
           
   
               
@@ -3247,7 +3247,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd88="">
+           data-djc-id-ca1bd88="">
           
   
               
@@ -3269,7 +3269,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd89="">
+           data-djc-id-ca1bd89="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -3288,7 +3288,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bd8a="">
+           data-djc-id-ca1bd8a="">
           
   
               
@@ -3338,7 +3338,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd8b="">
+           data-djc-id-ca1bd8b="">
           
   
               
@@ -3360,7 +3360,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd8c="">
+           data-djc-id-ca1bd8c="">
           
   
               
@@ -3385,7 +3385,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd8d="">
+           data-djc-id-ca1bd8d="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -3426,7 +3426,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd8e="">
+           data-djc-id-ca1bd8e="">
           
   
               
@@ -3453,7 +3453,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd8f="">
+           data-djc-id-ca1bd8f="">
           
   
               
@@ -3493,7 +3493,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bd57="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bd57="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -3510,7 +3510,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="23" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bd58="">
+           data-djc-id-ca1bd58="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -3525,7 +3525,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd90="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd90="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -3533,7 +3533,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd92="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd92="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -3561,14 +3561,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bd91="">
+           data-djc-id-ca1bd91="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bd93="">
+           data-djc-id-ca1bd93="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -3610,7 +3610,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd94="">
+           data-djc-id-ca1bd94="">
           
   
               
@@ -3630,7 +3630,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd95="">
+           data-djc-id-ca1bd95="">
           
   
               
@@ -3652,7 +3652,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd96="">
+           data-djc-id-ca1bd96="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -3671,7 +3671,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bd97="">
+           data-djc-id-ca1bd97="">
           
   
               
@@ -3721,7 +3721,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd98="">
+           data-djc-id-ca1bd98="">
           
   
               
@@ -3743,7 +3743,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd99="">
+           data-djc-id-ca1bd99="">
           
   
               
@@ -3768,7 +3768,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bd9a="">
+           data-djc-id-ca1bd9a="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -3809,7 +3809,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd9b="">
+           data-djc-id-ca1bd9b="">
           
   
               
@@ -3836,7 +3836,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bd9c="">
+           data-djc-id-ca1bd9c="">
           
   
               
@@ -3876,7 +3876,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bd59="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bd59="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -3893,7 +3893,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="24" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bd5a="">
+           data-djc-id-ca1bd5a="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -3908,7 +3908,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bd9d="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bd9d="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -3916,7 +3916,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bd9f="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bd9f="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -3944,14 +3944,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bd9e="">
+           data-djc-id-ca1bd9e="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bda0="">
+           data-djc-id-ca1bda0="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -3993,7 +3993,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bda1="">
+           data-djc-id-ca1bda1="">
           
   
               
@@ -4013,7 +4013,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bda2="">
+           data-djc-id-ca1bda2="">
           
   
               
@@ -4035,7 +4035,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bda3="">
+           data-djc-id-ca1bda3="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -4054,7 +4054,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bda4="">
+           data-djc-id-ca1bda4="">
           
   
               
@@ -4104,7 +4104,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bda5="">
+           data-djc-id-ca1bda5="">
           
   
               
@@ -4126,7 +4126,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bda6="">
+           data-djc-id-ca1bda6="">
           
   
               
@@ -4151,7 +4151,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bda7="">
+           data-djc-id-ca1bda7="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -4192,7 +4192,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bda8="">
+           data-djc-id-ca1bda8="">
           
   
               
@@ -4219,7 +4219,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bda9="">
+           data-djc-id-ca1bda9="">
           
   
               
@@ -4259,11 +4259,11 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bd5b="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bd5b="">
               
               
                   
-          <div title="A dependent dependency has not been met!" data-djc-id-a1bdaa="">
+          <div title="A dependent dependency has not been met!" data-djc-id-ca1bdaa="">
               
               <span
                   class="text-black group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -4271,7 +4271,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-black h-6 w-6 shrink-0" style="width: 32px; height: 32px;" data-djc-id-a1bdab="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-black h-6 w-6 shrink-0" style="width: 32px; height: 32px;" data-djc-id-ca1bdab="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -4296,7 +4296,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="14" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bd5c="">
+           data-djc-id-ca1bd5c="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -4311,7 +4311,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bdac="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bdac="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -4319,7 +4319,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bdaf="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bdaf="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -4346,12 +4346,12 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bdad="">
+           data-djc-id-ca1bdad="">
               <div class="w-full bg-gray-100 text-sm p-2" style="min-height: 100px;">
                   
                       <span class="text-gray-500 italic">
                           
-          <div class="float-left pr-1" data-djc-id-a1bdb0="">
+          <div class="float-left pr-1" data-djc-id-ca1bdb0="">
               
               <span
                   class="text-gray-500 group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -4359,7 +4359,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bdb3="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-500 h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bdb3="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -4382,7 +4382,7 @@
           <a
               href="/phase/1/PHASE_3"
               target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline"
-           data-djc-id-a1bdb1="">
+           data-djc-id-ca1bdb1="">
           
   
               
@@ -4405,7 +4405,7 @@
                   ...{ attachments: attachments.value },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdb2="">
+           data-djc-id-ca1bdb2="">
               <div>
                   
                       This output does not have any attachments.
@@ -4424,7 +4424,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bdb4="">
+           data-djc-id-ca1bdb4="">
           
   
               
@@ -4475,7 +4475,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdb5="">
+           data-djc-id-ca1bdb5="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -4531,14 +4531,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bdae="">
+           data-djc-id-ca1bdae="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bdb6="">
+           data-djc-id-ca1bdb6="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -4580,7 +4580,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdb7="">
+           data-djc-id-ca1bdb7="">
           
   
               
@@ -4600,7 +4600,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdb8="">
+           data-djc-id-ca1bdb8="">
           
   
               
@@ -4622,7 +4622,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdb9="">
+           data-djc-id-ca1bdb9="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -4641,7 +4641,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bdba="">
+           data-djc-id-ca1bdba="">
           
   
               
@@ -4691,7 +4691,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdbb="">
+           data-djc-id-ca1bdbb="">
           
   
               
@@ -4713,7 +4713,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdbc="">
+           data-djc-id-ca1bdbc="">
           
   
               
@@ -4738,7 +4738,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdbd="">
+           data-djc-id-ca1bdbd="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -4779,7 +4779,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdbe="">
+           data-djc-id-ca1bdbe="">
           
   
               
@@ -4806,7 +4806,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdbf="">
+           data-djc-id-ca1bdbf="">
           
   
               
@@ -4856,14 +4856,14 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: true}"
               
-           data-djc-id-a1bd19="">
+           data-djc-id-ca1bd19="">
               <div
                   @click="togglePanel"
                   class="flex gap-x-2 prose pb-2 cursor-pointer"
               >
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bdc0="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bdc0="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -4871,7 +4871,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bdc2="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bdc2="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -4898,12 +4898,12 @@
                   
                           
                               
-          <div class="flex flex-col" data-djc-id-a1bdc1="">
+          <div class="flex flex-col" data-djc-id-ca1bdc1="">
               
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bdc3="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bdc3="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -4920,7 +4920,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="14" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bdc4="">
+           data-djc-id-ca1bdc4="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -4935,7 +4935,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bdcb="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bdcb="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -4943,7 +4943,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bdcd="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bdcd="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -4971,14 +4971,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bdcc="">
+           data-djc-id-ca1bdcc="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bdce="">
+           data-djc-id-ca1bdce="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -5020,7 +5020,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdcf="">
+           data-djc-id-ca1bdcf="">
           
   
               
@@ -5040,7 +5040,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdd0="">
+           data-djc-id-ca1bdd0="">
           
   
               
@@ -5062,7 +5062,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdd1="">
+           data-djc-id-ca1bdd1="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -5081,7 +5081,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bdd2="">
+           data-djc-id-ca1bdd2="">
           
   
               
@@ -5131,7 +5131,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdd3="">
+           data-djc-id-ca1bdd3="">
           
   
               
@@ -5153,7 +5153,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdd4="">
+           data-djc-id-ca1bdd4="">
           
   
               
@@ -5178,7 +5178,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdd5="">
+           data-djc-id-ca1bdd5="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -5219,7 +5219,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdd6="">
+           data-djc-id-ca1bdd6="">
           
   
               
@@ -5246,7 +5246,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdd7="">
+           data-djc-id-ca1bdd7="">
           
   
               
@@ -5286,7 +5286,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bdc5="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bdc5="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -5303,7 +5303,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="15" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bdc6="">
+           data-djc-id-ca1bdc6="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -5318,7 +5318,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bdd8="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bdd8="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -5326,7 +5326,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bdda="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bdda="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -5354,14 +5354,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bdd9="">
+           data-djc-id-ca1bdd9="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bddb="">
+           data-djc-id-ca1bddb="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -5403,7 +5403,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bddc="">
+           data-djc-id-ca1bddc="">
           
   
               
@@ -5423,7 +5423,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bddd="">
+           data-djc-id-ca1bddd="">
           
   
               
@@ -5445,7 +5445,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdde="">
+           data-djc-id-ca1bdde="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -5464,7 +5464,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bddf="">
+           data-djc-id-ca1bddf="">
           
   
               
@@ -5514,7 +5514,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bde0="">
+           data-djc-id-ca1bde0="">
           
   
               
@@ -5536,7 +5536,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bde1="">
+           data-djc-id-ca1bde1="">
           
   
               
@@ -5561,7 +5561,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bde2="">
+           data-djc-id-ca1bde2="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -5602,7 +5602,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bde3="">
+           data-djc-id-ca1bde3="">
           
   
               
@@ -5629,7 +5629,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bde4="">
+           data-djc-id-ca1bde4="">
           
   
               
@@ -5669,7 +5669,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bdc7="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bdc7="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -5686,7 +5686,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="16" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bdc8="">
+           data-djc-id-ca1bdc8="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -5701,7 +5701,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bde5="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bde5="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -5709,7 +5709,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bde7="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bde7="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -5737,14 +5737,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bde6="">
+           data-djc-id-ca1bde6="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bde8="">
+           data-djc-id-ca1bde8="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -5786,7 +5786,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bde9="">
+           data-djc-id-ca1bde9="">
           
   
               
@@ -5806,7 +5806,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdea="">
+           data-djc-id-ca1bdea="">
           
   
               
@@ -5828,7 +5828,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdeb="">
+           data-djc-id-ca1bdeb="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -5847,7 +5847,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bdec="">
+           data-djc-id-ca1bdec="">
           
   
               
@@ -5897,7 +5897,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bded="">
+           data-djc-id-ca1bded="">
           
   
               
@@ -5919,7 +5919,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdee="">
+           data-djc-id-ca1bdee="">
           
   
               
@@ -5944,7 +5944,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdef="">
+           data-djc-id-ca1bdef="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -5985,7 +5985,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdf0="">
+           data-djc-id-ca1bdf0="">
           
   
               
@@ -6012,7 +6012,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdf1="">
+           data-djc-id-ca1bdf1="">
           
   
               
@@ -6052,7 +6052,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1bdc9="">
+          <span class="flex h-9 items-center" data-djc-id-ca1bdc9="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -6069,7 +6069,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="17" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1bdca="">
+           data-djc-id-ca1bdca="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -6084,7 +6084,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bdf2="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bdf2="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -6092,7 +6092,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1bdf4="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1bdf4="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -6120,14 +6120,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1bdf3="">
+           data-djc-id-ca1bdf3="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1bdf5="">
+           data-djc-id-ca1bdf5="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -6169,7 +6169,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdf6="">
+           data-djc-id-ca1bdf6="">
           
   
               
@@ -6189,7 +6189,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdf7="">
+           data-djc-id-ca1bdf7="">
           
   
               
@@ -6211,7 +6211,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdf8="">
+           data-djc-id-ca1bdf8="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -6230,7 +6230,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1bdf9="">
+           data-djc-id-ca1bdf9="">
           
   
               
@@ -6280,7 +6280,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdfa="">
+           data-djc-id-ca1bdfa="">
           
   
               
@@ -6302,7 +6302,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdfb="">
+           data-djc-id-ca1bdfb="">
           
   
               
@@ -6327,7 +6327,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1bdfc="">
+           data-djc-id-ca1bdfc="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -6368,7 +6368,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdfd="">
+           data-djc-id-ca1bdfd="">
           
   
               
@@ -6395,7 +6395,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1bdfe="">
+           data-djc-id-ca1bdfe="">
           
   
               
@@ -6445,14 +6445,14 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: true}"
               
-           data-djc-id-a1bd1a="">
+           data-djc-id-ca1bd1a="">
               <div
                   @click="togglePanel"
                   class="flex gap-x-2 prose pb-2 cursor-pointer"
               >
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1bdff="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1bdff="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -6460,7 +6460,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1be01="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1be01="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -6487,12 +6487,12 @@
                   
                           
                               
-          <div class="flex flex-col" data-djc-id-a1be00="">
+          <div class="flex flex-col" data-djc-id-ca1be00="">
               
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1be02="">
+          <span class="flex h-9 items-center" data-djc-id-ca1be02="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -6509,7 +6509,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="25" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1be03="">
+           data-djc-id-ca1be03="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -6524,7 +6524,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1be06="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1be06="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -6532,7 +6532,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1be08="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1be08="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -6560,14 +6560,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1be07="">
+           data-djc-id-ca1be07="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1be09="">
+           data-djc-id-ca1be09="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -6609,7 +6609,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be0a="">
+           data-djc-id-ca1be0a="">
           
   
               
@@ -6629,7 +6629,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be0b="">
+           data-djc-id-ca1be0b="">
           
   
               
@@ -6651,7 +6651,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1be0c="">
+           data-djc-id-ca1be0c="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -6670,7 +6670,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1be0d="">
+           data-djc-id-ca1be0d="">
           
   
               
@@ -6720,7 +6720,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be0e="">
+           data-djc-id-ca1be0e="">
           
   
               
@@ -6742,7 +6742,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be0f="">
+           data-djc-id-ca1be0f="">
           
   
               
@@ -6767,7 +6767,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1be10="">
+           data-djc-id-ca1be10="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -6808,7 +6808,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be11="">
+           data-djc-id-ca1be11="">
           
   
               
@@ -6835,7 +6835,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be12="">
+           data-djc-id-ca1be12="">
           
   
               
@@ -6875,7 +6875,7 @@
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1be04="">
+          <span class="flex h-9 items-center" data-djc-id-ca1be04="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -6892,7 +6892,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="26" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1be05="">
+           data-djc-id-ca1be05="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -6907,7 +6907,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1be13="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1be13="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -6915,7 +6915,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1be15="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1be15="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -6943,14 +6943,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1be14="">
+           data-djc-id-ca1be14="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1be16="">
+           data-djc-id-ca1be16="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -6992,7 +6992,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be17="">
+           data-djc-id-ca1be17="">
           
   
               
@@ -7012,7 +7012,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be18="">
+           data-djc-id-ca1be18="">
           
   
               
@@ -7034,7 +7034,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1be19="">
+           data-djc-id-ca1be19="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -7053,7 +7053,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1be1a="">
+           data-djc-id-ca1be1a="">
           
   
               
@@ -7103,7 +7103,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be1b="">
+           data-djc-id-ca1be1b="">
           
   
               
@@ -7125,7 +7125,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be1c="">
+           data-djc-id-ca1be1c="">
           
   
               
@@ -7150,7 +7150,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1be1d="">
+           data-djc-id-ca1be1d="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -7191,7 +7191,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be1e="">
+           data-djc-id-ca1be1e="">
           
   
               
@@ -7218,7 +7218,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be1f="">
+           data-djc-id-ca1be1f="">
           
   
               
@@ -7268,14 +7268,14 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: true}"
               
-           data-djc-id-a1bd1b="">
+           data-djc-id-ca1bd1b="">
               <div
                   @click="togglePanel"
                   class="flex gap-x-2 prose pb-2 cursor-pointer"
               >
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1be20="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1be20="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -7283,7 +7283,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1be22="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1be22="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -7310,12 +7310,12 @@
                   
                           
                               
-          <div class="flex flex-col" data-djc-id-a1be21="">
+          <div class="flex flex-col" data-djc-id-ca1be21="">
               
                   <div class="flex gap-x-3">
                       <div>
                           
-          <span class="flex h-9 items-center" data-djc-id-a1be23="">
+          <span class="flex h-9 items-center" data-djc-id-ca1be23="">
               
               
                   <span class="flex h-9 items-center" aria-hidden="true">
@@ -7332,7 +7332,7 @@
               x-data="expansion_panel"
               data-init="{&quot;open&quot;: false}"
               data-panelid="27" class="border-b border-solid border-gray-300 pb-2 mb-3"
-           data-djc-id-a1be24="">
+           data-djc-id-ca1be24="">
               <div
                   @click="togglePanel"
                   class="flex align-center justify-between pb-2 cursor-pointer"
@@ -7347,7 +7347,7 @@
   
                   
                       
-          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-a1be25="">
+          <div :class="{ 'rotate-180': isOpen }" style="width: fit-content;" data-djc-id-ca1be25="">
               
               <span
                   class="group flex gap-x-3 rounded-md text-sm leading-6 font-semibold"
@@ -7355,7 +7355,7 @@
               
                   
           
-          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-a1be27="">
+          <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" class="h-6 w-6 shrink-0" style="width: 24px; height: 24px;" data-djc-id-ca1be27="">
               
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
               
@@ -7383,14 +7383,14 @@
               x-props="{
                   initAttachments: '[]'
               }"
-           data-djc-id-a1be26="">
+           data-djc-id-ca1be26="">
               
           <form
                action="/update" 
               method="post"
               x-data="form"
               
-           data-djc-id-a1be28="">
+           data-djc-id-ca1be28="">
               <div
                   @click="updateFormModel"
                   @change="updateFormModel"
@@ -7432,7 +7432,7 @@
               type="button"
               
               @click="addAttachment" class="bg-white text-gray-800 ring-gray-300 hover:bg-gray-100 focus-visible:outline-gray-600 transition ring-1 ring-inset inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be29="">
+           data-djc-id-ca1be29="">
           
   
               
@@ -7452,7 +7452,7 @@
               type="button"
               
               @click="onOutputSubmit({ reload: true })" class="bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be2a="">
+           data-djc-id-ca1be2a="">
           
   
               
@@ -7474,7 +7474,7 @@
                   ...{ attachments: attachments.value, onToggleAttachment: (index) =&gt; toggleAttachmentPreview(index), onSetAttachmentTags: (index, tags) =&gt; setAttachmentTags(index, tags), onUpdateAttachmentData: (index, data) =&gt; updateAttachmentData(index, data), onRemoveAttachment: (index) =&gt; removeAttachment(index) },
               }"
               class="pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1be2b="">
+           data-djc-id-ca1be2b="">
               <div>
                   
                       This output does not have any attachments, create one below:
@@ -7493,7 +7493,7 @@
           <a
               href="None"
               x-bind:href="attachment.url" x-text="attachment.text" target="_blank" class="hover:text-gray-600 !underline inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 no-underline" style="color: cornflowerblue;"
-           data-djc-id-a1be2c="">
+           data-djc-id-ca1be2c="">
           
   
               
@@ -7543,7 +7543,7 @@
               type="button"
               
               x-text="attachment.isPreview ? 'Edit' : 'Preview'" @click="() => $emit('toggleAttachment', index)" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be2d="">
+           data-djc-id-ca1be2d="">
           
   
               
@@ -7565,7 +7565,7 @@
               type="button"
               
               @click="() => $emit('removeAttachment', index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be2e="">
+           data-djc-id-ca1be2e="">
           
   
               
@@ -7590,7 +7590,7 @@
                   onChange: (tags) => $emit('setAttachmentTags', index, tags),
               }"
               class="pb-8 pt-3 flex flex-col gap-y-3 items-start"
-           data-djc-id-a1be2f="">
+           data-djc-id-ca1be2f="">
               <input x-ref="tagsInput" type="hidden" name="tags" value="" />
   
               
@@ -7631,7 +7631,7 @@
               type="button"
               
               @click="removeTag(index)" class="!py-1 bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600 inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be30="">
+           data-djc-id-ca1be30="">
           
   
               
@@ -7658,7 +7658,7 @@
               type="button"
               
               @click="addTag" class="!py-1 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 justify-center rounded-md shadow-sm"
-           data-djc-id-a1be31="">
+           data-djc-id-ca1be31="">
           
   
               
diff --git a/tests/__snapshots__/test_benchmark_djc_small.ambr b/tests/__snapshots__/test_benchmark_djc_small.ambr
index 728d8fb5d..e2df3350d 100644
--- a/tests/__snapshots__/test_benchmark_djc_small.ambr
+++ b/tests/__snapshots__/test_benchmark_djc_small.ambr
@@ -8,7 +8,7 @@
           <a
               href="https://example.com"
               class="py-2 px-4 bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600 transition inline-flex w-full text-sm font-semibold sm:mt-0 sm:w-auto focus-visible:outline-2 focus-visible:outline-offset-2 px-3 justify-center rounded-md shadow-sm no-underline"
-           data-djc-id-a1bc3e="">
+           data-djc-id-ca1bc3e="">
           
   
               Click me!
diff --git a/tests/test_attributes.py b/tests/test_attributes.py
index 889ca73c0..9015b70ca 100644
--- a/tests/test_attributes.py
+++ b/tests/test_attributes.py
@@ -155,7 +155,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div @click.stop="dispatch('click_event')" x-data="{hello: 'world'}" class="padding-top-8 added_class another-class" data-djc-id-a1bc3f data-id=123>
+            <div @click.stop="dispatch('click_event')" x-data="{hello: 'world'}" class="padding-top-8 added_class another-class" data-djc-id-ca1bc3f data-id=123>
                 content
             </div>
             """,  # noqa: E501
@@ -208,7 +208,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div @click.stop="dispatch('click_event')" class="added_class another-class padding-top-8" data-djc-id-a1bc3f data-id="123" x-data="{hello: 'world'}">
+            <div @click.stop="dispatch('click_event')" class="added_class another-class padding-top-8" data-djc-id-ca1bc3f data-id="123" x-data="{hello: 'world'}">
                 content
             </div>
             """,  # noqa: E501
@@ -236,7 +236,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div @click.stop="dispatch('click_event')" x-data="{hello: 'world'}" class="padding-top-8 added_class another-class" data-djc-id-a1bc3f data-id=123>
+            <div @click.stop="dispatch('click_event')" x-data="{hello: 'world'}" class="padding-top-8 added_class another-class" data-djc-id-ca1bc3f data-id=123>
                 content
             </div>
             """,  # noqa: E501
@@ -268,7 +268,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div @click.stop="dispatch('click_event')" class="added_class another-class padding-top-8" data-djc-id-a1bc3f data-id="123" x-data="{hello: 'world'}">
+            <div @click.stop="dispatch('click_event')" class="added_class another-class padding-top-8" data-djc-id-ca1bc3f data-id="123" x-data="{hello: 'world'}">
                 content
             </div>
             """,  # noqa: E501
@@ -295,7 +295,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div class="added_class another-class from_agg_key" data-djc-id-a1bc3f data-id="123" type="submit">
+            <div class="added_class another-class from_agg_key" data-djc-id-ca1bc3f data-id="123" type="submit">
                 content
             </div>
             """,  # noqa: E501
@@ -375,7 +375,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div class="added_class another-class override-me" data-djc-id-a1bc3f data-id=123>
+            <div class="added_class another-class override-me" data-djc-id-ca1bc3f data-id=123>
                 content
             </div>
             """,
@@ -404,7 +404,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div @click.stop="dispatch('click_event')" x-data="{hello: 'world'}" class="padding-top-8 added_class another-class" data-djc-id-a1bc3f data-id=123>
+            <div @click.stop="dispatch('click_event')" x-data="{hello: 'world'}" class="padding-top-8 added_class another-class" data-djc-id-ca1bc3f data-id=123>
                 content
             </div>
             """,  # noqa: E501
@@ -429,7 +429,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div class="added_class another-class" data-djc-id-a1bc3f data-id="123">
+            <div class="added_class another-class" data-djc-id-ca1bc3f data-id="123">
                 content
             </div>
             """,
@@ -457,7 +457,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 content
             </div>
             """,
@@ -485,7 +485,7 @@ def get_context_data(self, *args, attrs):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 content
             </div>
             """,
diff --git a/tests/test_component.py b/tests/test_component.py
index 4a763200c..ba2afa9ce 100644
--- a/tests/test_component.py
+++ b/tests/test_component.py
@@ -76,7 +76,7 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3e>test</strong>
+            Variable: <strong data-djc-id-ca1bc3e>test</strong>
             """,
         )
 
@@ -111,7 +111,7 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3e>test</strong>
+            Variable: <strong data-djc-id-ca1bc3e>test</strong>
             """,
         )
 
@@ -137,7 +137,7 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3e>test</strong>
+            Variable: <strong data-djc-id-ca1bc3e>test</strong>
             """,
         )
 
@@ -159,7 +159,7 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3e>test</strong>
+            Variable: <strong data-djc-id-ca1bc3e>test</strong>
             """,
         )
 
@@ -189,7 +189,7 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3e>test</strong>
+            Variable: <strong data-djc-id-ca1bc3e>test</strong>
             """,
         )
 
@@ -210,7 +210,7 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3f>test</strong>
+            Variable: <strong data-djc-id-ca1bc3f>test</strong>
             """,
         )
 
@@ -231,13 +231,13 @@ def get_template_name(self, context):
         assertHTMLEqual(
             SvgComponent.render(kwargs={"name": "svg1"}),
             """
-            <svg data-djc-id-a1bc3e>Dynamic1</svg>
+            <svg data-djc-id-ca1bc3e>Dynamic1</svg>
             """,
         )
         assertHTMLEqual(
             SvgComponent.render(kwargs={"name": "svg2"}),
             """
-            <svg data-djc-id-a1bc3f>Dynamic2</svg>
+            <svg data-djc-id-ca1bc3f>Dynamic2</svg>
             """,
         )
 
@@ -257,7 +257,7 @@ def get_template(self, context):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3e>test</strong>
+            Variable: <strong data-djc-id-ca1bc3e>test</strong>
             """,
         )
 
@@ -299,7 +299,7 @@ def get_template(self, context):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3e>test</strong> MY_SLOT
+            Variable: <strong data-djc-id-ca1bc3e>test</strong> MY_SLOT
             """,
         )
 
@@ -746,7 +746,7 @@ class SimpleComponent(Component):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc3e>
+            <custom-template data-djc-id-ca1bc3e>
                 <header>Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -768,7 +768,7 @@ class SimpleComponent(Component):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc3e>
+            <custom-template data-djc-id-ca1bc3e>
                 <header>Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -791,7 +791,7 @@ class SimpleComponent(Component):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc3e>
+            <custom-template data-djc-id-ca1bc3e>
                 <header>Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -843,7 +843,7 @@ def get(self, request):
         # """
         assertInHTML(
             """
-            <kbd data-djc-id-a1bc3e>
+            <kbd data-djc-id-ca1bc3e>
                 Rendered via GET request
             </kbd>
             """,
@@ -939,7 +939,7 @@ class SimpleComponent(Component):
             rendered,
             """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc3e lang="en">
+            <html data-djc-id-ca1bc3e lang="en">
             <body>
                 <main role="main">
                 <div class='container main-container'>
@@ -964,7 +964,7 @@ def get_context_data(self, **attrs):
         rendered = TestComponent.render()
         assertHTMLEqual(
             rendered,
-            "Variable: <strong data-djc-id-a1bc3e>a1bc3e</strong>",
+            "Variable: <strong data-djc-id-ca1bc3e>ca1bc3e</strong>",
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -980,7 +980,7 @@ def get_context_data(self, **attrs):
         rendered_resp = TestComponent.render_to_response()
         assertHTMLEqual(
             rendered_resp.content.decode("utf-8"),
-            "Variable: <strong data-djc-id-a1bc3e>a1bc3e</strong>",
+            "Variable: <strong data-djc-id-ca1bc3e>ca1bc3e</strong>",
         )
 
 
@@ -1036,7 +1036,7 @@ def on_render_before(self, context: Context, template: Template) -> None:
             from_on_before: :)
             ---
             Hello from nested
-            <div data-djc-id-a1bc3e data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc40>
                 Hello from simple
             </div>
             ---
@@ -1099,7 +1099,7 @@ def on_render_after(self, context: Context, template: Template, content: str) ->
             from_on_after:
             ---
             Hello from nested
-            <div data-djc-id-a1bc3e data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc40>
                 Hello from simple
             </div>
             """,
@@ -1113,7 +1113,7 @@ def on_render_after(self, context: Context, template: Template, content: str) ->
             from_on_after:
             ---
             Hello from nested
-            <div data-djc-id-a1bc3e data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc40>
                 Hello from simple
             </div>
             """,
@@ -1170,7 +1170,7 @@ def on_render_after(self, context: Context, template: Template, content: str) ->
             from_on_before:
             ---
             Hello from nested
-            <div data-djc-id-a1bc3e data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc40>
                 Hello from simple
             </div>
             """,
@@ -1185,7 +1185,7 @@ def on_render_after(self, context: Context, template: Template, content: str) ->
             from_on_before:
             ---
             Hello from nested
-            <div data-djc-id-a1bc3e data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc40>
                 Hello from simple
             </div>
             """,
diff --git a/tests/test_component_cache.py b/tests/test_component_cache.py
index e64b8787a..c46c2d7c4 100644
--- a/tests/test_component_cache.py
+++ b/tests/test_component_cache.py
@@ -46,8 +46,8 @@ def get_context_data(self, **kwargs: Any):
         # Check if the cache entry is set
         cache_key = component.cache.get_cache_key()
         assert cache_key == "components:cache:TestComponent_c9770f::"
-        assert component.cache.get_entry(cache_key) == "<!-- _RENDERED TestComponent_c9770f,a1bc3e,, -->Hello"
-        assert caches["default"].get(cache_key) == "<!-- _RENDERED TestComponent_c9770f,a1bc3e,, -->Hello"
+        assert component.cache.get_entry(cache_key) == "<!-- _RENDERED TestComponent_c9770f,ca1bc3e,, -->Hello"
+        assert caches["default"].get(cache_key) == "<!-- _RENDERED TestComponent_c9770f,ca1bc3e,, -->Hello"
 
         # Second render
         did_call_get = False
@@ -104,7 +104,7 @@ class Cache:
 
         cache_instance = component.cache
         cache_key = cache_instance.get_cache_key()
-        assert cache_instance.get_entry(cache_key) == "<!-- _RENDERED TestComponent_42aca9,a1bc3e,, -->Hello"
+        assert cache_instance.get_entry(cache_key) == "<!-- _RENDERED TestComponent_42aca9,ca1bc3e,, -->Hello"
 
         # Wait for TTL to expire
         time.sleep(0.2)
@@ -139,7 +139,7 @@ class Cache:
         assert component.cache.get_cache() is caches["custom"]
         assert (
             component.cache.get_entry("components:cache:TestComponent_90ef7a::")
-            == "<!-- _RENDERED TestComponent_90ef7a,a1bc3e,, -->Hello"
+            == "<!-- _RENDERED TestComponent_90ef7a,ca1bc3e,, -->Hello"
         )  # noqa: E501
 
     def test_cache_by_input(self):
@@ -166,11 +166,11 @@ def get_context_data(self, input, **kwargs: Any):
         assert len(cache._cache) == 2
         assert (
             component.cache.get_entry("components:cache:TestComponent_648b95::input-world")
-            == "<!-- _RENDERED TestComponent_648b95,a1bc3e,, -->Hello world"
+            == "<!-- _RENDERED TestComponent_648b95,ca1bc3e,, -->Hello world"
         )  # noqa: E501
         assert (
             component.cache.get_entry("components:cache:TestComponent_648b95::input-cake")
-            == "<!-- _RENDERED TestComponent_648b95,a1bc3f,, -->Hello cake"
+            == "<!-- _RENDERED TestComponent_648b95,ca1bc3f,, -->Hello cake"
         )  # noqa: E501
 
     def test_cache_input_hashing(self):
diff --git a/tests/test_component_media.py b/tests/test_component_media.py
index f002ff2b2..32e0028bf 100644
--- a/tests/test_component_media.py
+++ b/tests/test_component_media.py
@@ -39,7 +39,7 @@ class TestComponent(Component):
         rendered = TestComponent.render()
 
         assertInHTML(
-            '<div class="html-css-only" data-djc-id-a1bc3e>Content</div>',
+            '<div class="html-css-only" data-djc-id-ca1bc3e>Content</div>',
             rendered,
         )
         assertInHTML(
@@ -91,7 +91,7 @@ class TestComponent(AppLvlCompComponent):
 
         assertInHTML(
             """
-            <form data-djc-id-a1bc41 method="post">
+            <form data-djc-id-ca1bc41 method="post">
                 <input name="variable" type="text" value="test"/>
                 <input type="submit"/>
             </form>
@@ -153,7 +153,7 @@ def get_context_data(self, variable):
         ).render(Context())
         rendered = render_dependencies(rendered_raw)
 
-        assert 'Variable: <strong data-djc-id-a1bc41="">test</strong>' in rendered
+        assert 'Variable: <strong data-djc-id-ca1bc41="">test</strong>' in rendered
         assertInHTML(
             "<style>/* Used in `MainMediaTest` tests in `test_component_media.py` */\n.html-css-only {\n    color: blue;\n}</style>",
             rendered,
@@ -221,7 +221,7 @@ def get_template(self, context):
         context = Context({"variable": "Dynamic Content"})
         assertHTMLEqual(
             comp.render(context),
-            '<div class="variable-html" data-djc-id-a1bc3e>Dynamic Content</div>',
+            '<div class="variable-html" data-djc-id-ca1bc3e>Dynamic Content</div>',
         )
 
     def test_html_variable_filtered(self):
@@ -241,8 +241,8 @@ def get_context_data(self, var1=None, var2=None):
         assertHTMLEqual(
             rendered,
             """
-            Var1: <strong data-djc-id-a1bc3e>test1</strong>
-            Var2 (uppercased): <strong data-djc-id-a1bc3e>TEST2</strong>
+            Var1: <strong data-djc-id-ca1bc3e>test1</strong>
+            Var2 (uppercased): <strong data-djc-id-ca1bc3e>TEST2</strong>
             """,
         )
 
@@ -931,7 +931,7 @@ def test_component_with_relative_media_paths(self):
 
         assertInHTML(
             """
-            <form data-djc-id-a1bc41 method="post">
+            <form data-djc-id-ca1bc41 method="post">
                 <input type="text" name="variable" value="test">
                 <input type="submit">
             </form>
diff --git a/tests/test_context.py b/tests/test_context.py
index ca10f7df7..4cde8d0f5 100644
--- a/tests/test_context.py
+++ b/tests/test_context.py
@@ -105,8 +105,8 @@ def test_nested_component_context_shadows_parent_with_unfilled_slots_and_compone
         template = Template(template_str)
         rendered = template.render(Context())
 
-        assertInHTML("<h1 data-djc-id-a1bc43>Shadowing variable = override</h1>", rendered)
-        assertInHTML("<h1 data-djc-id-a1bc44>Shadowing variable = slot_default_override</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc43>Shadowing variable = override</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc44>Shadowing variable = slot_default_override</h1>", rendered)
         assert "Shadowing variable = NOT SHADOWED" not in rendered
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -123,9 +123,9 @@ def test_nested_component_instances_have_unique_context_with_unfilled_slots_and_
         template = Template(template_str)
         rendered = template.render(Context())
 
-        assertInHTML("<h1 data-djc-id-a1bc43>Uniquely named variable = unique_val</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc43>Uniquely named variable = unique_val</h1>", rendered)
         assertInHTML(
-            "<h1 data-djc-id-a1bc44>Uniquely named variable = slot_default_unique</h1>",
+            "<h1 data-djc-id-ca1bc44>Uniquely named variable = slot_default_unique</h1>",
             rendered,
         )
 
@@ -146,8 +146,8 @@ def test_nested_component_context_shadows_parent_with_filled_slots(self, compone
         template = Template(template_str)
         rendered = template.render(Context())
 
-        assertInHTML("<h1 data-djc-id-a1bc45>Shadowing variable = override</h1>", rendered)
-        assertInHTML("<h1 data-djc-id-a1bc46>Shadowing variable = shadow_from_slot</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc45>Shadowing variable = override</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc46>Shadowing variable = shadow_from_slot</h1>", rendered)
         assert "Shadowing variable = NOT SHADOWED" not in rendered
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -167,8 +167,8 @@ def test_nested_component_instances_have_unique_context_with_filled_slots(self,
         template = Template(template_str)
         rendered = template.render(Context())
 
-        assertInHTML("<h1 data-djc-id-a1bc45>Uniquely named variable = unique_val</h1>", rendered)
-        assertInHTML("<h1 data-djc-id-a1bc46>Uniquely named variable = unique_from_slot</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc45>Uniquely named variable = unique_val</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc46>Uniquely named variable = unique_from_slot</h1>", rendered)
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_nested_component_context_shadows_outer_context_with_unfilled_slots_and_component_tag(
@@ -184,8 +184,8 @@ def test_nested_component_context_shadows_outer_context_with_unfilled_slots_and_
         template = Template(template_str)
         rendered = template.render(Context({"shadowing_variable": "NOT SHADOWED"}))
 
-        assertInHTML("<h1 data-djc-id-a1bc43>Shadowing variable = override</h1>", rendered)
-        assertInHTML("<h1 data-djc-id-a1bc44>Shadowing variable = slot_default_override</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc43>Shadowing variable = override</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc44>Shadowing variable = slot_default_override</h1>", rendered)
         assert "Shadowing variable = NOT SHADOWED" not in rendered
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -207,8 +207,8 @@ def test_nested_component_context_shadows_outer_context_with_filled_slots(
         template = Template(template_str)
         rendered = template.render(Context({"shadowing_variable": "NOT SHADOWED"}))
 
-        assertInHTML("<h1 data-djc-id-a1bc45>Shadowing variable = override</h1>", rendered)
-        assertInHTML("<h1 data-djc-id-a1bc46>Shadowing variable = shadow_from_slot</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc45>Shadowing variable = override</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc46>Shadowing variable = shadow_from_slot</h1>", rendered)
         assert "Shadowing variable = NOT SHADOWED" not in rendered
 
 
@@ -251,15 +251,15 @@ def test_parent_args_can_be_drawn_from_context(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 <h1>Parent content</h1>
-                <h1 data-djc-id-a1bc43>Shadowing variable = passed_in</h1>
-                <h1 data-djc-id-a1bc43>Uniquely named variable = unique_val</h1>
+                <h1 data-djc-id-ca1bc43>Shadowing variable = passed_in</h1>
+                <h1 data-djc-id-ca1bc43>Uniquely named variable = unique_val</h1>
             </div>
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 <h2>Slot content</h2>
-                <h1 data-djc-id-a1bc44>Shadowing variable = slot_default_override</h1>
-                <h1 data-djc-id-a1bc44>Uniquely named variable = passed_in</h1>
+                <h1 data-djc-id-ca1bc44>Shadowing variable = slot_default_override</h1>
+                <h1 data-djc-id-ca1bc44>Uniquely named variable = passed_in</h1>
             </div>
             """,
         )
@@ -277,8 +277,8 @@ def test_parent_args_available_outside_slots(self, components_settings):
         template = Template(template_str)
         rendered = template.render(Context())
 
-        assertInHTML("<h1 data-djc-id-a1bc43>Shadowing variable = passed_in</h1>", rendered)
-        assertInHTML("<h1 data-djc-id-a1bc44>Uniquely named variable = passed_in</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc43>Shadowing variable = passed_in</h1>", rendered)
+        assertInHTML("<h1 data-djc-id-ca1bc44>Uniquely named variable = passed_in</h1>", rendered)
         assert "Shadowing variable = NOT SHADOWED" not in rendered
 
     @djc_test(
@@ -311,14 +311,14 @@ def test_parent_args_available_in_slots(self, components_settings, first_val, se
         assertHTMLEqual(
             rendered,
             f"""
-            <div data-djc-id-a1bc41>
+            <div data-djc-id-ca1bc41>
                 <h1>Parent content</h1>
-                <h1 data-djc-id-a1bc45>Shadowing variable = {first_val}</h1>
-                <h1 data-djc-id-a1bc45>Uniquely named variable = unique_val</h1>
+                <h1 data-djc-id-ca1bc45>Shadowing variable = {first_val}</h1>
+                <h1 data-djc-id-ca1bc45>Uniquely named variable = unique_val</h1>
             </div>
-            <div data-djc-id-a1bc41>
-                <h1 data-djc-id-a1bc46>Shadowing variable = value_from_slot</h1>
-                <h1 data-djc-id-a1bc46>Uniquely named variable = {second_val}</h1>
+            <div data-djc-id-ca1bc41>
+                <h1 data-djc-id-ca1bc46>Shadowing variable = value_from_slot</h1>
+                <h1 data-djc-id-ca1bc46>Uniquely named variable = {second_val}</h1>
             </div>
             """,
         )
@@ -337,7 +337,7 @@ def test_one_context_call_with_simple_component(self, components_settings):
         rendered = template.render(Context()).strip().replace("\n", "")
         assertHTMLEqual(
             rendered,
-            '<p class="incrementer" data-djc-id-a1bc3f>value=1;calls=1</p>',
+            '<p class="incrementer" data-djc-id-ca1bc3f>value=1;calls=1</p>',
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -353,7 +353,7 @@ def test_one_context_call_with_simple_component_and_arg(self, components_setting
         assertHTMLEqual(
             rendered,
             """
-            <p class="incrementer" data-djc-id-a1bc3f>value=3;calls=1</p>
+            <p class="incrementer" data-djc-id-ca1bc3f>value=3;calls=1</p>
             """,
         )
 
@@ -367,7 +367,7 @@ def test_one_context_call_with_component(self, components_settings):
         template = Template(template_str)
         rendered = template.render(Context()).strip()
 
-        assertHTMLEqual(rendered, '<p class="incrementer" data-djc-id-a1bc3f>value=1;calls=1</p>')
+        assertHTMLEqual(rendered, '<p class="incrementer" data-djc-id-ca1bc3f>value=1;calls=1</p>')
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_one_context_call_with_component_and_arg(self, components_settings):
@@ -379,7 +379,7 @@ def test_one_context_call_with_component_and_arg(self, components_settings):
         template = Template(template_str)
         rendered = template.render(Context()).strip()
 
-        assertHTMLEqual(rendered, '<p class="incrementer" data-djc-id-a1bc3f>value=4;calls=1</p>')
+        assertHTMLEqual(rendered, '<p class="incrementer" data-djc-id-ca1bc3f>value=4;calls=1</p>')
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_one_context_call_with_slot(self, components_settings):
@@ -398,8 +398,8 @@ def test_one_context_call_with_slot(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <p class="incrementer" data-djc-id-a1bc40>value=1;calls=1</p>
-            <p data-djc-id-a1bc40>slot</p>
+            <p class="incrementer" data-djc-id-ca1bc40>value=1;calls=1</p>
+            <p data-djc-id-ca1bc40>slot</p>
             """,
             rendered,
         )
@@ -421,8 +421,8 @@ def test_one_context_call_with_slot_and_arg(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <p class="incrementer" data-djc-id-a1bc40>value=4;calls=1</p>
-            <p data-djc-id-a1bc40>slot</p>
+            <p class="incrementer" data-djc-id-ca1bc40>value=4;calls=1</p>
+            <p data-djc-id-ca1bc40>slot</p>
             """,
             rendered,
         )
@@ -451,7 +451,7 @@ def test_simple_component_can_use_outer_context(self, components_settings, expec
         assertHTMLEqual(
             rendered,
             f"""
-            Variable: <strong data-djc-id-a1bc3f> {expected_value} </strong>
+            Variable: <strong data-djc-id-ca1bc3f> {expected_value} </strong>
             """,
         )
 
@@ -981,7 +981,7 @@ def test_is_filled_vars(self, components_settings):
         rendered = Template(template).render(Context())
 
         expected = """
-            <div class="frontmatter-component" data-djc-id-a1bc42>
+            <div class="frontmatter-component" data-djc-id-ca1bc42>
                 title: True
                 my_title: False
                 my_title_1: False
@@ -1003,7 +1003,7 @@ def test_is_filled_vars_default(self, components_settings):
         """
         rendered = Template(template).render(Context())
         expected = """
-            <div class="frontmatter-component" data-djc-id-a1bc3f>
+            <div class="frontmatter-component" data-djc-id-ca1bc3f>
                 bla bla
                 title: False
                 my_title: False
@@ -1023,7 +1023,7 @@ def test_simple_component_with_conditional_slot(self, components_settings):
             {% component "conditional_slots" %}{% endcomponent %}
         """
         expected = """
-            <div class="frontmatter-component" data-djc-id-a1bc3f>
+            <div class="frontmatter-component" data-djc-id-ca1bc3f>
             <div class="title">
             Title
             </div>
@@ -1043,7 +1043,7 @@ def test_component_with_filled_conditional_slot(self, components_settings):
             {% endcomponent %}
         """
         expected = """
-            <div class="frontmatter-component" data-djc-id-a1bc40>
+            <div class="frontmatter-component" data-djc-id-ca1bc40>
                 <div class="title">
                     Title
                 </div>
@@ -1069,7 +1069,7 @@ def test_elif_of_complex_conditional_slots(self, components_settings):
             {% endcomponent %}
         """
         expected = """
-           <div class="frontmatter-component" data-djc-id-a1bc40>
+           <div class="frontmatter-component" data-djc-id-ca1bc40>
              <div class="title">
                 Title
              </div>
@@ -1094,7 +1094,7 @@ def test_else_of_complex_conditional_slots(self, components_settings):
            {% endcomponent %}
         """
         expected = """
-           <div class="frontmatter-component" data-djc-id-a1bc3f>
+           <div class="frontmatter-component" data-djc-id-ca1bc3f>
              <div class="title">
              Title
              </div>
@@ -1128,7 +1128,7 @@ class ComponentWithNegatedConditionalSlot(Component):
             {% endcomponent %}
         """
         expected = """
-            <div class="frontmatter-component" data-djc-id-a1bc3f>
+            <div class="frontmatter-component" data-djc-id-ca1bc3f>
                 <div class="title">
                 Title
                 </div>
diff --git a/tests/test_dependencies.py b/tests/test_dependencies.py
index 048b28f2b..fc9a390a9 100644
--- a/tests/test_dependencies.py
+++ b/tests/test_dependencies.py
@@ -267,7 +267,7 @@ def test_does_not_insert_styles_and_script_to_default_places_if_overriden(self):
         assertInHTML(
             """
             <body>
-                Variable: <strong data-djc-id-a1bc41>foo</strong>
+                Variable: <strong data-djc-id-ca1bc41>foo</strong>
 
                 <style>.xyz { color: red; }</style>
                 <link href="style.css" media="all" rel="stylesheet">
@@ -423,7 +423,7 @@ def test_does_not_modify_html_when_component_used_but_nowhere_to_insert(self):
                         <td class="whitespace-nowrap w-fit text-center px-4 w-px"
                             aria-colindex="1">
                             1
-                            Variable: <strong data-djc-id-a1bc3f>hi</strong>
+                            Variable: <strong data-djc-id-ca1bc3f>hi</strong>
                         </td>
                     </tr>
                 </tbody>
@@ -511,7 +511,7 @@ def assert_dependencies(content: str):
         )
 
         assert_dependencies(rendered1)
-        assert rendered1.count('Variable: <strong data-djc-id-a1bc42="" data-djc-id-a1bc41="">value</strong>') == 1
+        assert rendered1.count('Variable: <strong data-djc-id-ca1bc42="" data-djc-id-ca1bc41="">value</strong>') == 1
 
         rendered2 = create_and_process_template_response(
             template,
@@ -519,7 +519,7 @@ def assert_dependencies(content: str):
         )
 
         assert_dependencies(rendered2)
-        assert rendered2.count('Variable: <strong data-djc-id-a1bc44="" data-djc-id-a1bc43="">value</strong>') == 1
+        assert rendered2.count('Variable: <strong data-djc-id-ca1bc44="" data-djc-id-ca1bc43="">value</strong>') == 1
 
         rendered3 = create_and_process_template_response(
             template,
@@ -527,4 +527,4 @@ def assert_dependencies(content: str):
         )
 
         assert_dependencies(rendered3)
-        assert rendered3.count('Variable: <strong data-djc-id-a1bc46="" data-djc-id-a1bc45="">value</strong>') == 1
+        assert rendered3.count('Variable: <strong data-djc-id-ca1bc46="" data-djc-id-ca1bc45="">value</strong>') == 1
diff --git a/tests/test_dependency_manager.py b/tests/test_dependency_manager.py
index 57c307c5c..7b293f3ff 100644
--- a/tests/test_dependency_manager.py
+++ b/tests/test_dependency_manager.py
@@ -218,11 +218,11 @@ async def test_calls_component_successfully(self):
             const manager = Components.createComponentsManager();
 
             const compName = 'my_comp';
-            const compId = '12345';
+            const compId = 'c12345';
             const inputHash = 'input-abc';
 
             // Pretend that this HTML belongs to our component
-            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-12345> abc </div>');
+            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-c12345> abc </div>');
 
             let captured = null;
             manager.registerComponent(compName, (data, ctx) => {
@@ -253,8 +253,8 @@ async def test_calls_component_successfully(self):
                 "hello": "world",
             },
             "ctx": {
-                "els": ['<div data-djc-id-12345=""> abc </div>'],
-                "id": "12345",
+                "els": ['<div data-djc-id-c12345=""> abc </div>'],
+                "id": "c12345",
                 "name": "my_comp",
             },
         }
@@ -269,11 +269,11 @@ async def test_calls_component_successfully_async(self):
             const manager = Components.createComponentsManager();
 
             const compName = 'my_comp';
-            const compId = '12345';
+            const compId = 'c12345';
             const inputHash = 'input-abc';
 
             // Pretend that this HTML belongs to our component
-            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-12345> abc </div>');
+            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-c12345> abc </div>');
 
             manager.registerComponent(compName, (data, ctx) => {
                 return Promise.resolve(123);
@@ -309,11 +309,11 @@ async def test_error_in_component_call_do_not_propagate_sync(self):
             const manager = Components.createComponentsManager();
 
             const compName = 'my_comp';
-            const compId = '12345';
+            const compId = 'c12345';
             const inputHash = 'input-abc';
 
             // Pretend that this HTML belongs to our component
-            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-12345> abc </div>');
+            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-c12345> abc </div>');
 
             manager.registerComponent(compName, (data, ctx) => {
                 throw Error('Oops!');
@@ -343,11 +343,11 @@ async def test_error_in_component_call_do_not_propagate_async(self):
             const manager = Components.createComponentsManager();
 
             const compName = 'my_comp';
-            const compId = '12345';
+            const compId = 'c12345';
             const inputHash = 'input-abc';
 
             // Pretend that this HTML belongs to our component
-            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-12345> abc </div>');
+            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-c12345> abc </div>');
 
             manager.registerComponent(compName, async (data, ctx) => {
                 throw Error('Oops!');
@@ -410,10 +410,10 @@ async def test_raises_if_input_hash_not_registered(self):
             const manager = Components.createComponentsManager();
 
             const compName = 'my_comp';
-            const compId = '12345';
+            const compId = 'c12345';
             const inputHash = 'input-abc';
 
-            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-12345> abc </div>');
+            document.body.insertAdjacentHTML('beforeend', '<div data-djc-id-c12345> abc </div>');
 
             manager.registerComponent(compName, (data, ctx) => {
                 return Promise.resolve(123);
diff --git a/tests/test_dependency_rendering.py b/tests/test_dependency_rendering.py
index 7ce657ba0..219bf5e5d 100644
--- a/tests/test_dependency_rendering.py
+++ b/tests/test_dependency_rendering.py
@@ -512,7 +512,7 @@ def test_adds_component_id_html_attr_single(self):
         template = Template(template_str)
         rendered = create_and_process_template_response(template)
 
-        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-a1bc3f>foo</strong>")
+        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-ca1bc3f>foo</strong>")
 
     def test_adds_component_id_html_attr_single_multiroot(self):
         class SimpleMultiroot(SimpleComponent):
@@ -534,9 +534,9 @@ class SimpleMultiroot(SimpleComponent):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3f>foo</strong>
-            Variable2: <div data-djc-id-a1bc3f>foo</div>
-            Variable3: <span data-djc-id-a1bc3f>foo</span>
+            Variable: <strong data-djc-id-ca1bc3f>foo</strong>
+            Variable2: <div data-djc-id-ca1bc3f>foo</div>
+            Variable3: <span data-djc-id-ca1bc3f>foo</span>
             """,
         )
 
@@ -570,10 +570,10 @@ class SimpleOuter(SimpleComponent):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc41>foo</strong>
-            Variable2: <div data-djc-id-a1bc3f data-djc-id-a1bc41>foo</div>
-            Variable3: <span data-djc-id-a1bc3f data-djc-id-a1bc41>foo</span>
-            <div data-djc-id-a1bc3f>Another</div>
+            Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc41>foo</strong>
+            Variable2: <div data-djc-id-ca1bc3f data-djc-id-ca1bc41>foo</div>
+            Variable3: <span data-djc-id-ca1bc3f data-djc-id-ca1bc41>foo</span>
+            <div data-djc-id-ca1bc3f>Another</div>
             """,
         )
 
@@ -613,19 +613,19 @@ class SimpleOuter(SimpleComponent):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc41>foo</strong>
-            Variable2: <div data-djc-id-a1bc3f data-djc-id-a1bc41>foo</div>
-            Variable3: <span data-djc-id-a1bc3f data-djc-id-a1bc41>foo</span>
-            <div data-djc-id-a1bc3f>Another</div>
-
-            Variable: <strong data-djc-id-a1bc42 data-djc-id-a1bc43>foo</strong>
-            Variable2: <div data-djc-id-a1bc42 data-djc-id-a1bc43>foo</div>
-            Variable3: <span data-djc-id-a1bc42 data-djc-id-a1bc43>foo</span>
-            <div data-djc-id-a1bc42>Another</div>
-
-            Variable: <strong data-djc-id-a1bc44 data-djc-id-a1bc45>foo</strong>
-            Variable2: <div data-djc-id-a1bc44 data-djc-id-a1bc45>foo</div>
-            Variable3: <span data-djc-id-a1bc44 data-djc-id-a1bc45>foo</span>
-            <div data-djc-id-a1bc44>Another</div>
+            Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc41>foo</strong>
+            Variable2: <div data-djc-id-ca1bc3f data-djc-id-ca1bc41>foo</div>
+            Variable3: <span data-djc-id-ca1bc3f data-djc-id-ca1bc41>foo</span>
+            <div data-djc-id-ca1bc3f>Another</div>
+
+            Variable: <strong data-djc-id-ca1bc42 data-djc-id-ca1bc43>foo</strong>
+            Variable2: <div data-djc-id-ca1bc42 data-djc-id-ca1bc43>foo</div>
+            Variable3: <span data-djc-id-ca1bc42 data-djc-id-ca1bc43>foo</span>
+            <div data-djc-id-ca1bc42>Another</div>
+
+            Variable: <strong data-djc-id-ca1bc44 data-djc-id-ca1bc45>foo</strong>
+            Variable2: <div data-djc-id-ca1bc44 data-djc-id-ca1bc45>foo</div>
+            Variable3: <span data-djc-id-ca1bc44 data-djc-id-ca1bc45>foo</span>
+            <div data-djc-id-ca1bc44>Another</div>
             """,
         )
diff --git a/tests/test_dependency_rendering_e2e.py b/tests/test_dependency_rendering_e2e.py
index 6cf19be20..f53ceb72e 100644
--- a/tests/test_dependency_rendering_e2e.py
+++ b/tests/test_dependency_rendering_e2e.py
@@ -49,7 +49,7 @@ async def test_single_component_dependencies(self):
 
         # Check that the actual HTML content was loaded
         assert re.compile(
-            r'Variable: <strong class="inner" data-djc-id-\w{6}="">foo</strong>'
+            r'Variable: <strong class="inner" data-djc-id-\w{7}="">foo</strong>'
         ).search(data["bodyHTML"]) is not None
         assertInHTML('<div class="my-style"> 123 </div>', data["bodyHTML"], count=1)
         assertInHTML('<div class="my-style2"> xyz </div>', data["bodyHTML"], count=1)
@@ -113,25 +113,25 @@ async def test_multiple_component_dependencies(self):
 
         # Check that the actual HTML content was loaded
         assert re.compile(
-            # <div class="outer" data-djc-id-10uLMD>
+            # <div class="outer" data-djc-id-c10uLMD>
             #     Variable:
-            #     <strong class="inner" data-djc-id-DZEnUC>
+            #     <strong class="inner" data-djc-id-cDZEnUC>
             #         variable
             #     </strong>
             #     XYZ:
-            #     <strong class="other" data-djc-id-IYirHK>
+            #     <strong class="other" data-djc-id-cIYirHK>
             #         variable_inner
             #     </strong>
             # </div>
             # <div class="my-style">123</div>
             # <div class="my-style2">xyz</div>
-            r'<div class="outer" data-djc-id-\w{6}="">\s*'
+            r'<div class="outer" data-djc-id-\w{7}="">\s*'
             r"Variable:\s*"
-            r'<strong class="inner" data-djc-id-\w{6}="">\s*'
+            r'<strong class="inner" data-djc-id-\w{7}="">\s*'
             r"variable\s*"
             r"<\/strong>\s*"
             r"XYZ:\s*"
-            r'<strong class="other" data-djc-id-\w{6}="">\s*'
+            r'<strong class="other" data-djc-id-\w{7}="">\s*'
             r"variable_inner\s*"
             r"<\/strong>\s*"
             r"<\/div>\s*"
@@ -204,26 +204,26 @@ async def test_renders_css_nojs_env(self):
 
         # Check that the actual HTML content was loaded
         #
-        # <div class="outer" data-djc-id-10uLMD>
+        # <div class="outer" data-djc-id-c10uLMD>
         #     Variable:
-        #     <strong class="inner" data-djc-id-DZEnUC>
+        #     <strong class="inner" data-djc-id-cDZEnUC>
         #         variable
         #     </strong>
         #     XYZ:
-        #     <strong data-djc-id-IYirHK class="other">
+        #     <strong data-djc-id-cIYirHK class="other">
         #         variable_inner
         #     </strong>
         # </div>
         # <div class="my-style">123</div>
         # <div class="my-style2">xyz</div>
         assert re.compile(
-            r'<div class="outer" data-djc-id-\w{6}="">\s*'
+            r'<div class="outer" data-djc-id-\w{7}="">\s*'
             r"Variable:\s*"
-            r'<strong class="inner" data-djc-id-\w{6}="">\s*'
+            r'<strong class="inner" data-djc-id-\w{7}="">\s*'
             r"variable\s*"
             r"<\/strong>\s*"
             r"XYZ:\s*"
-            r'<strong class="other" data-djc-id-\w{6}="">\s*'
+            r'<strong class="other" data-djc-id-\w{7}="">\s*'
             r"variable_inner\s*"
             r"<\/strong>\s*"
             r"<\/div>\s*"
@@ -378,7 +378,7 @@ async def test_fragment_comp(self):
 
         assert data["targetHtml"] is None
         assert re.compile(
-            r'<div class="frag" data-djc-id-\w{6}="">\s*' r"123\s*" r'<span id="frag-text">xxx</span>\s*' r"</div>"
+            r'<div class="frag" data-djc-id-\w{7}="">\s*' r"123\s*" r'<span id="frag-text">xxx</span>\s*' r"</div>"
         ).search(data["fragHtml"]) is not None
         assert "rgb(0, 0, 255)" in data["fragBg"]  # AKA 'background: blue'
 
@@ -428,7 +428,7 @@ async def test_fragment_media(self):
 
         assert data["targetHtml"] is None
         assert re.compile(
-            r'<div class="frag" data-djc-id-\w{6}="">\s*' r"123\s*" r'<span id="frag-text">xxx</span>\s*' r"</div>"
+            r'<div class="frag" data-djc-id-\w{7}="">\s*' r"123\s*" r'<span id="frag-text">xxx</span>\s*' r"</div>"
         ).search(data["fragHtml"]) is not None
         assert "rgb(0, 0, 255)" in data["fragBg"]  # AKA 'background: blue'
 
@@ -481,7 +481,7 @@ async def test_fragment_alpine(self):
         # NOTE: Unlike the vanilla JS tests, for the Alpine test we don't remove the targetHtml,
         # but only change its contents.
         assert re.compile(
-            r'<div class="frag" data-djc-id-\w{6}="">\s*' r"123\s*" r'<span id="frag-text">xxx</span>\s*' r"</div>"
+            r'<div class="frag" data-djc-id-\w{7}="">\s*' r"123\s*" r'<span id="frag-text">xxx</span>\s*' r"</div>"
         ).search(data["targetHtml"]) is not None
         assert "rgb(0, 0, 255)" in data["fragBg"]  # AKA 'background: blue'
 
diff --git a/tests/test_expression.py b/tests/test_expression.py
index 3e9cf9414..1df6861eb 100644
--- a/tests/test_expression.py
+++ b/tests/test_expression.py
@@ -121,10 +121,10 @@ def get_context_data(
         assertHTMLEqual(
             rendered,
             """
-            <!-- _RENDERED SimpleComponent_5b8d97,a1bc3f,, -->
-            <div data-djc-id-a1bc3f>lorem</div>
-            <div data-djc-id-a1bc3f>True</div>
-            <div data-djc-id-a1bc3f>[{'a': 1}, {'a': 2}]</div>
+            <!-- _RENDERED SimpleComponent_5b8d97,ca1bc3f,, -->
+            <div data-djc-id-ca1bc3f>lorem</div>
+            <div data-djc-id-ca1bc3f>True</div>
+            <div data-djc-id-ca1bc3f>[{'a': 1}, {'a': 2}]</div>
             """,
         )
 
@@ -194,11 +194,11 @@ def get_context_data(
         assertHTMLEqual(
             rendered,
             """
-            <!-- _RENDERED SimpleComponent_743413,a1bc3f,, -->
-            <div data-djc-id-a1bc3f>lorem ipsum dolor</div>
-            <div data-djc-id-a1bc3f>True</div>
-            <div data-djc-id-a1bc3f>[{'a': 1}, {'a': 2}]</div>
-            <div data-djc-id-a1bc3f>{'a': 3}</div>
+            <!-- _RENDERED SimpleComponent_743413,ca1bc3f,, -->
+            <div data-djc-id-ca1bc3f>lorem ipsum dolor</div>
+            <div data-djc-id-ca1bc3f>True</div>
+            <div data-djc-id-ca1bc3f>[{'a': 1}, {'a': 2}]</div>
+            <div data-djc-id-ca1bc3f>{'a': 3}</div>
             """,
         )
 
@@ -267,11 +267,11 @@ def get_context_data(
 
         # NOTE: This is whitespace-sensitive test, so we check exact output
         assert rendered.strip() == (
-            "<!-- _RENDERED SimpleComponent_6f07b3,a1bc3f,, -->\n"
-            '                <div data-djc-id-a1bc3f=""></div>\n'
-            '                <div data-djc-id-a1bc3f="">  abc</div>\n'
-            '                <div data-djc-id-a1bc3f=""></div>\n'
-            '                <div data-djc-id-a1bc3f="">  </div>'
+            "<!-- _RENDERED SimpleComponent_6f07b3,ca1bc3f,, -->\n"
+            '                <div data-djc-id-ca1bc3f=""></div>\n'
+            '                <div data-djc-id-ca1bc3f="">  abc</div>\n'
+            '                <div data-djc-id-ca1bc3f=""></div>\n'
+            '                <div data-djc-id-ca1bc3f="">  </div>'
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -343,12 +343,12 @@ def get_context_data(
 
         # NOTE: This is whitespace-sensitive test, so we check exact output
         assert rendered.strip() == (
-            "<!-- _RENDERED SimpleComponent_85c7eb,a1bc3f,, -->\n"
-            '                <div data-djc-id-a1bc3f=""> lorem ipsum dolor </div>\n'
-            '                <div data-djc-id-a1bc3f=""> lorem ipsum dolor [{\'a\': 1}] </div>\n'
-            '                <div data-djc-id-a1bc3f=""> True </div>\n'
-            '                <div data-djc-id-a1bc3f=""> [{\'a\': 1}, {\'a\': 2}] </div>\n'
-            '                <div data-djc-id-a1bc3f=""> {\'a\': 3} </div>'
+            "<!-- _RENDERED SimpleComponent_85c7eb,ca1bc3f,, -->\n"
+            '                <div data-djc-id-ca1bc3f=""> lorem ipsum dolor </div>\n'
+            '                <div data-djc-id-ca1bc3f=""> lorem ipsum dolor [{\'a\': 1}] </div>\n'
+            '                <div data-djc-id-ca1bc3f=""> True </div>\n'
+            '                <div data-djc-id-ca1bc3f=""> [{\'a\': 1}, {\'a\': 2}] </div>\n'
+            '                <div data-djc-id-ca1bc3f=""> {\'a\': 3} </div>'
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -391,10 +391,10 @@ def get_context_data(
         assertHTMLEqual(
             rendered,
             """
-            <!-- _RENDERED SimpleComponent_c7a5c3,a1bc3f,, -->
-            <div data-djc-id-a1bc3f>"</div>
-            <div data-djc-id-a1bc3f>{%}</div>
-            <div data-djc-id-a1bc3f>True</div>
+            <!-- _RENDERED SimpleComponent_c7a5c3,ca1bc3f,, -->
+            <div data-djc-id-ca1bc3f>"</div>
+            <div data-djc-id-ca1bc3f>{%}</div>
+            <div data-djc-id-ca1bc3f>True</div>
             """,
         )
 
@@ -443,14 +443,14 @@ def get_context_data(
         assertHTMLEqual(
             rendered,
             """
-                <!-- _RENDERED SimpleComponent_5c8766,a1bc41,, -->
-                <div data-djc-id-a1bc41>
-                    <!-- _RENDERED SimpleComponent_5c8766,a1bc40,, -->
-                    <div data-djc-id-a1bc40>3</div>
-                    <div data-djc-id-a1bc40>True</div>
+                <!-- _RENDERED SimpleComponent_5c8766,ca1bc41,, -->
+                <div data-djc-id-ca1bc41>
+                    <!-- _RENDERED SimpleComponent_5c8766,ca1bc40,, -->
+                    <div data-djc-id-ca1bc40>3</div>
+                    <div data-djc-id-ca1bc40>True</div>
                 </div>
-                <div data-djc-id-a1bc41>True</div>
-            """
+                <div data-djc-id-ca1bc41>True</div>
+            """,
         )
 
 
@@ -519,11 +519,11 @@ def get_context_data(
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f>LoREM</div>
-            <div data-djc-id-a1bc3f>{'@click': '() =&gt; {}', 'style': 'height: 20px'}</div>
-            <div data-djc-id-a1bc3f>[1, 2, 3]</div>
-            <div data-djc-id-a1bc3f>1</div>
-            <div data-djc-id-a1bc3f>123</div>
+            <div data-djc-id-ca1bc3f>LoREM</div>
+            <div data-djc-id-ca1bc3f>{'@click': '() =&gt; {}', 'style': 'height: 20px'}</div>
+            <div data-djc-id-ca1bc3f>[1, 2, 3]</div>
+            <div data-djc-id-ca1bc3f>1</div>
+            <div data-djc-id-ca1bc3f>123</div>
             """,
         )
 
@@ -656,9 +656,9 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41>{'@click': '() =&gt; {}', 'style': 'height: 20px'}</div>
-            <div data-djc-id-a1bc41>[1, 2, 3]</div>
-            <div data-djc-id-a1bc41>1</div>
+            <div data-djc-id-ca1bc41>{'@click': '() =&gt; {}', 'style': 'height: 20px'}</div>
+            <div data-djc-id-ca1bc41>[1, 2, 3]</div>
+            <div data-djc-id-ca1bc41>1</div>
             """,
         )
 
@@ -760,10 +760,10 @@ def get_context_data(
         assertHTMLEqual(
             rendered2,
             """
-            <div data-djc-id-a1bc40>{'@click': '() =&gt; {}', 'style': 'OVERWRITTEN'}</div>
-            <div data-djc-id-a1bc40>[1, 2, 3]</div>
-            <div data-djc-id-a1bc40>1</div>
-            <div data-djc-id-a1bc40>OVERWRITTEN_X</div>
+            <div data-djc-id-ca1bc40>{'@click': '() =&gt; {}', 'style': 'OVERWRITTEN'}</div>
+            <div data-djc-id-ca1bc40>[1, 2, 3]</div>
+            <div data-djc-id-ca1bc40>1</div>
+            <div data-djc-id-ca1bc40>OVERWRITTEN_X</div>
             """,
         )
 
diff --git a/tests/test_registry.py b/tests/test_registry.py
index e767cd4fc..f7793954e 100644
--- a/tests/test_registry.py
+++ b/tests/test_registry.py
@@ -205,11 +205,11 @@ def get_context_data(self, variable=None):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc40>123</strong>
+            Variable: <strong data-djc-id-ca1bc40>123</strong>
             Slot:
             SLOT 123
 
-            Variable: <strong data-djc-id-a1bc42>123</strong>
+            Variable: <strong data-djc-id-ca1bc42>123</strong>
             Slot:
             SLOT ABC
             """,
diff --git a/tests/test_tag_formatter.py b/tests/test_tag_formatter.py
index ece842c27..82a3ec1a6 100644
--- a/tests/test_tag_formatter.py
+++ b/tests/test_tag_formatter.py
@@ -73,7 +73,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 SLOT_DEFAULT
             </div>
             hello2
@@ -106,7 +106,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 OVERRIDEN!
             </div>
             hello2
@@ -142,7 +142,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 SLOT_DEFAULT
             </div>
             hello2
@@ -180,7 +180,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 OVERRIDEN!
             </div>
             hello2
@@ -216,7 +216,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 SLOT_DEFAULT
             </div>
             hello2
@@ -254,7 +254,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 OVERRIDEN!
             </div>
             hello2
@@ -292,7 +292,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 OVERRIDEN!
             </div>
             hello2
@@ -327,7 +327,7 @@ class SimpleComponent(Component):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 OVERRIDEN!
             </div>
             """,
@@ -408,7 +408,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 SLOT_DEFAULT
             </div>
             hello2
@@ -428,7 +428,7 @@ class SimpleComponent(Component):
             rendered,
             """
             hello1
-            <div data-djc-id-a1bc42>
+            <div data-djc-id-ca1bc42>
                 OVERRIDEN!
             </div>
             hello2
diff --git a/tests/test_templatetags.py b/tests/test_templatetags.py
index 8cf44b94e..bd0940460 100644
--- a/tests/test_templatetags.py
+++ b/tests/test_templatetags.py
@@ -46,7 +46,7 @@ def get_context_data(self, variable, variable2="default"):
         """
         rendered = Template(template).render(Context())
         expected = """
-            Variable: <strong data-djc-id-a1bc3f>123</strong>
+            Variable: <strong data-djc-id-ca1bc3f>123</strong>
         """
         assertHTMLEqual(rendered, expected)
 
@@ -74,7 +74,7 @@ def test_nested_tags(self, components_settings):
         """
         rendered = Template(template).render(Context())
         expected = """
-            Variable: <strong data-djc-id-a1bc3f>lorem</strong>
+            Variable: <strong data-djc-id-ca1bc3f>lorem</strong>
         """
         assertHTMLEqual(rendered, expected)
 
@@ -88,7 +88,7 @@ def test_nested_quote_single(self, components_settings):
         """
         rendered = Template(template).render(Context())
         expected = """
-            Variable: <strong data-djc-id-a1bc3f>organisation&#x27;s</strong>
+            Variable: <strong data-djc-id-ca1bc3f>organisation&#x27;s</strong>
         """
         assertHTMLEqual(rendered, expected)
 
@@ -102,7 +102,7 @@ def test_nested_quote_single_self_closing(self, components_settings):
         """
         rendered = Template(template).render(Context())
         expected = """
-            Variable: <strong data-djc-id-a1bc3f>organisation&#x27;s</strong>
+            Variable: <strong data-djc-id-ca1bc3f>organisation&#x27;s</strong>
         """
         assertHTMLEqual(rendered, expected)
 
@@ -116,7 +116,7 @@ def test_nested_quote_double(self, components_settings):
         """
         rendered = Template(template).render(Context())
         expected = """
-            Variable: <strong data-djc-id-a1bc3f>organisation"s</strong>
+            Variable: <strong data-djc-id-ca1bc3f>organisation"s</strong>
         """
         assertHTMLEqual(rendered, expected)
 
@@ -130,6 +130,6 @@ def test_nested_quote_double_self_closing(self, components_settings):
         """
         rendered = Template(template).render(Context())
         expected = """
-            Variable: <strong data-djc-id-a1bc3f>organisation"s</strong>
+            Variable: <strong data-djc-id-ca1bc3f>organisation"s</strong>
         """
         assertHTMLEqual(rendered, expected)
diff --git a/tests/test_templatetags_component.py b/tests/test_templatetags_component.py
index 50741178f..c146a3794 100644
--- a/tests/test_templatetags_component.py
+++ b/tests/test_templatetags_component.py
@@ -62,7 +62,7 @@ def test_single_component(self, components_settings):
 
         template = Template(simple_tag_template)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-a1bc3f>variable</strong>\n")
+        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-ca1bc3f>variable</strong>\n")
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_single_component_self_closing(self, components_settings):
@@ -75,7 +75,7 @@ def test_single_component_self_closing(self, components_settings):
 
         template = Template(simple_tag_template)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-a1bc3f>variable</strong>\n")
+        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-ca1bc3f>variable</strong>\n")
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_call_with_invalid_name(self, components_settings):
@@ -101,7 +101,7 @@ def test_component_called_with_positional_name(self, components_settings):
 
         template = Template(simple_tag_template)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-a1bc3f>variable</strong>\n")
+        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-ca1bc3f>variable</strong>\n")
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_call_component_with_two_variables(self, components_settings):
@@ -134,8 +134,8 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3f>variable</strong>
-            Variable2: <strong data-djc-id-a1bc3f>hej</strong>
+            Variable: <strong data-djc-id-ca1bc3f>variable</strong>
+            Variable2: <strong data-djc-id-ca1bc3f>hej</strong>
             """,
         )
 
@@ -150,7 +150,7 @@ def test_component_called_with_singlequoted_name(self, components_settings):
 
         template = Template(simple_tag_template)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-a1bc3f>variable</strong>\n")
+        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-ca1bc3f>variable</strong>\n")
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_raises_on_component_called_with_variable_as_name(self, components_settings):
@@ -191,8 +191,8 @@ def get_context_data(self, variable, default_param="default text"):
         assertHTMLEqual(
             rendered,
             """
-            Provided variable: <strong data-djc-id-a1bc3f>provided value</strong>
-            Default: <p data-djc-id-a1bc3f>default text</p>
+            Provided variable: <strong data-djc-id-ca1bc3f>provided value</strong>
+            Default: <p data-djc-id-ca1bc3f>default text</p>
             """,
         )
 
@@ -227,7 +227,7 @@ def test_basic(self, components_settings):
         rendered = template.render(Context({}))
         assertHTMLEqual(
             rendered,
-            "Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc40>variable</strong>",
+            "Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc40>variable</strong>",
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -258,7 +258,7 @@ def test_component_called_with_variable_as_name(self, components_settings):
         rendered = template.render(Context({}))
         assertHTMLEqual(
             rendered,
-            "Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc40>variable</strong>",
+            "Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc40>variable</strong>",
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -283,7 +283,7 @@ def test_component_called_with_variable_as_spread(self, components_settings):
         )
         assertHTMLEqual(
             rendered,
-            "Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc40>variable</strong>",
+            "Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc40>variable</strong>",
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -305,7 +305,7 @@ def test_component_as_class(self, components_settings):
         )
         assertHTMLEqual(
             rendered,
-            "Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc40>variable</strong>",
+            "Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc40>variable</strong>",
         )
 
     @djc_test(
@@ -329,7 +329,7 @@ def test_shorthand_formatter(self, components_settings):
 
         template = Template(simple_tag_template)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc40>variable</strong>\n")
+        assertHTMLEqual(rendered, "Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc40>variable</strong>\n")
 
     @djc_test(
         parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR,
@@ -355,7 +355,7 @@ def test_component_name_is_configurable(self, components_settings):
         rendered = template.render(Context({}))
         assertHTMLEqual(
             rendered,
-            "Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc40>variable</strong>",
+            "Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc40>variable</strong>",
         )
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -397,7 +397,7 @@ def get_context_data(self, variable, variable2="default"):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc3f data-djc-id-a1bc40>variable</strong>
+            Variable: <strong data-djc-id-ca1bc3f data-djc-id-ca1bc40>variable</strong>
             Slot: HELLO_FROM_SLOT
             """,
         )
@@ -439,7 +439,7 @@ def get_context_data(self, variable, variable2="default"):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc41 data-djc-id-a1bc42>variable</strong>
+            Variable: <strong data-djc-id-ca1bc41 data-djc-id-ca1bc42>variable</strong>
             Slot 1: HELLO_FROM_SLOT_1
             Slot 2: HELLO_FROM_SLOT_2
             """,
@@ -482,7 +482,7 @@ def get_context_data(self, variable, variable2="default"):
         assertHTMLEqual(
             rendered,
             """
-            Variable: <strong data-djc-id-a1bc41 data-djc-id-a1bc42>variable</strong>
+            Variable: <strong data-djc-id-ca1bc41 data-djc-id-ca1bc42>variable</strong>
             Slot 1: HELLO_FROM_SLOT_1
             Slot 2:
             """,
@@ -527,14 +527,14 @@ def test_both_components_render_correctly_with_no_slots(self, components_setting
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc40>
+            <custom-template data-djc-id-ca1bc40>
                 <header>
                     Default header
                 </header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
             </custom-template>
-            <custom-template data-djc-id-a1bc47>
+            <custom-template data-djc-id-ca1bc47>
                 <header>
                     Default header
                 </header>
@@ -564,14 +564,14 @@ def test_both_components_render_correctly_with_slots(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc42>
+            <custom-template data-djc-id-ca1bc42>
                 <header>
                     <p>Slot #1</p>
                 </header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
             </custom-template>
-            <custom-template data-djc-id-a1bc49>
+            <custom-template data-djc-id-ca1bc49>
                 <header>
                     <div>Slot #2</div>
                 </header>
@@ -600,14 +600,14 @@ def test_both_components_render_correctly_when_only_first_has_slots(self, compon
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc41>
+            <custom-template data-djc-id-ca1bc41>
                 <header>
                     <p>Slot #1</p>
                 </header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
             </custom-template>
-            <custom-template data-djc-id-a1bc48>
+            <custom-template data-djc-id-ca1bc48>
                 <header>
                     Default header
                 </header>
@@ -636,14 +636,14 @@ def test_both_components_render_correctly_when_only_second_has_slots(self, compo
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc41>
+            <custom-template data-djc-id-ca1bc41>
                 <header>
                     Default header
                 </header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
             </custom-template>
-            <custom-template data-djc-id-a1bc48>
+            <custom-template data-djc-id-ca1bc48>
                 <header>
                     <div>Slot #2</div>
                 </header>
@@ -689,17 +689,17 @@ def test_instances_of_component_do_not_share_slots(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc4a>
+            <custom-template data-djc-id-ca1bc4a>
                 <header>Override header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
             </custom-template>
-            <custom-template data-djc-id-a1bc4b>
+            <custom-template data-djc-id-ca1bc4b>
                 <header>Default header</header>
                 <main>Override main</main>
                 <footer>Default footer</footer>
             </custom-template>
-            <custom-template data-djc-id-a1bc4c>
+            <custom-template data-djc-id-ca1bc4c>
                 <header>Default header</header>
                 <main>Default main</main>
                 <footer>Override footer</footer>
@@ -735,7 +735,7 @@ def get_context_data(self, *args, attrs, my_dict):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 attrs: {'@click.stop': "dispatch('click_event')", 'x-data': "{hello: 'world'}", 'class': 'padding-top-8'}
                 my_dict: {'one': 2}
             </div>
diff --git a/tests/test_templatetags_extends.py b/tests/test_templatetags_extends.py
index dff808759..c963be2da 100644
--- a/tests/test_templatetags_extends.py
+++ b/tests/test_templatetags_extends.py
@@ -67,8 +67,8 @@ class _ExtendedComponent(Component):
                 <body>
                     <main role="main">
                         <div class='container main-container'>
-                            <div data-djc-id-a1bc40>BLOCK OVERRIDEN</div>
-                            <custom-template data-djc-id-a1bc40>
+                            <div data-djc-id-ca1bc40>BLOCK OVERRIDEN</div>
+                            <custom-template data-djc-id-ca1bc40>
                                 <header>SLOT OVERRIDEN</header>
                                 <main>Default main</main>
                                 <footer>Default footer</footer>
@@ -117,14 +117,14 @@ class _ExtendedComponent(Component):
                 <body>
                     <main role="main">
                         <div class='container main-container'>
-                            <div data-djc-id-a1bc42>BLOCK OVERRIDEN</div>
-                            <custom-template data-djc-id-a1bc42>
+                            <div data-djc-id-ca1bc42>BLOCK OVERRIDEN</div>
+                            <custom-template data-djc-id-ca1bc42>
                                 <header>SLOT OVERRIDEN</header>
                                 <main>Default main</main>
                                 <footer>Default footer</footer>
                             </custom-template>
-                            <div data-djc-id-a1bc46>BLOCK OVERRIDEN</div>
-                            <custom-template data-djc-id-a1bc46>
+                            <div data-djc-id-ca1bc46>BLOCK OVERRIDEN</div>
+                            <custom-template data-djc-id-ca1bc46>
                                 <header>SLOT OVERRIDEN 2</header>
                                 <main>Default main</main>
                                 <footer>Default footer</footer>
@@ -184,14 +184,14 @@ class _SecondExtendedComponent(Component):
                 <body>
                     <main role="main">
                         <div class='container main-container'>
-                            <div data-djc-id-a1bc42>BLOCK OVERRIDEN</div>
-                            <custom-template data-djc-id-a1bc42>
+                            <div data-djc-id-ca1bc42>BLOCK OVERRIDEN</div>
+                            <custom-template data-djc-id-ca1bc42>
                                 <header>SLOT OVERRIDEN</header>
                                 <main>Default main</main>
                                 <footer>Default footer</footer>
                             </custom-template>
-                            <div data-djc-id-a1bc46>BLOCK OVERRIDEN</div>
-                            <custom-template data-djc-id-a1bc46>
+                            <div data-djc-id-ca1bc46>BLOCK OVERRIDEN</div>
+                            <custom-template data-djc-id-ca1bc46>
                                 <header>SLOT OVERRIDEN 2</header>
                                 <main>Default main</main>
                                 <footer>Default footer</footer>
@@ -250,14 +250,14 @@ class _SecondExtendedComponent(Component):
                 <body>
                     <main role="main">
                         <div class='container main-container'>
-                            <div data-djc-id-a1bc42>BLOCK OVERRIDEN</div>
-                            <custom-template data-djc-id-a1bc42>
+                            <div data-djc-id-ca1bc42>BLOCK OVERRIDEN</div>
+                            <custom-template data-djc-id-ca1bc42>
                                 <header>SLOT OVERRIDEN</header>
                                 <main>Default main</main>
                                 <footer>Default footer</footer>
                             </custom-template>
-                            <div data-djc-id-a1bc46>BLOCK OVERRIDEN</div>
-                            <custom-template data-djc-id-a1bc46>
+                            <div data-djc-id-ca1bc46>BLOCK OVERRIDEN</div>
+                            <custom-template data-djc-id-ca1bc46>
                                 <header>SLOT OVERRIDEN 2</header>
                                 <main>Default main</main>
                                 <footer>Default footer</footer>
@@ -301,8 +301,8 @@ class _ExtendedComponent(Component):
             <!DOCTYPE html>
             <html lang="en">
                 <body>
-                    <div data-djc-id-a1bc40>BLOCK OVERRIDEN</div>
-                    <custom-template data-djc-id-a1bc40>
+                    <div data-djc-id-ca1bc40>BLOCK OVERRIDEN</div>
+                    <custom-template data-djc-id-ca1bc40>
                         <header>SLOT OVERRIDEN</header>
                         <main>Default main</main>
                         <footer>Default footer</footer>
@@ -349,14 +349,14 @@ class _ExtendedComponent(Component):
             <!DOCTYPE html>
             <html lang="en">
                 <body>
-                    <div data-djc-id-a1bc42>BLOCK OVERRIDEN</div>
-                    <custom-template data-djc-id-a1bc42>
+                    <div data-djc-id-ca1bc42>BLOCK OVERRIDEN</div>
+                    <custom-template data-djc-id-ca1bc42>
                         <header>SLOT OVERRIDEN</header>
                         <main>Default main</main>
                         <footer>Default footer</footer>
                     </custom-template>
-                    <div data-djc-id-a1bc46>BLOCK OVERRIDEN</div>
-                    <custom-template data-djc-id-a1bc46>
+                    <div data-djc-id-ca1bc46>BLOCK OVERRIDEN</div>
+                    <custom-template data-djc-id-ca1bc46>
                         <header>SLOT OVERRIDEN 2</header>
                         <main>Default main</main>
                         <footer>Default footer</footer>
@@ -403,11 +403,11 @@ class _ExtendedComponent(Component):
                 <body>
                     <main role="main">
                         <div class='container main-container'>
-                            <custom-template data-djc-id-a1bc42>
+                            <custom-template data-djc-id-ca1bc42>
                                 <header>Default header</header>
                                 <main>
-                                    <div data-djc-id-a1bc49>BLOCK OVERRIDEN</div>
-                                    <custom-template data-djc-id-a1bc49>
+                                    <div data-djc-id-ca1bc49>BLOCK OVERRIDEN</div>
+                                    <custom-template data-djc-id-ca1bc49>
                                         <header>SLOT OVERRIDEN</header>
                                         <main>Default main</main>
                                         <footer>Default footer</footer>
@@ -449,7 +449,7 @@ class _ExtendedComponent(Component):
                     <main role="main">
                         <div class='container main-container'>
                             Variable: <strong></strong>
-                            Variable: <strong data-djc-id-a1bc3f></strong>
+                            Variable: <strong data-djc-id-ca1bc3f></strong>
                         </div>
                     </main>
                 </body>
@@ -459,7 +459,7 @@ class _ExtendedComponent(Component):
 
         # second rendering after cache built
         rendered_2 = Template(template).render(Context())
-        expected_2 = expected.replace("data-djc-id-a1bc3f", "data-djc-id-a1bc41")
+        expected_2 = expected.replace("data-djc-id-ca1bc3f", "data-djc-id-ca1bc41")
         assertHTMLEqual(rendered_2, expected_2)
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -483,9 +483,9 @@ class SlotInsideExtendsComponent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc40 lang="en">
+            <html data-djc-id-ca1bc40 lang="en">
             <body>
-                <custom-template data-djc-id-a1bc45>
+                <custom-template data-djc-id-ca1bc45>
                     <header></header>
                     <main>BODY_FROM_FILL</main>
                     <footer>Default footer</footer>
@@ -516,9 +516,9 @@ class SlotInsideIncludeComponent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc40 lang="en">
+            <html data-djc-id-ca1bc40 lang="en">
             <body>
-                <custom-template data-djc-id-a1bc45>
+                <custom-template data-djc-id-ca1bc45>
                     <header></header>
                     <main>BODY_FROM_FILL</main>
                     <footer>Default footer</footer>
@@ -551,7 +551,7 @@ def test_component_inside_block(self, components_settings):
             <body>
                 <main role="main">
                     <div class='container main-container'>
-                        <custom-template data-djc-id-a1bc42>
+                        <custom-template data-djc-id-ca1bc42>
                             <header></header>
                             <main>TEST</main>
                             <footer></footer>
@@ -580,7 +580,7 @@ def test_block_inside_component(self, components_settings):
             <!DOCTYPE html>
             <html lang="en">
             <body>
-                <custom-template data-djc-id-a1bc41>
+                <custom-template data-djc-id-ca1bc41>
                     <header></header>
                     <main>
                         <div> 58 giraffes and 2 pantaloons </div>
@@ -607,9 +607,9 @@ class BlockInCompParent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc3f lang="en">
+            <html data-djc-id-ca1bc3f lang="en">
             <body>
-                <custom-template data-djc-id-a1bc43>
+                <custom-template data-djc-id-ca1bc43>
                     <header></header>
                     <main>
                         <div> 58 giraffes and 2 pantaloons </div>
@@ -647,9 +647,9 @@ class BlockInSlotInComponent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc40 lang="en">
+            <html data-djc-id-ca1bc40 lang="en">
             <body>
-                <custom-template data-djc-id-a1bc49>
+                <custom-template data-djc-id-ca1bc49>
                     <header></header>
                     <main>BODY_FROM_FILL</main>
                     <footer>Default footer</footer>
@@ -677,9 +677,9 @@ class _SlotInsideBlockComponent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc3f lang="en">
+            <html data-djc-id-ca1bc3f lang="en">
             <body>
-                <custom-template data-djc-id-a1bc44>
+                <custom-template data-djc-id-ca1bc44>
                     <header></header>
                     <main>
                         Helloodiddoo
@@ -713,9 +713,9 @@ class _SlotInsideBlockComponent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc3f lang="en">
+            <html data-djc-id-ca1bc3f lang="en">
             <body>
-                <custom-template data-djc-id-a1bc44>
+                <custom-template data-djc-id-ca1bc44>
                     <header></header>
                     <main>
                         Helloodiddoo
@@ -749,9 +749,9 @@ class _SlotInsideBlockComponent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc40 lang="en">
+            <html data-djc-id-ca1bc40 lang="en">
             <body>
-                <custom-template data-djc-id-a1bc45>
+                <custom-template data-djc-id-ca1bc45>
                     <header></header>
                     <main>
                         Helloodiddoo
@@ -795,9 +795,9 @@ class _SlotInsideBlockComponent(Component):
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc41 lang="en">
+            <html data-djc-id-ca1bc41 lang="en">
             <body>
-                <custom-template data-djc-id-a1bc47>
+                <custom-template data-djc-id-ca1bc47>
                     <header></header>
                     <main>
                         Helloodiddoo
@@ -837,10 +837,10 @@ def get_context_data(self):
             <!DOCTYPE html>
             <html lang="en">
             <body>
-                <custom-template data-djc-id-a1bc44>
+                <custom-template data-djc-id-ca1bc44>
                     <header></header>
                     <main>
-                        <div data-djc-id-a1bc4b> injected: DepInject(hello='from_block') </div>
+                        <div data-djc-id-ca1bc4b> injected: DepInject(hello='from_block') </div>
                     </main>
                     <footer>Default footer</footer>
                 </custom-template>
@@ -860,7 +860,7 @@ def test_component_using_template_file_extends_relative_file(self, components_se
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc3f="" lang="en">
+            <html data-djc-id-ca1bc3f="" lang="en">
               <body>
                 <main role="main">
                   <div class='container main-container'>
@@ -883,7 +883,7 @@ def test_component_using_get_template_name_extends_relative_file(self, component
         rendered = Template(template).render(Context())
         expected = """
             <!DOCTYPE html>
-            <html data-djc-id-a1bc3f="" lang="en">
+            <html data-djc-id-ca1bc3f="" lang="en">
               <body>
                 <main role="main">
                   <div class='container main-container'>
diff --git a/tests/test_templatetags_provide.py b/tests/test_templatetags_provide.py
index a724b9a07..f06757942 100644
--- a/tests/test_templatetags_provide.py
+++ b/tests/test_templatetags_provide.py
@@ -46,7 +46,7 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41> injected: DepInject(key='hi', another=1) </div>
+            <div data-djc-id-ca1bc41> injected: DepInject(key='hi', another=1) </div>
             """,
         )
         self._assert_clear_cache()
@@ -99,8 +99,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41> key: hi </div>
-            <div data-djc-id-a1bc41> another: 3 </div>
+            <div data-djc-id-ca1bc41> key: hi </div>
+            <div data-djc-id-ca1bc41> another: 3 </div>
             """,
         )
         self._assert_clear_cache()
@@ -133,8 +133,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41> key: hi </div>
-            <div data-djc-id-a1bc41> another: 4 </div>
+            <div data-djc-id-ca1bc41> key: hi </div>
+            <div data-djc-id-ca1bc41> another: 4 </div>
             """,
         )
         self._assert_clear_cache()
@@ -164,7 +164,7 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41> injected: default </div>
+            <div data-djc-id-ca1bc41> injected: default </div>
             """,
         )
         self._assert_clear_cache()
@@ -198,8 +198,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc42> injected: DepInject() </div>
-            <div data-djc-id-a1bc43> injected: default </div>
+            <div data-djc-id-ca1bc42> injected: DepInject() </div>
+            <div data-djc-id-ca1bc43> injected: default </div>
         """,
         )
         self._assert_clear_cache()
@@ -232,8 +232,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc42></div>
-            <div data-djc-id-a1bc43></div>
+            <div data-djc-id-ca1bc42></div>
+            <div data-djc-id-ca1bc43></div>
         """,
         )
         self._assert_clear_cache()
@@ -265,8 +265,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc42> injected: DepInject(key='hi', another=7) </div>
-            <div data-djc-id-a1bc43> injected: default </div>
+            <div data-djc-id-ca1bc42> injected: DepInject(key='hi', another=7) </div>
+            <div data-djc-id-ca1bc43> injected: default </div>
         """,
         )
         self._assert_clear_cache()
@@ -304,8 +304,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc42> injected: DepInject(key='hi', another=8) </div>
-            <div data-djc-id-a1bc43> injected: default </div>
+            <div data-djc-id-ca1bc42> injected: DepInject(key='hi', another=8) </div>
+            <div data-djc-id-ca1bc43> injected: default </div>
         """,
         )
         self._assert_clear_cache()
@@ -347,8 +347,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc42> injected: DepInject(key='hi', another=9) </div>
-            <div data-djc-id-a1bc43> injected: default </div>
+            <div data-djc-id-ca1bc42> injected: DepInject(key='hi', another=9) </div>
+            <div data-djc-id-ca1bc43> injected: default </div>
         """,
         )
         self._assert_clear_cache()
@@ -463,7 +463,7 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41> injected: DepInject(var1={'key': 'hi', 'another': 13}, var2={'x': 'y'}) </div>
+            <div data-djc-id-ca1bc41> injected: DepInject(var1={'key': 'hi', 'another': 13}, var2={'x': 'y'}) </div>
             """,
         )
         self._assert_clear_cache()
@@ -539,9 +539,9 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc45> injected: DepInject(key='hi1', another=16, new=3) </div>
-            <div data-djc-id-a1bc46> injected: DepInject(key='hi', another=15, lost=0) </div>
-            <div data-djc-id-a1bc47> injected: default </div>
+            <div data-djc-id-ca1bc45> injected: DepInject(key='hi1', another=16, new=3) </div>
+            <div data-djc-id-ca1bc46> injected: DepInject(key='hi', another=15, lost=0) </div>
+            <div data-djc-id-ca1bc47> injected: default </div>
             """,
         )
 
@@ -581,8 +581,8 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc43> first_provide: DepInject(key='hi', another=17, lost=0) </div>
-            <div data-djc-id-a1bc43> second_provide: DepInject(key='hi1', another=18, new=3) </div>
+            <div data-djc-id-ca1bc43> first_provide: DepInject(key='hi', another=17, lost=0) </div>
+            <div data-djc-id-ca1bc43> second_provide: DepInject(key='hi1', another=18, new=3) </div>
             """,
         )
         self._assert_clear_cache()
@@ -612,7 +612,7 @@ def get_context_data(self):
             rendered,
             """
             <div>
-                <div data-djc-id-a1bc41> injected: DepInject(key='hi', another=19) </div>
+                <div data-djc-id-ca1bc41> injected: DepInject(key='hi', another=19) </div>
             </div>
             """,
         )
@@ -651,7 +651,7 @@ class ParentComponent(Component):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc40 data-djc-id-a1bc44>
+            <div data-djc-id-ca1bc40 data-djc-id-ca1bc44>
                 injected: DepInject(key='hi', another=20)
             </div>
             """,
@@ -691,7 +691,7 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41> injected: DepInject(key='hi', another=21) </div>
+            <div data-djc-id-ca1bc41> injected: DepInject(key='hi', another=21) </div>
             """,
         )
         self._assert_clear_cache()
@@ -742,7 +742,7 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f> injected: default </div>
+            <div data-djc-id-ca1bc3f> injected: default </div>
             """,
         )
         self._assert_clear_cache()
@@ -852,10 +852,10 @@ class Root(Component):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3e data-djc-id-a1bc41 data-djc-id-a1bc45 data-djc-id-a1bc49>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc41 data-djc-id-ca1bc45 data-djc-id-ca1bc49>
                 injected: DepInject(key='hi', data=123)
             </div>
-            <main data-djc-id-a1bc3e data-djc-id-a1bc41 data-djc-id-a1bc45 data-djc-id-a1bc49>
+            <main data-djc-id-ca1bc3e data-djc-id-ca1bc41 data-djc-id-ca1bc45 data-djc-id-ca1bc49>
                 456
             </main>
             """,
@@ -917,10 +917,10 @@ class Root(Component):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3e data-djc-id-a1bc41 data-djc-id-a1bc44 data-djc-id-a1bc48>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc41 data-djc-id-ca1bc44 data-djc-id-ca1bc48>
                 injected: DepInject(key='hi', data=123)
             </div>
-            <main data-djc-id-a1bc3e data-djc-id-a1bc41 data-djc-id-a1bc44 data-djc-id-a1bc48>
+            <main data-djc-id-ca1bc3e data-djc-id-ca1bc41 data-djc-id-ca1bc44 data-djc-id-ca1bc48>
             </main>
             """,
         )
@@ -972,10 +972,10 @@ def get_context_data(self):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc41>
+            <div data-djc-id-ca1bc41>
                 injected: DepInject(key='hi', another=23)
             </div>
-            <div data-djc-id-a1bc41>
+            <div data-djc-id-ca1bc41>
                 Ran: True
             </div>
             """,
@@ -1044,10 +1044,10 @@ class Root(Component):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3e data-djc-id-a1bc42>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc42>
                 injected: DepInject(key='hi', another=25)
             </div>
-            <div data-djc-id-a1bc3e data-djc-id-a1bc42>
+            <div data-djc-id-ca1bc3e data-djc-id-ca1bc42>
                 Ran: True
             </div>
             """,
diff --git a/tests/test_templatetags_slot_fill.py b/tests/test_templatetags_slot_fill.py
index 80f6b0ec1..9b2700946 100644
--- a/tests/test_templatetags_slot_fill.py
+++ b/tests/test_templatetags_slot_fill.py
@@ -67,10 +67,10 @@ class Media:
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc42>
+            <custom-template data-djc-id-ca1bc42>
                 <header>Custom header</header>
                 <main>
-                    Variable: <strong data-djc-id-a1bc46>variable</strong>
+                    Variable: <strong data-djc-id-ca1bc46>variable</strong>
                 </main>
                 <footer>Default footer</footer>
             </custom-template>
@@ -119,9 +119,9 @@ def get_context_data(self, variable, variable2="default"):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc43>
+            <custom-template data-djc-id-ca1bc43>
                 <header>
-                    Variable: <strong data-djc-id-a1bc47>variable</strong>
+                    Variable: <strong data-djc-id-ca1bc47>variable</strong>
                 </header>
                 <main></main>
                 <footer></footer>
@@ -174,7 +174,7 @@ def get_context_data(self, variable):
         assertHTMLEqual(
             rendered,
             f"""
-            <custom-template data-djc-id-a1bc41>
+            <custom-template data-djc-id-ca1bc41>
                 <header>Default header</header>
                 <main>test123 - {expected} </main>
                 <footer>test321</footer>
@@ -196,7 +196,7 @@ def test_slotted_template_no_slots_filled(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc3f>
+            <custom-template data-djc-id-ca1bc3f>
                 <header>Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -219,7 +219,7 @@ class SlottedComponentNoSlots(Component):
         template = Template(template_str)
         rendered = template.render(Context({}))
 
-        assertHTMLEqual(rendered, "<custom-template data-djc-id-a1bc3f></custom-template>")
+        assertHTMLEqual(rendered, "<custom-template data-djc-id-ca1bc3f></custom-template>")
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_slotted_template_without_slots_and_single_quotes(self, components_settings):
@@ -236,7 +236,7 @@ class SlottedComponentNoSlots(Component):
         template = Template(template_str)
         rendered = template.render(Context({}))
 
-        assertHTMLEqual(rendered, "<custom-template data-djc-id-a1bc3f></custom-template>")
+        assertHTMLEqual(rendered, "<custom-template data-djc-id-ca1bc3f></custom-template>")
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_variable_fill_name(self, components_settings):
@@ -252,7 +252,7 @@ def test_variable_fill_name(self, components_settings):
         template = Template(template_str)
         rendered = template.render(Context({}))
         expected = """
-        <custom-template data-djc-id-a1bc40>
+        <custom-template data-djc-id-ca1bc40>
             <header>Hi there!</header>
             <main>Default main</main>
             <footer>Default footer</footer>
@@ -321,7 +321,7 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
             rendered,
             """
             <body>
-                <div data-djc-id-a1bc3f>
+                <div data-djc-id-ca1bc3f>
                     <main> ABC: carl var </main>
                 </div>
             </body>
@@ -352,7 +352,7 @@ class Comp(Component):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 <h1> Custom title </h1>
                 <h2> Default subtitle </h2>
             </div>
@@ -482,8 +482,8 @@ def get_context_data(self, required: bool) -> Any:
             render_dependencies=False,
         )
 
-        assertHTMLEqual(rendered1, "<div data-djc-id-a1bc3e><div>MAIN</div></div>")
-        assertHTMLEqual(rendered2, "<div data-djc-id-a1bc41><div>MAIN</div></div>")
+        assertHTMLEqual(rendered1, "<div data-djc-id-ca1bc3e><div>MAIN</div></div>")
+        assertHTMLEqual(rendered2, "<div data-djc-id-ca1bc41><div>MAIN</div></div>")
 
         # 3. Specify the required slot by its name
         rendered3 = TestComp.render(
@@ -493,7 +493,7 @@ def get_context_data(self, required: bool) -> Any:
             },
             render_dependencies=False,
         )
-        assertHTMLEqual(rendered3, "<div data-djc-id-a1bc42><main>MAIN</main><div>MAIN</div></div>")
+        assertHTMLEqual(rendered3, "<div data-djc-id-ca1bc42><main>MAIN</main><div>MAIN</div></div>")
 
         # 4. RAISES: Specify the required slot by the "default" name
         #    This raises because the slot that is marked as 'required' is NOT marked as 'default'.
@@ -530,7 +530,7 @@ class SlottedWithIncludeComponent(Component):
         rendered = Template(template_str).render(Context({}))
 
         expected = """
-            <custom-template data-djc-id-a1bc42>
+            <custom-template data-djc-id-ca1bc42>
                 <header>Custom header</header>
                 <main>Custom main</main>
                 <footer>Custom footer</footer>
@@ -585,7 +585,7 @@ class ComponentWithDefaultSlot(Component):
         template = Template(template_str)
 
         expected = """
-        <div data-djc-id-a1bc3f>
+        <div data-djc-id-ca1bc3f>
           <main>
             <p>This fills the 'main' slot.</p>
           </main>
@@ -613,7 +613,7 @@ class ComponentWithDefaultSlot(Component):
         """
         template = Template(template_str)
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 <main>
                     <p>This fills the 'main' slot.</p>
                 </main>
@@ -642,7 +642,7 @@ class ComponentWithDefaultSlot(Component):
         """
         template = Template(template_str)
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 <main><p>This fills the 'main' slot.</p></main>
                 <div><p>This fills the 'main' slot.</p></div>
             </div>
@@ -728,9 +728,9 @@ class ComponentWithDefaultSlot(Component):
         """
         template = Template(template_str)
         expected = """
-            <div data-djc-id-a1bc43>
+            <div data-djc-id-ca1bc43>
                 <main>
-                    <custom-template data-djc-id-a1bc45>
+                    <custom-template data-djc-id-ca1bc45>
                         <header>This Is Allowed</header>
                         <main></main>
                         <footer></footer>
@@ -792,7 +792,7 @@ class ComponentWithDefaultSlot(Component):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 <main><p>Main Content</p></main>
             </div>
             """,
@@ -812,7 +812,7 @@ def test_implicit_fill_when_no_slot_marked_default(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc3f>
+            <custom-template data-djc-id-ca1bc3f>
                 <header>Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -850,7 +850,7 @@ def get_context_data(self, var: bool) -> Any:
         assertHTMLEqual(
             rendered_truthy,
             """
-            <custom-template data-djc-id-a1bc3f>
+            <custom-template data-djc-id-ca1bc3f>
                 <header>123</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -862,7 +862,7 @@ def get_context_data(self, var: bool) -> Any:
         assertHTMLEqual(
             rendered_falsy,
             """
-            <custom-template data-djc-id-a1bc43>
+            <custom-template data-djc-id-ca1bc43>
                 <main>Default main</main>
                 <footer>Default footer</footer>
             </custom-template>
@@ -914,7 +914,7 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc41>
+            <custom-template data-djc-id-ca1bc41>
                 <header>
                     OVERRIDEN_SLOT "header" - INDEX 0 - ORIGINAL "Default header"
                 </header>
@@ -962,7 +962,7 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc40>
+            <custom-template data-djc-id-ca1bc40>
                 <header>
                     OVERRIDEN_SLOT "header" - ORIGINAL "Default header"
                 </header>
@@ -1052,9 +1052,9 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
         rendered = template.render(Context())
 
         expected = """
-            <div data-djc-id-a1bc41>CUSTOM HEADER</div>
-            <div data-djc-id-a1bc41>CUSTOM MAIN</div>
-            <div data-djc-id-a1bc41>footer</div>
+            <div data-djc-id-ca1bc41>CUSTOM HEADER</div>
+            <div data-djc-id-ca1bc41>CUSTOM MAIN</div>
+            <div data-djc-id-ca1bc41>footer</div>
         """
         assertHTMLEqual(rendered, expected)
 
@@ -1097,8 +1097,8 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
         rendered = template.render(Context())
 
         expected = """
-            <div data-djc-id-a1bc41>
-                <custom-template data-djc-id-a1bc45>
+            <div data-djc-id-ca1bc41>
+                <custom-template data-djc-id-ca1bc45>
                     <header>CUSTOM HEADER</header>
                     <main>CUSTOM MAIN</main>
                     <footer>Default footer</footer>
@@ -1148,8 +1148,8 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
         rendered = template.render(Context())
 
         expected = """
-            <div data-djc-id-a1bc41>
-                <custom-template data-djc-id-a1bc45>
+            <div data-djc-id-ca1bc41>
+                <custom-template data-djc-id-ca1bc45>
                     <header>Default header</header>
                     <main>CUSTOM MAIN</main>
                     <footer>Default footer</footer>
@@ -1200,7 +1200,7 @@ def test_empty(self, components_settings):
 
         rendered = Template(template_str).render(Context())
         expected = """
-            <div data-djc-id-a1bc3f>
+            <div data-djc-id-ca1bc3f>
                 Wrapper Default
                 <div>
                     Parent1 Default
@@ -1231,7 +1231,7 @@ def test_override_outer(self, components_settings):
 
         rendered = Template(template_str).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 Entire Wrapper Replaced
             </div>
         """
@@ -1253,7 +1253,7 @@ def test_override_middle(self, components_settings):
 
         rendered = Template(template_str).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 Wrapper Default
                 <div>
                     Parent1 Replaced
@@ -1281,7 +1281,7 @@ def test_override_inner(self, components_settings):
 
         rendered = Template(template_str).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 Wrapper Default
                 <div>
                     Parent1 Default
@@ -1322,7 +1322,7 @@ def test_override_all(self, components_settings):
 
         rendered = Template(template_str).render(Context())
         expected = """
-            <div data-djc-id-a1bc42>
+            <div data-djc-id-ca1bc42>
                 Entire Wrapper Replaced
             </div>
         """
@@ -1355,7 +1355,7 @@ class SlottedComponentWithMissingVariable(Component):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc3f>
+            <custom-template data-djc-id-ca1bc3f>
                 <header>Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -1383,7 +1383,7 @@ def test_basic(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc42>
+            <custom-template data-djc-id-ca1bc42>
                 <header>Before: Default header</header>
                 <main>Default main</main>
                 <footer>Default footer, after</footer>
@@ -1409,7 +1409,7 @@ def test_multiple_calls(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc40>
+            <custom-template data-djc-id-ca1bc40>
                 <header>First: Default header; Second: Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -1440,7 +1440,7 @@ def test_under_if_and_forloop(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc40>
+            <custom-template data-djc-id-ca1bc40>
                 <header>First Default header Later Default header Later Default header</header>
                 <main>Default main</main>
                 <footer>Default footer</footer>
@@ -1475,10 +1475,10 @@ def test_nested_fills(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc43>
+            <custom-template data-djc-id-ca1bc43>
                 <header>
                     header1_in_header1: Default header
-                    <custom-template data-djc-id-a1bc47>
+                    <custom-template data-djc-id-ca1bc47>
                         <header>
                             header1_in_header2: Default header
                             header2_in_header2: Default header
@@ -1527,7 +1527,7 @@ def get_context_data(self):
         """
         rendered = Template(template).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 def
                 456
             </div>
@@ -1562,7 +1562,7 @@ def get_context_data(self):
         """
         rendered = Template(template).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 def
                 456
             </div>
@@ -1598,7 +1598,7 @@ def get_context_data(self):
         """
         rendered = Template(template).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 Default text
                 def
                 456
@@ -1635,7 +1635,7 @@ def get_context_data(self):
         """
         rendered = Template(template).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 def
                 456
             </div>
@@ -1673,7 +1673,7 @@ def get_context_data(self):
         """
         rendered = Template(template).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 def
                 456
             </div>
@@ -1710,7 +1710,7 @@ def get_context_data(self):
         """
         rendered = Template(template).render(Context())
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 <b>Default text A</b>
                 <b>xyz Default text B 456</b>
             </div>
@@ -1774,7 +1774,7 @@ def get_context_data(self):
             {% endcomponent %}
         """
         rendered = Template(template).render(Context())
-        expected = "<div data-djc-id-a1bc40> overriden </div>"
+        expected = "<div data-djc-id-ca1bc40> overriden </div>"
         assertHTMLEqual(rendered, expected)
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -1797,7 +1797,7 @@ class TestComponent(Component):
             {% endcomponent %}
         """
         rendered = Template(template).render(Context())
-        expected = "<div data-djc-id-a1bc40> {} </div>"
+        expected = "<div data-djc-id-ca1bc40> {} </div>"
         assertHTMLEqual(rendered, expected)
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -1823,7 +1823,7 @@ def get_context_data(self):
             {% endcomponent %}
         """
         rendered = Template(template).render(Context())
-        expected = "<div data-djc-id-a1bc3f> Default text </div>"
+        expected = "<div data-djc-id-ca1bc3f> Default text </div>"
         assertHTMLEqual(rendered, expected)
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
@@ -1862,7 +1862,7 @@ def get_context_data(self):
         )
 
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 def
                 456
             </div>
@@ -1907,7 +1907,7 @@ def get_context_data(self):
         )
 
         expected = """
-            <div data-djc-id-a1bc40>
+            <div data-djc-id-ca1bc40>
                 def
                 456
             </div>
@@ -1951,9 +1951,9 @@ def get_context_data(self, input):
         assertHTMLEqual(
             rendered,
             """
-            <div data-djc-id-a1bc42>
+            <div data-djc-id-ca1bc42>
                 data1_in_slot1: {'abc': 'def', 'input': 1}
-                <div data-djc-id-a1bc44>
+                <div data-djc-id-ca1bc44>
                     data1_in_slot2: {'abc': 'def', 'input': 1}
                     data2_in_slot2: {'abc': 'def', 'input': 2}
                 </div>
@@ -2060,9 +2060,9 @@ def test_duplicate_slots(self, components_settings, input):
         assertHTMLEqual(
             rendered,
             """
-            <header data-djc-id-a1bc41>Name: Jannete</header>
-            <main data-djc-id-a1bc41>Name: Jannete</main>
-            <footer data-djc-id-a1bc41>Hello</footer>
+            <header data-djc-id-ca1bc41>Name: Jannete</header>
+            <main data-djc-id-ca1bc41>Name: Jannete</main>
+            <footer data-djc-id-ca1bc41>Hello</footer>
             """,
         )
 
@@ -2083,9 +2083,9 @@ def test_duplicate_slots_fallback(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <header data-djc-id-a1bc3f>Default header</header>
-            <main data-djc-id-a1bc3f>Default main header</main>
-            <footer data-djc-id-a1bc3f>Default footer</footer>
+            <header data-djc-id-ca1bc3f>Default header</header>
+            <main data-djc-id-ca1bc3f>Default main header</main>
+            <footer data-djc-id-ca1bc3f>Default footer</footer>
             """,
         )
 
@@ -2110,8 +2110,8 @@ def test_duplicate_slots_nested(self, components_settings):
             rendered,
             """
             OVERRIDDEN!
-            <div class="dashboard-component" data-djc-id-a1bc40>
-                <div class="calendar-component" data-djc-id-a1bc47>
+            <div class="dashboard-component" data-djc-id-ca1bc40>
+                <div class="calendar-component" data-djc-id-ca1bc47>
                     <h1>
                         OVERRIDDEN!
                     </h1>
@@ -2150,8 +2150,8 @@ def test_duplicate_slots_nested_fallback(self, components_settings):
             rendered,
             """
             START
-            <div class="dashboard-component" data-djc-id-a1bc3f>
-                <div class="calendar-component" data-djc-id-a1bc46>
+            <div class="dashboard-component" data-djc-id-ca1bc3f>
+                <div class="calendar-component" data-djc-id-ca1bc46>
                     <h1>
                         NESTED
                     </h1>
@@ -2281,11 +2281,11 @@ def test_slot_context__django(self):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc45>
+            <custom-template data-djc-id-ca1bc45>
                 <header>Name: Igor</header>
                 <main>Day: Monday</main>
                 <footer>
-                    <custom-template data-djc-id-a1bc49>
+                    <custom-template data-djc-id-ca1bc49>
                         <header>Name2: Joe2</header>
                         <main>Day2: Monday</main>
                         <footer>Default footer</footer>
@@ -2300,11 +2300,11 @@ def test_slot_context__django(self):
         assertHTMLEqual(
             rendered2,
             """
-            <custom-template data-djc-id-a1bc4a>
+            <custom-template data-djc-id-ca1bc4a>
                 <header>Name: Igor</header>
                 <main>Day: Monday</main>
                 <footer>
-                    <custom-template data-djc-id-a1bc4b>
+                    <custom-template data-djc-id-ca1bc4b>
                         <header>Name2: Joe2</header>
                         <main>Day2: Monday</main>
                         <footer>Default footer</footer>
@@ -2322,11 +2322,11 @@ def test_slot_context__isolated(self):
         assertHTMLEqual(
             rendered,
             """
-            <custom-template data-djc-id-a1bc45>
+            <custom-template data-djc-id-ca1bc45>
                 <header>Name: Jannete</header>
                 <main>Day: Monday</main>
                 <footer>
-                    <custom-template data-djc-id-a1bc49>
+                    <custom-template data-djc-id-ca1bc49>
                         <header>Name2: Jannete</header>
                         <main>Day2: Monday</main>
                         <footer>Default footer</footer>
@@ -2341,11 +2341,11 @@ def test_slot_context__isolated(self):
         assertHTMLEqual(
             rendered2,
             """
-            <custom-template data-djc-id-a1bc4a>
+            <custom-template data-djc-id-ca1bc4a>
                 <header>Name: </header>
                 <main>Day: Monday</main>
                 <footer>
-                    <custom-template data-djc-id-a1bc4b>
+                    <custom-template data-djc-id-ca1bc4b>
                         <header>Name2: </header>
                         <main>Day2: Monday</main>
                         <footer>Default footer</footer>
diff --git a/tests/test_templatetags_templating.py b/tests/test_templatetags_templating.py
index 023bd01ed..3ec6a1205 100644
--- a/tests/test_templatetags_templating.py
+++ b/tests/test_templatetags_templating.py
@@ -36,7 +36,7 @@ def test_default_slot_contents_render_correctly(self, components_settings):
         """
         template = Template(template_str)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, '<div id="outer" data-djc-id-a1bc3f>Default</div>')
+        assertHTMLEqual(rendered, '<div id="outer" data-djc-id-ca1bc3f>Default</div>')
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_inner_slot_overriden(self, components_settings):
@@ -50,7 +50,7 @@ def test_inner_slot_overriden(self, components_settings):
         """
         template = Template(template_str)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, '<div id="outer" data-djc-id-a1bc40>Override</div>')
+        assertHTMLEqual(rendered, '<div id="outer" data-djc-id-ca1bc40>Override</div>')
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_outer_slot_overriden(self, components_settings):
@@ -62,7 +62,7 @@ def test_outer_slot_overriden(self, components_settings):
         """
         template = Template(template_str)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, "<p data-djc-id-a1bc40>Override</p>")
+        assertHTMLEqual(rendered, "<p data-djc-id-ca1bc40>Override</p>")
 
     @djc_test(parametrize=PARAMETRIZE_CONTEXT_BEHAVIOR)
     def test_both_overriden_and_inner_removed(self, components_settings):
@@ -77,7 +77,7 @@ def test_both_overriden_and_inner_removed(self, components_settings):
         """
         template = Template(template_str)
         rendered = template.render(Context({}))
-        assertHTMLEqual(rendered, "<p data-djc-id-a1bc41>Override</p>")
+        assertHTMLEqual(rendered, "<p data-djc-id-ca1bc41>Override</p>")
 
     # NOTE: Second arg in tuple is expected name in nested fill. In "django" mode,
     # the value should be overridden by the component, while in "isolated" it should
@@ -138,9 +138,9 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
         assertHTMLEqual(
             rendered,
             f"""
-            <custom-template data-djc-id-a1bc45>
+            <custom-template data-djc-id-ca1bc45>
                 <header>
-                    <custom-template data-djc-id-a1bc49>
+                    <custom-template data-djc-id-ca1bc49>
                         <header>Name2: {expected}</header>
                         <main>Day2: Monday</main>
                         <footer>XYZ</footer>
@@ -200,8 +200,8 @@ def test_default_content_if_no_slots(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <p id="a" data-djc-id-a1bc40>Default A</p>
-            <p id="b" data-djc-id-a1bc43>Default B</p>
+            <p id="a" data-djc-id-ca1bc40>Default A</p>
+            <p id="b" data-djc-id-ca1bc43>Default B</p>
             """,
         )
 
@@ -222,8 +222,8 @@ def test_one_slot_overridden(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <p id="a" data-djc-id-a1bc42>Default A</p>
-            <p id="b" data-djc-id-a1bc45>Override B</p>
+            <p id="a" data-djc-id-ca1bc42>Default A</p>
+            <p id="b" data-djc-id-ca1bc45>Override B</p>
             """,
         )
 
@@ -246,8 +246,8 @@ def test_both_slots_overridden(self, components_settings):
         assertHTMLEqual(
             rendered,
             """
-            <p id="a" data-djc-id-a1bc44>Override A</p>
-            <p id="b" data-djc-id-a1bc47>Override B</p>
+            <p id="a" data-djc-id-ca1bc44>Override A</p>
+            <p id="b" data-djc-id-ca1bc47>Override B</p>
             """,
         )
 
@@ -696,11 +696,11 @@ def get_context_data(self, name: Optional[str] = None) -> Dict[str, Any]:
         assertHTMLEqual(
             rendered,
             f"""
-            <custom-template data-djc-id-a1bc45>
+            <custom-template data-djc-id-ca1bc45>
                 <header>Name: {first_name}</header>
                 <main>Day: Monday</main>
                 <footer>
-                    <custom-template data-djc-id-a1bc49>
+                    <custom-template data-djc-id-ca1bc49>
                         <header>Name2: {second_name}</header>
                         <main>Day2: Monday</main>
                         <footer>Default footer</footer>
@@ -732,8 +732,8 @@ def test_component_nesting_component_without_fill(self, components_settings, exp
         template = Template(template_str)
         rendered = template.render(Context({"items": [1, 2, 3]}))
         expected = f"""
-            <div class="dashboard-component" data-djc-id-a1bc3f>
-            <div class="calendar-component" data-djc-id-a1bc44>
+            <div class="dashboard-component" data-djc-id-ca1bc3f>
+            <div class="calendar-component" data-djc-id-ca1bc44>
                 <h1>
                 Welcome to your dashboard!
                 </h1>
@@ -774,8 +774,8 @@ def test_component_nesting_slot_inside_component_fill(self, components_settings,
         template = Template(template_str)
         rendered = template.render(Context({"items": [1, 2, 3]}))
         expected = f"""
-            <div class="dashboard-component" data-djc-id-a1bc40>
-            <div class="calendar-component" data-djc-id-a1bc45>
+            <div class="dashboard-component" data-djc-id-ca1bc40>
+            <div class="calendar-component" data-djc-id-ca1bc45>
                 <h1>
                 Whoa!
                 </h1>
@@ -830,14 +830,14 @@ def get_context_data(self, items, *args, **kwargs) -> Dict[str, Any]:
 
         expected = """
             ITEMS: [{'value': 1}, {'value': 2}, {'value': 3}]
-            <li data-djc-id-a1bc3f>
-                <div data-djc-id-a1bc41> 1 </div>
+            <li data-djc-id-ca1bc3f>
+                <div data-djc-id-ca1bc41> 1 </div>
             </li>
-            <li data-djc-id-a1bc3f>
-                <div data-djc-id-a1bc43> 2 </div>
+            <li data-djc-id-ca1bc3f>
+                <div data-djc-id-ca1bc43> 2 </div>
             </li>
-            <li data-djc-id-a1bc3f>
-                <div data-djc-id-a1bc44> 3 </div>
+            <li data-djc-id-ca1bc3f>
+                <div data-djc-id-ca1bc44> 3 </div>
             </li>
         """
         assertHTMLEqual(rendered, expected)
@@ -917,7 +917,7 @@ class TestBase(Component):
 
         expected = """
             <!DOCTYPE html>
-            <html lang="en" data-djc-id-a1bc3e data-djc-id-a1bc43 data-djc-id-a1bc47><head>
+            <html lang="en" data-djc-id-ca1bc3e data-djc-id-ca1bc43 data-djc-id-ca1bc47><head>
                 <meta charset="UTF-8">
                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -974,8 +974,8 @@ def test_component_nesting_component_with_slot_default(self, components_settings
         template = Template(template_str)
         rendered = template.render(Context({"items": [1, 2]}))
         expected = f"""
-            <div class="dashboard-component" data-djc-id-a1bc40>
-            <div class="calendar-component" data-djc-id-a1bc45>
+            <div class="dashboard-component" data-djc-id-ca1bc40>
+            <div class="calendar-component" data-djc-id-ca1bc45>
                 <h1>
                 Hello! Welcome to your dashboard!
                 </h1>


Reviews:
user: login: JuroOravec
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-14T10:00:30Z
user: login: EmilStenstrom
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-14T12:19:49Z
user: login: JuroOravec
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-14T16:27:36Z

Review comments:
diff_hunk: @@ -0,0 +1,3 @@
+UID_LENGTH = 6
path: src/django_components/constants.py
user: login: JuroOravec
body: Defined the ID length and the prefix here in `constants.py`, so that, if we ever need to change the prefix or the length, it would be only a matter of changing these and updating the tests.
created_at: 2025-04-14T10:00:29Z
author_association: COLLABORATOR
diff_hunk: @@ -51,6 +51,26 @@ multiple times, the ID will be different for each call.
 
 It is available as [`self.id`](../../../reference/api#django_components.Component.id).
 
+The ID is a 7-letter alphanumeric string in the format `cXXXXXX`,
+where `XXXXXX` is a random string of 6 alphanumeric characters (case-sensitive).
+
+E.g. `c1a2b3c`.
+
+A single render ID has a chance of collision 1 in 57 billion. However, due to birthday paradox, the chance of collision increases to 1% when approaching ~33K render IDs.
+
+Thus, there is currently a soft-cap of ~30K components rendered on a single page.
+
+If you need to expand this limit, please open an issue on GitHub.
+
+```python
+class Table(Component):
+    def get_context_data(self, *args, **attrs):
+        # Access component's ID
+        assert self.id == "djc1A2b3c"
path: docs/concepts/fundamentals/render_api.md
user: login: EmilStenstrom
body: @JuroOravec I think this should be without the "dj" prefix?
created_at: 2025-04-14T12:19:49Z
author_association: COLLABORATOR
diff_hunk: @@ -51,6 +51,26 @@ multiple times, the ID will be different for each call.
 
 It is available as [`self.id`](../../../reference/api#django_components.Component.id).
 
+The ID is a 7-letter alphanumeric string in the format `cXXXXXX`,
+where `XXXXXX` is a random string of 6 alphanumeric characters (case-sensitive).
+
+E.g. `c1a2b3c`.
+
+A single render ID has a chance of collision 1 in 57 billion. However, due to birthday paradox, the chance of collision increases to 1% when approaching ~33K render IDs.
+
+Thus, there is currently a soft-cap of ~30K components rendered on a single page.
+
+If you need to expand this limit, please open an issue on GitHub.
+
+```python
+class Table(Component):
+    def get_context_data(self, *args, **attrs):
+        # Access component's ID
+        assert self.id == "djc1A2b3c"
path: docs/concepts/fundamentals/render_api.md
user: login: JuroOravec
body: Thanks, you're right, I'll include the fix in the next PR :)
created_at: 2025-04-14T16:27:36Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-14T09:48:27Z
body: ## Performance Benchmark Results

Comparing PR changes against master branch:


Benchmarks that have stayed the same:

| Change   | Before [fc026cbd]    | After [a5f5916e]    |   Ratio | Benchmark (Parameter)                                             |
|----------|----------------------|---------------------|---------|-------------------------------------------------------------------|
|          | 73.7±0.8ms           | 74.0±1ms            |       1 | Components vs Django.timeraw_render_lg_first('django')            |
|          | 266±2ms              | 266±2ms             |       1 | Components vs Django.timeraw_render_lg_first('django-components') |

author_association: CONTRIBUTOR
user: login: JuroOravec
created_at: 2025-04-14T10:01:06Z
body: cc @EmilStenstrom
author_association: COLLABORATOR