Fix UX

Update dependencies and improve hooks on color phasing.

.gitignore

@@ -1 +1,2 @@
 .idea/
+node_modules/

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@modal-sh/modal",
+  "version": "0.0.0",
+  "pnpm": {
+    "overrides": {
+      "@modal-sh/react-utils": "file:../react-utils",
+      "@tesseract-design/viewfinder-base": "file:../viewfinder/packages/base",
+      "@tesseract-design/viewfinder-react": "file:../viewfinder/packages/react",
+      "@tesseract-design/web-base": "file:../tesseract/base",
+      "@tesseract-design/web-action-react": "file:../tesseract/categories/web/action/react",
+      "@tesseract-design/web-formatted-react": "file:../tesseract/categories/web/formatted/react",
+      "@tesseract-design/web-freeform-react": "file:../tesseract/categories/web/freeform/react",
+      "@tesseract-design/web-navigation-react": "file:../tesseract/categories/web/navigation/react",
+      "@theoryofnekomata/formxtra": "file:../formxtra",
+      "@modal-sh/iceform-next": "file:../iceform/packages/iceform-next"
+    }
+  }
+}

packages/web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@modal-sh/web",
+  "name": "@modal-sh/modal-web",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@modal-sh/iceform-next": "0.0.0",
     "@tesseract-design/viewfinder-base": "0.0.1",
     "@tesseract-design/viewfinder-react": "0.0.1",
     "@tesseract-design/web-action-react": "0.2.0",
@@ -16,7 +17,6 @@
     "@tesseract-design/web-freeform-react": "0.2.1",
     "@tesseract-design/web-navigation-react": "0.2.1",
     "@theoryofnekomata/formxtra": "1.0.4",
-    "@modal-sh/iceform-next": "0.0.0",
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
@@ -29,16 +29,7 @@
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },
-  "pnpm": {
-    "overrides": {
-      "@modal-sh/react-utils": "file:../../../react-utils",
-      "@tesseract-design/web-base": "file:../../../tesseract/base",
-      "@tesseract-design/web-action-react": "file:../../../tesseract/categories/web/action/react",
-      "@tesseract-design/web-formatted-react": "file:../../../tesseract/categories/web/formatted/react",
-      "@tesseract-design/web-freeform-react": "file:../../../tesseract/categories/web/freeform/react",
-      "@tesseract-design/web-navigation-react": "file:../../../tesseract/categories/web/navigation/react",
-      "@theoryofnekomata/formxtra": "file:../../../formxtra",
-      "@modal-sh/iceform-next": "file:../../../iceform/packages/iceform-next"
-    }
+  "devDependencies": {
+    "critters": "^0.0.22"
   }
 }

packages/web/src/components/molecules/ContactCtaBanner/index.tsx

