tinacms 0.68.5 → 0.68.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.es.js +122 -23
  3. package/dist/index.js +122 -24
  4. package/dist/style.css +87 -9
  5. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # tinacms
2
2
 
3
+ ## 0.68.6
4
+
5
+ ### Patch Changes
6
+
7
+ - 2cc206b1a: Improve mobile nav behaviour
8
+ - 8998df207: fix: update tina client with the current branch from local storage
9
+ - Updated dependencies [58a7a00f7]
10
+ - Updated dependencies [2cc206b1a]
11
+ - Updated dependencies [aaadefd2d]
12
+ - @tinacms/toolkit@0.56.29
13
+
3
14
  ## 0.68.5
4
15
 
5
16
  ### Patch Changes
package/dist/index.es.js CHANGED
@@ -43,7 +43,8 @@ import styled from "styled-components";
43
43
  import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
44
44
  import UrlPattern from "url-pattern";
45
45
  import { NavLink, useNavigate, useParams, Link, HashRouter, Routes, Route } from "react-router-dom";
46
- import { Menu, Transition } from "@headlessui/react";
46
+ import { Transition, Menu } from "@headlessui/react";
47
+ import { useWindowWidth } from "@react-hook/window-size";
47
48
  function popupWindow(url, title, window2, w, h) {
48
49
  const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
49
50
  const x = window2.top.outerWidth / 2 + window2.top.screenX - w / 2;
@@ -2639,7 +2640,9 @@ const TinaCloudProvider = (props) => {
2639
2640
  sidebar: true
2640
2641
  }), [props.cms]);
2641
2642
  if (!cms.api.tina) {
2642
- cms.registerApi("tina", createClient(props));
2643
+ cms.registerApi("tina", createClient(__spreadProps(__spreadValues({}, props), { branch: currentBranch })));
2644
+ } else {
2645
+ cms.api.tina.setBranch(currentBranch);
2643
2646
  }
2644
2647
  if (!cms.api.admin) {
2645
2648
  cms.registerApi("admin", new TinaAdminApi(cms));
@@ -2708,7 +2711,7 @@ const TinaCloudProvider = (props) => {
2708
2711
  }))));
2709
2712
  };
2710
2713
  const TinaCloudAuthWall = TinaCloudProvider;
2711
- 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';
2714
+ 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';
2712
2715
  class ContentCreatorPlugin {
2713
2716
  constructor(options) {
2714
2717
  this.__type = "content-creator";
@@ -3373,13 +3376,40 @@ const useGetCollections = (cms) => {
3373
3376
  }, [cms]);
3374
3377
  return { collections, loading, error };
3375
3378
  };
3379
+ function IoMdClose(props) {
3380
+ 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);
3381
+ }
3382
+ function BiEdit(props) {
3383
+ 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);
3384
+ }
3385
+ function BiLogIn(props) {
3386
+ 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);
3387
+ }
3388
+ function BiLogOut(props) {
3389
+ 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);
3390
+ }
3391
+ function BiMenu(props) {
3392
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" } }] })(props);
3393
+ }
3394
+ function BiPlus(props) {
3395
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
3396
+ }
3397
+ function BiTrash(props) {
3398
+ 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);
3399
+ }
3376
3400
  const slugify = (text) => {
3377
3401
  return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
3378
3402
  };
