@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Settings/Forms/SearchEngineForm.stx

@@ -0,0 +1,48 @@
+<script>
+interface SearchEngineFormProps {
+  defaultEngine?: string
+}
+
+const { defaultEngine = 'opensearch' } = defineProps<SearchEngineFormProps>()
+</script>
+<form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-gray-900/10 divide-y">
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Default Search Engine Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your default Search Engine settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="type" class="block font-medium leading-6 text-gray-900 text-sm">Default</label>
+                <div class="mt-2">
+                  <select id="type" name="type" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                    <option {{ defaultEngine == 'opensearch' ? 'selected' : '' }}>opensearch</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/SecurityForm.stx

@@ -0,0 +1,143 @@
+<script>
+interface SecurityFormProps {
+  rateLimitPerMinute?: string
+  countryCodes?: string
+  ipAddresses?: string
+  queryString?: string
+  httpHeaders?: string
+  firewallEnabled?: boolean
+  useIpReputationLists?: boolean
+  useKnownBadInputs?: boolean
+}
+
+const { rateLimitPerMinute = '1000', countryCodes = 'RU,IN', ipAddresses = '56.123.456.789', queryString = 'foo,bar', httpHeaders = 'x-foo,x-bar', firewallEnabled = true, useIpReputationLists = true, useKnownBadInputs = true } = defineProps<SecurityFormProps>()
+</script>
+<form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-gray-900/10 divide-y">
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Firewall
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your firewall settings.
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
+              <div class="col-span-2">
+                <label for="firewall-enabled" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Enabled</label>
+                <div class="mt-2">
+                  <button
+                    type="button"
+                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ firewallEnabled ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                    role="switch"
+                    aria-checked="{{ firewallEnabled ? 'true' : 'false' }}"
+                    data-action="toggle-firewall"
+                  >
+                    <span class="sr-only">Firewall Enabled</span>
+                    <span
+                      aria-hidden="true"
+                      class="pointer-events-none inline-block h-5 w-5 {{ firewallEnabled ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                    ></span>
+                  </button>
+                </div>
+              </div>
+              <div class="col-span-2">
+                <label for="ip-reputation" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Use Ip Reputation Lists</label>
+                <div class="mt-2">
+                  <button
+                    type="button"
+                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ useIpReputationLists ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                    role="switch"
+                    aria-checked="{{ useIpReputationLists ? 'true' : 'false' }}"
+                    data-action="toggle-ip-reputation"
+                  >
+                    <span class="sr-only">Use Ip Reputation Lists</span>
+                    <span
+                      aria-hidden="true"
+                      class="pointer-events-none inline-block h-5 w-5 {{ useIpReputationLists ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                    ></span>
+                  </button>
+                </div>
+              </div>
+              <div class="col-span-2">
+                <label for="bad-inputs" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Use Known Bad Inputs Rule Set</label>
+                <div class="mt-2">
+                  <button
+                    type="button"
+                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ useKnownBadInputs ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                    role="switch"
+                    aria-checked="{{ useKnownBadInputs ? 'true' : 'false' }}"
+                    data-action="toggle-bad-inputs"
+                  >
+                    <span class="sr-only">Use Known Bad Inputs</span>
+                    <span
+                      aria-hidden="true"
+                      class="pointer-events-none inline-block h-5 w-5 {{ useKnownBadInputs ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                    ></span>
+                  </button>
+                </div>
+              </div>
+              <div class="col-span-2">
+                <label for="rate-limit" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Rate Limit per minute</label>
+                <div class="mt-2">
+                  <input
+                    id="rate-limit"
+                    name="rate-limit"
+                    type="text"
+                    value="{{ rateLimitPerMinute }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+              <div class="col-span-2">
+                <label for="country-codes" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Country Codes</label>
+                <div class="mt-2">
+                  <input
+                    id="country-codes"
+                    name="country-codes"
+                    type="text"
+                    value="{{ countryCodes }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+              <div class="sm:col-span-full">
+                <label for="ip-addresses" class="block font-medium leading-6 text-gray-900 text-sm">IP Addresses</label>
+                <div class="mt-2">
+                  <input id="ip-addresses" type="text" name="ip-addresses" value="{{ ipAddresses }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+              <div class="sm:col-span-3">
+                <label for="query-string" class="block font-medium leading-6 text-gray-900 text-sm">Query String</label>
+                <div class="mt-2">
+                  <input id="query-string" type="text" name="query-string" value="{{ queryString }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+              <div class="sm:col-span-3">
+                <label for="http-headers" class="block font-medium leading-6 text-gray-900 text-sm">HTTP Headers</label>
+                <div class="mt-2">
+                  <input id="http-headers" type="text" name="http-headers" value="{{ httpHeaders }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/ServicesForm.stx