@@ -103,7 +103,6 @@ export const ContactCtaBanner: React.FC<ContactCtaBannerProps> = ({
 										border
 										ref={autofocusRef}
 										autoComplete="off"
-										autoFocus
 									/>
 								</div>
 								<div>

packages/web/src/hooks/effects.ts

@@ -22,30 +22,57 @@ export interface UseHuePulsateOptions {
 }
 
 export const useHuePulsate = (options: UseHuePulsateOptions) => {
+	const {
+		initialColorHueDegrees = DEFAULT_COLOR_HUE_DEGREES,
+		colorSaturationPercentage = DEFAULT_COLOR_SATURATION_PERCENTAGE,
+		colorLightnessPercentage = DEFAULT_COLOR_LIGHTNESS_PERCENTAGE,
+		propertyName,
+		animationDuration = DEFAULT_ANIMATION_DURATION,
+		updateIntervalMs = DEFAULT_UPDATE_INTERVAL_MS,
+	} = options;
+	const intervalHandleRef = React.useRef<number>();
+	const [start, setStart] = React.useState(() => {
+		const now = Date.now();
+		if (typeof window === 'undefined') {
+			return now;
+		}
+		const theProperty = window.document.documentElement.style.getPropertyValue(`${propertyName}-start`);
+		const theHue = parseInt(theProperty)
+		return Number.isFinite(theHue) ? theHue : now;
+	});
+	const [hue, setHue] = React.useState(() => {
+		if (typeof window === 'undefined') {
+			return initialColorHueDegrees;
+		}
+		const theProperty = window.document.documentElement.style.getPropertyValue(propertyName);
+		const theHue = parseInt(theProperty.split(' ')[0])
+		return Number.isFinite(theHue) ? theHue : initialColorHueDegrees;
+	});
+
+	React.useEffect(() => {
+		if (window.document.documentElement.style.getPropertyValue(`${propertyName}-start`)) {
+			return;
+		}
+		window.document.documentElement.style.setProperty(`${propertyName}-start`, start.toString());
+	}, [start]);
+
 	React.useEffect(() => {
-		const {
-			animationDuration = DEFAULT_ANIMATION_DURATION,
-			initialColorHueDegrees = DEFAULT_COLOR_HUE_DEGREES,
-			updateIntervalMs = DEFAULT_UPDATE_INTERVAL_MS,
-			colorSaturationPercentage = DEFAULT_COLOR_SATURATION_PERCENTAGE,
-			colorLightnessPercentage = DEFAULT_COLOR_LIGHTNESS_PERCENTAGE,
+		window.document.documentElement.style.setProperty(
 			propertyName,
-		} = options;
+			`${hue} ${colorSaturationPercentage}% ${colorLightnessPercentage}%`
+		);
+	}, [hue, propertyName, colorSaturationPercentage, colorLightnessPercentage]);
 
-		const start = Date.now();
-		const intervalHandle = window.setInterval(() => {
-			//window.document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
+	React.useEffect(() => {
+		intervalHandleRef.current = window.setInterval(() => {
 			const elapsed = Date.now() - start;
 			const progress = elapsed / animationDuration;
 			const colorPrimaryHue = (initialColorHueDegrees + (progress * MAX_HUE)) % MAX_HUE;
-			window.document.documentElement.style.setProperty(
-				propertyName,
-				`${colorPrimaryHue} ${colorSaturationPercentage}% ${colorLightnessPercentage}%`
-			);
+			setHue(colorPrimaryHue);
 		}, updateIntervalMs);
 
 		return () => {
-			window.clearInterval(intervalHandle);
+			window.clearInterval(intervalHandleRef.current);
 		};
-	}, []);
+	}, [animationDuration, updateIntervalMs, start]);
 };

packages/web/pnpm-lock.yaml → pnpm-lock.yaml

@@ -5,73 +5,84 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  '@modal-sh/react-utils': file:../../../react-utils
-  '@tesseract-design/web-base': file:../../../tesseract/base
-  '@tesseract-design/web-action-react': file:../../../tesseract/categories/web/action/react
-  '@tesseract-design/web-formatted-react': file:../../../tesseract/categories/web/formatted/react
-  '@tesseract-design/web-freeform-react': file:../../../tesseract/categories/web/freeform/react
-  '@tesseract-design/web-navigation-react': file:../../../tesseract/categories/web/navigation/react
-  '@theoryofnekomata/formxtra': file:../../../formxtra
-  '@modal-sh/iceform-next': file:../../../iceform/packages/iceform-next
-
-dependencies:
-  '@modal-sh/iceform-next':
-    specifier: file:/Users/theoryofnekomata/Projects/iceform/packages/iceform-next
-    version: file:../../../iceform/packages/iceform-next(next@13.4.19)(react-dom@18.2.0)(react@18.2.0)
-  '@tesseract-design/viewfinder-base':
-    specifier: 0.0.1
-    version: 0.0.1
-  '@tesseract-design/viewfinder-react':
-    specifier: 0.0.1
-    version: 0.0.1(react-dom@18.2.0)(react@18.2.0)
-  '@tesseract-design/web-action-react':
-    specifier: file:/Users/theoryofnekomata/Projects/tesseract/categories/web/action/react
-    version: file:../../../tesseract/categories/web/action/react(react-dom@18.2.0)(react@18.2.0)
-  '@tesseract-design/web-formatted-react':
-    specifier: file:/Users/theoryofnekomata/Projects/tesseract/categories/web/formatted/react
-    version: file:../../../tesseract/categories/web/formatted/react(react-dom@18.2.0)(react@18.2.0)
-  '@tesseract-design/web-freeform-react':
-    specifier: file:/Users/theoryofnekomata/Projects/tesseract/categories/web/freeform/react
-    version: file:../../../tesseract/categories/web/freeform/react(react-dom@18.2.0)(react@18.2.0)
-  '@tesseract-design/web-navigation-react':
-    specifier: file:/Users/theoryofnekomata/Projects/tesseract/categories/web/navigation/react
-    version: file:../../../tesseract/categories/web/navigation/react(react-dom@18.2.0)(react@18.2.0)
-  '@theoryofnekomata/formxtra':
-    specifier: file:/Users/theoryofnekomata/Projects/formxtra
-    version: file:../../../formxtra
-  '@types/node':
-    specifier: 20.6.0
-    version: 20.6.0
-  '@types/react':
-    specifier: 18.2.21
-    version: 18.2.21
-  '@types/react-dom':
-    specifier: 18.2.7
-    version: 18.2.7
-  autoprefixer:
-    specifier: 10.4.15
-    version: 10.4.15(postcss@8.4.29)
-  clsx:
-    specifier: ^2.0.0
-    version: 2.1.1
-  eslint:
-    specifier: 8.49.0
-    version: 8.49.0
-  eslint-config-next:
-    specifier: 13.4.19
-    version: 13.4.19(eslint@8.49.0)(typescript@5.2.2)
-  next:
-    specifier: 13.4.19
-    version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
-  postcss:
-    specifier: 8.4.29
-    version: 8.4.29
-  tailwindcss:
-    specifier: 3.3.3
-    version: 3.3.3
-  typescript:
-    specifier: 5.2.2
-    version: 5.2.2
+  '@modal-sh/react-utils': file:../react-utils
+  '@tesseract-design/viewfinder-base': file:../viewfinder/packages/base
+  '@tesseract-design/viewfinder-react': file:../viewfinder/packages/react
+  '@tesseract-design/web-base': file:../tesseract/base
+  '@tesseract-design/web-action-react': file:../tesseract/categories/web/action/react
+  '@tesseract-design/web-formatted-react': file:../tesseract/categories/web/formatted/react
+  '@tesseract-design/web-freeform-react': file:../tesseract/categories/web/freeform/react
+  '@tesseract-design/web-navigation-react': file:../tesseract/categories/web/navigation/react
+  '@theoryofnekomata/formxtra': file:../formxtra
+  '@modal-sh/iceform-next': file:../iceform/packages/iceform-next
+
+importers:
+
+  .: {}
+
+  packages/web:
+    dependencies:
+      '@modal-sh/iceform-next':
+        specifier: file:E:\Projects\iceform\packages\iceform-next
+        version: file:../iceform/packages/iceform-next(next@13.4.19)(react-dom@18.3.1)(react@18.3.1)
+      '@tesseract-design/viewfinder-base':
+        specifier: file:E:\Projects\viewfinder\packages\base
+        version: file:../viewfinder/packages/base
+      '@tesseract-design/viewfinder-react':
+        specifier: file:E:\Projects\viewfinder\packages\react
+        version: file:../viewfinder/packages/react(react-dom@18.3.1)(react@18.3.1)
+      '@tesseract-design/web-action-react':
+        specifier: file:E:\Projects\tesseract\categories\web\action\react
+        version: file:../tesseract/categories/web/action/react(react-dom@18.3.1)(react@18.3.1)
+      '@tesseract-design/web-formatted-react':
+        specifier: file:E:\Projects\tesseract\categories\web\formatted\react
+        version: file:../tesseract/categories/web/formatted/react(react-dom@18.3.1)(react@18.3.1)
+      '@tesseract-design/web-freeform-react':
+        specifier: file:E:\Projects\tesseract\categories\web\freeform\react
+        version: file:../tesseract/categories/web/freeform/react(react-dom@18.3.1)(react@18.3.1)
+      '@tesseract-design/web-navigation-react':
+        specifier: file:E:\Projects\tesseract\categories\web\navigation\react
+        version: file:../tesseract/categories/web/navigation/react(react-dom@18.3.1)(react@18.3.1)
+      '@theoryofnekomata/formxtra':
+        specifier: file:E:\Projects\formxtra
+        version: file:../formxtra
+      '@types/node':
+        specifier: 20.6.0
+        version: 20.6.0
+      '@types/react':
+        specifier: 18.2.21
+        version: 18.2.21
+      '@types/react-dom':
+        specifier: 18.2.7
+        version: 18.2.7
+      autoprefixer:
+        specifier: 10.4.15
+        version: 10.4.15(postcss@8.4.29)
+      clsx:
+        specifier: ^2.0.0
+        version: 2.0.0
+      eslint:
+        specifier: 8.49.0
+        version: 8.49.0
+      eslint-config-next:
+        specifier: 13.4.19
+        version: 13.4.19(eslint@8.49.0)(typescript@5.2.2)
+      next:
+        specifier: 13.4.19
+        version: 13.4.19(react-dom@18.3.1)(react@18.3.1)
+      postcss:
+        specifier: 8.4.29
+        version: 8.4.29
+      tailwindcss:
+        specifier: 3.3.3
+        version: 3.3.3
+      typescript:
+        specifier: 5.2.2
+        version: 5.2.2
+    devDependencies:
+      critters:
+        specifier: ^0.0.22
+        version: 0.0.22
 
 packages:
 
@@ -315,30 +326,6 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@tesseract-design/viewfinder-base@0.0.1:
-    resolution: {integrity: sha512-Jco59mR/XXqVEpRxkLn6bbuYliI8qrCe4AjoqsUHHDPiaK7/8K2WecTDy/oQrRsyw7gKMColjvfQYrMaJiNU3Q==}
-    engines: {node: '>=10'}
-    dependencies:
-      tailwindcss: 3.3.3
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
-  /@tesseract-design/viewfinder-react@0.0.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-acleDu4OySvU1PizTjrsgah80YTUZC2wEK5BZJShyn5L8veMWURlThp8csiYOUQqtEWRE80+22trbAUuXhXYlQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    dependencies:
-      '@tesseract-design/viewfinder-base': 0.0.1
-      clsx: 2.1.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
   /@types/json5@0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: false
@@ -471,7 +458,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: false
 
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
@@ -653,6 +639,10 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -722,7 +712,6 @@ packages:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
-    dev: false
 
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
@@ -757,8 +746,8 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+  /clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
     engines: {node: '>=6'}
     dev: false
 
@@ -767,11 +756,9 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: false
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
 
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
@@ -786,6 +773,18 @@ packages:
     resolution: {integrity: sha512-B+mvFywunkRJs270k7kCBjhogvIA0uNn6GAXv6m2cPn3rrwqZzZVr2gBWcz+Cz7OGVWlcbERlYRIX0S6OGr8Bw==}
     dev: false
 
+  /critters@0.0.22:
+    resolution: {integrity: sha512-NU7DEcQZM2Dy8XTKFHxtdnIM/drE312j2T4PCVaSUcS0oBeyT/NImpRw/Ap0zOr/1SE7SgPK9tGPg1WK/sVakw==}
+    dependencies:
+      chalk: 4.1.2
+      css-select: 5.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      htmlparser2: 8.0.2
+      postcss: 8.4.29
+      postcss-media-query-parser: 0.2.3
+    dev: true
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -795,6 +794,21 @@ packages:
       which: 2.0.2
     dev: false
 
+  /css-select@5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      nth-check: 2.1.1
+    dev: true
+
+  /css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -915,6 +929,33 @@ packages:
       esutils: 2.0.3
     dev: false
 
+  /dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: true
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: true
+
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: false
@@ -939,6 +980,11 @@ packages:
       tapable: 2.2.1
     dev: false
 
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: true
+
   /es-abstract@1.23.3:
     resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
     engines: {node: '>= 0.4'}
@@ -1578,7 +1624,6 @@ packages:
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
-    dev: false
 
   /has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
@@ -1610,6 +1655,15 @@ packages:
       function-bind: 1.1.2
     dev: false
 
+  /htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+    dev: true
+
   /ignore@5.3.1:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
@@ -2039,13 +2093,12 @@ packages:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: false
 
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: false
 
-  /next@13.4.19(react-dom@18.2.0)(react@18.2.0):
+  /next@13.4.19(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==}
     engines: {node: '>=16.8.0'}
     hasBin: true
@@ -2065,9 +2118,9 @@ packages:
       busboy: 1.6.0
       caniuse-lite: 1.0.30001616
       postcss: 8.4.14
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.1(react@18.3.1)
       watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
@@ -2106,6 +2159,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -2254,7 +2313,6 @@ packages:
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -2315,6 +2373,10 @@ packages:
       yaml: 2.4.2
     dev: false
 
+  /postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+    dev: true
+
   /postcss-nested@6.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
@@ -2353,7 +2415,6 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.2.0
-    dev: false
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -2377,13 +2438,13 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: false
 
-  /react-dom@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+  /react-dom@18.3.1(react@18.3.1):
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
-      react: ^18.2.0
+      react: ^18.3.1
     dependencies:
       loose-envify: 1.4.0
-      react: 18.2.0
+      react: 18.3.1
       scheduler: 0.23.2
     dev: false
 
@@ -2391,7 +2452,7 @@ packages:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
 
-  /react-phone-number-input@3.3.0(react-dom@18.2.0)(react@18.2.0):
+  /react-phone-number-input@3.3.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-6d1lq9parRGnVz6laEN7ijU7MeUCkFEJsTnzB/97nVrm/WE48EDEV5/2bu08mzfZjvX6shpryqG0DUCNiP07Cg==}
     peerDependencies:
       react: '>=16.8'
@@ -2402,12 +2463,12 @@ packages:
       input-format: 0.3.10
       libphonenumber-js: 1.10.62
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+  /react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
@@ -2598,7 +2659,6 @@ packages:
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
@@ -2692,7 +2752,7 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /styled-jsx@5.1.1(react@18.2.0):
+  /styled-jsx@5.1.1(react@18.3.1):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -2706,7 +2766,7 @@ packages:
         optional: true
     dependencies:
       client-only: 0.0.1
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
   /sucrase@3.35.0:
@@ -2728,7 +2788,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
-    dev: false
 
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -3028,15 +3087,15 @@ packages:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
 
-  file:../../../formxtra:
-    resolution: {directory: ../../../formxtra, type: directory}
+  file:../formxtra:
+    resolution: {directory: ../formxtra, type: directory}
     name: '@theoryofnekomata/formxtra'
     engines: {node: '>=10'}
     dev: false
 
-  file:../../../iceform/packages/iceform-next(next@13.4.19)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {directory: ../../../iceform/packages/iceform-next, type: directory}
-    id: file:../../../iceform/packages/iceform-next
+  file:../iceform/packages/iceform-next(next@13.4.19)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {directory: ../iceform/packages/iceform-next, type: directory}
+    id: file:../iceform/packages/iceform-next
     name: '@modal-sh/iceform-next'
     engines: {node: '>=12'}
     peerDependencies:
@@ -3044,30 +3103,30 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@theoryofnekomata/formxtra': file:../../../formxtra
+      '@theoryofnekomata/formxtra': file:../formxtra
       busboy: 1.6.0
-      next: 13.4.19(react-dom@18.2.0)(react@18.2.0)
+      next: 13.4.19(react-dom@18.3.1)(react@18.3.1)
       node-cache: 5.1.2
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       seroval: 0.10.4
     dev: false
 
-  file:../../../react-utils(react-dom@18.2.0)(react@18.2.0):
-    resolution: {directory: ../../../react-utils, type: directory}
-    id: file:../../../react-utils
+  file:../react-utils(react-dom@18.3.1)(react@18.3.1):
+    resolution: {directory: ../react-utils, type: directory}
+    id: file:../react-utils
     name: '@modal-sh/react-utils'
     engines: {node: '>=12'}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  file:../../../tesseract/base:
-    resolution: {directory: ../../../tesseract/base, type: directory}
+  file:../tesseract/base:
+    resolution: {directory: ../tesseract/base, type: directory}
     name: '@tesseract-design/web-base'
     engines: {node: '>=12'}
     dependencies:
@@ -3078,69 +3137,96 @@ packages:
       - ts-node
     dev: false
 
-  file:../../../tesseract/categories/web/action/react(react-dom@18.2.0)(react@18.2.0):
-    resolution: {directory: ../../../tesseract/categories/web/action/react, type: directory}
-    id: file:../../../tesseract/categories/web/action/react
+  file:../tesseract/categories/web/action/react(react-dom@18.3.1)(react@18.3.1):
+    resolution: {directory: ../tesseract/categories/web/action/react, type: directory}
+    id: file:../tesseract/categories/web/action/react
     name: '@tesseract-design/web-action-react'
     engines: {node: '>=12'}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@tesseract-design/web-base': file:../../../tesseract/base
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@tesseract-design/web-base': file:../tesseract/base
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - ts-node
     dev: false
 
-  file:../../../tesseract/categories/web/formatted/react(react-dom@18.2.0)(react@18.2.0):
-    resolution: {directory: ../../../tesseract/categories/web/formatted/react, type: directory}
-    id: file:../../../tesseract/categories/web/formatted/react
+  file:../tesseract/categories/web/formatted/react(react-dom@18.3.1)(react@18.3.1):
+    resolution: {directory: ../tesseract/categories/web/formatted/react, type: directory}
+    id: file:../tesseract/categories/web/formatted/react
     name: '@tesseract-design/web-formatted-react'
     engines: {node: '>=12'}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@modal-sh/react-utils': file:../../../react-utils(react-dom@18.2.0)(react@18.2.0)
-      '@tesseract-design/web-base': file:../../../tesseract/base
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-phone-number-input: 3.3.0(react-dom@18.2.0)(react@18.2.0)
+      '@modal-sh/react-utils': file:../react-utils(react-dom@18.3.1)(react@18.3.1)
+      '@tesseract-design/web-base': file:../tesseract/base
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-phone-number-input: 3.3.0(react-dom@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - ts-node
     dev: false
 
-  file:../../../tesseract/categories/web/freeform/react(react-dom@18.2.0)(react@18.2.0):
-    resolution: {directory: ../../../tesseract/categories/web/freeform/react, type: directory}
-    id: file:../../../tesseract/categories/web/freeform/react
+  file:../tesseract/categories/web/freeform/react(react-dom@18.3.1)(react@18.3.1):
+    resolution: {directory: ../tesseract/categories/web/freeform/react, type: directory}
+    id: file:../tesseract/categories/web/freeform/react
     name: '@tesseract-design/web-freeform-react'
     engines: {node: '>=12'}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@modal-sh/react-utils': file:../../../react-utils(react-dom@18.2.0)(react@18.2.0)
-      '@tesseract-design/web-base': file:../../../tesseract/base
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@modal-sh/react-utils': file:../react-utils(react-dom@18.3.1)(react@18.3.1)
+      '@tesseract-design/web-base': file:../tesseract/base
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - ts-node
     dev: false
 
-  file:../../../tesseract/categories/web/navigation/react(react-dom@18.2.0)(react@18.2.0):
-    resolution: {directory: ../../../tesseract/categories/web/navigation/react, type: directory}
-    id: file:../../../tesseract/categories/web/navigation/react
+  file:../tesseract/categories/web/navigation/react(react-dom@18.3.1)(react@18.3.1):
+    resolution: {directory: ../tesseract/categories/web/navigation/react, type: directory}
+    id: file:../tesseract/categories/web/navigation/react
     name: '@tesseract-design/web-navigation-react'
     engines: {node: '>=12'}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@tesseract-design/web-base': file:../../../tesseract/base
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@tesseract-design/web-base': file:../tesseract/base
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
+  file:../viewfinder/packages/base:
+    resolution: {directory: ../viewfinder/packages/base, type: directory}
+    name: '@tesseract-design/viewfinder-base'
+    engines: {node: '>=10'}
+    dependencies:
+      tailwindcss: 3.3.3
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
+  file:../viewfinder/packages/react(react-dom@18.3.1)(react@18.3.1):
+    resolution: {directory: ../viewfinder/packages/react, type: directory}
+    id: file:../viewfinder/packages/react
+    name: '@tesseract-design/viewfinder-react'
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@tesseract-design/viewfinder-base': file:../viewfinder/packages/base
+      clsx: 2.0.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - ts-node
     dev: false

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - './packages/*'