tinacms 0.68.3 → 0.68.6

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("styled-components"), require("@tinacms/sharedctx"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "graphql-tag", "yup", "styled-components", "@tinacms/sharedctx", "url-pattern", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, styled, sharedctx, UrlPattern, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("styled-components"), require("@tinacms/sharedctx"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react"), require("@react-hook/window-size")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "graphql-tag", "yup", "styled-components", "@tinacms/sharedctx", "url-pattern", "react-router-dom", "@headlessui/react", "@react-hook/window-size"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, styled, sharedctx, UrlPattern, reactRouterDom, react, windowSize) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -2442,6 +2442,7 @@ mutation addPendingDocumentMutation(
     constructor(cms) {
       this.api = cms.api.tina;
       this.schema = cms.api.tina.schema;
+      this.useDataLayer = cms.flags.get("experimentalData");
     }
     async isAuthenticated() {
       return await this.api.isAuthenticated();
@@ -2468,19 +2469,22 @@ mutation addPendingDocumentMutation(
     }
     async fetchCollection(collectionName, includeDocuments) {
       if (includeDocuments === true) {
-        const response = await this.api.request(`#graphql
-      query($collection: String!, $includeDocuments: Boolean!){
+        if (this.useDataLayer) {
+          const sort = this.schema.getIsTitleFieldName(collectionName);
+          const response = await this.api.request(`#graphql
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String){
         collection(collection: $collection){
           name
           label
           format
           templates
-          documents @include(if: $includeDocuments) {
+          documents(sort: $sort) @include(if: $includeDocuments) {
             totalCount
             edges {
               node {
                 ... on Document {
                   _sys {
+                    title
                     template
                     breadcrumbs
                     path
@@ -2494,8 +2498,39 @@ mutation addPendingDocumentMutation(
             }
           }
         }
-      }`, { variables: { collection: collectionName, includeDocuments } });
-        return response.collection;
+      }`, { variables: { collection: collectionName, includeDocuments, sort } });
+          return response.collection;
+        } else {
+          const response = await this.api.request(`#graphql
+    query($collection: String!, $includeDocuments: Boolean!){
+      collection(collection: $collection){
+        name
+        label
+        format
+        templates
+        documents @include(if: $includeDocuments) {
+          totalCount
+          edges {
+            node {
+              ... on Document {
+                _sys {
+                  # TODO: only include title if we need to
+                  template
+                  breadcrumbs
+                  path
+                  basename
+                  relativePath
+                  filename
+                  extension
+                }
+              }
+            }
+          }
+        }
+      }
+    }`, { variables: { collection: collectionName, includeDocuments } });
+          return response.collection;
+        }
       } else {
         try {
           const collection = this.schema.getCollection(collectionName);
@@ -2623,7 +2658,9 @@ mutation addPendingDocumentMutation(
       sidebar: true
     }), [props.cms]);
     if (!cms.api.tina) {
-      cms.registerApi("tina", createClient(props));
+      cms.registerApi("tina", createClient(__spreadProps(__spreadValues({}, props), { branch: currentBranch })));
+    } else {
+      cms.api.tina.setBranch(currentBranch);
     }
     if (!cms.api.admin) {
       cms.registerApi("admin", new TinaAdminApi(cms));
@@ -2692,7 +2729,7 @@ mutation addPendingDocumentMutation(
     }))));
   };
   const TinaCloudAuthWall = TinaCloudProvider;
-  var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-0 {\n      width: 0px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-red-500 {\n      --tw-text-opacity: 1;\n      color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
+  var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .pointer-events-auto {\n      pointer-events: auto;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .inset-0 {\n      top: 0px;\n      right: 0px;\n      bottom: 0px;\n      left: 0px;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .top-0 {\n      top: 0px;\n}\n.tina-tailwind .top-8 {\n      top: 32px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .top-10 {\n      top: 40px;\n}\n.tina-tailwind .top-4 {\n      top: 16px;\n}\n.tina-tailwind .z-overlay {\n      z-index: 10600;\n}\n.tina-tailwind .z-menu {\n      z-index: 9800;\n}\n.tina-tailwind .z-50 {\n      z-index: 50;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .-ml-px {\n      margin-left: -1px;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-7 {\n      height: 28px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-0 {\n      width: 0px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .-translate-x-full {\n      --tw-translate-x: -100%;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .translate-x-0 {\n      --tw-translate-x: 0px;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .translate-x-full {\n      --tw-translate-x: 100%;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded {\n      border-radius: 4px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .rounded-r-md {\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .bg-gradient-to-br {\n      background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .from-gray-800 {\n      --tw-gradient-from: #363145;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(54 49 69 / 0));\n}\n.tina-tailwind .via-gray-900 {\n      --tw-gradient-stops: var(--tw-gradient-from), #252336, var(--tw-gradient-to, rgb(37 35 54 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .to-black {\n      --tw-gradient-to: #000;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .py-5 {\n      padding-top: 20px;\n      padding-bottom: 20px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .pl-18 {\n      padding-left: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-red-500 {\n      --tw-text-opacity: 1;\n      color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-200 {\n      transition-duration: 200ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
   class ContentCreatorPlugin {
     constructor(options) {
       this.__type = "content-creator";
@@ -2999,11 +3036,13 @@ mutation addPendingDocumentMutation(
       "formifyCallback",
       "schema"
     ]);
+    var _a;
     const validOldSetup = new Boolean(props == null ? void 0 : props.isLocalClient) || new Boolean(props == null ? void 0 : props.clientId) && new Boolean(props == null ? void 0 : props.branch);
-    if (!props.apiURL && !validOldSetup) {
-      throw new Error(`apiURL is a required field`);
+    const apiURL = ((_a = props == null ? void 0 : props.client) == null ? void 0 : _a.apiUrl) || (props == null ? void 0 : props.apiURL);
+    if (!apiURL && !validOldSetup) {
+      throw new Error(`Must provide apiUrl or a client to the TinaWrapper component`);
     }
-    const { branch, clientId, isLocalClient } = props.apiURL ? parseURL(props.apiURL) : {
+    const { branch, clientId, isLocalClient } = apiURL ? parseURL(apiURL) : {
       branch: props.branch,
       clientId: props.clientId,
       isLocalClient: props.isLocalClient
@@ -3355,13 +3394,40 @@ This will work when developing locally but NOT when deployed to production.
     }, [cms]);
     return { collections, loading, error };
   };
+  function IoMdClose(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z" } }] })(props);
+  }
+  function BiEdit(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
+  }
+  function BiLogIn(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
+  }
+  function BiLogOut(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
+  }
+  function BiMenu(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" } }] })(props);
+  }
+  function BiPlus(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
+  }
+  function BiTrash(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
+  }
   const slugify = (text) => {
     return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
   };
   const Sidebar = ({ cms }) => {
+    var _a, _b;
     const collectionsInfo = useGetCollections(cms);
     const screens = cms.plugins.getType("screen").all();
-    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
+    const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState(false);
+    const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
+    const navBreakpoint = 1e3;
+    const windowWidth = windowSize.useWindowWidth();
+    const renderDesktopNav = windowWidth > navBreakpoint;
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
       sidebarWidth: 360,
       showCollections: true,
       collectionsInfo,
@@ -3377,7 +3443,76 @@ This will work when developing locally but NOT when deployed to production.
         to: `collections/${collection.name}`,
         Icon: ImFilesEmpty
       })
-    });
+    }), !renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
+      show: menuIsOpen
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Transition.Child, {
+      as: React__default["default"].Fragment,
+      enter: "transform transition-all ease-out duration-300",
+      enterFrom: "opacity-0 -translate-x-full",
+      enterTo: "opacity-100 translate-x-0",
+      leave: "transform transition-all ease-in duration-200",
+      leaveFrom: "opacity-100 translate-x-0",
+      leaveTo: "opacity-0 -translate-x-full"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "fixed left-0 top-0 z-overlay h-full transform"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
+      className: "rounded-r-md",
+      sidebarWidth: 360,
+      showCollections: true,
+      collectionsInfo,
+      screens,
+      contentCreators: [],
+      RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
+        label: view.name,
+        to: `screens/${slugify(view.name)}`,
+        Icon: view.Icon ? view.Icon : ImFilesEmpty,
+        onClick: () => {
+          setMenuIsOpen(false);
+        }
+      }),
+      RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
+        label: collection.label ? collection.label : collection.name,
+        to: `collections/${collection.name}`,
+        Icon: ImFilesEmpty,
+        onClick: () => {
+          setMenuIsOpen(false);
+        }
+      })
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "absolute top-8 right-0 transform translate-x-full overflow-hidden"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      rounded: "right",
+      variant: "secondary",
+      onClick: () => {
+        setMenuIsOpen(false);
+      },
+      className: `transition-opacity duration-150 ease-out`
+    }, /* @__PURE__ */ React__default["default"].createElement(IoMdClose, {
+      className: "h-6 w-auto"
+    })))))), /* @__PURE__ */ React__default["default"].createElement(react.Transition.Child, {
+      as: React__default["default"].Fragment,
+      enter: "ease-out duration-300",
+      enterFrom: "opacity-0",
+      enterTo: "opacity-80",
+      entered: "opacity-80",
+      leave: "ease-in duration-200",
+      leaveFrom: "opacity-80",
+      leaveTo: "opacity-0"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      onClick: () => {
+        setMenuIsOpen(false);
+      },
+      className: "fixed z-menu inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"
+    }))), !renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      rounded: "right",
+      variant: "secondary",
+      onClick: () => {
+        setMenuIsOpen(true);
+      },
+      className: `pointer-events-auto -ml-px absolute left-0 z-50 ${isLocalMode ? `top-10` : `top-4`}`
+    }, /* @__PURE__ */ React__default["default"].createElement(BiMenu, {
+      className: "h-7 w-auto"
+    })));
   };
   const SidebarLink = (props) => {
     const { to, label, Icon } = props;
@@ -3385,6 +3520,8 @@ This will work when developing locally but NOT when deployed to production.
       className: ({ isActive }) => {
         return `text-base tracking-wide ${isActive ? "text-blue-600" : "text-gray-500"} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
       },
+      onClick: props.onClick ? props.onClick : () => {
+      },
       to
     }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
       className: "mr-2 h-6 opacity-80 w-auto"
@@ -3398,21 +3535,6 @@ This will work when developing locally but NOT when deployed to production.
       return null;
     }
   };
-  function BiEdit(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
-  }
-  function BiLogIn(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
-  }
-  function BiLogOut(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
-  }
-  function BiPlus(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
-  }
-  function BiTrash(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
-  }
   function MdOutlineArrowBack(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
   }
@@ -3763,6 +3885,8 @@ This will work when developing locally but NOT when deployed to production.
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
         }, documents.map((document) => {
+          var _a2;
+          const hasTitle = Boolean(document.node._sys.title);
           const subfolders = document.node._sys.breadcrumbs.slice(0, -1).join("/");
           return /* @__PURE__ */ React__default["default"].createElement("tr", {
             key: `document-${document.node._sys.relativePath}`,
@@ -3778,11 +3902,17 @@ This will work when developing locally but NOT when deployed to production.
             className: "inline-block h-6 w-auto opacity-70"
           }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
-          }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
+          }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block whitespace-nowrap"
           }, subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "text-xs text-gray-400"
-          }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, document.node._sys.filename))))), /* @__PURE__ */ React__default["default"].createElement("td", {
+          }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React__default["default"].createElement("td", {
+            className: "px-6 py-4 whitespace-nowrap"
+          }, /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "block text-xs text-gray-400 mb-1 uppercase"
+          }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+          }, document.node._sys.filename)), /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-6 py-4 whitespace-nowrap"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
@@ -3942,8 +4072,12 @@ This will work when developing locally but NOT when deployed to production.
         }
       });
     }, [cms, collection, mutationInfo]);
+    const navBreakpoint = 1e3;
+    const windowWidth = windowSize.useWindowWidth();
+    const renderNavToggle = windowWidth < navBreakpoint + 1;
+    const headerPadding = renderNavToggle ? "px-20" : "px-6";
     return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "py-4 px-20 border-b border-gray-200 bg-white"
+      className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "max-w-form mx-auto"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4086,8 +4220,12 @@ This will work when developing locally but NOT when deployed to production.
         }
       });
     }, [cms, document, relativePath, collection, mutationInfo]);
+    const navBreakpoint = 1e3;
+    const windowWidth = windowSize.useWindowWidth();
+    const renderNavToggle = windowWidth < navBreakpoint + 1;
+    const headerPadding = renderNavToggle ? "px-20" : "px-6";
     return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "py-4 px-20 border-b border-gray-200 bg-white"
+      className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "max-w-form mx-auto"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4110,13 +4248,18 @@ This will work when developing locally but NOT when deployed to production.
   };
   const ScreenPage = () => {
     const { screenName } = reactRouterDom.useParams();
+    const navBreakpoint = 1e3;
+    const windowWidth = windowSize.useWindowWidth();
+    const renderNavToggle = windowWidth < navBreakpoint + 1;
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
       var _a, _b;
       const screens = cms.plugins.getType("screen").all();
       const selectedScreen = screens.find(({ name }) => slugify(name) === screenName);
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "relative w-full h-full flex flex-col items-stretch justify-between"
-      }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), renderNavToggle && /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: `py-5 border-b border-gray-200 bg-white pl-18`
+      }, selectedScreen.name), /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between"
       }, /* @__PURE__ */ React__default["default"].createElement(selectedScreen.Component, {
         close: () => {

package/dist/style.css

@@ -42,6 +42,9 @@
       --tw-backdrop-saturate:  ;
       --tw-backdrop-sepia:  ;
 }
+.tina-tailwind .pointer-events-auto {
+      pointer-events: auto;
+}
 .tina-tailwind .static {
       position: static;
 }
@@ -54,16 +57,46 @@
 .tina-tailwind .relative {
       position: relative;
 }
+.tina-tailwind .inset-0 {
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+}
 .tina-tailwind .left-0 {
       left: 0px;
 }
+.tina-tailwind .top-0 {
+      top: 0px;
+}
+.tina-tailwind .top-8 {
+      top: 32px;
+}
 .tina-tailwind .right-0 {
       right: 0px;
 }
+.tina-tailwind .top-10 {
+      top: 40px;
+}
+.tina-tailwind .top-4 {
+      top: 16px;
+}
+.tina-tailwind .z-overlay {
+      z-index: 10600;
+}
+.tina-tailwind .z-menu {
+      z-index: 9800;
+}
+.tina-tailwind .z-50 {
+      z-index: 50;
+}
 .tina-tailwind .mx-auto {
       margin-left: auto;
       margin-right: auto;
 }
+.tina-tailwind .-ml-px {
+      margin-left: -1px;
+}
 .tina-tailwind .mr-2 {
       margin-right: 8px;
 }
@@ -121,6 +154,9 @@
 .tina-tailwind .h-6 {
       height: 24px;
 }
+.tina-tailwind .h-7 {
+      height: 28px;
+}
 .tina-tailwind .h-10 {
       height: 40px;
 }
@@ -178,6 +214,18 @@
 .tina-tailwind .origin-top-right {
       transform-origin: top right;
 }
+.tina-tailwind .-translate-x-full {
+      --tw-translate-x: -100%;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.tina-tailwind .translate-x-0 {
+      --tw-translate-x: 0px;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.tina-tailwind .translate-x-full {
+      --tw-translate-x: 100%;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .tina-tailwind .scale-95 {
       --tw-scale-x: .95;
       --tw-scale-y: .95;
@@ -248,12 +296,19 @@
 .tina-tailwind .rounded-lg {
       border-radius: 8px;
 }
+.tina-tailwind .rounded {
+      border-radius: 4px;
+}
 .tina-tailwind .rounded-full {
       border-radius: 9999px;
 }
 .tina-tailwind .rounded-md {
       border-radius: 6px;
 }
+.tina-tailwind .rounded-r-md {
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+}
 .tina-tailwind .border {
       border-width: 1px;
 }
@@ -283,13 +338,26 @@
 .tina-tailwind .bg-gradient-to-b {
       background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
+.tina-tailwind .bg-gradient-to-br {
+      background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
 .tina-tailwind .from-blue-900 {
       --tw-gradient-from: #1D2C6C;
       --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));
 }
+.tina-tailwind .from-gray-800 {
+      --tw-gradient-from: #363145;
+      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(54 49 69 / 0));
+}
+.tina-tailwind .via-gray-900 {
+      --tw-gradient-stops: var(--tw-gradient-from), #252336, var(--tw-gradient-to, rgb(37 35 54 / 0));
+}
 .tina-tailwind .to-gray-900 {
       --tw-gradient-to: #252336;
 }
+.tina-tailwind .to-black {
+      --tw-gradient-to: #000;
+}
 .tina-tailwind .px-4 {
       padding-left: 16px;
       padding-right: 16px;
@@ -330,6 +398,10 @@
       padding-top: 8px;
       padding-bottom: 8px;
 }
+.tina-tailwind .py-5 {
+      padding-top: 20px;
+      padding-bottom: 20px;
+}
 .tina-tailwind .pt-4 {
       padding-top: 16px;
 }
@@ -339,6 +411,9 @@
 .tina-tailwind .pt-18 {
       padding-top: 72px;
 }
+.tina-tailwind .pl-18 {
+      padding-left: 72px;
+}
 .tina-tailwind .text-left {
       text-align: left;
 }
@@ -438,21 +513,21 @@
 .tina-tailwind .opacity-100 {
       opacity: 1;
 }
-.tina-tailwind .opacity-90 {
-      opacity: .9;
+.tina-tailwind .opacity-0 {
+      opacity: 0;
 }
 .tina-tailwind .opacity-80 {
       opacity: .8;
 }
+.tina-tailwind .opacity-90 {
+      opacity: .9;
+}
 .tina-tailwind .opacity-50 {
       opacity: .5;
 }
 .tina-tailwind .opacity-70 {
       opacity: .7;
 }
-.tina-tailwind .opacity-0 {
-      opacity: 0;
-}
 .tina-tailwind .shadow-lg {
       --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
       --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -488,13 +563,13 @@
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 150ms;
 }
-.tina-tailwind .transition-colors {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+.tina-tailwind .transition-all {
+      transition-property: all;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 150ms;
 }
-.tina-tailwind .transition-all {
-      transition-property: all;
+.tina-tailwind .transition-colors {
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 150ms;
 }
@@ -506,6 +581,9 @@
 .tina-tailwind .duration-300 {
       transition-duration: 300ms;
 }
+.tina-tailwind .duration-200 {
+      transition-duration: 200ms;
+}
 .tina-tailwind .duration-150 {
       transition-duration: 150ms;
 }