From 55b88ef7dce28f89c66c2ef1435db08ee390f79b Mon Sep 17 00:00:00 2001
From: Mateusz <43219043+Trochonovitz@users.noreply.github.com>
Date: Fri, 14 Apr 2023 15:11:40 +0200
Subject: [PATCH] Snippets: removed fixed width from examples (#1590)

* Snippets: removed fixed width from examples

* Buttons, Templates: reversed changes
---
 .../docs/standard/components/cards/index.html |   8 +-
 .../docs/standard/forms/datepicker/index.html |  24 +-
 .../docs/standard/forms/file-input/index.html |  12 +-
 .../standard/forms/input-group/index.html     |  56 +-
 .../docs/standard/forms/inputs/index.html     |  85 +--
 .../docs/standard/forms/search/index.html     |  10 +-
 .../docs/standard/forms/select/index.html     | 521 ++++++++----------
 .../docs/standard/forms/switch/index.html     |  26 +-
 .../docs/standard/forms/textarea/index.html   |   2 +-
 .../docs/standard/forms/timepicker/index.html |  63 +--
 10 files changed, 372 insertions(+), 435 deletions(-)

diff --git a/site/content/docs/standard/components/cards/index.html b/site/content/docs/standard/components/cards/index.html
index 1e28979f0..1eecdf97e 100644
--- a/site/content/docs/standard/components/cards/index.html
+++ b/site/content/docs/standard/components/cards/index.html
@@ -59,7 +59,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="block max-w-[22rem] rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
+        class="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
         <h5
           class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
           Card title
@@ -421,7 +421,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="block max-w-[22rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
+        class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
         <a href="#!">
           <img
             class="rounded-t-lg"
@@ -528,7 +528,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="block max-w-[22rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
+        class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
         <a href="#!" data-te-ripple-init data-te-ripple-color="light">
           <img
             class="rounded-t-lg"
@@ -622,7 +622,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="block max-w-[22rem] rounded-lg bg-white text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
+        class="block rounded-lg bg-white text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
         <div
           class="border-b-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50">
           Featured
diff --git a/site/content/docs/standard/forms/datepicker/index.html b/site/content/docs/standard/forms/datepicker/index.html
index e619c7aad..4060c08aa 100644
--- a/site/content/docs/standard/forms/datepicker/index.html
+++ b/site/content/docs/standard/forms/datepicker/index.html
@@ -57,7 +57,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         data-te-datepicker-init
         data-te-input-wrapper-init>
         <input
@@ -399,7 +399,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         data-te-datepicker-init
         data-te-inline="true"
         data-te-input-wrapper-init>
@@ -471,7 +471,7 @@
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-datepicker-init>
+      <div class="relative mb-3" data-te-datepicker-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -640,7 +640,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         data-te-datepicker-init
         data-te-format="dd, mmm, yyyy"
         data-te-input-wrapper-init>
@@ -893,7 +893,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         id="datepicker-with-limits"
         data-te-input-wrapper-init>
         <input
@@ -980,7 +980,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         id="datepicker-disable-past"
         data-te-input-wrapper-init>
         <input
@@ -1065,7 +1065,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         id="datepicker-disable-future"
         data-te-input-wrapper-init>
         <input
@@ -1153,7 +1153,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         id="datepicker-disabled-dates"
         data-te-input-wrapper-init>
         <input
@@ -1250,7 +1250,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         data-te-datepicker-init
         data-te-input-wrapper-init>
         <input
@@ -1337,7 +1337,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         data-te-datepicker-init
         data-te-input-wrapper-init>
         <input
@@ -1423,7 +1423,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         id="datepicker-close-without-confirmation"
         data-te-input-wrapper-init>
         <input
@@ -1510,7 +1510,7 @@ <h2 class="mb-2 mt-0 text-2xl font-semibold leading-normal">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative mb-3"
         id="datepicker-remove-action-buttons"
         data-te-input-wrapper-init>
         <input
diff --git a/site/content/docs/standard/forms/file-input/index.html b/site/content/docs/standard/forms/file-input/index.html
index be6392725..7afe0b6f8 100644
--- a/site/content/docs/standard/forms/file-input/index.html
+++ b/site/content/docs/standard/forms/file-input/index.html
@@ -56,7 +56,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 w-96">
+      <div class="mb-3">
         <label
           for="formFile"
           class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
@@ -381,7 +381,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 w-96">
+      <div class="mb-3">
         <label
           for="formFileMultiple"
           class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
@@ -438,7 +438,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 w-96">
+      <div class="mb-3">
         <label
           for="formFileDisabled"
           class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
@@ -472,7 +472,7 @@
   <!-- prettier-ignore -->
   {{< twsnippet/demo id="example4">}}
   <div class="flex justify-center">
-    <div class="mb-3 w-96">
+    <div class="mb-3">
       <label
         for="formFileSm"
         class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
@@ -491,7 +491,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 w-96">
+      <div class="mb-3">
         <label
           for="formFileSm"
           class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
@@ -543,7 +543,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 w-96">
+      <div class="mb-3">
         <label
           for="formFileLg"
           class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
diff --git a/site/content/docs/standard/forms/input-group/index.html b/site/content/docs/standard/forms/input-group/index.html
index a0ed5fd16..86c22733f 100644
--- a/site/content/docs/standard/forms/input-group/index.html
+++ b/site/content/docs/standard/forms/input-group/index.html
@@ -125,7 +125,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           id="basic-addon1"
@@ -139,7 +139,7 @@
           aria-describedby="basic-addon1" />
       </div>
 
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <input
           type="text"
           class="relative m-0 block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
@@ -158,7 +158,7 @@
         class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
         >Your vanity URL</label
       >
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           id="basic-addon3"
@@ -171,7 +171,7 @@
           aria-describedby="basic-addon3" />
       </div>
 
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           >$</span
@@ -186,7 +186,7 @@
         >
       </div>
 
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <input
           type="text"
           class="relative m-0 block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
@@ -203,7 +203,7 @@
           aria-label="Server" />
       </div>
 
-      <div class="relative flex w-full flex-wrap items-stretch">
+      <div class="relative flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           >With textarea</span
@@ -526,7 +526,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative flex w-full flex-nowrap items-stretch">
+      <div class="relative flex flex-nowrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           id="addon-wrapping"
@@ -607,7 +607,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-2 py-[0.17rem] text-center text-sm font-normal leading-[1.5] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           id="inputGroup-sizing-sm"
@@ -620,7 +620,7 @@
           aria-describedby="inputGroup-sizing-sm" />
       </div>
 
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           id="inputGroup-sizing-default"
@@ -633,7 +633,7 @@
           aria-describedby="inputGroup-sizing-default" />
       </div>
 
-      <div class="relative flex w-full flex-wrap items-stretch">
+      <div class="relative flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-4 py-[0.45rem] text-center text-xl font-normal text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           id="inputGroup-sizing-lg"
@@ -705,7 +705,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <div
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 pb-[0.27rem] pt-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200">
           <input
@@ -720,7 +720,7 @@
           aria-label="Text input with checkbox" />
       </div>
 
-      <div class="relative flex w-full flex-wrap items-stretch">
+      <div class="relative flex flex-wrap items-stretch">
         <div
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200">
           <input
@@ -776,7 +776,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative flex w-full flex-wrap items-stretch">
+      <div class="relative flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           >First and last name</span
@@ -849,7 +849,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <span
           class="flex items-center whitespace-nowrap rounded-l border border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           >$</span
@@ -863,7 +863,7 @@
           class="relative m-0 -ml-px block w-[1px] min-w-0 flex-auto rounded-r border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary" />
       </div>
 
-      <div class="relative flex w-full flex-wrap items-stretch">
+      <div class="relative flex flex-wrap items-stretch">
         <input
           type="text"
           class="relative m-0 -ml-px block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
@@ -932,7 +932,7 @@
     </button>
   </div>
 
-  <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+  <div class="relative mb-4 flex flex-wrap items-stretch">
     <button
       class="z-[2] inline-block rounded-l border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:z-[3] focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
       type="button"
@@ -952,7 +952,7 @@
       aria-label="Example text with two button addons" />
   </div>
 
-  <div class="relative flex w-full flex-wrap items-stretch">
+  <div class="relative flex flex-wrap items-stretch">
     <input
       type="text"
       class="relative m-0 -mr-0.5 block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
@@ -978,7 +978,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <button
           class="z-[2] inline-block rounded-l border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:z-[3] focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
           data-te-ripple-init
@@ -994,7 +994,7 @@
           aria-describedby="button-addon1" />
       </div>
 
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <input
           type="text"
           class="relative m-0 -mr-0.5 block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
@@ -1010,7 +1010,7 @@
         </button>
       </div>
 
-      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
+      <div class="relative mb-4 flex flex-wrap items-stretch">
         <button
           class="z-[2] inline-block rounded-l border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:z-[3] focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
           type="button"
@@ -1030,7 +1030,7 @@
           aria-label="Example text with two button addons" />
       </div>
 
-      <div class="relative flex w-full flex-wrap items-stretch">
+      <div class="relative flex flex-wrap items-stretch">
         <input
           type="text"
           class="relative m-0 -mr-0.5 block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
@@ -1364,7 +1364,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-4 flex w-full flex-wrap items-stretch"
+        class="relative mb-4 flex flex-wrap items-stretch"
         data-te-dropdown-ref>
         <button
           class="z-[2] flex items-center whitespace-nowrap rounded-l border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:z-[3] focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
@@ -1435,7 +1435,7 @@
       </div>
 
       <div
-        class="relative mb-4 flex w-full flex-wrap items-stretch"
+        class="relative mb-4 flex flex-wrap items-stretch"
         data-te-dropdown-ref>
         <input
           type="text"
@@ -1505,9 +1505,7 @@
         </ul>
       </div>
 
-      <div
-        class="relative flex w-full flex-wrap items-stretch"
-        data-te-dropdown-ref>
+      <div class="relative flex flex-wrap items-stretch" data-te-dropdown-ref>
         <button
           class="z-[2] flex items-center whitespace-nowrap rounded-l border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:z-[3] focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
           type="button"
@@ -1691,7 +1689,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative flex w-full flex-wrap items-stretch">
+      <div class="relative flex flex-wrap items-stretch">
         <label
           class="flex items-center whitespace-nowrap rounded-l border border-r-0 border-solid border-neutral-300 px-3 py-[0.25rem] text-center text-base font-normal leading-[1.6] text-neutral-700 dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200"
           for="inputGroupSelect01"
@@ -1787,7 +1785,7 @@
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-4 flex w-full items-stretch"
+        class="relative mb-4 flex items-stretch"
         data-te-input-wrapper-init
         data-te-input-group-ref>
         <span
@@ -1811,7 +1809,7 @@
       </div>
 
       <div
-        class="relative mb-4 flex w-full items-stretch"
+        class="relative mb-4 flex items-stretch"
         data-te-input-wrapper-init
         data-te-input-group-ref>
         <input
diff --git a/site/content/docs/standard/forms/inputs/index.html b/site/content/docs/standard/forms/inputs/index.html
index 770c798e1..3742be810 100644
--- a/site/content/docs/standard/forms/inputs/index.html
+++ b/site/content/docs/standard/forms/inputs/index.html
@@ -60,7 +60,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -423,7 +423,8 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <!--Large input-->
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -436,7 +437,8 @@
         </label>
       </div>
 
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <!--Default input-->
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -448,7 +450,8 @@
         </label>
       </div>
 
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <!--Small input-->
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.33rem] text-xs leading-[1.5] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -518,7 +521,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-neutral-100 px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -589,7 +592,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-neutral-100 px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -658,7 +661,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -726,7 +729,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="email"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -793,7 +796,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="password"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -859,7 +862,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="number"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -926,7 +929,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="tel"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -992,7 +995,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="url"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -1058,7 +1061,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <textarea
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
           id="exampleFormControlTextarea1"
@@ -1130,7 +1133,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -1208,7 +1211,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -1295,32 +1298,34 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div>
-        <div class="relative mb-3 xl:w-96">
-          <input
-            type="email"
-            class="peer m-0 block h-[58px] w-full rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-4 text-base font-normal leading-tight text-neutral-700 transition duration-200 ease-linear placeholder:text-transparent focus:border-primary focus:pb-[0.625rem] focus:pt-[1.625rem] focus:text-neutral-700 focus:outline-none peer-focus:text-primary dark:border-neutral-600 dark:text-neutral-200 dark:focus:border-primary dark:peer-focus:text-primary [&:not(:placeholder-shown)]:pb-[0.625rem] [&:not(:placeholder-shown)]:pt-[1.625rem]"
-            id="floatingInput"
-            placeholder="name@example.com" />
-          <label
-            for="floatingInput"
-            class="pointer-events-none absolute left-0 top-0 origin-[0_0] border border-solid border-transparent px-3 py-4 text-neutral-500 transition-[opacity,_transform] duration-200 ease-linear peer-focus:-translate-y-2 peer-focus:translate-x-[0.15rem] peer-focus:scale-[0.85] peer-focus:text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:translate-x-[0.15rem] peer-[:not(:placeholder-shown)]:scale-[0.85] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
-            >Email address</label
-          >
-        </div>
-        <div class="relative mb-3 xl:w-96">
-          <input
-            type="password"
-            class="peer m-0 block h-[58px] w-full rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-4 text-base font-normal leading-tight text-neutral-700 transition duration-200 ease-linear placeholder:text-transparent focus:border-primary focus:pb-[0.625rem] focus:pt-[1.625rem] focus:text-neutral-700 focus:shadow-te-primary focus:outline-none peer-focus:text-primary dark:border-neutral-600 dark:text-neutral-200 dark:focus:border-primary dark:peer-focus:text-primary [&:not(:placeholder-shown)]:pb-[0.625rem] [&:not(:placeholder-shown)]:pt-[1.625rem]"
-            id="floatingPassword"
-            placeholder="Password" />
-          <label
-            for="floatingPassword"
-            class="pointer-events-none absolute left-0 top-0 origin-[0_0] border border-solid border-transparent px-3 py-4 text-neutral-500 transition-[opacity,_transform] duration-200 ease-linear peer-focus:-translate-y-2 peer-focus:translate-x-[0.15rem] peer-focus:scale-[0.85] peer-focus:text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:translate-x-[0.15rem] peer-[:not(:placeholder-shown)]:scale-[0.85] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
-            >Password</label
-          >
-        </div>
+      <!--Email input-->
+      <div class="relative mb-3">
+        <input
+          type="email"
+          class="peer m-0 block h-[58px] w-full rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-4 text-base font-normal leading-tight text-neutral-700 transition duration-200 ease-linear placeholder:text-transparent focus:border-primary focus:pb-[0.625rem] focus:pt-[1.625rem] focus:text-neutral-700 focus:outline-none peer-focus:text-primary dark:border-neutral-600 dark:text-neutral-200 dark:focus:border-primary dark:peer-focus:text-primary [&:not(:placeholder-shown)]:pb-[0.625rem] [&:not(:placeholder-shown)]:pt-[1.625rem]"
+          id="floatingInput"
+          placeholder="name@example.com" />
+        <label
+          for="floatingInput"
+          class="pointer-events-none absolute left-0 top-0 origin-[0_0] border border-solid border-transparent px-3 py-4 text-neutral-500 transition-[opacity,_transform] duration-200 ease-linear peer-focus:-translate-y-2 peer-focus:translate-x-[0.15rem] peer-focus:scale-[0.85] peer-focus:text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:translate-x-[0.15rem] peer-[:not(:placeholder-shown)]:scale-[0.85] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+          >Email address</label
+        >
       </div>
+
+      <!--Password input-->
+      <div class="relative mb-3">
+        <input
+          type="password"
+          class="peer m-0 block h-[58px] w-full rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-4 text-base font-normal leading-tight text-neutral-700 transition duration-200 ease-linear placeholder:text-transparent focus:border-primary focus:pb-[0.625rem] focus:pt-[1.625rem] focus:text-neutral-700 focus:shadow-te-primary focus:outline-none peer-focus:text-primary dark:border-neutral-600 dark:text-neutral-200 dark:focus:border-primary dark:peer-focus:text-primary [&:not(:placeholder-shown)]:pb-[0.625rem] [&:not(:placeholder-shown)]:pt-[1.625rem]"
+          id="floatingPassword"
+          placeholder="Password" />
+        <label
+          for="floatingPassword"
+          class="pointer-events-none absolute left-0 top-0 origin-[0_0] border border-solid border-transparent px-3 py-4 text-neutral-500 transition-[opacity,_transform] duration-200 ease-linear peer-focus:-translate-y-2 peer-focus:translate-x-[0.15rem] peer-focus:scale-[0.85] peer-focus:text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:translate-x-[0.15rem] peer-[:not(:placeholder-shown)]:scale-[0.85] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+          >Password</label
+        >
+      </div>
+
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
diff --git a/site/content/docs/standard/forms/search/index.html b/site/content/docs/standard/forms/search/index.html
index 6ceb513ae..02acb386b 100644
--- a/site/content/docs/standard/forms/search/index.html
+++ b/site/content/docs/standard/forms/search/index.html
@@ -64,7 +64,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
+      <div class="mb-3">
         <div class="relative mb-4 flex w-full flex-wrap items-stretch">
           <input
             type="search"
@@ -427,7 +427,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
+      <div class="mb-3">
         <div class="relative mb-4 flex w-full flex-wrap items-stretch">
           <input
             type="search"
@@ -501,7 +501,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
+      <div class="mb-3">
         <div class="relative mb-4 flex w-full flex-wrap items-stretch">
           <input
             type="search"
@@ -567,7 +567,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
+      <div class="mb-3">
         <input
           type="search"
           class="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
@@ -616,7 +616,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <input
           type="search"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
diff --git a/site/content/docs/standard/forms/select/index.html b/site/content/docs/standard/forms/select/index.html
index 062eef5df..70bcf3f3c 100644
--- a/site/content/docs/standard/forms/select/index.html
+++ b/site/content/docs/standard/forms/select/index.html
@@ -54,18 +54,16 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-          <option value="6">Six</option>
-          <option value="7">Seven</option>
-          <option value="8">Eight</option>
-        </select>
-      </div>
+      <select data-te-select-init>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+        <option value="6">Six</option>
+        <option value="7">Seven</option>
+        <option value="8">Eight</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -386,19 +384,17 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init multiple>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-          <option value="6">Six</option>
-          <option value="7">Seven</option>
-          <option value="8">Eight</option>
-        </select>
-        <label data-te-select-label-ref>Example label</label>
-      </div>
+      <select data-te-select-init multiple>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+        <option value="6">Six</option>
+        <option value="7">Seven</option>
+        <option value="8">Eight</option>
+      </select>
+      <label data-te-select-label-ref>Example label</label>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -449,16 +445,14 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-        <label data-te-select-label-ref>Example label</label>
-      </div>
+      <select data-te-select-init>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
+      <label data-te-select-label-ref>Example label</label>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -511,18 +505,16 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select
-          data-te-select-init
-          data-te-select-placeholder="Example placeholder"
-          multiple>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-      </div>
+      <select
+        data-te-select-init
+        data-te-select-placeholder="Example placeholder"
+        multiple>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -596,43 +588,36 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <!--Select small-->
-        <div class="mb-8">
-          <select data-te-select-init data-te-select-size="sm">
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-            <option value="4">Four</option>
-            <option value="5">Five</option>
-          </select>
-          <label data-te-select-label-ref>Size sm</label>
-        </div>
+      <!--Select small-->
+      <select data-te-select-init data-te-select-size="sm">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
+      <label data-te-select-label-ref>Size sm</label>
 