3379
3403
  const Sidebar = ({ cms }) => {
3404
+ var _a, _b;
3380
3405
  const collectionsInfo = useGetCollections(cms);
3381
3406
  const screens = cms.plugins.getType("screen").all();
3382
- return /* @__PURE__ */ React.createElement(Nav, {
3407
+ const [menuIsOpen, setMenuIsOpen] = React.useState(false);
3408
+ const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
3409
+ const navBreakpoint = 1e3;
3410
+ const windowWidth = useWindowWidth();
3411
+ const renderDesktopNav = windowWidth > navBreakpoint;
3412
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, renderDesktopNav && /* @__PURE__ */ React.createElement(Nav, {
3383
3413
  sidebarWidth: 360,
3384
3414
  showCollections: true,
3385
3415
  collectionsInfo,
@@ -3395,7 +3425,76 @@ const Sidebar = ({ cms }) => {
3395
3425
  to: `collections/${collection.name}`,
3396
3426
  Icon: ImFilesEmpty
3397
3427
  })
3398
- });
3428
+ }), !renderDesktopNav && /* @__PURE__ */ React.createElement(Transition, {
3429
+ show: menuIsOpen
3430
+ }, /* @__PURE__ */ React.createElement(Transition.Child, {
3431
+ as: React.Fragment,
3432
+ enter: "transform transition-all ease-out duration-300",
3433
+ enterFrom: "opacity-0 -translate-x-full",
3434
+ enterTo: "opacity-100 translate-x-0",
3435
+ leave: "transform transition-all ease-in duration-200",
3436
+ leaveFrom: "opacity-100 translate-x-0",
3437
+ leaveTo: "opacity-0 -translate-x-full"
3438
+ }, /* @__PURE__ */ React.createElement("div", {
3439
+ className: "fixed left-0 top-0 z-overlay h-full transform"
3440
+ }, /* @__PURE__ */ React.createElement(Nav, {
3441
+ className: "rounded-r-md",
3442
+ sidebarWidth: 360,
3443
+ showCollections: true,
3444
+ collectionsInfo,
3445
+ screens,
3446
+ contentCreators: [],
3447
+ RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(SidebarLink, {
3448
+ label: view.name,
3449
+ to: `screens/${slugify(view.name)}`,
3450
+ Icon: view.Icon ? view.Icon : ImFilesEmpty,
3451
+ onClick: () => {
3452
+ setMenuIsOpen(false);
3453
+ }
3454
+ }),
3455
+ RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
3456
+ label: collection.label ? collection.label : collection.name,
3457
+ to: `collections/${collection.name}`,
3458
+ Icon: ImFilesEmpty,
3459
+ onClick: () => {
3460
+ setMenuIsOpen(false);
3461
+ }
3462
+ })
3463
+ }, /* @__PURE__ */ React.createElement("div", {
3464
+ className: "absolute top-8 right-0 transform translate-x-full overflow-hidden"
3465
+ }, /* @__PURE__ */ React.createElement(Button, {
3466
+ rounded: "right",
3467
+ variant: "secondary",
3468
+ onClick: () => {
3469
+ setMenuIsOpen(false);
3470
+ },
3471
+ className: `transition-opacity duration-150 ease-out`
3472
+ }, /* @__PURE__ */ React.createElement(IoMdClose, {
3473
+ className: "h-6 w-auto"
3474
+ })))))), /* @__PURE__ */ React.createElement(Transition.Child, {
3475
+ as: React.Fragment,
3476
+ enter: "ease-out duration-300",
3477
+ enterFrom: "opacity-0",
3478
+ enterTo: "opacity-80",
3479
+ entered: "opacity-80",
3480
+ leave: "ease-in duration-200",
3481
+ leaveFrom: "opacity-80",
3482
+ leaveTo: "opacity-0"
3483
+ }, /* @__PURE__ */ React.createElement("div", {
3484
+ onClick: () => {
3485
+ setMenuIsOpen(false);
3486
+ },
3487
+ className: "fixed z-menu inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"
3488
+ }))), !renderDesktopNav && /* @__PURE__ */ React.createElement(Button, {
3489
+ rounded: "right",
3490
+ variant: "secondary",
3491
+ onClick: () => {
3492
+ setMenuIsOpen(true);
3493
+ },
3494
+ className: `pointer-events-auto -ml-px absolute left-0 z-50 ${isLocalMode ? `top-10` : `top-4`}`
3495
+ }, /* @__PURE__ */ React.createElement(BiMenu, {
3496
+ className: "h-7 w-auto"
3497
+ })));
3399
3498
  };
