tinacms 0.66.5 → 0.66.8

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.
package/dist/index.es.js CHANGED
@@ -31,16 +31,17 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
  import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, Nav, LocalWarning, FormStatus, FormBuilder } from "@tinacms/toolkit";
33
33
  export * from "@tinacms/toolkit";
34
- import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print } from "graphql";
34
+ import * as G from "graphql";
35
+ import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
35
36
  import set from "lodash.set";
36
- import gql$1 from "graphql-tag";
37
37
  import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
38
+ import gql$1 from "graphql-tag";
38
39
  import styled from "styled-components";
39
40
  import * as yup from "yup";
40
41
  import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
41
42
  import { getIn, setIn } from "final-form";
42
43
  import UrlPattern from "url-pattern";
43
- import { NavLink, useNavigate, useParams, Link, BrowserRouter, Routes, Route } from "react-router-dom";
44
+ import { NavLink, useNavigate, useParams, Link, HashRouter, Routes, Route } from "react-router-dom";
44
45
  import { Menu, Transition } from "@headlessui/react";
45
46
  function popupWindow(url, title, window2, w, h) {
46
47
  const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -68,11 +69,11 @@ const authenticate = (clientId, frontendUrl) => {
68
69
  authTab = popupWindow(`${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`, "_blank", window, 1e3, 700);
69
70
  });
70
71
  };
71
- const formify = (query, schema) => {
72
+ const formify$1 = (query, schema) => {
72
73
  const typeInfo = new TypeInfo(schema);
73
74
  const pathsToPopulate = [];
74
75
  const visitor = {
75
- leave(node, key, parent, path, ancestors) {
76
+ leave(node2, key, parent, path, ancestors) {
76
77
  const type = typeInfo.getType();
77
78
  if (type) {
78
79
  const namedType = getNamedType(type);
@@ -375,6 +376,435 @@ function assertIsUnionType(type) {
375
376
  throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
376
377
  }
377
378
  }
379
+ const isNodeField = (type) => {
380
+ if (G.isUnionType(type)) {
381
+ return type.getTypes().every((type2) => {
382
+ return type2.getInterfaces().find((intfc) => intfc.name === "Node");
383
+ });
384
+ } else if (G.isObjectType(type)) {
385
+ return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
386
+ } else if (G.isInterfaceType(type)) {
387
+ if (type.name === "Node") {
388
+ return true;
389
+ }
390
+ } else {
391
+ throw new Error(`Expected GraphQLObjectType or GraphQLUnionType for isNodeField check`);
392
+ }
393
+ };
394
+ const isConnectionField = (type) => {
395
+ if (G.isObjectType(type)) {
396
+ return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
397
+ } else {
398
+ throw new Error(`Expected GraphQLObjectType for isCollectionField check`);
399
+ }
400
+ };
401
+ const getObjectField = (object, selectionNode) => {
402
+ return object.getFields()[selectionNode.name.value];
403
+ };
404
+ const getSelectedUnionType = (unionType, selectionNode) => {
405
+ return unionType.getTypes().find((type) => type.name === selectionNode.typeCondition.name.value);
406
+ };
407
+ function ensureNodeField(field) {
408
+ if (!isNodeField(field)) {
409
+ throw new Error(`Expected field to implement Node interface`);
410
+ }
411
+ }
412
+ function ensureUnionType(type) {
413
+ if (!G.isUnionType(type)) {
414
+ throw new Error(`Expected type to be GraphQLUnionType`);
415
+ }
416
+ }
417
+ function ensureObjectType(type) {
418
+ if (!G.isObjectType(type)) {
419
+ console.log(type);
420
+ throw new Error(`Expected type to be GraphQLObjectType`);
421
+ }
422
+ }
423
+ function ensureOperationDefinition(type) {
424
+ if (type.kind !== "OperationDefinition") {
425
+ throw new Error(`Expected top-level definition to be an OperationDefinition node, ensure your query has been optimized before calling formify`);
426
+ }
427
+ }
428
+ function getNameAndAlias(fieldNode, list) {
429
+ return {
430
+ name: fieldNode.name.value,
431
+ alias: fieldNode.alias ? fieldNode.alias.value : fieldNode.name.value,
432
+ list: !!list
433
+ };
434
+ }
435
+ const node = G.parse(`
436
+ query Sample {
437
+ _internalSys: sys {
438
+ path
439
+ collection {
440
+ name
441
+ }
442
+ }
443
+ form
444
+ values
445
+ }`);
446
+ const metaFields = node.definitions[0].selectionSet.selections;
447
+ const NOOP = "This is either an error or is not yet supported";
448
+ const UNEXPECTED = "Formify encountered an unexpected error, please contact support";
449
+ const DATA_NODE_NAME = "data";
450
+ const EDGES_NODE_NAME = "edges";
451
+ const NODE_NAME = "node";
452
+ const COLLECTION_FIELD_NAME = "getCollection";
453
+ const COLLECTIONS_FIELD_NAME = "getCollections";
454
+ const COLLECTIONS_DOCUMENTS_NAME = "documents";
455
+ class FormifyError extends Error {
456
+ constructor(code, details) {
457
+ let message;
458
+ switch (code) {
459
+ case "NOOP":
460
+ message = NOOP;
461
+ break;
462
+ case "UNEXPECTED":
463
+ message = UNEXPECTED;
464
+ break;
465
+ default:
466
+ message = "";
467
+ break;
468
+ }
469
+ super(`${message} ${details || ""}`);
470
+ this.name = "FormifyError";
471
+ }
472
+ }
473
+ const formify = async ({
474
+ schema,
475
+ query,
476
+ getOptimizedQuery
477
+ }) => {
478
+ const nodes = [];
479
+ const documentNode = G.parse(query);
480
+ const visitor2 = {
481
+ OperationDefinition: (node2) => {
482
+ if (!node2.name) {
483
+ return __spreadProps(__spreadValues({}, node2), {
484
+ name: {
485
+ kind: "Name",
486
+ value: `QueryOperation`
487
+ }
488
+ });
489
+ }
490
+ return node2;
491
+ }
492
+ };
493
+ const documentNodeWithName = visit(documentNode, visitor2);
494
+ const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
495
+ const typeInfo = new G.TypeInfo(schema);
496
+ const formifyConnection = ({
497
+ namedFieldType,
498
+ selectionNode,
499
+ path
500
+ }) => {
501
+ ensureObjectType(namedFieldType);
502
+ return __spreadProps(__spreadValues({}, selectionNode), {
503
+ selectionSet: {
504
+ kind: "SelectionSet",
505
+ selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
506
+ switch (selectionNode2.kind) {
507
+ case "Field":
508
+ if (selectionNode2.name.value === EDGES_NODE_NAME) {
509
+ const edgeField = namedFieldType.getFields()[EDGES_NODE_NAME];
510
+ const edgeType = G.getNamedType(edgeField.type);
511
+ ensureObjectType(edgeType);
512
+ return __spreadProps(__spreadValues({}, selectionNode2), {
513
+ selectionSet: {
514
+ kind: "SelectionSet",
515
+ selections: selectionNode2.selectionSet.selections.map((subSelectionNode) => {
516
+ switch (subSelectionNode.kind) {
517
+ case "Field":
518
+ if (subSelectionNode.name.value === NODE_NAME) {
519
+ const nodeField = edgeType.getFields()[NODE_NAME];
520
+ return formifyNode({
521
+ fieldOrInlineFragmentNode: subSelectionNode,
522
+ parentType: nodeField.type,
523
+ path: [
524
+ ...path,
525
+ getNameAndAlias(selectionNode2),
526
+ getNameAndAlias(subSelectionNode, true)
527
+ ]
528
+ });
529
+ } else {
530
+ return subSelectionNode;
531
+ }
532
+ default:
533
+ throw new FormifyError("NOOP");
534
+ }
535
+ })
536
+ }
537
+ });
538
+ }
539
+ return selectionNode2;
540
+ default:
541
+ throw new FormifyError("UNEXPECTED");
542
+ }
543
+ })
544
+ }
545
+ });
546
+ };
547
+ function formifyNode({
548
+ fieldOrInlineFragmentNode,
549
+ parentType,
550
+ path
551
+ }) {
552
+ let extraFields = [];
553
+ const namedParentType = G.getNamedType(parentType);
554
+ const formifiedNode = __spreadProps(__spreadValues({}, fieldOrInlineFragmentNode), {
555
+ selectionSet: {
556
+ kind: "SelectionSet",
557
+ selections: [
558
+ ...fieldOrInlineFragmentNode.selectionSet.selections.map((selectionNode) => {
559
+ switch (selectionNode.kind) {
560
+ case "InlineFragment":
561
+ if (G.isInterfaceType(namedParentType)) {
562
+ const type2 = schema.getImplementations(namedParentType).objects[selectionNode.typeCondition.name.value];
563
+ return formifyNode({
564
+ fieldOrInlineFragmentNode: selectionNode,
565
+ parentType: type2,
566
+ path
567
+ });
568
+ }
569
+ ensureUnionType(namedParentType);
570
+ const type = getSelectedUnionType(namedParentType, selectionNode);
571
+ return formifyNode({
572
+ fieldOrInlineFragmentNode: selectionNode,
573
+ parentType: type,
574
+ path
575
+ });
576
+ case "Field":
577
+ if (selectionNode.name.value === DATA_NODE_NAME) {
578
+ extraFields = metaFields;
579
+ if (G.isObjectType(namedParentType)) {
580
+ const field = getObjectField(namedParentType, selectionNode);
581
+ const namedType = G.getNamedType(field.type);
582
+ ensureObjectType(namedType);
583
+ return __spreadProps(__spreadValues({}, selectionNode), {
584
+ selectionSet: {
585
+ kind: "SelectionSet",
586
+ selections: [
587
+ ...selectionNode.selectionSet.selections.map((subSelectionNode) => {
588
+ switch (subSelectionNode.kind) {
589
+ case "Field":
590
+ const subSelectionField = getObjectField(namedType, subSelectionNode);
591
+ if (!subSelectionField) {
592
+ return subSelectionNode;
593
+ }
594
+ return formifyField({
595
+ fieldNode: subSelectionNode,
596
+ parentType: field.type,
597
+ path: [
598
+ ...path,
599
+ getNameAndAlias(subSelectionNode, G.isListType(subSelectionField.type))
600
+ ]
601
+ });
602
+ default:
603
+ throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
604
+ }
605
+ })
606
+ ]
607
+ }
608
+ });
609
+ }
610
+ return selectionNode;
611
+ }
612
+ return selectionNode;
613
+ default:
614
+ throw new FormifyError("UNEXPECTED");
615
+ }
616
+ }),
617
+ ...extraFields
618
+ ]
619
+ }
620
+ });
621
+ return formifiedNode;
622
+ }
623
+ const formifyField = ({
624
+ fieldNode,
625
+ parentType,
626
+ path
627
+ }) => {
628
+ const namedParentType = G.getNamedType(parentType);
629
+ ensureObjectType(namedParentType);
630
+ const field = getObjectField(namedParentType, fieldNode);
631
+ if (!field) {
632
+ if (fieldNode.name.value === "__typename") {
633
+ return fieldNode;
634
+ } else {
635
+ throw new FormifyError("UNEXPECTED", `field with no associated type ${fieldNode.name.value}`);
636
+ }
637
+ }
638
+ const namedType = G.getNamedType(field.type);
639
+ if (G.isScalarType(namedType)) {
640
+ return fieldNode;
641
+ }
642
+ return __spreadProps(__spreadValues({}, fieldNode), {
643
+ selectionSet: {
644
+ kind: "SelectionSet",
645
+ selections: [
646
+ ...fieldNode.selectionSet.selections.map((selectionNode) => {
647
+ switch (selectionNode.kind) {
648
+ case "Field":
649
+ if (selectionNode.name.value === "__typename") {
650
+ return selectionNode;
651
+ }
652
+ ensureObjectType(namedType);
653
+ const field2 = getObjectField(namedType, selectionNode);
654
+ if (!field2) {
655
+ return fieldNode;
656
+ }
657
+ if (G.isScalarType(G.getNamedType(field2.type))) {
658
+ return selectionNode;
659
+ }
660
+ return __spreadProps(__spreadValues({}, selectionNode), {
661
+ selectionSet: {
662
+ kind: "SelectionSet",
663
+ selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
664
+ switch (selectionNode2.kind) {
665
+ case "Field":
666
+ if (selectionNode2.name.value === "__typename") {
667
+ return selectionNode2;
668
+ }
669
+ return formifyField({
670
+ fieldNode: selectionNode2,
671
+ parentType: field2.type,
672
+ path
673
+ });
674
+ case "InlineFragment":
675
+ const namedType2 = G.getNamedType(field2.type);
676
+ ensureNodeField(namedType2);
677
+ return formifyNode({
678
+ fieldOrInlineFragmentNode: selectionNode2,
679
+ parentType: field2.type,
680
+ path
681
+ });
682
+ default:
683
+ throw new FormifyError("UNEXPECTED", `selection ${selectionNode2.kind}`);
684
+ }
685
+ })
686
+ }
687
+ });
688
+ case "InlineFragment":
689
+ ensureUnionType(namedType);
690
+ if (isNodeField(namedType)) {
691
+ const parentType2 = getSelectedUnionType(namedType, selectionNode);
692
+ return formifyNode({
693
+ fieldOrInlineFragmentNode: selectionNode,
694
+ parentType: parentType2,
695
+ path
696
+ });
697
+ }
698
+ return __spreadProps(__spreadValues({}, selectionNode), {
699
+ selectionSet: {
700
+ kind: "SelectionSet",
701
+ selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
702
+ switch (subSelectionNode.kind) {
703
+ case "Field":
704
+ const parentType2 = getSelectedUnionType(namedType, selectionNode);
705
+ return formifyField({
706
+ fieldNode: subSelectionNode,
707
+ parentType: parentType2,
708
+ path
709
+ });
710
+ default:
711
+ throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
712
+ }
713
+ })
714
+ }
715
+ });
716
+ default:
717
+ throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
718
+ }
719
+ })
720
+ ]
721
+ }
722
+ });
723
+ };
724
+ const formifiedQuery = {
725
+ kind: "Document",
726
+ definitions: optimizedQuery.definitions.map((definition) => {
727
+ typeInfo.enter(definition);
728
+ ensureOperationDefinition(definition);
729
+ const type = typeInfo.getType();
730
+ const namedType = G.getNamedType(type);
731
+ ensureObjectType(namedType);
732
+ return __spreadProps(__spreadValues({}, definition), {
733
+ selectionSet: {
734
+ kind: "SelectionSet",
735
+ selections: definition.selectionSet.selections.map((selectionNode) => {
736
+ switch (selectionNode.kind) {
737
+ case "Field":
738
+ const parentType = type;
739
+ const namedParentType = G.getNamedType(parentType);
740
+ ensureObjectType(namedParentType);
741
+ const field = getObjectField(namedParentType, selectionNode);
742
+ const namedFieldType = G.getNamedType(field.type);
743
+ if (isNodeField(namedFieldType)) {
744
+ return formifyNode({
745
+ fieldOrInlineFragmentNode: selectionNode,
746
+ parentType: field.type,
747
+ path: [getNameAndAlias(selectionNode)]
748
+ });
749
+ } else if (isConnectionField(namedFieldType)) {
750
+ return formifyConnection({
751
+ namedFieldType,
752
+ selectionNode,
753
+ path: [getNameAndAlias(selectionNode)]
754
+ });
755
+ }
756
+ if (selectionNode.name.value === COLLECTION_FIELD_NAME || selectionNode.name.value === COLLECTIONS_FIELD_NAME) {
757
+ return __spreadProps(__spreadValues({}, selectionNode), {
758
+ selectionSet: {
759
+ kind: "SelectionSet",
760
+ selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
761
+ switch (selectionNode2.kind) {
762
+ case "Field":
763
+ if (selectionNode2.name.value === COLLECTIONS_DOCUMENTS_NAME) {
764
+ ensureObjectType(namedFieldType);
765
+ const n = namedFieldType.getFields()[COLLECTIONS_DOCUMENTS_NAME];
766
+ const docType = G.getNamedType(n.type);
767
+ return formifyConnection({
768
+ namedFieldType: docType,
769
+ selectionNode: selectionNode2,
770
+ path: [getNameAndAlias(selectionNode2)]
771
+ });
772
+ }
773
+ return selectionNode2;
774
+ default:
775
+ throw new FormifyError("NOOP");
776
+ }
777
+ })
778
+ }
779
+ });
780
+ }
781
+ throw new FormifyError("NOOP");
782
+ default:
783
+ throw new FormifyError("UNEXPECTED");
784
+ }
785
+ })
786
+ }
787
+ });
788
+ })
789
+ };
790
+ nodes.map((node2) => {
791
+ const namePath = [];
792
+ const aliasPath = [];
793
+ node2.path.forEach((p) => {
794
+ namePath.push(p.name);
795
+ aliasPath.push(p.alias);
796
+ if (p.list) {
797
+ namePath.push("NUM");
798
+ aliasPath.push("NUM");
799
+ }
800
+ });
801
+ JSON.stringify({
802
+ namePath: namePath.join("."),
803
+ aliasPath: aliasPath.join(".")
804
+ }, null, 2);
805
+ });
806
+ return { formifiedQuery, nodes };
807
+ };
378
808
  const captureBranchName = /^refs\/heads\/(.*)/;