-        <!--Select default-->
-        <div class="mb-8">
-          <select data-te-select-init>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-            <option value="4">Four</option>
-            <option value="5">Five</option>
-          </select>
-          <label data-te-select-label-ref>Size default</label>
-        </div>
+      <!--Select default-->
+      <select data-te-select-init>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
+      <label data-te-select-label-ref>Size default</label>
+
+      <!--Select large-->
+      <select data-te-select-init data-te-select-size="lg">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
+      <label data-te-select-label-ref>Size lg</label>
 
-        <!--Select large-->
-        <div>
-          <select data-te-select-init data-te-select-size="lg">
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-            <option value="4">Four</option>
-            <option value="5">Five</option>
-          </select>
-          <label data-te-select-label-ref>Size lg</label>
-        </div>
-      </div>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -681,15 +666,13 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init disabled>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-      </div>
+      <select data-te-select-init disabled>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -738,15 +721,13 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init>
-          <option value="1">One</option>
-          <option value="2" disabled>Two</option>
-          <option value="3" disabled>Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-      </div>
+      <select data-te-select-init>
+        <option value="1">One</option>
+        <option value="2" disabled>Two</option>
+        <option value="3" disabled>Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -795,15 +776,13 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init data-te-select-clear-button="true">
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-      </div>
+      <select data-te-select-init data-te-select-clear-button="true">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -861,23 +840,21 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
+      <select data-te-select-init>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
 
-        <div class="p-4" data-te-select-custom-content-ref>
-          <button
-            class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
-            data-te-ripple-init
-            data-te-ripple-color="white">
-            Save
-          </button>
-        </div>
+      <div class="p-4" data-te-select-custom-content-ref>
+        <button
+          class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+          data-te-ripple-init
+          data-te-ripple-color="white">
+          Save
+        </button>
       </div>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
@@ -927,15 +904,13 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init data-te-select-visible-options="3">
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-      </div>
+      <select data-te-select-init data-te-select-visible-options="3">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -994,25 +969,23 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init data-te-select-option-height="52">
-          <option value="1" data-te-select-secondary-text="Secondary text">
-            One
-          </option>
-          <option value="2" data-te-select-secondary-text="Secondary text">
-            Two
-          </option>
-          <option value="3" data-te-select-secondary-text="Secondary text">
-            Three
-          </option>
-          <option value="4" data-te-select-secondary-text="Secondary text">
-            Four
-          </option>
-          <option value="5" data-te-select-secondary-text="Secondary text">
-            Five
-          </option>
-        </select>
-      </div>
+      <select data-te-select-init data-te-select-option-height="52">
+        <option value="1" data-te-select-secondary-text="Secondary text">
+          One
+        </option>
+        <option value="2" data-te-select-secondary-text="Secondary text">
+          Two
+        </option>
+        <option value="3" data-te-select-secondary-text="Secondary text">
+          Three
+        </option>
+        <option value="4" data-te-select-secondary-text="Secondary text">
+          Four
+        </option>
+        <option value="5" data-te-select-secondary-text="Secondary text">
+          Five
+        </option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1066,20 +1039,18 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init data-te-select-filter="true">
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-          <option value="6">Six</option>
-          <option value="7">Seven</option>
-          <option value="8">Eight</option>
-          <option value="9">Nine</option>
-          <option value="10">Ten</option>
-        </select>
-      </div>
+      <select data-te-select-init data-te-select-filter="true">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+        <option value="6">Six</option>
+        <option value="7">Seven</option>
+        <option value="8">Eight</option>
+        <option value="9">Nine</option>
+        <option value="10">Ten</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1339,20 +1310,18 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init>
-          <optgroup label="Label 1">
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-          </optgroup>
-          <optgroup label="Label 2">
-            <option value="4">Four</option>
-            <option value="5">Five</option>
-            <option value="6">Six</option>
-          </optgroup>
-        </select>
-      </div>
+      <select data-te-select-init>
+        <optgroup label="Label 1">
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </optgroup>
+        <optgroup label="Label 2">
+          <option value="4">Four</option>
+          <option value="5">Five</option>
+          <option value="6">Six</option>
+        </optgroup>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1421,35 +1390,33 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init>
-          <option
-            value="1"
-            data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp">
-            One
-          </option>
-          <option
-            value="2"
-            data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp">
-            Two
-          </option>
-          <option
-            value="3"
-            data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp">
-            Three
-          </option>
-          <option
-            value="4"
-            data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp">
-            Four
-          </option>
-          <option
-            value="5"
-            data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp">
-            Five
-          </option>
-        </select>
-      </div>
+      <select data-te-select-init>
+        <option
+          value="1"
+          data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp">
+          One
+        </option>
+        <option
+          value="2"
+          data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp">
+          Two
+        </option>
+        <option
+          value="3"
+          data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp">
+          Three
+        </option>
+        <option
+          value="4"
+          data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp">
+          Four
+        </option>
+        <option
+          value="5"
+          data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp">
+          Five
+        </option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1510,15 +1477,13 @@ <h2 class="my-5 text-lg font-bold" id="single-selection">Single selection</h2>
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select id="singleSelection" data-te-select-init>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-      </div>
+      <select id="singleSelection" data-te-select-init>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1571,15 +1536,13 @@ <h2 class="mb-5 text-lg font-bold" id="multi-selection">Multi selection</h2>
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select id="multiSelection" data-te-select-init multiple>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
-      </div>
+      <select id="multiSelection" data-te-select-init multiple>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1645,22 +1608,20 @@ <h2 class="mb-5 text-lg font-bold" id="multi-selection">Multi selection</h2>
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init multiple id="mySelect">
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-        </select>
+      <select data-te-select-init multiple id="mySelect">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+      </select>
 