3400
3499
  const SidebarLink = (props) => {
3401
3500
  const { to, label, Icon } = props;
@@ -3403,6 +3502,8 @@ const SidebarLink = (props) => {
3403
3502
  className: ({ isActive }) => {
3404
3503
  return `text-base tracking-wide ${isActive ? "text-blue-600" : "text-gray-500"} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
3405
3504
  },
3505
+ onClick: props.onClick ? props.onClick : () => {
3506
+ },
3406
3507
  to
3407
3508
  }, /* @__PURE__ */ React.createElement(Icon, {
3408
3509
  className: "mr-2 h-6 opacity-80 w-auto"
@@ -3416,21 +3517,6 @@ const GetCMS = ({ children }) => {
3416
3517
  return null;
3417
3518
  }
3418
3519
  };
3419
- function BiEdit(props) {
3420
- 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);
3421
- }
3422
- function BiLogIn(props) {
3423
- 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);
3424
- }
3425
- function BiLogOut(props) {
3426
- 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);
3427
- }
3428
- function BiPlus(props) {
3429
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
3430
- }
3431
- function BiTrash(props) {
3432
- 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);
3433
- }
3434
3520
  function MdOutlineArrowBack(props) {
3435
3521
  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);
3436
3522
  }
@@ -3968,8 +4054,12 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
3968
4054
  }
3969
4055
  });
3970
4056
  }, [cms, collection, mutationInfo]);
4057
+ const navBreakpoint = 1e3;
4058
+ const windowWidth = useWindowWidth();
4059
+ const renderNavToggle = windowWidth < navBreakpoint + 1;
4060
+ const headerPadding = renderNavToggle ? "px-20" : "px-6";
3971
4061
  return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
3972
- className: "py-4 px-20 border-b border-gray-200 bg-white"
4062
+ className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
3973
4063
  }, /* @__PURE__ */ React.createElement("div", {
3974
4064
  className: "max-w-form mx-auto"
3975
4065
  }, /* @__PURE__ */ React.createElement("div", {
@@ -4112,8 +4202,12 @@ const RenderForm = ({
4112
4202
  }
4113
4203
  });
4114
4204
  }, [cms, document, relativePath, collection, mutationInfo]);
4205
+ const navBreakpoint = 1e3;
4206
+ const windowWidth = useWindowWidth();
4207
+ const renderNavToggle = windowWidth < navBreakpoint + 1;
4208
+ const headerPadding = renderNavToggle ? "px-20" : "px-6";
4115
4209
  return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
4116
- className: "py-4 px-20 border-b border-gray-200 bg-white"
4210
+ className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
4117
4211
  }, /* @__PURE__ */ React.createElement("div", {
4118
4212
  className: "max-w-form mx-auto"
4119
4213
  }, /* @__PURE__ */ React.createElement("div", {
@@ -4136,13 +4230,18 @@ const RenderForm = ({
4136
4230
  };
4137
4231
  const ScreenPage = () => {
4138
4232
  const { screenName } = useParams();
4233
+ const navBreakpoint = 1e3;
4234
+ const windowWidth = useWindowWidth();
4235
+ const renderNavToggle = windowWidth < navBreakpoint + 1;
4139
4236
  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
4140
4237
  var _a, _b;
4141
4238
  const screens = cms.plugins.getType("screen").all();
4142
4239
  const selectedScreen = screens.find(({ name }) => slugify(name) === screenName);
4143
4240
  return /* @__PURE__ */ React.createElement("div", {
4144
4241
  className: "relative w-full h-full flex flex-col items-stretch justify-between"
4145
- }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
4242
+ }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), renderNavToggle && /* @__PURE__ */ React.createElement("div", {
4243
+ className: `py-5 border-b border-gray-200 bg-white pl-18`
4244
+ }, selectedScreen.name), /* @__PURE__ */ React.createElement("div", {
4146
4245
  className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between"
4147
4246
  }, /* @__PURE__ */ React.createElement(selectedScreen.Component, {
4148
4247
  close: () => {
package/dist/index.js CHANGED
@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
30
30
  return target;
31
31
  };
32
32
  (function(global, factory) {
33
- 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));
34
- })(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, styled, sharedctx, UrlPattern, reactRouterDom, react) {
33
+ 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));
34
+ })(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, styled, sharedctx, UrlPattern, reactRouterDom, react, windowSize) {
35
35
  "use strict";
36
36
  function _interopDefaultLegacy(e) {
37
37
  return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -2658,7 +2658,9 @@ mutation addPendingDocumentMutation(
2658
2658
  sidebar: true
2659
2659
  }), [props.cms]);
2660
2660
  if (!cms.api.tina) {
2661
- cms.registerApi("tina", createClient(props));
2661
+ cms.registerApi("tina", createClient(__spreadProps(__spreadValues({}, props), { branch: currentBranch })));
2662
+ } else {
2663
+ cms.api.tina.setBranch(currentBranch);
2662
2664
  }
2663
2665
  if (!cms.api.admin) {
2664
2666
  cms.registerApi("admin", new TinaAdminApi(cms));
@@ -2727,7 +2729,7 @@ mutation addPendingDocumentMutation(
2727
2729
  }))));
2728
2730
  };
2729
2731
  const TinaCloudAuthWall = TinaCloudProvider;
2730
- 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';
2732
+ 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';
2731
2733
  class ContentCreatorPlugin {
2732
2734
  constructor(options) {
2733
2735
  this.__type = "content-creator";
@@ -3392,13 +3394,40 @@ This will work when developing locally but NOT when deployed to production.
3392
3394
  }, [cms]);
3393
3395
  return { collections, loading, error };
3394
3396
  };
3397
+ function IoMdClose(props) {
3398
+ 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);
3399
+ }
3400
+ function BiEdit(props) {
3401
+ 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);
3402
+ }
3403
+ function BiLogIn(props) {
3404
+ 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);
3405
+ }
3406
+ function BiLogOut(props) {
3407
+ 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);
3408
+ }
3409
+ function BiMenu(props) {
3410
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" } }] })(props);
3411
+ }
3412
+ function BiPlus(props) {
3413
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
3414
+ }
3415
+ function BiTrash(props) {
3416
+ 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);
3417
+ }
3395
3418
  const slugify = (text) => {
3396
3419
  return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
3397
3420
  };
3398
3421
  const Sidebar = ({ cms }) => {
3422
+ var _a, _b;
3399
3423
  const collectionsInfo = useGetCollections(cms);
3400
3424
  const screens = cms.plugins.getType("screen").all();
3401
- return /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
3425
+ const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState(false);
3426
+ const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
3427
+ const navBreakpoint = 1e3;
3428
+ const windowWidth = windowSize.useWindowWidth();
3429
+ const renderDesktopNav = windowWidth > navBreakpoint;
3430
+ return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
3402
3431
  sidebarWidth: 360,
3403
3432
  showCollections: true,
3404
3433
  collectionsInfo,
@@ -3414,7 +3443,76 @@ This will work when developing locally but NOT when deployed to production.
3414
3443
  to: `collections/${collection.name}`,
3415
3444
  Icon: ImFilesEmpty
3416
3445
  })
3417
- });
3446
+ }), !renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3447
+ show: menuIsOpen
3448
+ }, /* @__PURE__ */ React__default["default"].createElement(react.Transition.Child, {
3449
+ as: React__default["default"].Fragment,
3450
+ enter: "transform transition-all ease-out duration-300",
3451
+ enterFrom: "opacity-0 -translate-x-full",
3452
+ enterTo: "opacity-100 translate-x-0",
3453
+ leave: "transform transition-all ease-in duration-200",
3454
+ leaveFrom: "opacity-100 translate-x-0",
3455
+ leaveTo: "opacity-0 -translate-x-full"
3456
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3457
+ className: "fixed left-0 top-0 z-overlay h-full transform"
3458
+ }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
3459
+ className: "rounded-r-md",
3460
+ sidebarWidth: 360,
3461
+ showCollections: true,
3462
+ collectionsInfo,
3463
+ screens,
3464
+ contentCreators: [],
3465
+ RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
3466
+ label: view.name,
3467
+ to: `screens/${slugify(view.name)}`,
3468
+ Icon: view.Icon ? view.Icon : ImFilesEmpty,
3469
+ onClick: () => {
3470
+ setMenuIsOpen(false);
3471
+ }
3472
+ }),
3473
+ RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
3474
+ label: collection.label ? collection.label : collection.name,
3475
+ to: `collections/${collection.name}`,
3476
+ Icon: ImFilesEmpty,
3477
+ onClick: () => {
3478
+ setMenuIsOpen(false);
3479
+ }
3480
+ })
3481
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3482
+ className: "absolute top-8 right-0 transform translate-x-full overflow-hidden"
3483
+ }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
3484
+ rounded: "right",
3485
+ variant: "secondary",
3486
+ onClick: () => {
3487
+ setMenuIsOpen(false);
3488
+ },
3489
+ className: `transition-opacity duration-150 ease-out`
3490
+ }, /* @__PURE__ */ React__default["default"].createElement(IoMdClose, {
3491
+ className: "h-6 w-auto"
3492
+ })))))), /* @__PURE__ */ React__default["default"].createElement(react.Transition.Child, {
3493
+ as: React__default["default"].Fragment,
3494
+ enter: "ease-out duration-300",
3495
+ enterFrom: "opacity-0",
3496
+ enterTo: "opacity-80",
3497
+ entered: "opacity-80",
3498
+ leave: "ease-in duration-200",
3499
+ leaveFrom: "opacity-80",
3500
+ leaveTo: "opacity-0"
3501
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3502
+ onClick: () => {
3503
+ setMenuIsOpen(false);
3504
+ },
3505
+ className: "fixed z-menu inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"
3506
+ }))), !renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
3507
+ rounded: "right",
3508
+ variant: "secondary",
3509
+ onClick: () => {
3510
+ setMenuIsOpen(true);
3511
+ },
3512
+ className: `pointer-events-auto -ml-px absolute left-0 z-50 ${isLocalMode ? `top-10` : `top-4`}`
3513
+ }, /* @__PURE__ */ React__default["default"].createElement(BiMenu, {
3514
+ className: "h-7 w-auto"
3515
+ })));
3418
3516
  };
3419
3517
  const SidebarLink = (props) => {
3420
3518
  const { to, label, Icon } = props;
@@ -3422,6 +3520,8 @@ This will work when developing locally but NOT when deployed to production.
3422
3520
  className: ({ isActive }) => {
3423
3521
  return `text-base tracking-wide ${isActive ? "text-blue-600" : "text-gray-500"} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
3424
3522
  },
3523
+ onClick: props.onClick ? props.onClick : () => {
3524
+ },
3425
3525
  to
3426
3526
  }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
3427
3527
  className: "mr-2 h-6 opacity-80 w-auto"
@@ -3435,21 +3535,6 @@ This will work when developing locally but NOT when deployed to production.
3435
3535
  return null;
3436
3536
  }
