@inploi/plugin-job-search 0.0.6 → 0.0.7

package/dist/plugin-job-search.cjs

@@ -3364,7 +3364,7 @@ const SkeletonText = ({
     style: {
       width: chars + "ch"
     },
-    class: "rounded-job-tag inline-block h-[1lh] bg-[currentColor] opacity-25"
+    class: "rounded-job-tag block h-[1lh] bg-[currentColor] opacity-25"
   });
 };
 const wrapperClass = cva({
@@ -3404,7 +3404,7 @@ const JobCard = ({
         }), u$1("div", {
           class: "flex flex-col gap-1",
           children: [u$1("p", {
-            class: "text-style-job-card-title text-copy-neutral",
+            class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
             children: job.title
           }), u$1("p", {
             class: "text-style-job-card text-copy-neutral-lowcontrast",
@@ -3459,7 +3459,7 @@ const JobCardSkeleton = ({
         }), u$1("div", {
           class: "flex flex-col gap-1",
           children: [u$1("p", {
-            class: "text-style-job-card-title text-copy-neutral",
+            class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
             children: u$1(SkeletonText, {
               chars: 13 + (seed + 5) * seed % 7
             })
@@ -3472,7 +3472,7 @@ const JobCardSkeleton = ({
         })]
       }), u$1("div", {
         class: "flex flex-col items-start gap-2",
-        children: [u$1("span", {
+        children: [seed % 2 === 0 && u$1("span", {
           class: tagClass({
             colorScheme: "default",
             class: "h-[1lh] w-[10ch]"
@@ -3590,6 +3590,27 @@ const JobSearch = ({
     console.log(error.message);
   }
   const availableProperties = data == null ? void 0 : data.data.available_properties;
+  const dataState = (() => {
+    if (isLoading && !data)
+      return {
+        state: "loading",
+        data: void 0
+      };
+    if (!isLoading && data && data.pagination.total === 0)
+      return {
+        state: "loadedEmpty",
+        data
+      };
+    if (!isLoading && data)
+      return {
+        state: "loaded",
+        data
+      };
+    return {
+      state: "idle",
+      data: void 0
+    };
+  })();
   return u$1(g$3, {
     children: [u$1(IconSpritesheet, {
       theme: params.theme
@@ -3597,7 +3618,7 @@ const JobSearch = ({
       ref: appRef,
       id: JOB_SEARCH_SCOPE_ELEMENT_ID,
       children: u$1("div", {
-        class: "bg-app mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-6 md:grid md:grid-cols-3 md:px-4",
+        class: "bg-app font-family-default font-weight-default font-style-default mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-6 md:grid md:grid-cols-3 md:px-4",
         children: [u$1(ErrorBoundary, {
           Fallback,
           children: u$1(FilterSection, {
@@ -3631,31 +3652,53 @@ const JobSearch = ({
           class: "md:col-span-2",
           children: u$1("section", {
             class: "bg-section-strong-bg ring-section-weak-stroke rounded-section ring-px lg:ring-width-section flex flex-col gap-4 p-4",
-            children: [isLoading && !(data == null ? void 0 : data.data) && u$1("div", {
-              class: "flex flex-col gap-3",
+            children: [dataState.state === "loading" && u$1(g$3, {
               children: [u$1("p", {
-                class: "text-copy-accent-lowcontrast animate-skeleton text-center",
+                class: "text-copy-accent-lowcontrast text-style-tag text-copy-job-info animate-skeleton m-0 self-center p-0",
                 children: u$1(SkeletonText, {
                   chars: 8
                 })
-              }), Array.from({
-                length: 4
-              }).map((_2, i2) => u$1(JobCardSkeleton, {
-                seed: i2,
-                animationDelay: (i2 - 4) * 0.1
-              }, i2))]
-            }), data && u$1("p", {
-              class: "text-copy-accent-lowcontrast text-center",
-              children: resultCountString(data.pagination.total)
-            }), u$1("ul", {
-              class: "flex flex-col gap-3",
-              children: data == null ? void 0 : data.data.results.map((job) => {
-                return u$1("li", {
-                  children: u$1(JobCard, {
-                    job
+              }), u$1("ul", {
+                class: "flex flex-col gap-3",
+                "aria-hidden": true,
+                children: Array.from({
+                  length: 4
+                }).map((_2, i2) => u$1("li", {
+                  children: u$1(JobCardSkeleton, {
+                    seed: i2,
+                    animationDelay: (i2 - 4) * 0.1
                   })
-                }, job.id);
-              })
+                }, i2))
+              })]
+            }), dataState.state === "loadedEmpty" && u$1("div", {
+              class: "mx-auto flex max-w-[70%] flex-col items-center gap-2 py-4 text-center",
+              children: [u$1(Icon, {
+                name: "magnifier",
+                class: "text-copy-accent-lowcontrast"
+              }), u$1("div", {
+                class: "flex flex-col items-center gap-1",
+                children: [u$1("p", {
+                  class: "text-copy-accent",
+                  children: "No jobs found"
+                }), u$1("p", {
+                  class: "text-copy-accent-lowcontrast text-style-tag",
+                  children: "We could not find any jobs matching your filtering criteria."
+                })]
+              })]
+            }), dataState.state === "loaded" && u$1(g$3, {
+              children: [u$1("p", {
+                class: "text-copy-accent-lowcontrast text-style-tag m-0 p-0 text-center",
+                children: resultCountString(dataState.data.pagination.total)
+              }), u$1("ul", {
+                class: "flex flex-col gap-3",
+                children: dataState.data.data.results.map((job) => {
+                  return u$1("li", {
+                    children: u$1(JobCard, {
+                      job
+                    })
+                  }, job.id);
+                })
+              })]
             })]
           })
         })]
@@ -3663,7 +3706,7 @@ const JobSearch = ({
     })]
   });
 };
-const tailwind = "#ijs {\n	font-size: 16px;\n	font-family: sans-serif;\n		--tw-content: '';\n		font-family:\n			system-ui,\n			-apple-system,\n			BlinkMacSystemFont,\n			Segoe UI,\n			Roboto,\n			Oxygen,\n			Ubuntu,\n			Cantarell,\n			Open Sans,\n			Helvetica Neue,\n			sans-serif;\n}\n\n		#ijs * {\n			box-sizing: border-box;\n			border-style: solid;\n			border-width: 0;\n			-webkit-tap-highlight-color: transparent;\n		}\n\n		#ijs ::before,\n		#ijs ::after {\n			box-sizing: border-box;\n		}\n\n		#ijs :is(a) {\n			text-decoration: none;\n		}\n\n		#ijs :is(ul, ol) {\n			list-style: none;\n			padding: 0;\n			margin: 0;\n		}\n\n		#ijs :is(p) {\n			margin: 0;\n			padding: 0;\n		}\n\n		#ijs :is(li) {\n			margin: 0;\n			padding: 0;\n			list-style: none;\n		}\n\n		#ijs :is(button) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			border: unset;\n			background: unset;\n			text-align: unset;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs *, #ijs ::before, #ijs ::after {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs ::backdrop {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs .container {\n	width: 100%;\n}\n\n		@media (min-width: 640px) {\n\n	#ijs .container {\n		max-width: 640px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .container {\n		max-width: 768px;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .container {\n		max-width: 1024px;\n	}\n}\n\n		@media (min-width: 1280px) {\n\n	#ijs .container {\n		max-width: 1280px;\n	}\n}\n\n		@media (min-width: 1536px) {\n\n	#ijs .container {\n		max-width: 1536px;\n	}\n}\n\n		#ijs .visible {\n	visibility: visible;\n}\n\n		#ijs .invisible {\n	visibility: hidden;\n}\n\n		#ijs .collapse {\n	visibility: collapse;\n}\n\n		#ijs .static {\n	position: static;\n}\n\n		#ijs .fixed {\n	position: fixed;\n}\n\n		#ijs .absolute {\n	position: absolute;\n}\n\n		#ijs .relative {\n	position: relative;\n}\n\n		#ijs .sticky {\n	position: sticky;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .m-2 {\n	margin: 0.5rem;\n}\n\n		#ijs .m-9 {\n	margin: 2.25rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .-mt-4 {\n	margin-top: -1rem;\n}\n\n		#ijs .block {\n	display: block;\n}\n\n		#ijs .inline-block {\n	display: inline-block;\n}\n\n		#ijs .inline {\n	display: inline;\n}\n\n		#ijs .flex {\n	display: flex;\n}\n\n		#ijs .inline-flex {\n	display: inline-flex;\n}\n\n		#ijs .table {\n	display: table;\n}\n\n		#ijs .table-row {\n	display: table-row;\n}\n\n		#ijs .flow-root {\n	display: flow-root;\n}\n\n		#ijs .grid {\n	display: grid;\n}\n\n		#ijs .inline-grid {\n	display: inline-grid;\n}\n\n		#ijs .contents {\n	display: contents;\n}\n\n		#ijs .list-item {\n	display: list-item;\n}\n\n		#ijs .\\!hidden {\n	display: none !important;\n}\n\n		#ijs .hidden {\n	display: none;\n}\n\n		#ijs .h-8 {\n	height: 2rem;\n}\n\n		#ijs .h-\\[1lh\\] {\n	height: 1lh;\n}\n\n		#ijs .min-h-screen {\n	min-height: 100vh;\n}\n\n		#ijs .w-\\[10ch\\] {\n	width: 10ch;\n}\n\n		#ijs .w-\\[6ch\\] {\n	width: 6ch;\n}\n\n		#ijs .w-\\[8ch\\] {\n	width: 8ch;\n}\n\n		#ijs .w-full {\n	width: 100%;\n}\n\n		#ijs .min-w-0 {\n	min-width: 0px;\n}\n\n		#ijs .max-w-full {\n	max-width: 100%;\n}\n\n		#ijs .max-w-screen-lg {\n	max-width: 1024px;\n}\n\n		#ijs .flex-1 {\n	flex: 1 1 0%;\n}\n\n		#ijs .flex-none {\n	flex: none;\n}\n\n		#ijs .flex-shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .flex-grow {\n	flex-grow: 1;\n}\n\n		#ijs .grow {\n	flex-grow: 1;\n}\n\n		#ijs .border-collapse {\n	border-collapse: collapse;\n}\n\n		#ijs .origin-top {\n	transform-origin: top;\n}\n\n		#ijs .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\n		@keyframes appear-tag {\n\n	0% {\n		transform: scale(0.9);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-appear-tag {\n	animation: appear-tag 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		@keyframes selected-tag {\n\n	0% {\n		transform: scale(1.11);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-selected-tag {\n	animation: selected-tag 0.9s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		@keyframes skeleton {\n\n	0% {\n		opacity: 0.2;\n	}\n\n	50% {\n		opacity: 0.5;\n	}\n\n	100% {\n		opacity: 0.3;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n		#ijs .cursor-pointer {\n	cursor: pointer;\n}\n\n		#ijs .select-none {\n	-webkit-user-select: none;\n	   -moz-user-select: none;\n	        user-select: none;\n}\n\n		#ijs .resize {\n	resize: both;\n}\n\n		#ijs .flex-col {\n	flex-direction: column;\n}\n\n		#ijs .flex-wrap {\n	flex-wrap: wrap;\n}\n\n		#ijs .items-start {\n	align-items: flex-start;\n}\n\n		#ijs .items-center {\n	align-items: center;\n}\n\n		#ijs .items-stretch {\n	align-items: stretch;\n}\n\n		#ijs .justify-end {\n	justify-content: flex-end;\n}\n\n		#ijs .justify-center {\n	justify-content: center;\n}\n\n		#ijs .gap-1 {\n	gap: 0.25rem;\n}\n\n		#ijs .gap-1\\.5 {\n	gap: 0.375rem;\n}\n\n		#ijs .gap-2 {\n	gap: 0.5rem;\n}\n\n		#ijs .gap-3 {\n	gap: 0.75rem;\n}\n\n		#ijs .gap-4 {\n	gap: 1rem;\n}\n\n		#ijs .overflow-hidden {\n	overflow: hidden;\n}\n\n		#ijs .overflow-x-auto {\n	overflow-x: auto;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .whitespace-nowrap {\n	white-space: nowrap;\n}\n\n		#ijs .rounded-interactive {\n	border-radius: var(--i-radius-interactive);\n}\n\n		#ijs .rounded-job-card {\n	border-radius: var(--i-radius-job-card);\n}\n\n		#ijs .rounded-job-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .rounded-section {\n	border-radius: var(--i-radius-section);\n}\n\n		#ijs .rounded-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .border {\n	border-width: 1px;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-app-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-job-card-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-accent-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-monetary-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .p-1 {\n	padding: 0.25rem;\n}\n\n		#ijs .p-2 {\n	padding: 0.5rem;\n}\n\n		#ijs .p-4 {\n	padding: 1rem;\n}\n\n		#ijs .px-2 {\n	padding-left: 0.5rem;\n	padding-right: 0.5rem;\n}\n\n		#ijs .px-3 {\n	padding-left: 0.75rem;\n	padding-right: 0.75rem;\n}\n\n		#ijs .px-4 {\n	padding-left: 1rem;\n	padding-right: 1rem;\n}\n\n		#ijs .px-5 {\n	padding-left: 1.25rem;\n	padding-right: 1.25rem;\n}\n\n		#ijs .py-1 {\n	padding-top: 0.25rem;\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .py-2 {\n	padding-top: 0.5rem;\n	padding-bottom: 0.5rem;\n}\n\n		#ijs .py-4 {\n	padding-top: 1rem;\n	padding-bottom: 1rem;\n}\n\n		#ijs .py-6 {\n	padding-top: 1.5rem;\n	padding-bottom: 1.5rem;\n}\n\n		#ijs .pb-1 {\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .pb-4 {\n	padding-bottom: 1rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pt-2 {\n	padding-top: 0.5rem;\n}\n\n		#ijs .text-center {\n	text-align: center;\n}\n\n		#ijs .text-justify {\n	text-align: justify;\n}\n\n		#ijs .font-family-filter {\n	font-family: var(--i-font-filter);\n}\n\n		#ijs .font-family-tag {\n	font-family: var(--i-font-tag);\n}\n\n		#ijs .text-style-filter {\n	font-size: 1rem;\n	line-height: 1.5rem;\n	letter-spacing: -0.01em;\n}\n\n		#ijs .text-style-job-card {\n	font-size: 0.875rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-info {\n	font-size: 0.75rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-title {\n	font-size: 1.125rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-tag {\n	font-size: 0.875rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .font-weight-filter {\n	font-weight: var(--i-weight-filter);\n}\n\n		#ijs .font-weight-tag {\n	font-weight: var(--i-weight-tag);\n}\n\n		#ijs .uppercase {\n	text-transform: uppercase;\n}\n\n		#ijs .lowercase {\n	text-transform: lowercase;\n}\n\n		#ijs .capitalize {\n	text-transform: capitalize;\n}\n\n		#ijs .italic {\n	font-style: italic;\n}\n\n		#ijs .ordinal {\n	--tw-ordinal: ordinal;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .text-copy-accent {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-lowcontrast {\n	color: oklch(var(--i-copy-accent-lowcontrast) / 0.67);\n}\n\n		#ijs .text-copy-job-info {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-info) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-lowcontrast) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-accent-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-accent-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-neutral-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-neutral-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-accent-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-monetary-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .opacity-25 {\n	opacity: 0.25;\n}\n\n		#ijs .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\n		#ijs .outline {\n	outline-style: solid;\n}\n\n		#ijs .ring-px {\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\n		#ijs .ring-width-job-card {\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(var(--i-job-card-stroke-width) + 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		#ijs .ring-width-section {\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(var(--i-section-stroke-width) + 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		#ijs .ring-job-card-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-accent-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-accent-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .blur {\n	--tw-blur: blur(8px);\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\n		#ijs .grayscale {\n	--tw-grayscale: grayscale(100%);\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\n		#ijs .invert {\n	--tw-invert: invert(100%);\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\n		#ijs .sepia {\n	--tw-sepia: sepia(100%);\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\n		#ijs .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\n		#ijs .backdrop-filter {\n	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n	        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n		#ijs .transition {\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-all {\n	transition-property: all;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-1000 {\n	transition-duration: 1000ms;\n}\n\n		#ijs .duration-300 {\n	transition-duration: 300ms;\n}\n\n		#ijs .duration-500 {\n	transition-duration: 500ms;\n}\n\n		#ijs .ease-expo-out {\n	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		#ijs .font-style-filter {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .font-style-tag {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .fr {\n	outline: none;\n}\n\n		#ijs .fr:focus {\n	outline: none;\n}\n\n		#ijs .fr:focus-visible {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-7) / 1);\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		#ijs .hide-scrollbars::-webkit-scrollbar {\n	display: none;\n}\n\n		#ijs .hide-scrollbars {\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n		#ijs .touch-hitbox::before {\n	content: '';\n	position: absolute;\n	display: block;\n	top: 50%;\n	left: 50%;\n	transform: translate(-50%, -50%);\n	width: 100%;\n	height: 100%;\n	min-height: 44px;\n	min-width: 44px;\n	z-index: 9999;\n}\n\n		#ijs .\\[a-zA-Z0-9-_\\:\\.\\$\\@\\?\\] {\n	a-z-a--z0-9-_: .$@?;\n}\n\n		#ijs .hover\\:bg-interactive-accent-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-accent-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .hover\\:bg-interactive-neutral-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-neutral-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:scale-95:active {\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\n		#ijs .active\\:bg-job-card-bg-active:active {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg-active) / var(--tw-bg-opacity));\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color-active) / var(--tw-ring-opacity));\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:col-span-2 {\n		grid-column: span 2 / span 2;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex {\n		display: flex;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid {\n		display: grid;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid-cols-3 {\n		grid-template-columns: repeat(3, minmax(0, 1fr));\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex-col {\n		flex-direction: column;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-0 {\n		padding-left: 0px;\n		padding-right: 0px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .lg\\:ring-width-section {\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(var(--i-section-stroke-width) + 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";
+const tailwind = "#ijs {\n	font-size: 16px;\n		--tw-content: '';\n}\n\n		#ijs * {\n			box-sizing: border-box;\n			border-style: solid;\n			border-width: 0;\n			-webkit-tap-highlight-color: transparent;\n			font-family: inherit;\n			font-style: inherit;\n			font-weight: inherit;\n		}\n\n		#ijs ::before,\n		#ijs ::after {\n			box-sizing: border-box;\n		}\n\n		#ijs :is(a) {\n			text-decoration: none;\n		}\n\n		#ijs :is(ul, ol) {\n			list-style: none;\n			padding: 0;\n			margin: 0;\n		}\n\n		#ijs :is(p) {\n			margin: 0;\n			padding: 0;\n		}\n\n		#ijs :is(li) {\n			margin: 0;\n			padding: 0;\n			list-style: none;\n		}\n\n		#ijs :is(button),\n		#ijs :is(a) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			border: unset;\n			background: unset;\n			text-align: unset;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs *, #ijs ::before, #ijs ::after {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs ::backdrop {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs .container {\n	width: 100%;\n}\n\n		@media (min-width: 640px) {\n\n	#ijs .container {\n		max-width: 640px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .container {\n		max-width: 768px;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .container {\n		max-width: 1024px;\n	}\n}\n\n		@media (min-width: 1280px) {\n\n	#ijs .container {\n		max-width: 1280px;\n	}\n}\n\n		@media (min-width: 1536px) {\n\n	#ijs .container {\n		max-width: 1536px;\n	}\n}\n\n		#ijs .visible {\n	visibility: visible;\n}\n\n		#ijs .invisible {\n	visibility: hidden;\n}\n\n		#ijs .collapse {\n	visibility: collapse;\n}\n\n		#ijs .static {\n	position: static;\n}\n\n		#ijs .fixed {\n	position: fixed;\n}\n\n		#ijs .absolute {\n	position: absolute;\n}\n\n		#ijs .relative {\n	position: relative;\n}\n\n		#ijs .sticky {\n	position: sticky;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .m-0 {\n	margin: 0px;\n}\n\n		#ijs .m-2 {\n	margin: 0.5rem;\n}\n\n		#ijs .m-9 {\n	margin: 2.25rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .-mt-4 {\n	margin-top: -1rem;\n}\n\n		#ijs .block {\n	display: block;\n}\n\n		#ijs .inline-block {\n	display: inline-block;\n}\n\n		#ijs .inline {\n	display: inline;\n}\n\n		#ijs .flex {\n	display: flex;\n}\n\n		#ijs .inline-flex {\n	display: inline-flex;\n}\n\n		#ijs .table {\n	display: table;\n}\n\n		#ijs .table-row {\n	display: table-row;\n}\n\n		#ijs .flow-root {\n	display: flow-root;\n}\n\n		#ijs .grid {\n	display: grid;\n}\n\n		#ijs .inline-grid {\n	display: inline-grid;\n}\n\n		#ijs .contents {\n	display: contents;\n}\n\n		#ijs .list-item {\n	display: list-item;\n}\n\n		#ijs .\\!hidden {\n	display: none !important;\n}\n\n		#ijs .hidden {\n	display: none;\n}\n\n		#ijs .h-8 {\n	height: 2rem;\n}\n\n		#ijs .h-\\[1lh\\] {\n	height: 1lh;\n}\n\n		#ijs .min-h-screen {\n	min-height: 100vh;\n}\n\n		#ijs .w-\\[10ch\\] {\n	width: 10ch;\n}\n\n		#ijs .w-\\[6ch\\] {\n	width: 6ch;\n}\n\n		#ijs .w-\\[8ch\\] {\n	width: 8ch;\n}\n\n		#ijs .w-full {\n	width: 100%;\n}\n\n		#ijs .min-w-0 {\n	min-width: 0px;\n}\n\n		#ijs .max-w-\\[70\\%\\] {\n	max-width: 70%;\n}\n\n		#ijs .max-w-full {\n	max-width: 100%;\n}\n\n		#ijs .max-w-screen-lg {\n	max-width: 1024px;\n}\n\n		#ijs .flex-1 {\n	flex: 1 1 0%;\n}\n\n		#ijs .flex-none {\n	flex: none;\n}\n\n		#ijs .flex-shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .flex-grow {\n	flex-grow: 1;\n}\n\n		#ijs .grow {\n	flex-grow: 1;\n}\n\n		#ijs .border-collapse {\n	border-collapse: collapse;\n}\n\n		#ijs .origin-top {\n	transform-origin: top;\n}\n\n		#ijs .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\n		@keyframes appear-tag {\n\n	0% {\n		transform: scale(0.9);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-appear-tag {\n	animation: appear-tag 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		@keyframes selected-tag {\n\n	0% {\n		transform: scale(1.11);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-selected-tag {\n	animation: selected-tag 0.9s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		@keyframes skeleton {\n\n	0% {\n		opacity: 0.2;\n	}\n\n	50% {\n		opacity: 0.5;\n	}\n\n	100% {\n		opacity: 0.3;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n		#ijs .cursor-pointer {\n	cursor: pointer;\n}\n\n		#ijs .select-none {\n	-webkit-user-select: none;\n	   -moz-user-select: none;\n	        user-select: none;\n}\n\n		#ijs .resize {\n	resize: both;\n}\n\n		#ijs .flex-col {\n	flex-direction: column;\n}\n\n		#ijs .flex-wrap {\n	flex-wrap: wrap;\n}\n\n		#ijs .items-start {\n	align-items: flex-start;\n}\n\n		#ijs .items-center {\n	align-items: center;\n}\n\n		#ijs .items-stretch {\n	align-items: stretch;\n}\n\n		#ijs .justify-end {\n	justify-content: flex-end;\n}\n\n		#ijs .justify-center {\n	justify-content: center;\n}\n\n		#ijs .gap-1 {\n	gap: 0.25rem;\n}\n\n		#ijs .gap-1\\.5 {\n	gap: 0.375rem;\n}\n\n		#ijs .gap-2 {\n	gap: 0.5rem;\n}\n\n		#ijs .gap-3 {\n	gap: 0.75rem;\n}\n\n		#ijs .gap-4 {\n	gap: 1rem;\n}\n\n		#ijs .self-center {\n	align-self: center;\n}\n\n		#ijs .overflow-hidden {\n	overflow: hidden;\n}\n\n		#ijs .overflow-x-auto {\n	overflow-x: auto;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .whitespace-nowrap {\n	white-space: nowrap;\n}\n\n		#ijs .rounded-interactive {\n	border-radius: var(--i-radius-interactive);\n}\n\n		#ijs .rounded-job-card {\n	border-radius: var(--i-radius-job-card);\n}\n\n		#ijs .rounded-job-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .rounded-section {\n	border-radius: var(--i-radius-section);\n}\n\n		#ijs .rounded-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .border {\n	border-width: 1px;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-app-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-job-card-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-accent-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-monetary-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .p-0 {\n	padding: 0px;\n}\n\n		#ijs .p-1 {\n	padding: 0.25rem;\n}\n\n		#ijs .p-2 {\n	padding: 0.5rem;\n}\n\n		#ijs .p-4 {\n	padding: 1rem;\n}\n\n		#ijs .px-2 {\n	padding-left: 0.5rem;\n	padding-right: 0.5rem;\n}\n\n		#ijs .px-3 {\n	padding-left: 0.75rem;\n	padding-right: 0.75rem;\n}\n\n		#ijs .px-4 {\n	padding-left: 1rem;\n	padding-right: 1rem;\n}\n\n		#ijs .px-5 {\n	padding-left: 1.25rem;\n	padding-right: 1.25rem;\n}\n\n		#ijs .py-1 {\n	padding-top: 0.25rem;\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .py-2 {\n	padding-top: 0.5rem;\n	padding-bottom: 0.5rem;\n}\n\n		#ijs .py-4 {\n	padding-top: 1rem;\n	padding-bottom: 1rem;\n}\n\n		#ijs .py-6 {\n	padding-top: 1.5rem;\n	padding-bottom: 1.5rem;\n}\n\n		#ijs .pb-1 {\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .pb-4 {\n	padding-bottom: 1rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pt-2 {\n	padding-top: 0.5rem;\n}\n\n		#ijs .text-center {\n	text-align: center;\n}\n\n		#ijs .text-justify {\n	text-align: justify;\n}\n\n		#ijs .font-family-default {\n	font-family: var(--i-font);\n}\n\n		#ijs .font-family-filter {\n	font-family: var(--i-font-filter);\n}\n\n		#ijs .font-family-job-heading {\n	font-family: var(--i-font-job-heading);\n}\n\n		#ijs .font-family-tag {\n	font-family: var(--i-font-tag);\n}\n\n		#ijs .text-style-filter {\n	font-size: 1rem;\n	line-height: 1.5rem;\n	letter-spacing: -0.01em;\n}\n\n		#ijs .text-style-job-card {\n	font-size: 0.875rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-info {\n	font-size: 0.75rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-heading {\n	font-size: 1.125rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-tag {\n	font-size: 0.875rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .font-weight-default {\n	font-weight: var(--i-weight-default);\n}\n\n		#ijs .font-weight-filter {\n	font-weight: var(--i-weight-filter);\n}\n\n		#ijs .font-weight-job-heading {\n	font-weight: var(--i-weight-job-heading);\n}\n\n		#ijs .font-weight-tag {\n	font-weight: var(--i-weight-tag);\n}\n\n		#ijs .uppercase {\n	text-transform: uppercase;\n}\n\n		#ijs .lowercase {\n	text-transform: lowercase;\n}\n\n		#ijs .capitalize {\n	text-transform: capitalize;\n}\n\n		#ijs .italic {\n	font-style: italic;\n}\n\n		#ijs .ordinal {\n	--tw-ordinal: ordinal;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .text-copy-accent {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-lowcontrast {\n	color: oklch(var(--i-copy-accent-lowcontrast) / 0.67);\n}\n\n		#ijs .text-copy-job-info {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-info) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-lowcontrast) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-accent-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-accent-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-neutral-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-neutral-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-accent-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-monetary-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .opacity-25 {\n	opacity: 0.25;\n}\n\n		#ijs .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\n		#ijs .outline {\n	outline-style: solid;\n}\n\n		#ijs .ring-px {\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\n		#ijs .ring-width-job-card {\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(var(--i-job-card-stroke-width) + 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		#ijs .ring-width-section {\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(var(--i-section-stroke-width) + 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		#ijs .ring-job-card-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-accent-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-accent-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .blur {\n	--tw-blur: blur(8px);\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\n		#ijs .grayscale {\n	--tw-grayscale: grayscale(100%);\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\n		#ijs .invert {\n	--tw-invert: invert(100%);\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\n		#ijs .sepia {\n	--tw-sepia: sepia(100%);\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\n		#ijs .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\n		#ijs .backdrop-filter {\n	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n	        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n		#ijs .transition {\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-all {\n	transition-property: all;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-1000 {\n	transition-duration: 1000ms;\n}\n\n		#ijs .duration-300 {\n	transition-duration: 300ms;\n}\n\n		#ijs .duration-500 {\n	transition-duration: 500ms;\n}\n\n		#ijs .ease-expo-out {\n	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		#ijs .font-style-default {\n	font-style: var(--i-font-style);\n}\n\n		#ijs .font-style-filter {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .font-style-job-heading {\n	font-style: var(--i-style-job-heading);\n}\n\n		#ijs .font-style-tag {\n	font-style: var(--i-style-tag);\n}\n\n		#ijs .fr {\n	outline: none;\n}\n\n		#ijs .fr:focus {\n	outline: none;\n}\n\n		#ijs .fr:focus-visible {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-7) / 1);\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		#ijs .hide-scrollbars::-webkit-scrollbar {\n	display: none;\n}\n\n		#ijs .hide-scrollbars {\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n		#ijs .touch-hitbox::before {\n	content: '';\n	position: absolute;\n	display: block;\n	top: 50%;\n	left: 50%;\n	transform: translate(-50%, -50%);\n	width: 100%;\n	height: 100%;\n	min-height: 44px;\n	min-width: 44px;\n	z-index: 9999;\n}\n\n		#ijs .\\[a-zA-Z0-9-_\\:\\.\\$\\@\\?\\] {\n	a-z-a--z0-9-_: .$@?;\n}\n\n		#ijs .hover\\:bg-interactive-accent-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-accent-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .hover\\:bg-interactive-neutral-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-neutral-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:scale-95:active {\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\n		#ijs .active\\:bg-job-card-bg-active:active {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg-active) / var(--tw-bg-opacity));\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color-active) / var(--tw-ring-opacity));\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:col-span-2 {\n		grid-column: span 2 / span 2;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex {\n		display: flex;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid {\n		display: grid;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid-cols-3 {\n		grid-template-columns: repeat(3, minmax(0, 1fr));\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex-col {\n		flex-direction: column;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-0 {\n		padding-left: 0px;\n		padding-right: 0px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .lg\\:ring-width-section {\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(var(--i-section-stroke-width) + 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";
 const match = (m2) => {
   const patterns = [];
   const i2 = (m22) => ({
@@ -6917,7 +6960,7 @@ const generateColorThemeVars = (theme) => {
 };
 const transparent = "transparent";
 const generateTokenVars = (theme, color) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i2;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i2, _j, _k;
   const {
     typography,
     highcontrast,
@@ -6925,16 +6968,19 @@ const generateTokenVars = (theme, color) => {
   } = theme;
   return {
     font: typography.font_family ?? "inherit",
-    "font-style": typography.style ?? "normal",
+    "font-style": typography.style ?? "inherit",
     "font-filter": ((_a = typography.filter) == null ? void 0 : _a.font_family) ?? typography.font_family ?? "inherit",
     "font-job-heading": ((_b = theme.typography.job_heading) == null ? void 0 : _b.font_family) ?? theme.typography.font_family ?? "inherit",
     "font-tag": ((_c = typography.tag) == null ? void 0 : _c.font_family) ?? typography.font_family ?? "inherit",
-    "style-filter": ((_d = typography.filter) == null ? void 0 : _d.style) ?? typography.style ?? "normal",
-    "weight-filter": ((_e = typography.filter) == null ? void 0 : _e.weight) ?? typography.weight ?? "normal",
-    "style-tag": ((_f = typography.tag) == null ? void 0 : _f.style) ?? typography.style ?? "normal",
-    "weight-tag": ((_g = typography.tag) == null ? void 0 : _g.weight) ?? typography.weight ?? "normal",
-    "style-input": ((_h = typography.input) == null ? void 0 : _h.style) ?? typography.style ?? "normal",
-    "weight-input": ((_i2 = typography.input) == null ? void 0 : _i2.weight) ?? typography.weight ?? "normal",
+    "weight-default": typography.weight ?? "inherit",
+    "style-filter": ((_d = typography.filter) == null ? void 0 : _d.style) ?? typography.style ?? "inherit",
+    "weight-filter": ((_e = typography.filter) == null ? void 0 : _e.weight) ?? typography.weight ?? "inherit",
+    "style-tag": ((_f = typography.tag) == null ? void 0 : _f.style) ?? typography.style ?? "inherit",
+    "style-job-heading": ((_g = typography.job_heading) == null ? void 0 : _g.style) ?? typography.style ?? "inherit",
+    "weight-tag": ((_h = typography.tag) == null ? void 0 : _h.weight) ?? typography.weight ?? "inherit",
+    "weight-job-heading": ((_i2 = typography.job_heading) == null ? void 0 : _i2.weight) ?? typography.weight ?? "inherit",
+    "style-input": ((_j = typography.input) == null ? void 0 : _j.style) ?? typography.style ?? "inherit",
+    "weight-input": ((_k = typography.input) == null ? void 0 : _k.weight) ?? typography.weight ?? "inherit",
     "app-bg": color.lowest,
     copy: highcontrast ? color["n-12"] : color["n-11"],
     "copy-lowcontrast": highcontrast ? color["n-9"] : color["n-8"],

package/dist/plugin-job-search.js

@@ -3362,7 +3362,7 @@ const SkeletonText = ({
     style: {
       width: chars + "ch"
     },
-    class: "rounded-job-tag inline-block h-[1lh] bg-[currentColor] opacity-25"
+    class: "rounded-job-tag block h-[1lh] bg-[currentColor] opacity-25"
   });
 };
 const wrapperClass = cva({
@@ -3402,7 +3402,7 @@ const JobCard = ({
         }), u$1("div", {
           class: "flex flex-col gap-1",
           children: [u$1("p", {
-            class: "text-style-job-card-title text-copy-neutral",
+            class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
             children: job.title
           }), u$1("p", {
             class: "text-style-job-card text-copy-neutral-lowcontrast",
@@ -3457,7 +3457,7 @@ const JobCardSkeleton = ({
         }), u$1("div", {
           class: "flex flex-col gap-1",
           children: [u$1("p", {
-            class: "text-style-job-card-title text-copy-neutral",
+            class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
             children: u$1(SkeletonText, {
               chars: 13 + (seed + 5) * seed % 7
             })
@@ -3470,7 +3470,7 @@ const JobCardSkeleton = ({
         })]
       }), u$1("div", {
         class: "flex flex-col items-start gap-2",
-        children: [u$1("span", {
+        children: [seed % 2 === 0 && u$1("span", {
           class: tagClass({
             colorScheme: "default",
             class: "h-[1lh] w-[10ch]"
@@ -3588,6 +3588,27 @@ const JobSearch = ({
     console.log(error.message);
   }
   const availableProperties = data == null ? void 0 : data.data.available_properties;
+  const dataState = (() => {
+    if (isLoading && !data)
+      return {
+        state: "loading",
+        data: void 0
+      };
+    if (!isLoading && data && data.pagination.total === 0)
+      return {
+        state: "loadedEmpty",
+        data
+      };
+    if (!isLoading && data)
+      return {
+        state: "loaded",
+        data
+      };
+    return {
+      state: "idle",
+      data: void 0
+    };
+  })();
   return u$1(g$3, {
     children: [u$1(IconSpritesheet, {
       theme: params.theme
@@ -3595,7 +3616,7 @@ const JobSearch = ({
       ref: appRef,
       id: JOB_SEARCH_SCOPE_ELEMENT_ID,
       children: u$1("div", {
-        class: "bg-app mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-6 md:grid md:grid-cols-3 md:px-4",
+        class: "bg-app font-family-default font-weight-default font-style-default mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-6 md:grid md:grid-cols-3 md:px-4",
         children: [u$1(ErrorBoundary, {
           Fallback,
           children: u$1(FilterSection, {
@@ -3629,31 +3650,53 @@ const JobSearch = ({
           class: "md:col-span-2",
           children: u$1("section", {
             class: "bg-section-strong-bg ring-section-weak-stroke rounded-section ring-px lg:ring-width-section flex flex-col gap-4 p-4",
-            children: [isLoading && !(data == null ? void 0 : data.data) && u$1("div", {
-              class: "flex flex-col gap-3",
+            children: [dataState.state === "loading" && u$1(g$3, {
               children: [u$1("p", {
-                class: "text-copy-accent-lowcontrast animate-skeleton text-center",
+                class: "text-copy-accent-lowcontrast text-style-tag text-copy-job-info animate-skeleton m-0 self-center p-0",
                 children: u$1(SkeletonText, {
                   chars: 8
                 })
-              }), Array.from({
-                length: 4
-              }).map((_2, i2) => u$1(JobCardSkeleton, {
-                seed: i2,
-                animationDelay: (i2 - 4) * 0.1
-              }, i2))]
-            }), data && u$1("p", {
-              class: "text-copy-accent-lowcontrast text-center",
-              children: resultCountString(data.pagination.total)
-            }), u$1("ul", {
-              class: "flex flex-col gap-3",
-              children: data == null ? void 0 : data.data.results.map((job) => {
-                return u$1("li", {
-                  children: u$1(JobCard, {
-                    job
+              }), u$1("ul", {
+                class: "flex flex-col gap-3",
+                "aria-hidden": true,
+                children: Array.from({
+                  length: 4
+                }).map((_2, i2) => u$1("li", {
+                  children: u$1(JobCardSkeleton, {
+                    seed: i2,
+                    animationDelay: (i2 - 4) * 0.1
                   })
-                }, job.id);
-              })
+                }, i2))
+              })]
+            }), dataState.state === "loadedEmpty" && u$1("div", {
+              class: "mx-auto flex max-w-[70%] flex-col items-center gap-2 py-4 text-center",
+              children: [u$1(Icon, {
+                name: "magnifier",
+                class: "text-copy-accent-lowcontrast"
+              }), u$1("div", {
+                class: "flex flex-col items-center gap-1",
+                children: [u$1("p", {
+                  class: "text-copy-accent",
+                  children: "No jobs found"
+                }), u$1("p", {
+                  class: "text-copy-accent-lowcontrast text-style-tag",
+                  children: "We could not find any jobs matching your filtering criteria."
+                })]
+              })]
+            }), dataState.state === "loaded" && u$1(g$3, {
+              children: [u$1("p", {
+                class: "text-copy-accent-lowcontrast text-style-tag m-0 p-0 text-center",
+                children: resultCountString(dataState.data.pagination.total)
+              }), u$1("ul", {
+                class: "flex flex-col gap-3",
+                children: dataState.data.data.results.map((job) => {
+                  return u$1("li", {
+                    children: u$1(JobCard, {
+                      job
+                    })
+                  }, job.id);
+                })
+              })]
             })]
           })
         })]
@@ -3661,7 +3704,7 @@ const JobSearch = ({
     })]
   });
 };
-const tailwind = "#ijs {\n	font-size: 16px;\n	font-family: sans-serif;\n		--tw-content: '';\n		font-family:\n			system-ui,\n			-apple-system,\n			BlinkMacSystemFont,\n			Segoe UI,\n			Roboto,\n			Oxygen,\n			Ubuntu,\n			Cantarell,\n			Open Sans,\n			Helvetica Neue,\n			sans-serif;\n}\n\n		#ijs * {\n			box-sizing: border-box;\n			border-style: solid;\n			border-width: 0;\n			-webkit-tap-highlight-color: transparent;\n		}\n\n		#ijs ::before,\n		#ijs ::after {\n			box-sizing: border-box;\n		}\n\n		#ijs :is(a) {\n			text-decoration: none;\n		}\n\n		#ijs :is(ul, ol) {\n			list-style: none;\n			padding: 0;\n			margin: 0;\n		}\n\n		#ijs :is(p) {\n			margin: 0;\n			padding: 0;\n		}\n\n		#ijs :is(li) {\n			margin: 0;\n			padding: 0;\n			list-style: none;\n		}\n\n		#ijs :is(button) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			border: unset;\n			background: unset;\n			text-align: unset;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs *, #ijs ::before, #ijs ::after {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs ::backdrop {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs .container {\n	width: 100%;\n}\n\n		@media (min-width: 640px) {\n\n	#ijs .container {\n		max-width: 640px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .container {\n		max-width: 768px;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .container {\n		max-width: 1024px;\n	}\n}\n\n		@media (min-width: 1280px) {\n\n	#ijs .container {\n		max-width: 1280px;\n	}\n}\n\n		@media (min-width: 1536px) {\n\n	#ijs .container {\n		max-width: 1536px;\n	}\n}\n\n		#ijs .visible {\n	visibility: visible;\n}\n\n		#ijs .invisible {\n	visibility: hidden;\n}\n\n		#ijs .collapse {\n	visibility: collapse;\n}\n\n		#ijs .static {\n	position: static;\n}\n\n		#ijs .fixed {\n	position: fixed;\n}\n\n		#ijs .absolute {\n	position: absolute;\n}\n\n		#ijs .relative {\n	position: relative;\n}\n\n		#ijs .sticky {\n	position: sticky;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .m-2 {\n	margin: 0.5rem;\n}\n\n		#ijs .m-9 {\n	margin: 2.25rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .-mt-4 {\n	margin-top: -1rem;\n}\n\n		#ijs .block {\n	display: block;\n}\n\n		#ijs .inline-block {\n	display: inline-block;\n}\n\n		#ijs .inline {\n	display: inline;\n}\n\n		#ijs .flex {\n	display: flex;\n}\n\n		#ijs .inline-flex {\n	display: inline-flex;\n}\n\n		#ijs .table {\n	display: table;\n}\n\n		#ijs .table-row {\n	display: table-row;\n}\n\n		#ijs .flow-root {\n	display: flow-root;\n}\n\n		#ijs .grid {\n	display: grid;\n}\n\n		#ijs .inline-grid {\n	display: inline-grid;\n}\n\n		#ijs .contents {\n	display: contents;\n}\n\n		#ijs .list-item {\n	display: list-item;\n}\n\n		#ijs .\\!hidden {\n	display: none !important;\n}\n\n		#ijs .hidden {\n	display: none;\n}\n\n		#ijs .h-8 {\n	height: 2rem;\n}\n\n		#ijs .h-\\[1lh\\] {\n	height: 1lh;\n}\n\n		#ijs .min-h-screen {\n	min-height: 100vh;\n}\n\n		#ijs .w-\\[10ch\\] {\n	width: 10ch;\n}\n\n		#ijs .w-\\[6ch\\] {\n	width: 6ch;\n}\n\n		#ijs .w-\\[8ch\\] {\n	width: 8ch;\n}\n\n		#ijs .w-full {\n	width: 100%;\n}\n\n		#ijs .min-w-0 {\n	min-width: 0px;\n}\n\n		#ijs .max-w-full {\n	max-width: 100%;\n}\n\n		#ijs .max-w-screen-lg {\n	max-width: 1024px;\n}\n\n		#ijs .flex-1 {\n	flex: 1 1 0%;\n}\n\n		#ijs .flex-none {\n	flex: none;\n}\n\n		#ijs .flex-shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .flex-grow {\n	flex-grow: 1;\n}\n\n		#ijs .grow {\n	flex-grow: 1;\n}\n\n		#ijs .border-collapse {\n	border-collapse: collapse;\n}\n\n		#ijs .origin-top {\n	transform-origin: top;\n}\n\n		#ijs .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\n		@keyframes appear-tag {\n\n	0% {\n		transform: scale(0.9);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-appear-tag {\n	animation: appear-tag 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		@keyframes selected-tag {\n\n	0% {\n		transform: scale(1.11);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-selected-tag {\n	animation: selected-tag 0.9s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		@keyframes skeleton {\n\n	0% {\n		opacity: 0.2;\n	}\n\n	50% {\n		opacity: 0.5;\n	}\n\n	100% {\n		opacity: 0.3;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n		#ijs .cursor-pointer {\n	cursor: pointer;\n}\n\n		#ijs .select-none {\n	-webkit-user-select: none;\n	   -moz-user-select: none;\n	        user-select: none;\n}\n\n		#ijs .resize {\n	resize: both;\n}\n\n		#ijs .flex-col {\n	flex-direction: column;\n}\n\n		#ijs .flex-wrap {\n	flex-wrap: wrap;\n}\n\n		#ijs .items-start {\n	align-items: flex-start;\n}\n\n		#ijs .items-center {\n	align-items: center;\n}\n\n		#ijs .items-stretch {\n	align-items: stretch;\n}\n\n		#ijs .justify-end {\n	justify-content: flex-end;\n}\n\n		#ijs .justify-center {\n	justify-content: center;\n}\n\n		#ijs .gap-1 {\n	gap: 0.25rem;\n}\n\n		#ijs .gap-1\\.5 {\n	gap: 0.375rem;\n}\n\n		#ijs .gap-2 {\n	gap: 0.5rem;\n}\n\n		#ijs .gap-3 {\n	gap: 0.75rem;\n}\n\n		#ijs .gap-4 {\n	gap: 1rem;\n}\n\n		#ijs .overflow-hidden {\n	overflow: hidden;\n}\n\n		#ijs .overflow-x-auto {\n	overflow-x: auto;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .whitespace-nowrap {\n	white-space: nowrap;\n}\n\n		#ijs .rounded-interactive {\n	border-radius: var(--i-radius-interactive);\n}\n\n		#ijs .rounded-job-card {\n	border-radius: var(--i-radius-job-card);\n}\n\n		#ijs .rounded-job-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .rounded-section {\n	border-radius: var(--i-radius-section);\n}\n\n		#ijs .rounded-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .border {\n	border-width: 1px;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-app-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-job-card-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-accent-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-monetary-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .p-1 {\n	padding: 0.25rem;\n}\n\n		#ijs .p-2 {\n	padding: 0.5rem;\n}\n\n		#ijs .p-4 {\n	padding: 1rem;\n}\n\n		#ijs .px-2 {\n	padding-left: 0.5rem;\n	padding-right: 0.5rem;\n}\n\n		#ijs .px-3 {\n	padding-left: 0.75rem;\n	padding-right: 0.75rem;\n}\n\n		#ijs .px-4 {\n	padding-left: 1rem;\n	padding-right: 1rem;\n}\n\n		#ijs .px-5 {\n	padding-left: 1.25rem;\n	padding-right: 1.25rem;\n}\n\n		#ijs .py-1 {\n	padding-top: 0.25rem;\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .py-2 {\n	padding-top: 0.5rem;\n	padding-bottom: 0.5rem;\n}\n\n		#ijs .py-4 {\n	padding-top: 1rem;\n	padding-bottom: 1rem;\n}\n\n		#ijs .py-6 {\n	padding-top: 1.5rem;\n	padding-bottom: 1.5rem;\n}\n\n		#ijs .pb-1 {\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .pb-4 {\n	padding-bottom: 1rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pt-2 {\n	padding-top: 0.5rem;\n}\n\n		#ijs .text-center {\n	text-align: center;\n}\n\n		#ijs .text-justify {\n	text-align: justify;\n}\n\n		#ijs .font-family-filter {\n	font-family: var(--i-font-filter);\n}\n\n		#ijs .font-family-tag {\n	font-family: var(--i-font-tag);\n}\n\n		#ijs .text-style-filter {\n	font-size: 1rem;\n	line-height: 1.5rem;\n	letter-spacing: -0.01em;\n}\n\n		#ijs .text-style-job-card {\n	font-size: 0.875rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-info {\n	font-size: 0.75rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-title {\n	font-size: 1.125rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-tag {\n	font-size: 0.875rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .font-weight-filter {\n	font-weight: var(--i-weight-filter);\n}\n\n		#ijs .font-weight-tag {\n	font-weight: var(--i-weight-tag);\n}\n\n		#ijs .uppercase {\n	text-transform: uppercase;\n}\n\n		#ijs .lowercase {\n	text-transform: lowercase;\n}\n\n		#ijs .capitalize {\n	text-transform: capitalize;\n}\n\n		#ijs .italic {\n	font-style: italic;\n}\n\n		#ijs .ordinal {\n	--tw-ordinal: ordinal;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .text-copy-accent {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-lowcontrast {\n	color: oklch(var(--i-copy-accent-lowcontrast) / 0.67);\n}\n\n		#ijs .text-copy-job-info {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-info) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-lowcontrast) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-accent-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-accent-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-neutral-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-neutral-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-accent-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-monetary-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .opacity-25 {\n	opacity: 0.25;\n}\n\n		#ijs .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\n		#ijs .outline {\n	outline-style: solid;\n}\n\n		#ijs .ring-px {\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\n		#ijs .ring-width-job-card {\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(var(--i-job-card-stroke-width) + 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		#ijs .ring-width-section {\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(var(--i-section-stroke-width) + 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		#ijs .ring-job-card-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-accent-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-accent-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .blur {\n	--tw-blur: blur(8px);\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\n		#ijs .grayscale {\n	--tw-grayscale: grayscale(100%);\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\n		#ijs .invert {\n	--tw-invert: invert(100%);\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\n		#ijs .sepia {\n	--tw-sepia: sepia(100%);\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\n		#ijs .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\n		#ijs .backdrop-filter {\n	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n	        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n		#ijs .transition {\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-all {\n	transition-property: all;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-1000 {\n	transition-duration: 1000ms;\n}\n\n		#ijs .duration-300 {\n	transition-duration: 300ms;\n}\n\n		#ijs .duration-500 {\n	transition-duration: 500ms;\n}\n\n		#ijs .ease-expo-out {\n	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		#ijs .font-style-filter {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .font-style-tag {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .fr {\n	outline: none;\n}\n\n		#ijs .fr:focus {\n	outline: none;\n}\n\n		#ijs .fr:focus-visible {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-7) / 1);\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		#ijs .hide-scrollbars::-webkit-scrollbar {\n	display: none;\n}\n\n		#ijs .hide-scrollbars {\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n		#ijs .touch-hitbox::before {\n	content: '';\n	position: absolute;\n	display: block;\n	top: 50%;\n	left: 50%;\n	transform: translate(-50%, -50%);\n	width: 100%;\n	height: 100%;\n	min-height: 44px;\n	min-width: 44px;\n	z-index: 9999;\n}\n\n		#ijs .\\[a-zA-Z0-9-_\\:\\.\\$\\@\\?\\] {\n	a-z-a--z0-9-_: .$@?;\n}\n\n		#ijs .hover\\:bg-interactive-accent-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-accent-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .hover\\:bg-interactive-neutral-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-neutral-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:scale-95:active {\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\n		#ijs .active\\:bg-job-card-bg-active:active {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg-active) / var(--tw-bg-opacity));\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color-active) / var(--tw-ring-opacity));\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:col-span-2 {\n		grid-column: span 2 / span 2;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex {\n		display: flex;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid {\n		display: grid;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid-cols-3 {\n		grid-template-columns: repeat(3, minmax(0, 1fr));\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex-col {\n		flex-direction: column;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-0 {\n		padding-left: 0px;\n		padding-right: 0px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .lg\\:ring-width-section {\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(var(--i-section-stroke-width) + 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";
+const tailwind = "#ijs {\n	font-size: 16px;\n		--tw-content: '';\n}\n\n		#ijs * {\n			box-sizing: border-box;\n			border-style: solid;\n			border-width: 0;\n			-webkit-tap-highlight-color: transparent;\n			font-family: inherit;\n			font-style: inherit;\n			font-weight: inherit;\n		}\n\n		#ijs ::before,\n		#ijs ::after {\n			box-sizing: border-box;\n		}\n\n		#ijs :is(a) {\n			text-decoration: none;\n		}\n\n		#ijs :is(ul, ol) {\n			list-style: none;\n			padding: 0;\n			margin: 0;\n		}\n\n		#ijs :is(p) {\n			margin: 0;\n			padding: 0;\n		}\n\n		#ijs :is(li) {\n			margin: 0;\n			padding: 0;\n			list-style: none;\n		}\n\n		#ijs :is(button),\n		#ijs :is(a) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			border: unset;\n			background: unset;\n			text-align: unset;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs *, #ijs ::before, #ijs ::after {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs ::backdrop {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\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-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\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(59 130 246 / 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\n		#ijs .container {\n	width: 100%;\n}\n\n		@media (min-width: 640px) {\n\n	#ijs .container {\n		max-width: 640px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .container {\n		max-width: 768px;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .container {\n		max-width: 1024px;\n	}\n}\n\n		@media (min-width: 1280px) {\n\n	#ijs .container {\n		max-width: 1280px;\n	}\n}\n\n		@media (min-width: 1536px) {\n\n	#ijs .container {\n		max-width: 1536px;\n	}\n}\n\n		#ijs .visible {\n	visibility: visible;\n}\n\n		#ijs .invisible {\n	visibility: hidden;\n}\n\n		#ijs .collapse {\n	visibility: collapse;\n}\n\n		#ijs .static {\n	position: static;\n}\n\n		#ijs .fixed {\n	position: fixed;\n}\n\n		#ijs .absolute {\n	position: absolute;\n}\n\n		#ijs .relative {\n	position: relative;\n}\n\n		#ijs .sticky {\n	position: sticky;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .m-0 {\n	margin: 0px;\n}\n\n		#ijs .m-2 {\n	margin: 0.5rem;\n}\n\n		#ijs .m-9 {\n	margin: 2.25rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .-mt-4 {\n	margin-top: -1rem;\n}\n\n		#ijs .block {\n	display: block;\n}\n\n		#ijs .inline-block {\n	display: inline-block;\n}\n\n		#ijs .inline {\n	display: inline;\n}\n\n		#ijs .flex {\n	display: flex;\n}\n\n		#ijs .inline-flex {\n	display: inline-flex;\n}\n\n		#ijs .table {\n	display: table;\n}\n\n		#ijs .table-row {\n	display: table-row;\n}\n\n		#ijs .flow-root {\n	display: flow-root;\n}\n\n		#ijs .grid {\n	display: grid;\n}\n\n		#ijs .inline-grid {\n	display: inline-grid;\n}\n\n		#ijs .contents {\n	display: contents;\n}\n\n		#ijs .list-item {\n	display: list-item;\n}\n\n		#ijs .\\!hidden {\n	display: none !important;\n}\n\n		#ijs .hidden {\n	display: none;\n}\n\n		#ijs .h-8 {\n	height: 2rem;\n}\n\n		#ijs .h-\\[1lh\\] {\n	height: 1lh;\n}\n\n		#ijs .min-h-screen {\n	min-height: 100vh;\n}\n\n		#ijs .w-\\[10ch\\] {\n	width: 10ch;\n}\n\n		#ijs .w-\\[6ch\\] {\n	width: 6ch;\n}\n\n		#ijs .w-\\[8ch\\] {\n	width: 8ch;\n}\n\n		#ijs .w-full {\n	width: 100%;\n}\n\n		#ijs .min-w-0 {\n	min-width: 0px;\n}\n\n		#ijs .max-w-\\[70\\%\\] {\n	max-width: 70%;\n}\n\n		#ijs .max-w-full {\n	max-width: 100%;\n}\n\n		#ijs .max-w-screen-lg {\n	max-width: 1024px;\n}\n\n		#ijs .flex-1 {\n	flex: 1 1 0%;\n}\n\n		#ijs .flex-none {\n	flex: none;\n}\n\n		#ijs .flex-shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .flex-grow {\n	flex-grow: 1;\n}\n\n		#ijs .grow {\n	flex-grow: 1;\n}\n\n		#ijs .border-collapse {\n	border-collapse: collapse;\n}\n\n		#ijs .origin-top {\n	transform-origin: top;\n}\n\n		#ijs .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\n		@keyframes appear-tag {\n\n	0% {\n		transform: scale(0.9);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-appear-tag {\n	animation: appear-tag 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		@keyframes selected-tag {\n\n	0% {\n		transform: scale(1.11);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-selected-tag {\n	animation: selected-tag 0.9s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		@keyframes skeleton {\n\n	0% {\n		opacity: 0.2;\n	}\n\n	50% {\n		opacity: 0.5;\n	}\n\n	100% {\n		opacity: 0.3;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n		#ijs .cursor-pointer {\n	cursor: pointer;\n}\n\n		#ijs .select-none {\n	-webkit-user-select: none;\n	   -moz-user-select: none;\n	        user-select: none;\n}\n\n		#ijs .resize {\n	resize: both;\n}\n\n		#ijs .flex-col {\n	flex-direction: column;\n}\n\n		#ijs .flex-wrap {\n	flex-wrap: wrap;\n}\n\n		#ijs .items-start {\n	align-items: flex-start;\n}\n\n		#ijs .items-center {\n	align-items: center;\n}\n\n		#ijs .items-stretch {\n	align-items: stretch;\n}\n\n		#ijs .justify-end {\n	justify-content: flex-end;\n}\n\n		#ijs .justify-center {\n	justify-content: center;\n}\n\n		#ijs .gap-1 {\n	gap: 0.25rem;\n}\n\n		#ijs .gap-1\\.5 {\n	gap: 0.375rem;\n}\n\n		#ijs .gap-2 {\n	gap: 0.5rem;\n}\n\n		#ijs .gap-3 {\n	gap: 0.75rem;\n}\n\n		#ijs .gap-4 {\n	gap: 1rem;\n}\n\n		#ijs .self-center {\n	align-self: center;\n}\n\n		#ijs .overflow-hidden {\n	overflow: hidden;\n}\n\n		#ijs .overflow-x-auto {\n	overflow-x: auto;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .whitespace-nowrap {\n	white-space: nowrap;\n}\n\n		#ijs .rounded-interactive {\n	border-radius: var(--i-radius-interactive);\n}\n\n		#ijs .rounded-job-card {\n	border-radius: var(--i-radius-job-card);\n}\n\n		#ijs .rounded-job-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .rounded-section {\n	border-radius: var(--i-radius-section);\n}\n\n		#ijs .rounded-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .border {\n	border-width: 1px;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-app-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-job-card-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-section-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-accent-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-monetary-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-strong-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-tag-neutral-weak-bg) / var(--tw-bg-opacity));\n}\n\n		#ijs .p-0 {\n	padding: 0px;\n}\n\n		#ijs .p-1 {\n	padding: 0.25rem;\n}\n\n		#ijs .p-2 {\n	padding: 0.5rem;\n}\n\n		#ijs .p-4 {\n	padding: 1rem;\n}\n\n		#ijs .px-2 {\n	padding-left: 0.5rem;\n	padding-right: 0.5rem;\n}\n\n		#ijs .px-3 {\n	padding-left: 0.75rem;\n	padding-right: 0.75rem;\n}\n\n		#ijs .px-4 {\n	padding-left: 1rem;\n	padding-right: 1rem;\n}\n\n		#ijs .px-5 {\n	padding-left: 1.25rem;\n	padding-right: 1.25rem;\n}\n\n		#ijs .py-1 {\n	padding-top: 0.25rem;\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .py-2 {\n	padding-top: 0.5rem;\n	padding-bottom: 0.5rem;\n}\n\n		#ijs .py-4 {\n	padding-top: 1rem;\n	padding-bottom: 1rem;\n}\n\n		#ijs .py-6 {\n	padding-top: 1.5rem;\n	padding-bottom: 1.5rem;\n}\n\n		#ijs .pb-1 {\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .pb-4 {\n	padding-bottom: 1rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pt-2 {\n	padding-top: 0.5rem;\n}\n\n		#ijs .text-center {\n	text-align: center;\n}\n\n		#ijs .text-justify {\n	text-align: justify;\n}\n\n		#ijs .font-family-default {\n	font-family: var(--i-font);\n}\n\n		#ijs .font-family-filter {\n	font-family: var(--i-font-filter);\n}\n\n		#ijs .font-family-job-heading {\n	font-family: var(--i-font-job-heading);\n}\n\n		#ijs .font-family-tag {\n	font-family: var(--i-font-tag);\n}\n\n		#ijs .text-style-filter {\n	font-size: 1rem;\n	line-height: 1.5rem;\n	letter-spacing: -0.01em;\n}\n\n		#ijs .text-style-job-card {\n	font-size: 0.875rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-info {\n	font-size: 0.75rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-heading {\n	font-size: 1.125rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-tag {\n	font-size: 0.875rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .font-weight-default {\n	font-weight: var(--i-weight-default);\n}\n\n		#ijs .font-weight-filter {\n	font-weight: var(--i-weight-filter);\n}\n\n		#ijs .font-weight-job-heading {\n	font-weight: var(--i-weight-job-heading);\n}\n\n		#ijs .font-weight-tag {\n	font-weight: var(--i-weight-tag);\n}\n\n		#ijs .uppercase {\n	text-transform: uppercase;\n}\n\n		#ijs .lowercase {\n	text-transform: lowercase;\n}\n\n		#ijs .capitalize {\n	text-transform: capitalize;\n}\n\n		#ijs .italic {\n	font-style: italic;\n}\n\n		#ijs .ordinal {\n	--tw-ordinal: ordinal;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .text-copy-accent {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-accent-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-accent-lowcontrast {\n	color: oklch(var(--i-copy-accent-lowcontrast) / 0.67);\n}\n\n		#ijs .text-copy-job-info {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-info) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-icon {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-icon) / var(--tw-text-opacity));\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-copy-lowcontrast) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-accent-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-accent-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-interactive-neutral-text {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-interactive-neutral-text) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-accent-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-monetary-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-strong-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-tag-neutral-weak-copy) / var(--tw-text-opacity));\n}\n\n		#ijs .opacity-25 {\n	opacity: 0.25;\n}\n\n		#ijs .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\n		#ijs .outline {\n	outline-style: solid;\n}\n\n		#ijs .ring-px {\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\n		#ijs .ring-width-job-card {\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(var(--i-job-card-stroke-width) + 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		#ijs .ring-width-section {\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(var(--i-section-stroke-width) + 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		#ijs .ring-job-card-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-section-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-accent-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-accent-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-strong-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-strong-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .ring-tag-neutral-weak-stroke {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-tag-neutral-weak-stroke-color) / var(--tw-ring-opacity));\n}\n\n		#ijs .blur {\n	--tw-blur: blur(8px);\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\n		#ijs .grayscale {\n	--tw-grayscale: grayscale(100%);\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\n		#ijs .invert {\n	--tw-invert: invert(100%);\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\n		#ijs .sepia {\n	--tw-sepia: sepia(100%);\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\n		#ijs .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\n		#ijs .backdrop-filter {\n	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n	        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n		#ijs .transition {\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-all {\n	transition-property: all;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-1000 {\n	transition-duration: 1000ms;\n}\n\n		#ijs .duration-300 {\n	transition-duration: 300ms;\n}\n\n		#ijs .duration-500 {\n	transition-duration: 500ms;\n}\n\n		#ijs .ease-expo-out {\n	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		#ijs .font-style-default {\n	font-style: var(--i-font-style);\n}\n\n		#ijs .font-style-filter {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .font-style-job-heading {\n	font-style: var(--i-style-job-heading);\n}\n\n		#ijs .font-style-tag {\n	font-style: var(--i-style-tag);\n}\n\n		#ijs .fr {\n	outline: none;\n}\n\n		#ijs .fr:focus {\n	outline: none;\n}\n\n		#ijs .fr:focus-visible {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-7) / 1);\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		#ijs .hide-scrollbars::-webkit-scrollbar {\n	display: none;\n}\n\n		#ijs .hide-scrollbars {\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n		#ijs .touch-hitbox::before {\n	content: '';\n	position: absolute;\n	display: block;\n	top: 50%;\n	left: 50%;\n	transform: translate(-50%, -50%);\n	width: 100%;\n	height: 100%;\n	min-height: 44px;\n	min-width: 44px;\n	z-index: 9999;\n}\n\n		#ijs .\\[a-zA-Z0-9-_\\:\\.\\$\\@\\?\\] {\n	a-z-a--z0-9-_: .$@?;\n}\n\n		#ijs .hover\\:bg-interactive-accent-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-accent-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .hover\\:bg-interactive-neutral-bg-hover:hover {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-interactive-neutral-bg-hover) / var(--tw-bg-opacity));\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:scale-95:active {\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\n		#ijs .active\\:bg-job-card-bg-active:active {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-job-card-bg-active) / var(--tw-bg-opacity));\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-job-card-stroke-color-active) / var(--tw-ring-opacity));\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:col-span-2 {\n		grid-column: span 2 / span 2;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex {\n		display: flex;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid {\n		display: grid;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid-cols-3 {\n		grid-template-columns: repeat(3, minmax(0, 1fr));\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex-col {\n		flex-direction: column;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-0 {\n		padding-left: 0px;\n		padding-right: 0px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .lg\\:ring-width-section {\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(var(--i-section-stroke-width) + 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";
 const match = (m2) => {
   const patterns = [];
   const i2 = (m22) => ({
@@ -6915,7 +6958,7 @@ const generateColorThemeVars = (theme) => {
 };
 const transparent = "transparent";
 const generateTokenVars = (theme, color) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i2;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i2, _j, _k;
   const {
     typography,
     highcontrast,
@@ -6923,16 +6966,19 @@ const generateTokenVars = (theme, color) => {
   } = theme;
   return {
     font: typography.font_family ?? "inherit",
-    "font-style": typography.style ?? "normal",
+    "font-style": typography.style ?? "inherit",
     "font-filter": ((_a = typography.filter) == null ? void 0 : _a.font_family) ?? typography.font_family ?? "inherit",
     "font-job-heading": ((_b = theme.typography.job_heading) == null ? void 0 : _b.font_family) ?? theme.typography.font_family ?? "inherit",
     "font-tag": ((_c = typography.tag) == null ? void 0 : _c.font_family) ?? typography.font_family ?? "inherit",
-    "style-filter": ((_d = typography.filter) == null ? void 0 : _d.style) ?? typography.style ?? "normal",
-    "weight-filter": ((_e = typography.filter) == null ? void 0 : _e.weight) ?? typography.weight ?? "normal",
-    "style-tag": ((_f = typography.tag) == null ? void 0 : _f.style) ?? typography.style ?? "normal",
-    "weight-tag": ((_g = typography.tag) == null ? void 0 : _g.weight) ?? typography.weight ?? "normal",
-    "style-input": ((_h = typography.input) == null ? void 0 : _h.style) ?? typography.style ?? "normal",
-    "weight-input": ((_i2 = typography.input) == null ? void 0 : _i2.weight) ?? typography.weight ?? "normal",
+    "weight-default": typography.weight ?? "inherit",
+    "style-filter": ((_d = typography.filter) == null ? void 0 : _d.style) ?? typography.style ?? "inherit",
+    "weight-filter": ((_e = typography.filter) == null ? void 0 : _e.weight) ?? typography.weight ?? "inherit",
+    "style-tag": ((_f = typography.tag) == null ? void 0 : _f.style) ?? typography.style ?? "inherit",
+    "style-job-heading": ((_g = typography.job_heading) == null ? void 0 : _g.style) ?? typography.style ?? "inherit",
+    "weight-tag": ((_h = typography.tag) == null ? void 0 : _h.weight) ?? typography.weight ?? "inherit",
+    "weight-job-heading": ((_i2 = typography.job_heading) == null ? void 0 : _i2.weight) ?? typography.weight ?? "inherit",
+    "style-input": ((_j = typography.input) == null ? void 0 : _j.style) ?? typography.style ?? "inherit",
+    "weight-input": ((_k = typography.input) == null ? void 0 : _k.weight) ?? typography.weight ?? "inherit",
     "app-bg": color.lowest,
     copy: highcontrast ? color["n-12"] : color["n-11"],
     "copy-lowcontrast": highcontrast ? color["n-9"] : color["n-8"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inploi/plugin-job-search",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/plugin-job-search.js",
   "types": "dist/index.d.ts",
@@ -42,8 +42,8 @@
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.7.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@inploi/core": "1.11.0",
     "@inploi/sdk": "1.10.0",
+    "@inploi/core": "1.11.0",
     "eslint-config-custom": "0.1.0"
   },
   "msw": {