-        <button
-          id="toggleMySelect"
-          class="mt-4 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
-          data-te-select-toggle="mySelect">
-          Toggle Select
-        </button>
-      </div>
+      <button
+        id="toggleMySelect"
+        class="mt-4 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+        data-te-select-toggle="mySelect">
+        Toggle Select
+      </button>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1727,18 +1688,16 @@ <h2 class="mb-5 text-lg font-bold" id="multi-selection">Multi selection</h2>
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init data-te-select-auto-select="true">
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-          <option value="6">Six</option>
-          <option value="7">Seven</option>
-          <option value="8">Eight</option>
-        </select>
-      </div>
+      <select data-te-select-init data-te-select-auto-select="true">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+        <option value="6">Six</option>
+        <option value="7">Seven</option>
+        <option value="8">Eight</option>
+      </select>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1792,20 +1751,18 @@ <h2 class="mb-5 text-lg font-bold" id="multi-selection">Multi selection</h2>
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="mb-3 xl:w-96">
-        <select data-te-select-init>
-          <option value="" hidden selected></option>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          <option value="4">Four</option>
-          <option value="5">Five</option>
-          <option value="6">Six</option>
-          <option value="7">Seven</option>
-          <option value="8">Eight</option>
-        </select>
-        <label data-te-select-label-ref>Example label</label>
-      </div>
+      <select data-te-select-init>
+        <option value="" hidden selected></option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+        <option value="6">Six</option>
+        <option value="7">Seven</option>
+        <option value="8">Eight</option>
+      </select>
+      <label data-te-select-label-ref>Example label</label>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
@@ -1858,21 +1815,17 @@ <h2 class="mb-5 text-lg font-bold" id="multi-selection">Multi selection</h2>
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="flex justify-center">
-        <div class="mb-3 xl:w-96">
-          <select data-te-select-init>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-            <option value="4">Four</option>
-            <option value="5">Five</option>
-            <option value="6">Six</option>
-            <option value="7">Seven</option>
-            <option value="8">Eight</option>
-          </select>
-          <label data-te-select-label-ref>Example label</label>
-        </div>
-      </div>
+      <select data-te-select-init>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+        <option value="5">Five</option>
+        <option value="6">Six</option>
+        <option value="7">Seven</option>
+        <option value="8">Eight</option>
+      </select>
+      <label data-te-select-label-ref>Example label</label>
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
diff --git a/site/content/docs/standard/forms/switch/index.html b/site/content/docs/standard/forms/switch/index.html
index 9a11eb22c..d940b0fc4 100644
--- a/site/content/docs/standard/forms/switch/index.html
+++ b/site/content/docs/standard/forms/switch/index.html
@@ -549,23 +549,19 @@
       {{< twsnippet/wrapper "HTML" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <!--Default disabled switch without label-->
-      <div class="mb-4">
-        <input
-          class="mr-2 mt-[0.3rem] h-3.5 w-8 appearance-none rounded-[0.4375rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0.1875rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:-mt-[3px] checked:after:ml-[1.0625rem] checked:after:h-5 checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-5 focus:after:w-5 focus:after:rounded-full focus:after:content-[''] checked:focus:border-primary checked:focus:bg-primary checked:focus:before:ml-[1.0625rem] checked:focus:before:scale-100 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-primary dark:checked:after:bg-primary dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca]"
-          type="checkbox"
-          role="switch"
-          id="flexSwitchCheckDefault01" />
-      </div>
+      <input
+        class="mr-2 mt-[0.3rem] h-3.5 w-8 appearance-none rounded-[0.4375rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0.1875rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:-mt-[3px] checked:after:ml-[1.0625rem] checked:after:h-5 checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-5 focus:after:w-5 focus:after:rounded-full focus:after:content-[''] checked:focus:border-primary checked:focus:bg-primary checked:focus:before:ml-[1.0625rem] checked:focus:before:scale-100 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-primary dark:checked:after:bg-primary dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca]"
+        type="checkbox"
+        role="switch"
+        id="flexSwitchCheckDefault01" />
 
       <!--Default switch without label-->
-      <div>
-        <input
-          class="mr-2 mt-[0.3rem] h-3.5 w-8 appearance-none rounded-[0.4375rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0.1875rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:-mt-[3px] checked:after:ml-[1.0625rem] checked:after:h-5 checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-5 focus:after:w-5 focus:after:rounded-full focus:after:content-[''] checked:focus:border-primary checked:focus:bg-primary checked:focus:before:ml-[1.0625rem] checked:focus:before:scale-100 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-primary dark:checked:after:bg-primary dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca]"
-          type="checkbox"
-          role="switch"
-          id="flexSwitchCheckDefault02"
-          checked />
-      </div>
+      <input
+        class="mr-2 mt-[0.3rem] h-3.5 w-8 appearance-none rounded-[0.4375rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0.1875rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:-mt-[3px] checked:after:ml-[1.0625rem] checked:after:h-5 checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-5 focus:after:w-5 focus:after:rounded-full focus:after:content-[''] checked:focus:border-primary checked:focus:bg-primary checked:focus:before:ml-[1.0625rem] checked:focus:before:scale-100 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-primary dark:checked:after:bg-primary dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca]"
+        type="checkbox"
+        role="switch"
+        id="flexSwitchCheckDefault02"
+        checked />
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
diff --git a/site/content/docs/standard/forms/textarea/index.html b/site/content/docs/standard/forms/textarea/index.html
index 8792504b0..c9d76840a 100644
--- a/site/content/docs/standard/forms/textarea/index.html
+++ b/site/content/docs/standard/forms/textarea/index.html
@@ -53,7 +53,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div class="relative mb-3 xl:w-96" data-te-input-wrapper-init>
+      <div class="relative mb-3" data-te-input-wrapper-init>
         <textarea
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
           id="exampleFormControlTextarea1"
diff --git a/site/content/docs/standard/forms/timepicker/index.html b/site/content/docs/standard/forms/timepicker/index.html
index 9da7e386c..c6c9ec1ee 100644
--- a/site/content/docs/standard/forms/timepicker/index.html
+++ b/site/content/docs/standard/forms/timepicker/index.html
@@ -67,10 +67,7 @@
     <div class="pt-4">
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div
-        class="relative mb-3 xl:w-96"
-        data-te-timepicker-init
-        data-te-input-wrapper-init>
+      <div class="relative" data-te-timepicker-init data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -406,7 +403,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-inline-12"
         data-te-input-wrapper-init>
         <input
@@ -485,7 +482,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-inline-24"
         data-te-input-wrapper-init>
         <input
@@ -593,7 +590,7 @@ <h2 class="my-5 text-lg font-bold">With button</h2>
         {{< twsnippet/wrapper "HTML,javascript" >}}
         {{< twsnippet/code active=true lang="HTML" >}}
         <div
-          class="relative mb-3 xl:w-96"
+          class="relative"
           id="timepicker-with-button"
           data-te-timepicker-init
           data-te-input-wrapper-init>
@@ -701,7 +698,7 @@ <h2 class="my-5 text-lg font-bold">With icon</h2>
         {{< twsnippet/wrapper "HTML,javascript" >}}
         {{< twsnippet/code active=true lang="HTML" >}}
         <div
-          class="relative mb-3 xl:w-96"
+          class="relative"
           id="timepicker-with-icon"
           data-te-timepicker-init
           data-te-input-wrapper-init>
@@ -827,7 +824,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-without-icon"
         data-te-timepicker-init>
         <div class="relative" data-te-input-wrapper-init>
@@ -1034,7 +1031,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/code active=true lang="HTML" >}}
       <!--With string PM-->
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-default-time-string-pm"
         data-te-input-wrapper-init>
         <input
@@ -1050,7 +1047,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
       <!--With string AM-->
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-default-time-string-am"
         data-te-input-wrapper-init>
         <input
@@ -1066,7 +1063,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
       <!--With string without AM/PM-->
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-default-time-string-without-pm-am"
         data-te-input-wrapper-init>
         <input
@@ -1082,7 +1079,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
       <!--With string 24h-->
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-default-time-string-24h"
         data-te-input-wrapper-init>
         <input
@@ -1098,7 +1095,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
       <!--With new Date with 12h-->
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-default-time-with-new-date-12h"
         data-te-input-wrapper-init>
         <input
@@ -1114,7 +1111,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
       <!--With new Date with 24h-->
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-default-time-with-new-date-24h"
         data-te-input-wrapper-init>
         <input
@@ -1286,10 +1283,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div
-        id="timepicker-value"
-        class="relative mb-3 xl:w-96"
-        data-te-input-wrapper-init>
+      <div id="timepicker-value" class="relative" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -1381,7 +1375,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         data-te-format24="true"
         id="timepicker-format"
         data-te-input-wrapper-init>
@@ -1459,7 +1453,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript" >}}
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         data-te-with-icon="false"
         data-te-timepicker-init
         data-te-input-wrapper-init
@@ -1528,10 +1522,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div
-        class="relative mb-3 xl:w-96"
-        id="timepicker-inc"
-        data-te-input-wrapper-init>
+      <div class="relative" id="timepicker-inc" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -1602,10 +1593,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div
-        class="relative mb-3 xl:w-96"
-        id="timepicker-max-time"
-        data-te-input-wrapper-init>
+      <div class="relative" id="timepicker-max-time" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -1683,7 +1671,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-max-time-pm"
         data-te-input-wrapper-init>
         <input
@@ -1763,7 +1751,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-max-time-am"
         data-te-input-wrapper-init>
         <input
@@ -1842,10 +1830,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       {{< twsnippet/wrapper "HTML,javascript,umd" >}}
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
-      <div
-        class="relative mb-3 xl:w-96"
-        id="timepicker-min-time"
-        data-te-input-wrapper-init>
+      <div class="relative" id="timepicker-min-time" data-te-input-wrapper-init>
         <input
           type="text"
           class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
@@ -1923,7 +1908,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-min-time-pm"
         data-te-input-wrapper-init>
         <input
@@ -2003,7 +1988,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-min-time-am"
         data-te-input-wrapper-init>
         <input
@@ -2083,7 +2068,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-disable-past"
         data-te-input-wrapper-init>
         <input
@@ -2163,7 +2148,7 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       <!--prettier-ignore-->
       {{< twsnippet/code active=true lang="HTML" >}}
       <div
-        class="relative mb-3 xl:w-96"
+        class="relative"
         id="timepicker-disable-future"
         data-te-input-wrapper-init>
         <input