3437
3537
  };
3438
- function BiEdit(props) {
3439
- 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);
3440
- }
3441
- function BiLogIn(props) {
3442
- 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);
3443
- }
3444
- function BiLogOut(props) {
3445
- 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);
3446
- }
3447
- function BiPlus(props) {
3448
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
3449
- }
3450
- function BiTrash(props) {
3451
- 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);
3452
- }
3453
3538
  function MdOutlineArrowBack(props) {
3454
3539
  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);
3455
3540
  }
@@ -3987,8 +4072,12 @@ This will work when developing locally but NOT when deployed to production.
3987
4072
  }
3988
4073
  });
3989
4074
  }, [cms, collection, mutationInfo]);
4075
+ const navBreakpoint = 1e3;
4076
+ const windowWidth = windowSize.useWindowWidth();
4077
+ const renderNavToggle = windowWidth < navBreakpoint + 1;
4078
+ const headerPadding = renderNavToggle ? "px-20" : "px-6";
3990
4079
  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", {
3991
- className: "py-4 px-20 border-b border-gray-200 bg-white"
4080
+ className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
3992
4081
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
3993
4082
  className: "max-w-form mx-auto"
3994
4083
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4131,8 +4220,12 @@ This will work when developing locally but NOT when deployed to production.
4131
4220
  }