@@ -0,0 +1,194 @@
+<script>
+interface ServicesFormProps {
+  awsAccountId?: string
+  awsAppId?: string
+  awsAppKey?: string
+  awsAppRegion?: string
+  algoliaAppId?: string
+  algoliaAppKey?: string
+  meiliAppId?: string
+  meiliAppKey?: string
+  lemonSqueezyAppId?: string
+  lemonSqueezyAppKey?: string
+  stripeAppId?: string
+  stripeAppKey?: string
+}
+
+const { awsAccountId = '', awsAppId = '', awsAppKey = '', awsAppRegion = 'us-east-1', algoliaAppId = '', algoliaAppKey = '', meiliAppId = '', meiliAppKey = '', lemonSqueezyAppId = '', lemonSqueezyAppKey = '', stripeAppId = '', stripeAppKey = '' } = defineProps<ServicesFormProps>()
+</script>
+<form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-gray-900/10 divide-y">
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              AWS Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your AWS settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="aws-account-id" class="block font-medium leading-6 text-gray-900 text-sm">Account ID</label>
+                <div class="mt-2">
+                  <input id="aws-account-id" type="text" name="aws-account-id" value="{{ awsAccountId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="aws-app-id" class="block font-medium leading-6 text-gray-900 text-sm">App ID</label>
+                <div class="mt-2">
+                  <input id="aws-app-id" type="text" name="aws-app-id" value="{{ awsAppId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="aws-app-key" class="block font-medium leading-6 text-gray-900 text-sm">App Key</label>
+                <div class="mt-2">
+                  <input id="aws-app-key" type="password" name="aws-app-key" value="{{ awsAppKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="aws-region" class="block font-medium leading-6 text-gray-900 text-sm">App Region</label>
+                <div class="mt-2">
+                  <input id="aws-region" type="text" name="aws-region" value="{{ awsAppRegion }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Algolia Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Algolia settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="algolia-app-id" class="block font-medium leading-6 text-gray-900 text-sm">App ID</label>
+                <div class="mt-2">
+                  <input id="algolia-app-id" type="text" name="algolia-app-id" value="{{ algoliaAppId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="algolia-app-key" class="block font-medium leading-6 text-gray-900 text-sm">App Key</label>
+                <div class="mt-2">
+                  <input id="algolia-app-key" type="password" name="algolia-app-key" value="{{ algoliaAppKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Meili Search Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Meili Search settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="meili-app-id" class="block font-medium leading-6 text-gray-900 text-sm">App ID</label>
+                <div class="mt-2">
+                  <input id="meili-app-id" type="text" name="meili-app-id" value="{{ meiliAppId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="meili-app-key" class="block font-medium leading-6 text-gray-900 text-sm">App Key</label>
+                <div class="mt-2">
+                  <input id="meili-app-key" type="password" name="meili-app-key" value="{{ meiliAppKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Lemon Squeezy Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Lemon Squeezy settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="lemonsqueezy-app-id" class="block font-medium leading-6 text-gray-900 text-sm">App ID</label>
+                <div class="mt-2">
+                  <input id="lemonsqueezy-app-id" type="text" name="lemonsqueezy-app-id" value="{{ lemonSqueezyAppId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="lemonsqueezy-app-key" class="block font-medium leading-6 text-gray-900 text-sm">App Key</label>
+                <div class="mt-2">
+                  <input id="lemonsqueezy-app-key" type="password" name="lemonsqueezy-app-key" value="{{ lemonSqueezyAppKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Stripe Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Stripe settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="stripe-app-id" class="block font-medium leading-6 text-gray-900 text-sm">App ID</label>
+                <div class="mt-2">
+                  <input id="stripe-app-id" type="text" name="stripe-app-id" value="{{ stripeAppId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="stripe-app-key" class="block font-medium leading-6 text-gray-900 text-sm">App Key</label>
+                <div class="mt-2">
+                  <input id="stripe-app-key" type="password" name="stripe-app-key" value="{{ stripeAppKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/StorageForm.stx