379
809
  const parseRefForBranchName = (ref) => {
380
810
  const matches = ref.match(captureBranchName);
@@ -422,6 +852,14 @@ mutation addPendingDocumentMutation(
422
852
  }
423
853
  return this.schema;
424
854
  };
855
+ this.getOptimizedQuery = async (documentNode) => {
856
+ const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
857
+ getOptimizedQuery(queryString: $queryString)
858
+ }`, {
859
+ variables: { queryString: print(documentNode) }
860
+ });
861
+ return parse(data.getOptimizedQuery);
862
+ };
425
863
  this.options = options;
426
864
  this.setBranch(options.branch);
427
865
  this.events.subscribe("branch:change", ({ branchName }) => {
@@ -481,9 +919,22 @@ mutation addPendingDocumentMutation(
481
919
  this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
482
920
  this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
483
921
  }
484
- async requestWithForm(query, { variables }) {
922
+ async requestWithForm(query, {
923
+ variables,
924
+ useUnstableFormify
925
+ }) {
485
926
  const schema = await this.getSchema();
486
- const formifiedQuery = formify(query(gql$1), schema);
927
+ let formifiedQuery;
928
+ if (useUnstableFormify) {
929
+ const res = await formify({
930
+ schema,
931
+ query: print(query(gql$1)),
932
+ getOptimizedQuery: this.getOptimizedQuery
933
+ });
934
+ formifiedQuery = res.formifiedQuery;
935
+ } else {
936
+ formifiedQuery = formify$1(query(gql$1), schema);
937
+ }
487
938
  return this.request(print(formifiedQuery), { variables });
488
939
  }
489
940
  async request(query, { variables }) {
@@ -710,6 +1161,9 @@ class TinaAdminApi {
710
1161
  constructor(cms) {
711
1162
  this.api = cms.api.tina;
712
1163
  }
1164
+ async isAuthenticated() {
1165
+ return await this.api.isAuthenticated();
1166
+ }
713
1167
  async fetchCollections() {
714
1168
  const response = await this.api.request(`#graphql