4132
4221
  });
4133
4222
  }, [cms, document, relativePath, collection, mutationInfo]);
4223
+ const navBreakpoint = 1e3;
4224
+ const windowWidth = windowSize.useWindowWidth();
4225
+ const renderNavToggle = windowWidth < navBreakpoint + 1;
4226
+ const headerPadding = renderNavToggle ? "px-20" : "px-6";
4134
4227
  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", {
4135
- className: "py-4 px-20 border-b border-gray-200 bg-white"
4228
+ className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
4136
4229
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
4137
4230
  className: "max-w-form mx-auto"
4138
4231
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4155,13 +4248,18 @@ This will work when developing locally but NOT when deployed to production.
4155
4248
  };
4156
4249
  const ScreenPage = () => {
4157
4250
  const { screenName } = reactRouterDom.useParams();
4251
+ const navBreakpoint = 1e3;
4252
+ const windowWidth = windowSize.useWindowWidth();
4253
+ const renderNavToggle = windowWidth < navBreakpoint + 1;
4158
4254
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
4159
4255
  var _a, _b;
4160
4256
  const screens = cms.plugins.getType("screen").all();
4161
4257
  const selectedScreen = screens.find(({ name }) => slugify(name) === screenName);
4162
4258
  return /* @__PURE__ */ React__default["default"].createElement("div", {
4163
4259
  className: "relative w-full h-full flex flex-col items-stretch justify-between"
4164
- }, ((_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", {
4260
+ }, ((_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", {
4261
+ className: `py-5 border-b border-gray-200 bg-white pl-18`
4262
+ }, selectedScreen.name), /* @__PURE__ */ React__default["default"].createElement("div", {
4165
4263
  className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between"
4166
4264
  }, /* @__PURE__ */ React__default["default"].createElement(selectedScreen.Component, {
4167
4265
  close: () => {
package/dist/style.css CHANGED
@@ -42,6 +42,9 @@
42
42
  --tw-backdrop-saturate: ;
43
43
  --tw-backdrop-sepia: ;
44
44
  }
45
+ .tina-tailwind .pointer-events-auto {
46
+ pointer-events: auto;
47
+ }
45
48
  .tina-tailwind .static {
46
49
  position: static;
47
50
  }
@@ -54,16 +57,46 @@
54
57
  .tina-tailwind .relative {
55
58
  position: relative;
56
59
  }
60
+ .tina-tailwind .inset-0 {
61
+ top: 0px;
62
+ right: 0px;
63
+ bottom: 0px;
64
+ left: 0px;
65
+ }
57
66
  .tina-tailwind .left-0 {
58
67
  left: 0px;
59
68
  }
69
+ .tina-tailwind .top-0 {
70
+ top: 0px;
71
+ }
72
+ .tina-tailwind .top-8 {
73
+ top: 32px;
74
+ }
60
75
  .tina-tailwind .right-0 {
61
76
  right: 0px;
62
77
  }
78
+ .tina-tailwind .top-10 {
79
+ top: 40px;
80
+ }
81
+ .tina-tailwind .top-4 {
82
+ top: 16px;
83
+ }
84
+ .tina-tailwind .z-overlay {
85
+ z-index: 10600;
86
+ }
87
+ .tina-tailwind .z-menu {
88
+ z-index: 9800;
89
+ }
90
+ .tina-tailwind .z-50 {
91
+ z-index: 50;
92
+ }
63
93
  .tina-tailwind .mx-auto {
64
94
  margin-left: auto;
65
95
  margin-right: auto;
66
96
  }
97
+ .tina-tailwind .-ml-px {
98
+ margin-left: -1px;
99
+ }
67
100
  .tina-tailwind .mr-2 {
68
101
  margin-right: 8px;
69
102
  }
@@ -121,6 +154,9 @@
121
154
  .tina-tailwind .h-6 {
122
155
  height: 24px;
123
156
  }
157
+ .tina-tailwind .h-7 {
158
+ height: 28px;
159
+ }
124
160
  .tina-tailwind .h-10 {
125
161
  height: 40px;
126
162
  }
@@ -178,6 +214,18 @@
178
214
  .tina-tailwind .origin-top-right {
179
215
  transform-origin: top right;
180
216
  }
217
+ .tina-tailwind .-translate-x-full {
218
+ --tw-translate-x: -100%;
219
+ 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));
220
+ }
221
+ .tina-tailwind .translate-x-0 {
222
+ --tw-translate-x: 0px;
223
+ 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));
224
+ }
225
+ .tina-tailwind .translate-x-full {
226
+ --tw-translate-x: 100%;
227
+ 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));
228
+ }
181
229
  .tina-tailwind .scale-95 {
182
230
  --tw-scale-x: .95;
183
231
  --tw-scale-y: .95;
@@ -248,12 +296,19 @@
248
296
  .tina-tailwind .rounded-lg {
249
297
  border-radius: 8px;
250
298
  }
299
+ .tina-tailwind .rounded {
300
+ border-radius: 4px;
301
+ }
251
302
  .tina-tailwind .rounded-full {
252
303
  border-radius: 9999px;
253
304
  }
254
305
  .tina-tailwind .rounded-md {
255
306
  border-radius: 6px;
256
307
  }
308
+ .tina-tailwind .rounded-r-md {
309
+ border-top-right-radius: 6px;
310
+ border-bottom-right-radius: 6px;
311
+ }
257
312
  .tina-tailwind .border {
258
313
  border-width: 1px;
259
314
  }
@@ -283,13 +338,26 @@
283
338
  .tina-tailwind .bg-gradient-to-b {
284
339
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
285
340
  }
341
+ .tina-tailwind .bg-gradient-to-br {
342
+ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
343
+ }
286
344
  .tina-tailwind .from-blue-900 {
287
345
  --tw-gradient-from: #1D2C6C;
288
346
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));
289
347
  }
348
+ .tina-tailwind .from-gray-800 {
349
+ --tw-gradient-from: #363145;
350
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(54 49 69 / 0));
351
+ }
352
+ .tina-tailwind .via-gray-900 {
353
+ --tw-gradient-stops: var(--tw-gradient-from), #252336, var(--tw-gradient-to, rgb(37 35 54 / 0));
354
+ }
290
355
  .tina-tailwind .to-gray-900 {
291
356
  --tw-gradient-to: #252336;
292
357
  }
358
+ .tina-tailwind .to-black {
359
+ --tw-gradient-to: #000;
360
+ }
293
361
  .tina-tailwind .px-4 {
294
362
  padding-left: 16px;
295
363
  padding-right: 16px;
@@ -330,6 +398,10 @@
330
398
  padding-top: 8px;
331
399
  padding-bottom: 8px;
332
400
  }
401
+ .tina-tailwind .py-5 {
402
+ padding-top: 20px;
403
+ padding-bottom: 20px;
404
+ }
333
405
  .tina-tailwind .pt-4 {
334
406
  padding-top: 16px;
335
407
  }
@@ -339,6 +411,9 @@
339
411
  .tina-tailwind .pt-18 {
340
412
  padding-top: 72px;
341
413
  }
414
+ .tina-tailwind .pl-18 {
415
+ padding-left: 72px;
416
+ }
342
417
  .tina-tailwind .text-left {
343
418
  text-align: left;
344
419
  }
@@ -438,21 +513,21 @@
438
513
  .tina-tailwind .opacity-100 {
439
514
  opacity: 1;
440
515
  }
441
- .tina-tailwind .opacity-90 {
442
- opacity: .9;
516
+ .tina-tailwind .opacity-0 {
517
+ opacity: 0;
443
518
  }
444
519
  .tina-tailwind .opacity-80 {
445
520
  opacity: .8;
446
521
  }
522
+ .tina-tailwind .opacity-90 {
523
+ opacity: .9;
524
+ }
447
525
  .tina-tailwind .opacity-50 {
448
526
  opacity: .5;
449
527
  }
450
528
  .tina-tailwind .opacity-70 {
451
529
  opacity: .7;
452
530
  }
453
- .tina-tailwind .opacity-0 {
454
- opacity: 0;
455
- }
456
531
  .tina-tailwind .shadow-lg {
457
532
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
458
533
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -488,13 +563,13 @@
488
563
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
489
564
  transition-duration: 150ms;
490
565
  }
491
- .tina-tailwind .transition-colors {
492
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
566
+ .tina-tailwind .transition-all {
567
+ transition-property: all;
493
568
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
494
569
  transition-duration: 150ms;
495
570
  }
496
- .tina-tailwind .transition-all {
497
- transition-property: all;
571
+ .tina-tailwind .transition-colors {
572
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
498
573
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
499
574
  transition-duration: 150ms;
500
575
  }
@@ -506,6 +581,9 @@
506
581
  .tina-tailwind .duration-300 {
507
582
  transition-duration: 300ms;
508
583
  }
584
+ .tina-tailwind .duration-200 {
585
+ transition-duration: 200ms;
586
+ }
509
587
  .tina-tailwind .duration-150 {
510
588
  transition-duration: 150ms;
511
589
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tinacms",
3
- "version": "0.68.5",
3
+ "version": "0.68.6",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist"
@@ -25,9 +25,10 @@
25
25
  "@graphql-tools/relay-operation-optimizer": "^6.4.1",
26
26
  "@headlessui/react": "^1.5.0",
27
27
  "@heroicons/react": "^1.0.4",
28
+ "@react-hook/window-size": "^3.0.7",
28
29
  "@tinacms/schema-tools": "0.0.4",
29
30
  "@tinacms/sharedctx": "0.1.1",
30
- "@tinacms/toolkit": "0.56.28",
31
+ "@tinacms/toolkit": "0.56.29",
31
32
  "crypto-js": "^4.0.0",
32
33
  "fetch-ponyfill": "^7.1.0",
33
34
  "final-form": "4.20.1",