@@ -0,0 +1,191 @@
+<script>
+interface StorageFormProps {
+  defaultStorage?: string
+  s3Key?: string
+  s3Secret?: string
+  s3Region?: string
+  s3Bucket?: string
+  s3Url?: string
+  dropboxKey?: string
+  dropboxSecret?: string
+  dropboxBox?: string
+  meemaKey?: string
+  meemaSecret?: string
+  meemaRegion?: string
+  meemaBucket?: string
+}
+
+const { defaultStorage = 's3', s3Key = 'JKHJK$KJAHKS', s3Secret = 'kldsanko3njksdasjfasdn2m', s3Region = 'us-east-1', s3Bucket = 'stacks', s3Url = 'stacks.s3.amazonaws.com', dropboxKey = 'JKHJK$KJAHKS', dropboxSecret = 'kldsanko3njksdasjfasdn2m', dropboxBox = 'stacks', meemaKey = 'HJDSU41HJJKAD', meemaSecret = 'jkhnb523nbmnb9dsanmeop', meemaRegion = 'us-east-1', meemaBucket = 'stacks' } = defineProps<StorageFormProps>()
+</script>
+<form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-gray-900/10 divide-y">
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Default Storage Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your default Storage settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="type" class="block font-medium leading-6 text-gray-900 text-sm">Default</label>
+                <div class="mt-2">
+                  <select id="type" name="type" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                    <option {{ defaultStorage == 's3' ? 'selected' : '' }}>s3</option>
+                    <option {{ defaultStorage == 'Dropbox' ? 'selected' : '' }}>Dropbox</option>
+                    <option {{ defaultStorage == 'Meema' ? 'selected' : '' }}>Meema</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              AWS S3
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your AWS S3 configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="s3-key" class="block font-medium leading-6 text-gray-900 text-sm">Key</label>
+                <div class="mt-2">
+                  <input id="s3-key" type="text" name="s3-key" value="{{ s3Key }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="s3-secret" class="block font-medium leading-6 text-gray-900 text-sm">Secret</label>
+                <div class="mt-2">
+                  <input id="s3-secret" type="password" name="s3-secret" value="{{ s3Secret }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="s3-region" class="block font-medium leading-6 text-gray-900 text-sm">Region</label>
+                <div class="mt-2">
+                  <input id="s3-region" type="text" name="s3-region" value="{{ s3Region }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="s3-bucket" class="block font-medium leading-6 text-gray-900 text-sm">Bucket</label>
+                <div class="mt-2">
+                  <input id="s3-bucket" type="text" name="s3-bucket" value="{{ s3Bucket }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="s3-url" class="block font-medium leading-6 text-gray-900 text-sm">URL</label>
+                <div class="mt-2">
+                  <input id="s3-url" type="text" name="s3-url" value="{{ s3Url }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Dropbox
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Dropbox configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="dropbox-key" class="block font-medium leading-6 text-gray-900 text-sm">Key</label>
+                <div class="mt-2">
+                  <input id="dropbox-key" type="text" name="dropbox-key" value="{{ dropboxKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="dropbox-secret" class="block font-medium leading-6 text-gray-900 text-sm">Secret</label>
+                <div class="mt-2">
+                  <input id="dropbox-secret" type="password" name="dropbox-secret" value="{{ dropboxSecret }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="dropbox-box" class="block font-medium leading-6 text-gray-900 text-sm">Box</label>
+                <div class="mt-2">
+                  <input id="dropbox-box" type="text" name="dropbox-box" value="{{ dropboxBox }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Meema
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Meema configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="meema-key" class="block font-medium leading-6 text-gray-900 text-sm">Key</label>
+                <div class="mt-2">
+                  <input id="meema-key" type="text" name="meema-key" value="{{ meemaKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="meema-secret" class="block font-medium leading-6 text-gray-900 text-sm">Secret</label>
+                <div class="mt-2">
+                  <input id="meema-secret" type="password" name="meema-secret" value="{{ meemaSecret }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="meema-region" class="block font-medium leading-6 text-gray-900 text-sm">Region</label>
+                <div class="mt-2">
+                  <input id="meema-region" type="text" name="meema-region" value="{{ meemaRegion }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="meema-bucket" class="block font-medium leading-6 text-gray-900 text-sm">Bucket</label>
+                <div class="mt-2">
+                  <input id="meema-bucket" type="text" name="meema-bucket" value="{{ meemaBucket }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/TeamsForm.stx

@@ -0,0 +1,33 @@
+<script>
+interface TeamsFormProps {
+  teamMembers?: string
+}
+
+const { teamMembers = [ } = defineProps<TeamsFormProps>()
+
+{ name: 'Chris', email: 'chris@stacksjs.com', avatar: 'https://pbs.twimg.com/profile_images/1707883193054228480/n98q6t1L_400x400.jpg' },
+    { name: 'Blake', email: 'blake@stacksjs.com', avatar: 'https://pbs.twimg.com/profile_images/1707883193054228480/n98q6t1L_400x400.jpg' },
+    { name: 'Zoltan', email: 'zoltan@stacksjs.com', avatar: 'https://pbs.twimg.com/profile_images/1707883193054228480/n98q6t1L_400x400.jpg' },
+    { name: 'Freddy', email: 'freddy@stacksjs.com', avatar: 'https://pbs.twimg.com/profile_images/1707883193054228480/n98q6t1L_400x400.jpg' },
+    { name: 'Glenn', email: 'glenn@stacksjs.com', avatar: 'https://pbs.twimg.com/profile_images/1707883193054228480/n98q6t1L_400x400.jpg' },
+    { name: 'Dorell', email: 'dorell@stacksjs.com', avatar: 'https://pbs.twimg.com/profile_images/1707883193054228480/n98q6t1L_400x400.jpg' },
+    { name: 'Avery', email: 'avery@stacksjs.com', avatar: 'https://pbs.twimg.com/profile_images/1707883193054228480/n98q6t1L_400x400.jpg' }
+  ]
+</script>
+<div class="bg-white">
+    <div class="mx-auto px-6 lg:px-8 max-w-7xl">
+      <ul role="list" class="grid gap-x-8 gap-y-16 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 mt-20 mx-auto lg:mx-0 max-w-2xl lg:max-w-none text-center">
+        @foreach(teamMembers as member)
+          <li>
+            <img class="mx-auto h-24 w-24 rounded-full" src="{{ member.avatar }}" alt="{{ member.name }}">
+            <h3 class="mt-6 font-semibold leading-7 text-base text-gray-900 tracking-tight">
+              {{ member.name }}
+            </h3>
+            <p class="leading-6 text-gray-600 text-sm">
+              {{ member.email }}
+            </p>
+          </li>
+        @endforeach
+      </ul>
+    </div>
+  </div>