715
1169
  query{
@@ -1012,7 +1466,8 @@ function useGraphqlForms({
1012
1466
  const formIds = [];
1013
1467
  setIsLoading(true);
1014
1468
  cms.api.tina.requestWithForm((gql2) => gql2(query), {
1015
- variables
1469
+ variables,
1470
+ useUnstableFormify: cms.flags.get("use-unstable-formify")
1016
1471
  }).then((payload) => {
1017
1472
  cms.plugins.remove(new FormMetaPlugin({ name: "tina-admin-link" }));
1018
1473
  setData(payload);
@@ -1383,1420 +1838,104 @@ const useDocumentCreatorPlugin = (args) => {
1383
1838
  };
1384
1839
  }, [plugin]);
1385
1840
  };
1386
- var styles = `/**
1387
- Use a better box model (opinionated).
1388
- */
1389
-
1390
- .tina-tailwind *,
1391
- .tina-tailwind ::before,
1392
- .tina-tailwind ::after {
1393
- box-sizing: border-box;
1394
- }
1395
-
1396
- /**
1397
- Use a more readable tab size (opinionated).
1398
- */
1399
-
1400
- .tina-tailwind html {
1401
- -moz-tab-size: 4;
1402
- tab-size: 4;
1403
- }
1404
-
1405
- /**
1406
- 1. Correct the line height in all browsers.
1407
- 2. Prevent adjustments of font size after orientation changes in iOS.
1408
- */
1409
-
1410
- .tina-tailwind html {
1411
- line-height: 1.15; /* 1 */
1412
- -webkit-text-size-adjust: 100%; /* 2 */
1413
- }
1414
-
1415
- /**
1416
- Remove the margin in all browsers.
1417
- */
1418
-
1419
- .tina-tailwind body {
1420
- margin: 0;
1421
- }
1422
-
1423
- /**
1424
- Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
1425
- */
1426
-
1427
- .tina-tailwind body {
1428
- font-family:
1429
- system-ui,
1430
- -apple-system, /* Firefox supports this but not yet \`system-ui\` */
1431
- 'Segoe UI',
1432
- Roboto,
1433
- Helvetica,
1434
- Arial,
1435
- sans-serif,
1436
- 'Apple Color Emoji',
1437
- 'Segoe UI Emoji';
1438
- }
1439
-
1440
- /**
1441
- 1. Add the correct height in Firefox.
1442
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
1443
- */
1444
-
1445
- .tina-tailwind hr {
1446
- height: 0; /* 1 */
1447
- color: inherit; /* 2 */
1448
- }
1449
-
1450
- /**
1451
- Add the correct text decoration in Chrome, Edge, and Safari.
1452
- */
1453
-
1454
- .tina-tailwind abbr[title] {
1455
- text-decoration: underline dotted;
1456
- }
1457
-
1458
- /**
1459
- Add the correct font weight in Edge and Safari.
1460
- */
1461
-
1462
- .tina-tailwind b,
1463
- .tina-tailwind strong {
1464
- font-weight: bolder;
1465
- }
1466
-
1467
- /**
1468
- 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
1469
- 2. Correct the odd 'em' font sizing in all browsers.
1470
- */
1471
-
1472
- .tina-tailwind code,
1473
- .tina-tailwind kbd,
1474
- .tina-tailwind samp,
1475
- .tina-tailwind pre {
1476
- font-family:
1477
- ui-monospace,
1478
- SFMono-Regular,
1479
- Consolas,
1480
- 'Liberation Mono',
1481
- Menlo,
1482
- monospace; /* 1 */
1483
- font-size: 1em; /* 2 */
1484
- }
1485
-
1486
- /**
1487
- Add the correct font size in all browsers.
1488
- */
1489
-
1490
- .tina-tailwind small {
1491
- font-size: 80%;
1492
- }
1493
-
1494
- /**
1495
- Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
1496
- */
1497
-
1498
- .tina-tailwind sub,
1499
- .tina-tailwind sup {
1500
- font-size: 75%;
1501
- line-height: 0;
1502
- position: relative;
1503
- vertical-align: baseline;
1504
- }
1505
-
1506
- /*
1507
- Text-level semantics
1508
- ====================
1509
- */
1510
-
1511
- .tina-tailwind sub {
1512
- bottom: -0.25em;
1513
- }
1514
-
1515
- /*
1516
- Grouping content
1517
- ================
1518
- */
1519
-
1520
- .tina-tailwind sup {
1521
- top: -0.5em;
1522
- }
1523
-
1524
- /**
1525
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
1526
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
1527
- */
1528
-
1529
- .tina-tailwind table {
1530
- text-indent: 0; /* 1 */
1531
- border-color: inherit; /* 2 */
1532
- }
1533
-
1534
- /**
1535
- 1. Change the font styles in all browsers.
1536
- 2. Remove the margin in Firefox and Safari.
1537
- */
1538
-
1539
- .tina-tailwind button,
1540
- .tina-tailwind input,
1541
- .tina-tailwind optgroup,
1542
- .tina-tailwind select,
1543
- .tina-tailwind textarea {
1544
- font-family: inherit; /* 1 */
1545
- font-size: 100%; /* 1 */
1546
- line-height: 1.15; /* 1 */
1547
- margin: 0; /* 2 */
1548
- }
1549
-
1550
- /**
1551
- Remove the inheritance of text transform in Edge and Firefox.
1552
- 1. Remove the inheritance of text transform in Firefox.
1553
- */
1554
-
1555
- .tina-tailwind button,
1556
- .tina-tailwind select { /* 1 */
1557
- text-transform: none;
1841
+ 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-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-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-600 {\n --tw-text-opacity: 1;\n color: rgb(86 81 101 / 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 .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';
1842
+ function useTina({
1843
+ query,
1844
+ variables,
1845
+ data
1846
+ }) {
1847
+ const {
1848
+ setRequest,
1849
+ state,
1850
+ isDummyContainer,
1851
+ isLoading: contextLoading
1852
+ } = React.useContext(TinaDataContext);
1853
+ const [waitForContextRerender, setWaitForContextRerender] = useState(!isDummyContainer);
1854
+ const isLoading = contextLoading || waitForContextRerender;
1855
+ React.useEffect(() => {
1856
+ setRequest({ query, variables });
1857
+ }, [JSON.stringify(variables), query]);
1858
+ useEffect(() => {
1859
+ if (!isDummyContainer) {
1860
+ setTimeout(() => setWaitForContextRerender(false), 0);
1861
+ }
1862
+ return () => {
1863
+ setRequest(void 0);
1864
+ };
1865
+ }, [isDummyContainer]);
1866
+ return {
1867
+ data: isDummyContainer || isLoading ? data : state.payload,
1868
+ isLoading
1869
+ };
1558
1870
  }
1559
-
1560
- /**
1561
- Correct the inability to style clickable types in iOS and Safari.
1562
- */
1563
-
1564
- .tina-tailwind button,
1565
- .tina-tailwind [type='button'],
1566
- .tina-tailwind [type='reset'],
1567
- .tina-tailwind [type='submit'] {
1568
- -webkit-appearance: button;
1569
- }
1570
-
1571
- /**
1572
- Remove the inner border and padding in Firefox.
1573
- */
1574
-
1575
- .tina-tailwind ::-moz-focus-inner {
1576
- border-style: none;
1577
- padding: 0;
1578
- }
1579
-
1580
- /**
1581
- Restore the focus styles unset by the previous rule.
1582
- */
1583
-
1584
- .tina-tailwind :-moz-focusring {
1585
- outline: 1px dotted ButtonText;
1586
- }
1587
-
1588
- /**
1589
- Remove the additional ':invalid' styles in Firefox.
1590
- See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
1591
- */
1592
-
1593
- .tina-tailwind :-moz-ui-invalid {
1594
- box-shadow: none;
1595
- }
1596
-
1597
- /**
1598
- Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
1599
- */
1600
-
1601
- .tina-tailwind legend {
1602
- padding: 0;
1603
- }
1604
-
1605
- /**
1606
- Add the correct vertical alignment in Chrome and Firefox.
1607
- */
1608
-
1609
- .tina-tailwind progress {
1610
- vertical-align: baseline;
1611
- }
1612
-
1613
- /**
1614
- Correct the cursor style of increment and decrement buttons in Safari.
1615
- */
1616
-
1617
- .tina-tailwind ::-webkit-inner-spin-button,
1618
- .tina-tailwind ::-webkit-outer-spin-button {
1619
- height: auto;
1620
- }
1621
-
1622
- /**
1623
- 1. Correct the odd appearance in Chrome and Safari.
1624
- 2. Correct the outline style in Safari.
1625
- */
1626
-
1627
- .tina-tailwind [type='search'] {
1628
- -webkit-appearance: textfield; /* 1 */
1629
- outline-offset: -2px; /* 2 */
1630
- }
1631
-
1632
- /**
1633
- Remove the inner padding in Chrome and Safari on macOS.
1634
- */
1635
-
1636
- .tina-tailwind ::-webkit-search-decoration {
1637
- -webkit-appearance: none;
1638
- }
1639
-
1640
- /**
1641
- 1. Correct the inability to style clickable types in iOS and Safari.
1642
- 2. Change font properties to 'inherit' in Safari.
1643
- */
1644
-
1645
- .tina-tailwind ::-webkit-file-upload-button {
1646
- -webkit-appearance: button; /* 1 */
1647
- font: inherit; /* 2 */
1648
- }
1649
-
1650
- /*
1651
- Add the correct display in Chrome and Safari.
1652
- */
1653
-
1654
- .tina-tailwind summary {
1655
- display: list-item;
1656
- }
1657
-
1658
- /**
1659
- * Removes the default spacing and border for appropriate elements.
1660
- */
1661
-
1662
- .tina-tailwind blockquote,
1663
- .tina-tailwind dl,
1664
- .tina-tailwind dd,
1665
- .tina-tailwind h1,
1666
- .tina-tailwind h2,
1667
- .tina-tailwind h3,
1668
- .tina-tailwind h4,
1669
- .tina-tailwind h5,
1670
- .tina-tailwind h6,
1671
- .tina-tailwind hr,
1672
- .tina-tailwind figure,
1673
- .tina-tailwind p,
1674
- .tina-tailwind pre {
1675
- margin: 0;
1676
- }
1677
-
1678
- /**
1679
- * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
1680
- * A thin layer on top of normalize.css that provides a starting point more
1681
- * suitable for web applications.
1682
- */
1683
-
1684
- .tina-tailwind button {
1685
- background-color: transparent;
1686
- background-image: none;
1687
- }
1688
-
1689
- /*
1690
- Interactive
1691
- ===========
1692
- */
1693
-
1694
- .tina-tailwind fieldset {
1695
- margin: 0;
1696
- padding: 0;
1697
- }
1698
-
1699
- /*
1700
- Forms
1701
- =====
1702
- */
1703
-
1704
- .tina-tailwind ol,
1705
- .tina-tailwind ul {
1706
- list-style: none;
1707
- margin: 0;
1708
- padding: 0;
1709
- }
1710
-
1711
- /**
1712
- * 1. Use the user's configured \`sans\` font-family (with Tailwind's default
1713
- * sans-serif font stack as a fallback) as a sane default.
1714
- * 2. Use Tailwind's default "normal" line-height so the user isn't forced
1715
- * to override it to ensure consistency even when using the default theme.
1716
- */
1717
-
1718
- .tina-tailwind html {
1719
- 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"; /* 1 */
1720
- line-height: 1.5; /* 2 */
1721
- }
1722
-
1723
- /**
1724
- * Inherit font-family and line-height from \`html\` so users can set them as
1725
- * a class directly on the \`html\` element.
1726
- */
1727
-
1728
- .tina-tailwind body {
1729
- font-family: inherit;
1730
- line-height: inherit;
1731
- }
1732
-
1733
- /**
1734
- * 1. Prevent padding and border from affecting element width.
1735
- *
1736
- * We used to set this in the html element and inherit from
1737
- * the parent element for everything else. This caused issues
1738
- * in shadow-dom-enhanced elements like <details> where the content
1739
- * is wrapped by a div with box-sizing set to \`content-box\`.
1740
- *
1741
- * https://github.com/mozdevs/cssremedy/issues/4
1742
- *
1743
- *
1744
- * 2. Allow adding a border to an element by just adding a border-width.
1745
- *
1746
- * By default, the way the browser specifies that an element should have no
1747
- * border is by setting it's border-style to \`none\` in the user-agent
1748
- * stylesheet.
1749
- *
1750
- * In order to easily add borders to elements by just setting the \`border-width\`
1751
- * property, we change the default border-style for all elements to \`solid\`, and
1752
- * use border-width to hide them instead. This way our \`border\` utilities only
1753
- * need to set the \`border-width\` property instead of the entire \`border\`
1754
- * shorthand, making our border utilities much more straightforward to compose.
1755
- *
1756
- * https://github.com/tailwindcss/tailwindcss/pull/116
1757
- */
1758
-
1759
- .tina-tailwind *,
1760
- .tina-tailwind ::before,
1761
- .tina-tailwind ::after {
1762
- box-sizing: border-box; /* 1 */
1763
- border-width: 0; /* 2 */
1764
- border-style: solid; /* 2 */
1765
- border-color: currentColor; /* 2 */
1766
- }
1767
-
1768
- /*
1769
- * Ensure horizontal rules are visible by default
1770
- */
1771
-
1772
- .tina-tailwind hr {
1773
- border-top-width: 1px;
1774
- }
1775
-
1776
- /**
1777
- * Undo the \`border-style: none\` reset that Normalize applies to images so that
1778
- * our \`border-{width}\` utilities have the expected effect.
1779
- *
1780
- * The Normalize reset is unnecessary for us since we default the border-width
1781
- * to 0 on all elements.
1782
- *
1783
- * https://github.com/tailwindcss/tailwindcss/issues/362
1784
- */
1785
-
1786
- .tina-tailwind img {
1787
- border-style: solid;
1788
- }
1789
-
1790
- /**
1791
- * Tailwind custom reset styles
1792
- */
1793
-
1794
- .tina-tailwind textarea {
1795
- resize: vertical;
1796
- }
1797
-
1798
- /*
1799
- Tabular data
1800
- ============
1801
- */
1802
-
1803
- .tina-tailwind input::placeholder,
1804
- .tina-tailwind textarea::placeholder {
1805
- opacity: 1;
1806
- color: #918c9e;
1807
- }
1808
-
1809
- /*
1810
- Sections
1811
- ========
1812
- */
1813
-
1814
- .tina-tailwind button,
1815
- .tina-tailwind [role="button"] {
1816
- cursor: pointer;
1817
- }
1818
-
1819
- /**
1820
- * Override legacy focus reset from Normalize with modern Firefox focus styles.
1821
- *
1822
- * This is actually an improvement over the new defaults in Firefox in our testing,
1823
- * as it triggers the better focus styles even for links, which still use a dotted
1824
- * outline in Firefox by default.
1825
- */
1826
-
1827
- .tina-tailwind :-moz-focusring {
1828
- outline: auto;
1829
- }
1830
-
1831
- /*
1832
- Document
1833
- ========
1834
- */
1835
-
1836
- .tina-tailwind table {
1837
- border-collapse: collapse;
1838
- }
1839
-
1840
- /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
1841
-
1842
- .tina-tailwind h1,
1843
- .tina-tailwind h2,
1844
- .tina-tailwind h3,
1845
- .tina-tailwind h4,
1846
- .tina-tailwind h5,
1847
- .tina-tailwind h6 {
1848
- font-size: inherit;
1849
- font-weight: inherit;
1850
- }
1851
-
1852
- /**
1853
- * Reset links to optimize for opt-in styling instead of
1854
- * opt-out.
1855
- */
1856
-
1857
- .tina-tailwind a {
1858
- color: inherit;
1859
- text-decoration: inherit;
1860
- }
1861
-
1862
- /**
1863
- * Reset form element properties that are easy to forget to
1864
- * style explicitly so you don't inadvertently introduce
1865
- * styles that deviate from your design system. These styles
1866
- * supplement a partial reset that is already applied by
1867
- * normalize.css.
1868
- */
1869
-
1870
- .tina-tailwind button,
1871
- .tina-tailwind input,
1872
- .tina-tailwind optgroup,
1873
- .tina-tailwind select,
1874
- .tina-tailwind textarea {
1875
- padding: 0;
1876
- line-height: inherit;
1877
- color: inherit;
1878
- }
1879
-
1880
- /**
1881
- * Use the configured 'mono' font family for elements that
1882
- * are expected to be rendered with a monospace font, falling
1883
- * back to the system monospace stack if there is no configured
1884
- * 'mono' font family.
1885
- */
1886
-
1887
- .tina-tailwind pre,
1888
- .tina-tailwind code,
1889
- .tina-tailwind kbd,
1890
- .tina-tailwind samp {
1891
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1892
- }
1893
-
1894
- /**
1895
- * 1. Make replaced elements \`display: block\` by default as that's
1896
- * the behavior you want almost all of the time. Inspired by
1897
- * CSS Remedy, with \`svg\` added as well.
1898
- *
1899
- * https://github.com/mozdevs/cssremedy/issues/14
1900
- *
1901
- * 2. Add \`vertical-align: middle\` to align replaced elements more
1902
- * sensibly by default when overriding \`display\` by adding a
1903
- * utility like \`inline\`.
1904
- *
1905
- * This can trigger a poorly considered linting error in some
1906
- * tools but is included by design.
1907
- *
1908
- * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
1909
- */
1910
-
1911
- .tina-tailwind img,
1912
- .tina-tailwind svg,
1913
- .tina-tailwind video,
1914
- .tina-tailwind canvas,
1915
- .tina-tailwind audio,
1916
- .tina-tailwind iframe,
1917
- .tina-tailwind embed,
1918
- .tina-tailwind object {
1919
- display: block; /* 1 */
1920
- vertical-align: middle; /* 2 */
1921
- }
1922
-
1923
- /**
1924
- * Constrain images and videos to the parent width and preserve
1925
- * their intrinsic aspect ratio.
1926
- *
1927
- * https://github.com/mozdevs/cssremedy/issues/14
1928
- */
1929
-
1930
- .tina-tailwind img,
1931
- .tina-tailwind video {
1932
- max-width: 100%;
1933
- height: auto;
1934
- }
1935
-
1936
- /**
1937
- * Ensure the default browser behavior of the \`hidden\` attribute.
1938
- */
1939
-
1940
- .tina-tailwind [hidden] {
1941
- display: none;
1942
- }
1943
-
1944
- /*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com
1945
- */
1946
-
1947
- .tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
1948
- --tw-translate-x: 0;
1949
- --tw-translate-y: 0;
1950
- --tw-rotate: 0;
1951
- --tw-skew-x: 0;
1952
- --tw-skew-y: 0;
1953
- --tw-scale-x: 1;
1954
- --tw-scale-y: 1;
1955
- --tw-transform: translateX(var(--tw-translate-x)) translateY(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));
1956
- }
1957
-
1958
- .tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
1959
- --tw-border-opacity: 1;
1960
- border-color: rgba(225, 221, 236, var(--tw-border-opacity));
1961
- }
1962
-
1963
- .tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
1964
- --tw-ring-offset-shadow: 0 0 #0000;
1965
- --tw-ring-shadow: 0 0 #0000;
1966
- --tw-shadow: 0 0 #0000;
1967
- }
1968
-
1969
- .tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
1970
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
1971
- --tw-ring-offset-width: 0px;
1972
- --tw-ring-offset-color: #fff;
1973
- --tw-ring-color: rgba(0, 132, 255, 0.5);
1974
- --tw-ring-offset-shadow: 0 0 #0000;
1975
- --tw-ring-shadow: 0 0 #0000;
1976
- --tw-shadow: 0 0 #0000;
1977
- }
1978
-
1979
- .tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
1980
- --tw-blur: var(--tw-empty,/*!*/ /*!*/);
1981
- --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
1982
- --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
1983
- --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
1984
- --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
1985
- --tw-invert: var(--tw-empty,/*!*/ /*!*/);
1986
- --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
1987
- --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
1988
- --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
1989
- --tw-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);
1990
- }
1991
-
1992
- .tina-tailwind .static {
1993
- position: static !important;
1994
- }
1995
-
1996
- .tina-tailwind .fixed {
1997
- position: fixed !important;
1998
- }
1999
-
2000
- .tina-tailwind .absolute {
2001
- position: absolute !important;
2002
- }
2003
-
2004
- .tina-tailwind .relative {
2005
- position: relative !important;
2006
- }
2007
-
2008
- .tina-tailwind .left-0 {
2009
- left: 0px !important;
2010
- }
2011
-
2012
- .tina-tailwind .right-0 {
2013
- right: 0px !important;
2014
- }
2015
-
2016
- .tina-tailwind .bottom-2 {
2017
- bottom: 8px !important;
2018
- }
2019
-
2020
- .tina-tailwind .right-5 {
2021
- right: 20px !important;
2022
- }
2023
-
2024
- .tina-tailwind .z-50 {
2025
- z-index: 50 !important;
2026
- }
2027
-
2028
- .tina-tailwind .mx-auto {
2029
- margin-left: auto !important;
2030
- margin-right: auto !important;
2031
- }
2032
-
2033
- .tina-tailwind .mr-2 {
2034
- margin-right: 8px !important;
2035
- }
2036
-
2037
- .tina-tailwind .mb-2 {
2038
- margin-bottom: 8px !important;
2039
- }
2040
-
2041
- .tina-tailwind .mb-1 {
2042
- margin-bottom: 4px !important;
2043
- }
2044
-
2045
- .tina-tailwind .-mt-0\\.5 {
2046
- margin-top: -2px !important;
2047
- }
2048
-
2049
- .tina-tailwind .-mt-0 {
2050
- margin-top: 0px !important;
2051
- }
2052
-
2053
- .tina-tailwind .ml-1 {
2054
- margin-left: 4px !important;
2055
- }
2056
-
2057
- .tina-tailwind .mt-2 {
2058
- margin-top: 8px !important;
2059
- }
2060
-
2061
- .tina-tailwind .mr-1\\.5 {
2062
- margin-right: 6px !important;
2063
- }
2064
-
2065
- .tina-tailwind .mr-1 {
2066
- margin-right: 4px !important;
2067
- }
2068
-
2069
- .tina-tailwind .block {
2070
- display: block !important;
2071
- }
2072
-
2073
- .tina-tailwind .inline-block {
2074
- display: inline-block !important;
2075
- }
2076
-
2077
- .tina-tailwind .flex {
2078
- display: flex !important;
2079
- }
2080
-
2081
- .tina-tailwind .inline-flex {
2082
- display: inline-flex !important;
2083
- }
2084
-
2085
- .tina-tailwind .table {
2086
- display: table !important;
2087
- }
2088
-
2089
- .tina-tailwind .h-screen {
2090
- height: 100vh !important;
2091
- }
2092
-
2093
- .tina-tailwind .h-auto {
2094
- height: auto !important;
2095
- }
2096
-
2097
- .tina-tailwind .h-full {
2098
- height: 100% !important;
2099
- }
2100
-
2101
- .tina-tailwind .h-6 {
2102
- height: 24px !important;
2103
- }
2104
-
2105
- .tina-tailwind .h-10 {
2106
- height: 40px !important;
2107
- }
2108
-
2109
- .tina-tailwind .h-5 {
2110
- height: 20px !important;
2111
- }
2112
-
2113
- .tina-tailwind .h-12 {
2114
- height: 48px !important;
2115
- }
2116
-
2117
- .tina-tailwind .w-full {
2118
- width: 100% !important;
2119
- }
2120
-
2121
- .tina-tailwind .w-10 {
2122
- width: 40px !important;
2123
- }
2124
-
2125
- .tina-tailwind .w-auto {
2126
- width: auto !important;
2127
- }
2128
-
2129
- .tina-tailwind .w-5 {
2130
- width: 20px !important;
2131
- }
2132
-
2133
- .tina-tailwind .w-56 {
2134
- width: 224px !important;
2135
- }
2136
-
2137
- .tina-tailwind .w-6 {
2138
- width: 24px !important;
2139
- }
2140
-
2141
- .tina-tailwind .max-w-lg {
2142
- max-width: 32rem !important;
2143
- }
2144
-
2145
- .tina-tailwind .max-w-screen-xl {
2146
- max-width: 1280px !important;
2147
- }
2148
-
2149
- .tina-tailwind .max-w-form {
2150
- max-width: 900px !important;
2151
- }
2152
-
2153
- .tina-tailwind .max-w-full {
2154
- max-width: 100% !important;
2155
- }
2156
-
2157
- .tina-tailwind .flex-1 {
2158
- flex: 1 1 0% !important;
2159
- }
2160
-
2161
- .tina-tailwind .flex-shrink-0 {
2162
- flex-shrink: 0 !important;
2163
- }
2164
-
2165
- .tina-tailwind .flex-grow-0 {
2166
- flex-grow: 0 !important;
2167
- }
2168
-
2169
- .tina-tailwind .table-auto {
2170
- table-layout: auto !important;
2171
- }
2172
-
2173
- .tina-tailwind .origin-top-right {
2174
- transform-origin: top right !important;
2175
- }
2176
-
2177
- .tina-tailwind .translate-y-full {
2178
- --tw-translate-y: 100% !important;
2179
- transform: var(--tw-transform) !important;
2180
- }
2181
-
2182
- .tina-tailwind .-translate-y-2 {
2183
- --tw-translate-y: -8px !important;
2184
- transform: var(--tw-transform) !important;
2185
- }
2186
-
2187
- .tina-tailwind .translate-y-0 {
2188
- --tw-translate-y: 0px !important;
2189
- transform: var(--tw-transform) !important;
2190
- }
2191
-
2192
- .tina-tailwind .scale-95 {
2193
- --tw-scale-x: .95 !important;
2194
- --tw-scale-y: .95 !important;
2195
- transform: var(--tw-transform) !important;
2196
- }
2197
-
2198
- .tina-tailwind .scale-100 {
2199
- --tw-scale-x: 1 !important;
2200
- --tw-scale-y: 1 !important;
2201
- transform: var(--tw-transform) !important;
2202
- }
2203
-
2204
- .tina-tailwind .transform {
2205
- transform: var(--tw-transform) !important;
2206
- }
2207
-
2208
- .tina-tailwind .cursor-pointer {
2209
- cursor: pointer !important;
2210
- }
2211
-
2212
- .tina-tailwind .flex-col {
2213
- flex-direction: column !important;
2214
- }
2215
-
2216
- .tina-tailwind .items-end {
2217
- align-items: flex-end !important;
2218
- }
2219
-
2220
- .tina-tailwind .items-center {
2221
- align-items: center !important;
2222
- }
2223
-
2224
- .tina-tailwind .items-stretch {
2225
- align-items: stretch !important;
2226
- }
2227
-
2228
- .tina-tailwind .justify-end {
2229
- justify-content: flex-end !important;
2230
- }
2231
-
2232
- .tina-tailwind .justify-center {
2233
- justify-content: center !important;
2234
- }
2235
-
2236
- .tina-tailwind .justify-between {
2237
- justify-content: space-between !important;
2238
- }
2239
-
2240
- .tina-tailwind .gap-0\\.5 {
2241
- gap: 2px !important;
2242
- }
2243
-
2244
- .tina-tailwind .gap-0 {
2245
- gap: 0px !important;
2246
- }
2247
-
2248
- .tina-tailwind .gap-4 {
2249
- gap: 16px !important;
2250
- }
2251
-
2252
- .tina-tailwind .gap-3 {
2253
- gap: 12px !important;
2254
- }
2255
-
2256
- .tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {
2257
- --tw-divide-y-reverse: 0 !important;
2258
- border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
2259
- border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;
2260
- }
2261
-
2262
- .tina-tailwind .overflow-hidden {
2263
- overflow: hidden !important;
2264
- }
2265
-
2266
- .tina-tailwind .overflow-y-auto {
2267
- overflow-y: auto !important;
2268
- }
2269
-
2270
- .tina-tailwind .whitespace-nowrap {
2271
- white-space: nowrap !important;
2272
- }
2273
-
2274
- .tina-tailwind .rounded-lg {
2275
- border-radius: 8px !important;
2276
- }
2277
-
2278
- .tina-tailwind .rounded-full {
2279
- border-radius: 9999px !important;
2280
- }
2281
-
2282
- .tina-tailwind .rounded-md {
2283
- border-radius: 6px !important;
2284
- }
2285
-
2286
- .tina-tailwind .border {
2287
- border-width: 1px !important;
2288
- }
2289
-
2290
- .tina-tailwind .border-b {
2291
- border-bottom-width: 1px !important;
2292
- }
2293
-
2294
- .tina-tailwind .border-gray-200 {
2295
- --tw-border-opacity: 1 !important;
2296
- border-color: rgba(225, 221, 236, var(--tw-border-opacity)) !important;
2297
- }
2298
-
2299
- .tina-tailwind .bg-white {
2300
- --tw-bg-opacity: 1 !important;
2301
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
2302
- }
2303
-
2304
- .tina-tailwind .bg-gray-50 {
2305
- --tw-bg-opacity: 1 !important;
2306
- background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;
2307
- }
2308
-
2309
- .tina-tailwind .bg-blue-500 {
2310
- --tw-bg-opacity: 1 !important;
2311
- background-color: rgba(0, 132, 255, var(--tw-bg-opacity)) !important;
2312
- }
2313
-
2314
- .tina-tailwind .bg-gradient-to-b {
2315
- background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
2316
- }
2317
-
2318
- .tina-tailwind .from-blue-900 {
2319
- --tw-gradient-from: #1D2C6C !important;
2320
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 44, 108, 0)) !important;
2321
- }
2322
-
2323
- .tina-tailwind .to-gray-900 {
2324
- --tw-gradient-to: #252336 !important;
2325
- }
2326
-
2327
- .tina-tailwind .px-4 {
2328
- padding-left: 16px !important;
2329
- padding-right: 16px !important;
2330
- }
2331
-
2332
- .tina-tailwind .py-6 {
2333
- padding-top: 24px !important;
2334
- padding-bottom: 24px !important;
2335
- }
2336
-
2337
- .tina-tailwind .px-5 {
2338
- padding-left: 20px !important;
2339
- padding-right: 20px !important;
2340
- }
2341
-
2342
- .tina-tailwind .py-4 {
2343
- padding-top: 16px !important;
2344
- padding-bottom: 16px !important;
2345
- }
2346
-
2347
- .tina-tailwind .px-12 {
2348
- padding-left: 48px !important;
2349
- padding-right: 48px !important;
2350
- }
2351
-
2352
- .tina-tailwind .py-10 {
2353
- padding-top: 40px !important;
2354
- padding-bottom: 40px !important;
2355
- }
2356
-
2357
- .tina-tailwind .px-20 {
2358
- padding-left: 80px !important;
2359
- padding-right: 80px !important;
2360
- }
2361
-
2362
- .tina-tailwind .px-6 {
2363
- padding-left: 24px !important;
2364
- padding-right: 24px !important;
2365
- }
2366
-
2367
- .tina-tailwind .py-1 {
2368
- padding-top: 4px !important;
2369
- padding-bottom: 4px !important;
2370
- }
2371
-
2372
- .tina-tailwind .py-2 {
2373
- padding-top: 8px !important;
2374
- padding-bottom: 8px !important;
2375
- }
2376
-
2377
- .tina-tailwind .py-3 {
2378
- padding-top: 12px !important;
2379
- padding-bottom: 12px !important;
2380
- }
2381
-
2382
- .tina-tailwind .pt-4 {
2383
- padding-top: 16px !important;
2384
- }
2385
-
2386
- .tina-tailwind .pb-4 {
2387
- padding-bottom: 16px !important;
2388
- }
2389
-
2390
- .tina-tailwind .pt-18 {
2391
- padding-top: 72px !important;
2392
- }
2393
-
2394
- .tina-tailwind .text-left {
2395
- text-align: left !important;
2396
- }
2397
-
2398
- .tina-tailwind .text-center {
2399
- text-align: center !important;
2400
- }
2401
-
2402
- .tina-tailwind .font-sans {
2403
- 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" !important;
2404
- }
2405
-
2406
- .tina-tailwind .text-2xl {
2407
- font-size: 24px !important;
2408
- line-height: 1.33 !important;
2409
- }
2410
-
2411
- .tina-tailwind .text-base {
2412
- font-size: 16px !important;
2413
- line-height: 1.5 !important;
2414
- }
2415
-
2416
- .tina-tailwind .text-sm {
2417
- font-size: 14px !important;
2418
- line-height: 1.43 !important;
2419
- }
2420
-
2421
- .tina-tailwind .text-xl {
2422
- font-size: 20px !important;
2423
- line-height: 1.4 !important;
2424
- }
2425
-
2426
- .tina-tailwind .text-md {
2427
- font-size: 16px !important;
2428
- line-height: 1.5 !important;
2429
- }
2430
-
2431
- .tina-tailwind .text-xs {
2432
- font-size: 13px !important;
2433
- line-height: 1.33 !important;
2434
- }
2435
-
2436
- .tina-tailwind .font-medium {
2437
- font-weight: 500 !important;
2438
- }
2439
-
2440
- .tina-tailwind .uppercase {
2441
- text-transform: uppercase !important;
2442
- }
2443
-
2444
- .tina-tailwind .italic {
2445
- font-style: italic !important;
2446
- }
2447
-
2448
- .tina-tailwind .leading-normal {
2449
- line-height: 1.5 !important;
2450
- }
2451
-
2452
- .tina-tailwind .leading-tight {
2453
- line-height: 1.25 !important;
2454
- }
2455
-
2456
- .tina-tailwind .leading-5 {
2457
- line-height: 20px !important;
2458
- }
2459
-
2460
- .tina-tailwind .tracking-wide {
2461
- letter-spacing: 0.025em !important;
2462
- }
2463
-
2464
- .tina-tailwind .text-gray-700 {
2465
- --tw-text-opacity: 1 !important;
2466
- color: rgba(67, 62, 82, var(--tw-text-opacity)) !important;
2467
- }
2468
-
2469
- .tina-tailwind .text-blue-600 {
2470
- --tw-text-opacity: 1 !important;
2471
- color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2472
- }
2473
-
2474
- .tina-tailwind .text-gray-500 {
2475
- --tw-text-opacity: 1 !important;
2476
- color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
2477
- }
2478
-
2479
- .tina-tailwind .text-gray-400 {
2480
- --tw-text-opacity: 1 !important;
2481
- color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
2482
- }
2483
-
2484
- .tina-tailwind .text-current {
2485
- color: currentColor !important;
2486
- }
2487
-
2488
- .tina-tailwind .text-white {
2489
- --tw-text-opacity: 1 !important;
2490
- color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
2491
- }
2492
-
2493
- .tina-tailwind .text-gray-600 {
2494
- --tw-text-opacity: 1 !important;
2495
- color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
2496
- }
2497
-
2498
- .tina-tailwind .text-gray-800 {
2499
- --tw-text-opacity: 1 !important;
2500
- color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
2501
- }
2502
-
2503
- .tina-tailwind .text-gray-900 {
2504
- --tw-text-opacity: 1 !important;
2505
- color: rgba(37, 35, 54, var(--tw-text-opacity)) !important;
2506
- }
2507
-
2508
- .tina-tailwind .text-blue-500 {
2509
- --tw-text-opacity: 1 !important;
2510
- color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
2511
- }
2512
-
2513
- .tina-tailwind .text-blue-400 {
2514
- --tw-text-opacity: 1 !important;
2515
- color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2516
- }
2517
-
2518
- .tina-tailwind .underline {
2519
- text-decoration: underline !important;
2520
- }
2521
-
2522
- .tina-tailwind .opacity-100 {
2523
- opacity: 1 !important;
2524
- }
2525
-
2526
- .tina-tailwind .opacity-90 {
2527
- opacity: .9 !important;
2528
- }
2529
-
2530
- .tina-tailwind .opacity-80 {
2531
- opacity: .8 !important;
2532
- }
2533
-
2534
- .tina-tailwind .opacity-50 {
2535
- opacity: .5 !important;
2536
- }
2537
-
2538
- .tina-tailwind .opacity-70 {
2539
- opacity: .7 !important;
2540
- }
2541
-
2542
- .tina-tailwind .opacity-0 {
2543
- opacity: 0 !important;
2544
- }
2545
-
2546
- .tina-tailwind .shadow-lg {
2547
- --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
2548
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2549
- }
2550
-
2551
- .tina-tailwind .shadow-2xl {
2552
- --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
2553
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2554
- }
2555
-
2556
- .tina-tailwind .shadow {
2557
- --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
2558
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2559
- }
2560
-
2561
- .tina-tailwind .ring-1 {
2562
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2563
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
2564
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
2565
- }
2566
-
2567
- .tina-tailwind .ring-black {
2568
- --tw-ring-opacity: 1 !important;
2569
- --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity)) !important;
2570
- }
2571
-
2572
- .tina-tailwind .ring-opacity-5 {
2573
- --tw-ring-opacity: .05 !important;
2574
- }
2575
-
2576
- .tina-tailwind .filter {
2577
- filter: var(--tw-filter) !important;
2578
- }
2579
-
2580
- .tina-tailwind .transition-opacity {
2581
- transition-property: opacity !important;
2582
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2583
- transition-duration: 150ms !important;
2584
- }
2585
-
2586
- .tina-tailwind .transition-colors {
2587
- transition-property: background-color, border-color, color, fill, stroke !important;
2588
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2589
- transition-duration: 150ms !important;
2590
- }
2591
-
2592
- .tina-tailwind .transition-all {
2593
- transition-property: all !important;
2594
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2595
- transition-duration: 150ms !important;
2596
- }
2597
-
2598
- .tina-tailwind .transition {
2599
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
2600
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2601
- transition-duration: 150ms !important;
2602
- }
2603
-
2604
- .tina-tailwind .duration-300 {
2605
- transition-duration: 300ms !important;
2606
- }
2607
-
2608
- .tina-tailwind .duration-150 {
2609
- transition-duration: 150ms !important;
2610
- }
2611
-
2612
- .tina-tailwind .duration-100 {
2613
- transition-duration: 100ms !important;
2614
- }
2615
-
2616
- .tina-tailwind .duration-75 {
2617
- transition-duration: 75ms !important;
2618
- }
2619
-
2620
- .tina-tailwind .ease-out {
2621
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
2622
- }
2623
-
2624
- .tina-tailwind .ease-in {
2625
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
2626
- }
2627
-
2628
- .tina-tailwind .ease-in-out {
2629
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2630
- }
2631
-
2632
- .tina-tailwind .icon-parent svg {
2633
- fill: currentColor !important;
2634
- }
2635
-
2636
- .tina-tailwind {
2637
- 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";
2638
- --tw-text-opacity: 1;
2639
- color: rgba(86, 81, 101, var(--tw-text-opacity));
2640
- }
2641
-
2642
- .first\\:pt-3:first-child {
2643
- padding-top: 12px !important;
2644
- }
2645
-
2646
- .last\\:pb-3:last-child {
2647
- padding-bottom: 12px !important;
2648
- }
2649
-
2650
- .hover\\:bg-blue-600:hover {
2651
- --tw-bg-opacity: 1 !important;
2652
- background-color: rgba(5, 116, 228, var(--tw-bg-opacity)) !important;
2653
- }
2654
-
2655
- .hover\\:text-blue-600:hover {
2656
- --tw-text-opacity: 1 !important;
2657
- color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2658
- }
2659
-
2660
- .hover\\:text-blue-400:hover {
2661
- --tw-text-opacity: 1 !important;
2662
- color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2663
- }
2664
-
2665
- .hover\\:opacity-100:hover {
2666
- opacity: 1 !important;
2667
- }
2668
-
2669
- .focus\\:text-blue-400:focus {
2670
- --tw-text-opacity: 1 !important;
2671
- color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2672
- }
2673
-
2674
- .focus\\:underline:focus {
2675
- text-decoration: underline !important;
2676
- }
2677
-
2678
- .focus\\:shadow-outline:focus {
2679
- --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) !important;
2680
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2681
- }
2682
-
2683
- .focus\\:outline-none:focus {
2684
- outline: 2px solid transparent !important;
2685
- outline-offset: 2px !important;
2686
- }
2687
-
2688
- .focus\\:ring-2:focus {
2689
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2690
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
2691
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
2692
- }
2693
-
2694
- .focus\\:ring-blue-500:focus {
2695
- --tw-ring-opacity: 1 !important;
2696
- --tw-ring-color: rgba(0, 132, 255, var(--tw-ring-opacity)) !important;
2697
- }
2698
-
2699
- .group:hover .group-hover\\:opacity-100 {
2700
- opacity: 1 !important;
2701
- }
2702
- `;
2703
- function useTina({
2704
- query,
2705
- variables,
2706
- data
2707
- }) {
2708
- const {
2709
- setRequest,
2710
- state,
2711
- isDummyContainer,
2712
- isLoading: contextLoading
2713
- } = React.useContext(TinaDataContext);
2714
- const [waitForContextRerender, setWaitForContextRerender] = useState(!isDummyContainer);
2715
- const isLoading = contextLoading || waitForContextRerender;
2716
- React.useEffect(() => {
2717
- setRequest({ query, variables });
2718
- }, [JSON.stringify(variables), query]);
2719
- useEffect(() => {
2720
- if (!isDummyContainer) {
2721
- setTimeout(() => setWaitForContextRerender(false), 0);
2722
- }
2723
- return () => {
2724
- setRequest(void 0);
2725
- };
2726
- }, [isDummyContainer]);
2727
- return {
2728
- data: isDummyContainer || isLoading ? data : state.payload,
2729
- isLoading
2730
- };
2731
- }
2732
- const errorButtonStyles = {
2733
- background: "#eb6337",
2734
- padding: "12px 18px",
2735
- cursor: "pointer",
2736
- borderRadius: "50px",
2737
- textTransform: "uppercase",
2738
- letterSpacing: "2px",
2739
- fontWeight: "bold",
2740
- border: "none",
2741
- color: "white",
2742
- margin: "1rem 0"
2743
- };
2744
- class ErrorBoundary extends React.Component {
2745
- constructor(props) {
2746
- super(props);
2747
- this.state = {
2748
- hasError: props.hasError,
2749
- message: "",
2750
- pageRefresh: false
2751
- };
2752
- }
2753
- static getDerivedStateFromError(error) {
2754
- return { hasError: true, message: error.message };
2755
- }
2756
- render() {
2757
- const branchData = window.localStorage && window.localStorage.getItem("tinacms-current-branch");
2758
- const hasBranchData = branchData && branchData.length > 0;
2759
- if (this.state.hasError && !this.state.pageRefresh) {
2760
- return /* @__PURE__ */ React.createElement("div", {
2761
- style: {
2762
- background: "#efefef",
2763
- height: "100vh",
2764
- display: "flex",
2765
- alignItems: "center",
2766
- justifyContent: "center"
2767
- }
2768
- }, /* @__PURE__ */ React.createElement("style", null, " body { margin: 0; } "), /* @__PURE__ */ React.createElement("div", {
2769
- style: {
2770
- background: "#fff",
2771
- maxWidth: "400px",
2772
- padding: "20px",
2773
- fontFamily: "'Inter', sans-serif",
2774
- borderRadius: "5px",
2775
- boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
2776
- }
2777
- }, /* @__PURE__ */ React.createElement("h3", {
2778
- style: { color: "#eb6337" }
2779
- }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
2780
- style: { marginTop: "1rem", overflowX: "auto" }
2781
- }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("button", {
2782
- style: errorButtonStyles,
2783
- onClick: () => {
2784
- this.setState({ pageRefresh: true });
2785
- setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
2786
- }
2787
- }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React.createElement("button", {
2788
- style: errorButtonStyles,
2789
- onClick: () => {
2790
- window.localStorage.removeItem("tinacms-current-branch");
2791
- window.location.reload();
2792
- }
2793
- }, "Switch to default branch"))));
2794
- }
2795
- if (this.state.pageRefresh) {
2796
- return /* @__PURE__ */ React.createElement(Loader, null, "Let's try that again.");
2797
- }
2798
- return this.props.children;
2799
- }
1871
+ const errorButtonStyles = {
1872
+ background: "#eb6337",
1873
+ padding: "12px 18px",
1874
+ cursor: "pointer",
1875
+ borderRadius: "50px",
1876
+ textTransform: "uppercase",
1877
+ letterSpacing: "2px",
1878
+ fontWeight: "bold",
1879
+ border: "none",
1880
+ color: "white",
1881
+ margin: "1rem 0"
1882
+ };
1883
+ class ErrorBoundary extends React.Component {
1884
+ constructor(props) {
1885
+ super(props);
1886
+ this.state = {
1887
+ hasError: props.hasError,
1888
+ message: "",
1889
+ pageRefresh: false
1890
+ };
1891
+ }
1892
+ static getDerivedStateFromError(error) {
1893
+ return { hasError: true, message: error.message };
1894
+ }
1895
+ render() {
1896
+ const branchData = window.localStorage && window.localStorage.getItem("tinacms-current-branch");
1897
+ const hasBranchData = branchData && branchData.length > 0;
1898
+ if (this.state.hasError && !this.state.pageRefresh) {
1899
+ return /* @__PURE__ */ React.createElement("div", {
1900
+ style: {
1901
+ background: "#efefef",
1902
+ height: "100vh",
1903
+ display: "flex",
1904
+ alignItems: "center",
1905
+ justifyContent: "center"
1906
+ }
1907
+ }, /* @__PURE__ */ React.createElement("style", null, " body { margin: 0; } "), /* @__PURE__ */ React.createElement("div", {
1908
+ style: {
1909
+ background: "#fff",
1910
+ maxWidth: "400px",
1911
+ padding: "20px",
1912
+ fontFamily: "'Inter', sans-serif",
1913
+ borderRadius: "5px",
1914
+ boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
1915
+ }
1916
+ }, /* @__PURE__ */ React.createElement("h3", {
1917
+ style: { color: "#eb6337" }
1918
+ }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
1919
+ style: { marginTop: "1rem", overflowX: "auto" }
1920
+ }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("button", {
1921
+ style: errorButtonStyles,
1922
+ onClick: () => {
1923
+ this.setState({ pageRefresh: true });
1924
+ setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
1925
+ }
1926
+ }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React.createElement("button", {
1927
+ style: errorButtonStyles,
1928
+ onClick: () => {
1929
+ window.localStorage.removeItem("tinacms-current-branch");
1930
+ window.location.reload();
1931
+ }
1932
+ }, "Switch to default branch"))));
1933
+ }
1934
+ if (this.state.pageRefresh) {
1935
+ return /* @__PURE__ */ React.createElement(Loader, null, "Let's try that again.");
1936
+ }
1937
+ return this.props.children;
1938
+ }
2800
1939
  }
2801
1940
  const parseURL = (url) => {
2802
1941
  if (url.includes("localhost")) {
@@ -3107,10 +2246,10 @@ var __rest = function(s, e) {
3107
2246
  return t;
3108
2247
  };
3109
2248
  function Tree2Element(tree) {
3110
- return tree && tree.map(function(node, i) {
3111
- return React.createElement(node.tag, __assign({
2249
+ return tree && tree.map(function(node2, i) {
2250
+ return React.createElement(node2.tag, __assign({
3112
2251
  key: i
3113
- }, node.attr), Tree2Element(node.child));
2252
+ }, node2.attr), Tree2Element(node2.child));
3114
2253
  });
3115
2254
  }
3116
2255
  function GenIcon(data) {
@@ -3154,16 +2293,26 @@ const useGetCollections = (cms) => {
3154
2293
  const api = new TinaAdminApi(cms);
3155
2294
  const [collections, setCollections] = useState([]);
3156
2295
  const [loading, setLoading] = useState(true);
2296
+ const [error, setError] = useState(void 0);
3157
2297
  useEffect(() => {
3158
2298
  const fetchCollections = async () => {
3159
- const response = await api.fetchCollections();
3160
- setCollections(response.getCollections);
3161
- setLoading(false);
2299
+ if (await api.isAuthenticated()) {
2300
+ try {
2301
+ const response = await api.fetchCollections();
2302
+ setCollections(response.getCollections);
2303
+ } catch (error2) {
2304
+ cms.alerts.error(`[${error2.name}] GetCollections failed: ${error2.message}`, 30 * 1e3);
2305
+ console.error(error2);
2306
+ setCollections([]);
2307
+ setError(error2);
2308
+ }
2309
+ setLoading(false);
2310
+ }
3162
2311
  };
3163
2312
  setLoading(true);
3164
2313
  fetchCollections();
3165
2314
  }, [cms]);
3166
- return { collections, loading };
2315
+ return { collections, loading, error };
3167
2316
  };
3168
2317
  const slugify = (text) => {
3169
2318
  return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
@@ -3444,16 +2593,26 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
3444
2593
  const api = new TinaAdminApi(cms);
3445
2594
  const [collection, setCollection] = useState(void 0);
3446
2595
  const [loading, setLoading] = useState(true);
2596
+ const [error, setError] = useState(void 0);
3447
2597
  useEffect(() => {
3448
2598
  const fetchCollection = async () => {
3449
- const response = await api.fetchCollection(collectionName, includeDocuments);
3450
- setCollection(response.getCollection);
3451
- setLoading(false);
2599
+ if (await api.isAuthenticated()) {
2600
+ try {
2601
+ const response = await api.fetchCollection(collectionName, includeDocuments);
2602
+ setCollection(response.getCollection);
2603
+ } catch (error2) {
2604
+ cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
2605
+ console.error(error2);
2606
+ setCollection(void 0);
2607
+ setError(error2);
2608
+ }
2609
+ setLoading(false);
2610
+ }
3452
2611
  };
3453
2612
  setLoading(true);
3454
2613
  fetchCollection();
3455
2614
  }, [cms, collectionName]);
3456
- return { collection, loading };
2615
+ return { collection, loading, error };
3457
2616
  };
3458
2617
  const GetCollection = ({
3459
2618
  cms,
@@ -3461,8 +2620,11 @@ const GetCollection = ({
3461
2620
  includeDocuments = true,
3462
2621
  children
3463
2622
  }) => {
3464
- const { collection, loading } = useGetCollection(cms, collectionName, includeDocuments);
3465
- if (!collection || loading === true) {
2623
+ const { collection, loading, error } = useGetCollection(cms, collectionName, includeDocuments);
2624
+ if (error) {
2625
+ return null;
2626
+ }
2627
+ if (loading) {
3466
2628
  return /* @__PURE__ */ React.createElement(LoadingPage, null);
3467
2629
  }
3468
2630
  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading));
@@ -3580,32 +2742,47 @@ const useGetDocumentFields = (cms, collectionName, templateName) => {
3580
2742
  mutationInfo: void 0
3581
2743
  });
3582
2744
  const [loading, setLoading] = useState(true);
2745
+ const [error, setError] = useState(void 0);
3583
2746
  useEffect(() => {
3584
2747
  const fetchDocumentFields = async () => {
3585
- const response = await api.fetchDocumentFields();
3586
- const documentFields = response.getDocumentFields;
3587
- const collection = documentFields[collectionName].collection;
3588
- const mutationInfo = documentFields[collectionName].mutationInfo;
3589
- let fields = void 0;
3590
- let template = void 0;
3591
- if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
3592
- template = documentFields[collectionName].templates[templateName].template;
3593
- fields = documentFields[collectionName].templates[templateName].fields;
3594
- } else {
3595
- fields = documentFields[collectionName].fields;
2748
+ if (await api.isAuthenticated()) {
2749
+ try {
2750
+ const response = await api.fetchDocumentFields();
2751
+ const documentFields = response.getDocumentFields;
2752
+ const collection = documentFields[collectionName].collection;
2753
+ const mutationInfo = documentFields[collectionName].mutationInfo;
2754
+ let fields = void 0;
2755
+ let template = void 0;
2756
+ if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
2757
+ template = documentFields[collectionName].templates[templateName].template;
2758
+ fields = documentFields[collectionName].templates[templateName].fields;
2759
+ } else {
2760
+ fields = documentFields[collectionName].fields;
2761
+ }
2762
+ setInfo({
2763
+ collection,
2764
+ template,
2765
+ fields,
2766
+ mutationInfo
2767
+ });
2768
+ } catch (error2) {
2769
+ cms.alerts.error(`[${error2.name}] GetDocumentFields failed: ${error2.message}`, 30 * 1e3);
2770
+ console.error(error2);
2771
+ setInfo({
2772
+ collection: void 0,
2773
+ template: void 0,
2774
+ fields: void 0,
2775
+ mutationInfo: void 0
2776
+ });
2777
+ setError(error2);
2778
+ }
2779
+ setLoading(false);
3596
2780
  }
3597
- setInfo({
3598
- collection,
3599
- template,
3600
- fields,
3601
- mutationInfo
3602
- });
3603
- setLoading(false);
3604
2781
  };
3605
2782
  setLoading(true);
3606
2783
  fetchDocumentFields();
3607
2784
  }, [cms, collectionName]);
3608
- return __spreadProps(__spreadValues({}, info), { loading });
2785
+ return __spreadProps(__spreadValues({}, info), { loading, error });
3609
2786
  };
3610
2787
  const GetDocumentFields = ({
3611
2788
  cms,
@@ -3613,8 +2790,11 @@ const GetDocumentFields = ({
3613
2790
  templateName,
3614
2791
  children
3615
2792
  }) => {
3616
- const { collection, template, fields, mutationInfo, loading } = useGetDocumentFields(cms, collectionName, templateName);
3617
- if (!collection || loading) {
2793
+ const { collection, template, fields, mutationInfo, loading, error } = useGetDocumentFields(cms, collectionName, templateName);
2794
+ if (error) {
2795
+ return null;
2796
+ }
2797
+ if (loading) {
3618
2798
  return /* @__PURE__ */ React.createElement(LoadingPage, null);
3619
2799
  }
3620
2800
  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
@@ -3630,7 +2810,14 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
3630
2810
  includeCollection,
3631
2811
  includeTemplate
3632
2812
  });
3633
- await api.createDocument(collection.name, relativePath, params);
2813
+ if (await api.isAuthenticated()) {
2814
+ await api.createDocument(collection.name, relativePath, params);
2815
+ } else {
2816
+ const authMessage = `[Error] CreateDocument failed: User is no longer authenticated; please login and try again.`;
2817
+ cms.alerts.error(authMessage, 30 * 1e3);
2818
+ console.error(authMessage);
2819
+ return false;
2820
+ }
3634
2821
  };
3635
2822
  const CollectionCreatePage = () => {
3636
2823
  const { collectionName, templateName } = useParams();
@@ -3677,8 +2864,14 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
3677
2864
  ...fields
3678
2865
  ],
3679
2866
  onSubmit: async (values) => {
3680
- await createDocument(cms, collection, template, mutationInfo, values);
3681
- navigate(`/collections/${collection.name}`);
2867
+ try {
2868
+ await createDocument(cms, collection, template, mutationInfo, values);
2869
+ cms.alerts.success("Document created!");
2870
+ navigate(`/collections/${collection.name}`);
2871
+ } catch (error) {
2872
+ cms.alerts.error(`[${error.name}] CreateDocument failed: ${error.message}`, 30 * 1e3);
2873
+ console.error(error);
2874
+ }
3682
2875
  }
3683
2876
  });
3684
2877
  }, [cms, collection, template, fields, mutationInfo]);
@@ -3708,16 +2901,26 @@ const useGetDocument = (cms, collectionName, relativePath) => {
3708
2901
  const api = new TinaAdminApi(cms);
3709
2902
  const [document, setDocument] = useState(void 0);
3710
2903
  const [loading, setLoading] = useState(true);
2904
+ const [error, setError] = useState(void 0);
3711
2905
  useEffect(() => {
3712
2906
  const fetchDocument = async () => {
3713
- const response = await api.fetchDocument(collectionName, relativePath);
3714
- setDocument(response.getDocument);
3715
- setLoading(false);
2907
+ if (api.isAuthenticated()) {
2908
+ try {
2909
+ const response = await api.fetchDocument(collectionName, relativePath);
2910
+ setDocument(response.getDocument);
2911
+ } catch (error2) {
2912
+ cms.alerts.error(`[${error2.name}] GetDocument failed: ${error2.message}`, 30 * 1e3);
2913
+ console.error(error2);
2914
+ setDocument(void 0);
2915
+ setError(error2);
2916
+ }
2917
+ setLoading(false);
2918
+ }
3716
2919
  };
3717
2920
  setLoading(true);
3718
2921
  fetchDocument();
3719
2922
  }, [cms, collectionName, relativePath]);
3720
- return { document, loading };
2923
+ return { document, loading, error };
3721
2924
  };
3722
2925
  const GetDocument = ({
3723
2926
  cms,
@@ -3725,8 +2928,11 @@ const GetDocument = ({
3725
2928
  relativePath,
3726
2929
  children
3727
2930
  }) => {
3728
- const { document, loading } = useGetDocument(cms, collectionName, relativePath);
3729
- if (!document || loading) {
2931
+ const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
2932
+ if (error) {
2933
+ return null;
2934
+ }
2935
+ if (loading) {
3730
2936
  return /* @__PURE__ */ React.createElement(LoadingPage, null);
3731
2937
  }
3732
2938
  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document, loading));
@@ -3738,7 +2944,14 @@ const updateDocument = async (cms, relativePath, collection, mutationInfo, value
3738
2944
  includeCollection,
3739
2945
  includeTemplate
3740
2946
  });
3741
- await api.updateDocument(collection.name, relativePath, params);
2947
+ if (await api.isAuthenticated()) {
2948
+ await api.updateDocument(collection.name, relativePath, params);
2949
+ } else {
2950
+ const authMessage = `[Error] UpdateDocument failed: User is no longer authenticated; please login and try again.`;
2951
+ cms.alerts.error(authMessage, 30 * 1e3);
2952
+ console.error(authMessage);
2953
+ return false;
2954
+ }
3742
2955
  };
3743
2956
  const CollectionUpdatePage = () => {
3744
2957
  const { collectionName, filename } = useParams();
@@ -3770,7 +2983,7 @@ const RenderForm = ({
3770
2983
  mutationInfo
3771
2984
  }) => {
3772
2985
  var _a, _b;
3773
- const navigate = useNavigate();
2986
+ useNavigate();
3774
2987
  const [formIsPristine, setFormIsPristine] = useState(true);
3775
2988
  const form = useMemo(() => {
3776
2989
  return new Form({
@@ -3779,8 +2992,13 @@ const RenderForm = ({
3779
2992
  fields: document.form.fields,
3780
2993
  initialValues: document.values,
3781
2994
  onSubmit: async (values) => {
3782
- await updateDocument(cms, relativePath, collection, mutationInfo, values);
3783
- navigate(`/collections/${collection.name}`);
2995
+ try {
2996
+ await updateDocument(cms, relativePath, collection, mutationInfo, values);
2997
+ cms.alerts.success("Document updated!");
2998
+ } catch (error) {
2999
+ cms.alerts.error(`[${error.name}] UpdateDocument failed: ${error.message}`, 30 * 1e3);
3000
+ console.error(error);
3001
+ }
3784
3002
  }
3785
3003
  });
3786
3004
  }, [cms, document, relativePath, collection, mutationInfo]);
@@ -3840,11 +3058,9 @@ const TinaAdmin = () => {
3840
3058
  return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(LoginPage, null));
3841
3059
  }
3842
3060
  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
3843
- const isTinaAdminEnabled = cms.flags.get("tina-admin");
3061
+ const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
3844
3062
  if (isTinaAdminEnabled) {
3845
- return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, {
3846
- basename: "/admin"
3847
- }, /* @__PURE__ */ React.createElement("div", {
3063
+ return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement("div", {
3848
3064
  className: "flex items-stretch h-screen overflow-hidden"
3849
3065
  }, /* @__PURE__ */ React.createElement(Sidebar, {
3850
3066
  cms
@@ -3870,9 +3086,7 @@ const TinaAdmin = () => {
3870
3086
  element: /* @__PURE__ */ React.createElement(DashboardPage, null)
3871
3087
  }))))));
3872
3088
  } else {
3873
- return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, {
3874
- basename: "/admin"
3875
- }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
3089
+ return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
3876
3090
  path: "logout",
3877
3091
  element: /* @__PURE__ */ React.createElement(LogoutPage, null)
3878
3092
  }), /* @__PURE__ */ React.createElement(Route, {
@@ -3889,4 +3103,10 @@ class RouteMappingPlugin {
3889
3103
  this.mapper = mapper;
3890
3104
  }
3891
3105
  }
3892
- export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
3106
+ const defineSchema = (config) => {
3107
+ return config;
3108
+ };
3109
+ const defineConfig = (config) => {
3110
+ return config;
3111
+ };
3112
+ export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, defineConfig, defineSchema, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };