@inploi/plugin-job-search 0.1.5 → 0.2.0

package/dist/plugin-job-search.js

@@ -1064,7 +1064,13 @@ function B$1(n2, t2) {
 const JOB_SEARCH_ELEMENT_ID = "inploi-job-search";
 const JOB_SEARCH_SCOPE_ELEMENT_ID = "ijs";
 const PAGE_SIZE = 10;
-const cacheKey = (value) => JSON.stringify(value);
+const cacheKey = (value) => {
+  const filterString = Object.entries(value.filter).sort(([key1], [key2]) => key1.localeCompare(key2)).map(([key, value2]) => {
+    var _a;
+    return (value2 == null ? void 0 : value2.select) === "many" ? `${key}=${(_a = value2.value) == null ? void 0 : _a.sort().join("|")}` : `${key}=${value2 == null ? void 0 : value2.value}`;
+  }).join("&");
+  return `${value.baseKey}::${filterString}`;
+};
 function g(n2, t2) {
   for (var e2 in t2)
     n2[e2] = t2[e2];
@@ -2822,6 +2828,24 @@ function object(entries, arg2, arg3, arg4) {
     }
   };
 }
+function optional(wrapped, default_) {
+  return {
+    type: "optional",
+    async: false,
+    wrapped,
+    default: default_,
+    _parse(input, info) {
+      if (input === void 0) {
+        const override = getDefault(this);
+        if (override === void 0) {
+          return getOutput(input);
+        }
+        input = override;
+      }
+      return this.wrapped._parse(input, info);
+    }
+  };
+}
 function string(arg1, arg2) {
   const [message = "Invalid type", pipe] = getDefaultArgs(arg1, arg2);
   return {
@@ -3042,7 +3066,13 @@ const JobPayloadSchema = object({
   contract_type: nullable(string()),
   created_at: nullable(string()),
   custom_data: nullable(record(any())),
-  href: string()
+  href: string(),
+  industry: optional(string()),
+  category: optional(string()),
+  skills: optional(string()),
+  town: optional(string()),
+  city: optional(string()),
+  country: optional(string())
 });
 const JobSchema = transform(JobPayloadSchema, (schema) => {
   const isNew = schema.created_at ? new Date(schema.created_at).getTime() > Date.now() - SEVEN_DAYS_MS : false;
@@ -3066,6 +3096,7 @@ const JobSchema = transform(JobPayloadSchema, (schema) => {
     throw new Error("Invalid pay data");
   })();
   return {
+    raw: schema,
     id: schema.id,
     isNew,
     company: {
@@ -3218,8 +3249,7 @@ const CurrentValueTag = ({
       return null;
     case "loaded":
     case "revalidating": {
-      const suggestions = query.data[property.key];
-      invariant(suggestions, `API error: no available properties for key “${property.key}”`);
+      const suggestions = query.data[property.key] ?? [];
       const selectedSuggestions = suggestions.filter((s2) => selectedValues.includes(s2.value));
       switch (selectedSuggestions.length) {
         case 0:
@@ -3340,8 +3370,7 @@ const FilterContentActive = ({
           });
         case "revalidating":
         case "loaded": {
-          const allSuggestions = unfilteredQuery.data[property.key];
-          invariant(allSuggestions, `API error: no available properties for key “${property.key}”`);
+          const allSuggestions = unfilteredQuery.data[property.key] ?? [];
           const filteredSuggestions = search && search.length > 1 ? allSuggestions.filter((s2) => s2.label.toLowerCase().includes(search.toLowerCase())) : allSuggestions;
           const suggestions = filteredSuggestions.map((s2) => ({
             ...s2,
@@ -3745,6 +3774,9 @@ const FilterSection = ({
     })
   });
 };
+function isKeyInObj(key, obj) {
+  return key in obj;
+}
 const SkeletonText = ({
   chars
 }) => {
@@ -3752,20 +3784,51 @@ const SkeletonText = ({
     style: {
       width: chars + "ch"
     },
-    class: "rounded-job-tag block h-[1lh] bg-[currentColor] opacity-25"
+    class: "rounded-job-tag block h-[1lh] min-h-[1em] bg-[currentColor] opacity-25"
   });
 };
 const wrapperClass = cva({
-  base: "ijs-job rounded-job-card bg-job-card-bg ring-width-job-card ring-job-card-stroke active:bg-job-card-bg-active active:ring-job-card-stroke-active flex gap-4 fr ease-expo-out min-w-0 p-4 transition-all duration-medium"
+  base: "ijs-job rounded-job-card bg-job-card-bg ring-width-job-card ring-job-card-stroke flex gap-4 fr ease-expo-out min-w-0 p-4 transition-all duration-medium",
+  variants: {
+    interactive: {
+      true: "active:bg-job-card-bg-active active:ring-job-card-stroke-active",
+      false: "animate-skeleton"
+    }
+  },
+  defaultVariants: {
+    interactive: true
+  }
 });
 const badgeClass = cva({
   base: "bg-tag-accent-strong-bg rounded-job-tag text-style-tag text-tag-accent-strong-copy font-weight-tag flex items-center justify-center px-2"
 });
-const infoTagKeys = ["contractType", "employmentType"];
+const getDisplayableFilterProperty = ({
+  job,
+  property
+}) => {
+  switch (typeof property) {
+    case "string":
+      if (isKeyInObj(property, job.raw))
+        return job.raw[property];
+      return null;
+    case "object":
+      return job.customData && property.transform(job.customData[property.key]);
+    default:
+      exhaustive(property);
+  }
+};
 const JobCard = ({
-  job
+  job,
+  config
 }) => {
-  const tags = infoTagKeys.map((key) => job[key]).filter(Boolean);
+  const subheading = getDisplayableFilterProperty({
+    job,
+    property: config.subheading
+  });
+  const tags = config.infoTags.map((infoTag) => getDisplayableFilterProperty({
+    job,
+    property: infoTag
+  })).filter(Boolean);
   return u$1("a", {
     href: job.href,
     class: wrapperClass(),
@@ -3778,10 +3841,10 @@ const JobCard = ({
           children: [u$1("p", {
             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", {
+          }), subheading ? u$1("p", {
             class: "text-style-job-card text-copy-neutral-lowcontrast",
-            children: job.company.name
-          })]
+            children: subheading
+          }) : null]
         }), job.isNew ? u$1("span", {
           class: badgeClass({
             class: "order-1"
@@ -3829,7 +3892,7 @@ const JobCardSkeleton = ({
       animationDelay: animationDelay + "s"
     },
     class: wrapperClass({
-      class: "animate-skeleton"
+      interactive: false
     }),
     children: [u$1("div", {
       class: "flex flex-1 flex-col gap-4",
@@ -3860,7 +3923,7 @@ const JobCardSkeleton = ({
           class: tagClass({
             variant: "neutralWeak",
             size: "xs",
-            class: "h-[1lh] w-[10ch]"
+            class: "h-[1lh] min-h-[1em] w-[10ch]"
           })
         }), u$1("div", {
           class: "flex items-center gap-2",
@@ -3868,13 +3931,13 @@ const JobCardSkeleton = ({
             class: tagClass({
               variant: "neutralWeak",
               size: "xs",
-              class: "h-[1lh] w-[6ch]"
+              class: "h-[1lh] min-h-[1em] w-[6ch]"
             })
           }), u$1("span", {
             class: tagClass({
               variant: "neutralWeak",
               size: "xs",
-              class: "h-[1lh] w-[8ch]"
+              class: "h-[1lh] min-h-[1em] w-[8ch]"
             })
           })]
         })]
@@ -3928,7 +3991,8 @@ const getResultsCount = ({
 const ResultsSection = ({
   appliedFilters,
   apiClient,
-  logger
+  logger,
+  jobCardConfig
 }) => {
   const [page, setPage] = h(1);
   return u$1(g$3, {
@@ -3945,7 +4009,8 @@ const ResultsSection = ({
           page: index + 1,
           isFirst: index === 0,
           isLast,
-          fetchNextPage: () => setPage(page + 1)
+          fetchNextPage: () => setPage(page + 1),
+          jobCardConfig
         }, index)
       }, index);
     })
@@ -3958,7 +4023,8 @@ const ResultsPage = ({
   page,
   isFirst,
   isLast,
-  fetchNextPage
+  fetchNextPage,
+  jobCardConfig
 }) => {
   const {
     data,
@@ -3989,7 +4055,7 @@ const ResultsPage = ({
           }).map((_2, i2) => u$1("li", {
             children: u$1(JobCardSkeleton, {
               seed: i2,
-              animationDelay: (i2 - 4) * 0.1
+              animationDelay: (i2 - PAGE_SIZE) * 0.1
             })
           }, i2))
         })]
@@ -4034,7 +4100,8 @@ const ResultsPage = ({
                 opacity: state === "revalidating" ? 0.33 : 1
               },
               children: u$1(JobCard, {
-                job
+                job,
+                config: jobCardConfig
               })
             }, job.id);
           })
@@ -4071,7 +4138,8 @@ const JobSearch = ({
   apiClient,
   logger,
   properties,
-  class: className
+  class: className,
+  jobCardConfig
 }) => {
   const appRef = _(null);
   const [appliedFilters, setAppliedFilters] = h(() => getFilterDefaults(properties));
@@ -4105,7 +4173,8 @@ const JobSearch = ({
             children: u$1(ResultsSection, {
               appliedFilters,
               logger,
-              apiClient
+              apiClient,
+              jobCardConfig
             }, cacheKey({
               filter: appliedFilters,
               baseKey: "resultsSection"
@@ -4116,7 +4185,122 @@ const JobSearch = ({
     })
   });
 };
-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(input),\n		#ijs :is(textarea) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			min-width: 0;\n			max-width: unset;\n			width: 100%;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs.reduced-motion * {\n			animation-duration: 0.01ms !important;\n			animation-iteration-count: 1 !important;\n			transition-duration: 0.01ms !important;\n			scroll-behavior: auto !important;\n			animation-delay: 0s !important;\n		}\n\n		@media (prefers-reduced-motion) {\n			#ijs * {\n				animation-duration: 0.01ms !important;\n				animation-iteration-count: 1 !important;\n				transition-duration: 0.01ms !important;\n				scroll-behavior: auto !important;\n				animation-delay: 0s !important;\n			}\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 .pointer-events-none {\n	pointer-events: none;\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 .top-0 {\n	top: 0px;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .order-1 {\n	order: 1;\n}\n\n		#ijs .order-2 {\n	order: 2;\n}\n\n		#ijs .m-0 {\n	margin: 0px;\n}\n\n		#ijs .m-11 {\n	margin: 2.75rem;\n}\n\n		#ijs .m-3 {\n	margin: 0.75rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .ml-auto {\n	margin-left: auto;\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 .shrink-0 {\n	flex-shrink: 0;\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-\\[50\\%_1\\.75rem\\] {\n	transform-origin: 50% 1.75rem;\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 .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 .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		@keyframes slide-in-bottom {\n\n	0% {\n		transform: translateY(-50%);\n	}\n\n	100% {\n		transform: translateY(0);\n	}\n}\n\n		#ijs .animate-slide-in-bottom {\n	animation: slide-in-bottom .4s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		#ijs .cursor-default {\n	cursor: default;\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 .flex-nowrap {\n	flex-wrap: nowrap;\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 .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-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-y-auto {\n	overflow-y: auto;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .rounded-app {\n	border-radius: var(--i-radius-app);\n}\n\n		#ijs .rounded-input {\n	border-radius: var(--i-radius-input);\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-px {\n	border-width: 1px;\n}\n\n		#ijs .border-solid {\n	border-style: solid;\n}\n\n		#ijs .border-none {\n	border-style: none;\n}\n\n		#ijs .border-tag-accent-strong-stroke {\n	border-color: var(--i-tag-accent-strong-stroke-color);\n}\n\n		#ijs .border-tag-neutral-strong-stroke {\n	border-color: var(--i-tag-neutral-strong-stroke-color);\n}\n\n		#ijs .border-tag-neutral-weak-stroke {\n	border-color: var(--i-tag-neutral-weak-stroke-color);\n}\n\n		#ijs .border-transparent {\n	border-color: transparent;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	background-color: var(--i-app-bg);\n}\n\n		#ijs .bg-interactive-accent-bg {\n	background-color: var(--i-interactive-accent-bg);\n}\n\n		#ijs .bg-interactive-neutral-bg {\n	background-color: var(--i-interactive-neutral-bg);\n}\n\n		#ijs .bg-job-card-bg {\n	background-color: var(--i-job-card-bg);\n}\n\n		#ijs .bg-lowest {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-lowest) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-strong-bg {\n	background-color: var(--i-section-strong-bg);\n}\n\n		#ijs .bg-section-weak-bg {\n	background-color: var(--i-section-weak-bg);\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	background-color: var(--i-tag-accent-strong-bg);\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	background-color: var(--i-tag-monetary-weak-bg);\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	background-color: var(--i-tag-neutral-strong-bg);\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	background-color: var(--i-tag-neutral-weak-bg);\n}\n\n		#ijs .p-0 {\n	padding: 0px;\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 .pl-1 {\n	padding-left: 0.25rem;\n}\n\n		#ijs .pl-2 {\n	padding-left: 0.5rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pl-4 {\n	padding-left: 1rem;\n}\n\n		#ijs .pl-5 {\n	padding-left: 1.25rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pr-3 {\n	padding-right: 0.75rem;\n}\n\n		#ijs .pr-5 {\n	padding-right: 1.25rem;\n}\n\n		#ijs .pt-1 {\n	padding-top: 0.25rem;\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-input {\n	font-size: 1rem;\n	line-height: 1.5rem;\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-input {\n	font-weight: var(--i-weight-input);\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 .tabular-nums {\n	--tw-numeric-spacing: tabular-nums;\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	color: var(--i-copy-accent);\n}\n\n		#ijs .text-copy-job-info {\n	color: var(--i-copy-info);\n}\n\n		#ijs .text-copy-neutral {\n	color: var(--i-copy);\n}\n\n		#ijs .text-copy-neutral-icon {\n	color: var(--i-copy-icon);\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	color: var(--i-copy-lowcontrast);\n}\n\n		#ijs .text-interactive-accent-text {\n	color: var(--i-interactive-accent-text);\n}\n\n		#ijs .text-interactive-neutral-text {\n	color: var(--i-interactive-neutral-text);\n}\n\n		#ijs .text-neutral-11 {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-n-11) / var(--tw-text-opacity));\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	color: var(--i-tag-accent-strong-copy);\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	color: var(--i-tag-monetary-weak-copy);\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	color: var(--i-tag-neutral-strong-copy);\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	color: var(--i-tag-neutral-weak-copy);\n}\n\n		#ijs .caret-accent-11 {\n	caret-color: oklch(var(--i-a-11) / 1);\n}\n\n		#ijs .opacity-20 {\n	opacity: 0.2;\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-none {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\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-color: var(--i-job-card-stroke-color);\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-color: var(--i-section-strong-stroke-color);\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-color: var(--i-section-weak-stroke-color);\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 .transition-opacity {\n	transition-property: opacity;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-medium {\n	transition-duration: .6s;\n}\n\n		#ijs .duration-slow {\n	transition-duration: .9s;\n}\n\n		#ijs .duration-snappy {\n	transition-duration: .4s;\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-input {\n	font-style: var(--i-style-input);\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 .top-filters {\n	top: var(--i-filters-offset-top);\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-offset-color: oklch(var(--i-lowest) / 1);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-9) / 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 .fr-parent:has(.fr-child:focus-visible) {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-offset-color: oklch(var(--i-lowest) / 1);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-9) / 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 .fr-child {}\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 .\\[text-wrap\\:pretty\\] {\n	text-wrap: pretty;\n}\n\n		#ijs .placeholder\\:text-neutral-10::-moz-placeholder {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-n-10) / var(--tw-text-opacity));\n}\n\n		#ijs .placeholder\\:text-neutral-10::placeholder {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-n-10) / var(--tw-text-opacity));\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:-scale-100:active {\n	--tw-scale-x: -1;\n	--tw-scale-y: -1;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\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\\:scale-\\[0\\.975\\]:active {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\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	background-color: var(--i-job-card-bg-active);\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-color: var(--i-job-card-stroke-color-active);\n}\n\n		@media (pointer: coarse) {\n\n	#ijs .pointer-coarse\\:overflow-x-auto {\n		overflow-x: auto;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:w-full {\n		width: 100%;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:flex-wrap {\n		flex-wrap: wrap;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:rounded-section {\n		border-radius: var(--i-radius-section);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:bg-app {\n		background-color: var(--i-app-bg);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:p-2 {\n		padding: 0.5rem;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\: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\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:hover\\:bg-interactive-accent-bg-hover:hover {\n		background-color: var(--i-interactive-accent-bg-hover);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:hover\\:bg-interactive-neutral-bg-hover:hover {\n		background-color: var(--i-interactive-neutral-bg-hover);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .group:hover .pointer-fine\\:group-hover\\:text-copy-neutral {\n		color: var(--i-copy);\n	}\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\\: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\\: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\n		#ijs .\\[\\&\\:has\\(\\.fr-child\\:active\\)\\]\\:scale-\\[0\\.975\\]:has(.fr-child:active) {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\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";
+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(input),\n		#ijs :is(textarea) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			min-width: 0;\n			max-width: unset;\n			width: 100%;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs.reduced-motion * {\n			animation-duration: 0.01ms !important;\n			animation-iteration-count: 1 !important;\n			transition-duration: 0.01ms !important;\n			scroll-behavior: auto !important;\n			animation-delay: 0s !important;\n		}\n\n		@media (prefers-reduced-motion) {\n			#ijs * {\n				animation-duration: 0.01ms !important;\n				animation-iteration-count: 1 !important;\n				transition-duration: 0.01ms !important;\n				scroll-behavior: auto !important;\n				animation-delay: 0s !important;\n			}\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 .pointer-events-none {\n	pointer-events: none;\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 .top-0 {\n	top: 0px;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .order-1 {\n	order: 1;\n}\n\n		#ijs .order-2 {\n	order: 2;\n}\n\n		#ijs .m-0 {\n	margin: 0px;\n}\n\n		#ijs .m-11 {\n	margin: 2.75rem;\n}\n\n		#ijs .m-3 {\n	margin: 0.75rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .ml-auto {\n	margin-left: auto;\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-\\[1em\\] {\n	min-height: 1em;\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 .shrink-0 {\n	flex-shrink: 0;\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-\\[50\\%_1\\.75rem\\] {\n	transform-origin: 50% 1.75rem;\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 .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 .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.6;\n	}\n\n	100% {\n		opacity: 0.25;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n		@keyframes slide-in-bottom {\n\n	0% {\n		transform: translateY(-50%);\n	}\n\n	100% {\n		transform: translateY(0);\n	}\n}\n\n		#ijs .animate-slide-in-bottom {\n	animation: slide-in-bottom .4s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		#ijs .cursor-default {\n	cursor: default;\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 .flex-nowrap {\n	flex-wrap: nowrap;\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 .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-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-y-auto {\n	overflow-y: auto;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .rounded-app {\n	border-radius: var(--i-radius-app);\n}\n\n		#ijs .rounded-input {\n	border-radius: var(--i-radius-input);\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-px {\n	border-width: 1px;\n}\n\n		#ijs .border-solid {\n	border-style: solid;\n}\n\n		#ijs .border-none {\n	border-style: none;\n}\n\n		#ijs .border-tag-accent-strong-stroke {\n	border-color: var(--i-tag-accent-strong-stroke-color);\n}\n\n		#ijs .border-tag-neutral-strong-stroke {\n	border-color: var(--i-tag-neutral-strong-stroke-color);\n}\n\n		#ijs .border-tag-neutral-weak-stroke {\n	border-color: var(--i-tag-neutral-weak-stroke-color);\n}\n\n		#ijs .border-transparent {\n	border-color: transparent;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	background-color: var(--i-app-bg);\n}\n\n		#ijs .bg-interactive-accent-bg {\n	background-color: var(--i-interactive-accent-bg);\n}\n\n		#ijs .bg-interactive-neutral-bg {\n	background-color: var(--i-interactive-neutral-bg);\n}\n\n		#ijs .bg-job-card-bg {\n	background-color: var(--i-job-card-bg);\n}\n\n		#ijs .bg-lowest {\n	background-color: var(--i-color-lowest);\n}\n\n		#ijs .bg-section-strong-bg {\n	background-color: var(--i-section-strong-bg);\n}\n\n		#ijs .bg-section-weak-bg {\n	background-color: var(--i-section-weak-bg);\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	background-color: var(--i-tag-accent-strong-bg);\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	background-color: var(--i-tag-monetary-weak-bg);\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	background-color: var(--i-tag-neutral-strong-bg);\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	background-color: var(--i-tag-neutral-weak-bg);\n}\n\n		#ijs .p-0 {\n	padding: 0px;\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 .pl-1 {\n	padding-left: 0.25rem;\n}\n\n		#ijs .pl-2 {\n	padding-left: 0.5rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pl-4 {\n	padding-left: 1rem;\n}\n\n		#ijs .pl-5 {\n	padding-left: 1.25rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pr-3 {\n	padding-right: 0.75rem;\n}\n\n		#ijs .pr-5 {\n	padding-right: 1.25rem;\n}\n\n		#ijs .pt-1 {\n	padding-top: 0.25rem;\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-input {\n	font-size: 1rem;\n	line-height: 1.5rem;\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-input {\n	font-weight: var(--i-weight-input);\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 .tabular-nums {\n	--tw-numeric-spacing: tabular-nums;\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	color: var(--i-copy-accent);\n}\n\n		#ijs .text-copy-job-info {\n	color: var(--i-copy-info);\n}\n\n		#ijs .text-copy-neutral {\n	color: var(--i-copy);\n}\n\n		#ijs .text-copy-neutral-icon {\n	color: var(--i-copy-icon);\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	color: var(--i-copy-lowcontrast);\n}\n\n		#ijs .text-interactive-accent-text {\n	color: var(--i-interactive-accent-text);\n}\n\n		#ijs .text-interactive-neutral-text {\n	color: var(--i-interactive-neutral-text);\n}\n\n		#ijs .text-neutral-11 {\n	color: var(--i-color-n-11);\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	color: var(--i-tag-accent-strong-copy);\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	color: var(--i-tag-monetary-weak-copy);\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	color: var(--i-tag-neutral-strong-copy);\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	color: var(--i-tag-neutral-weak-copy);\n}\n\n		#ijs .caret-accent-11 {\n	caret-color: var(--i-color-a-11);\n}\n\n		#ijs .opacity-20 {\n	opacity: 0.2;\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-none {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\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-color: var(--i-job-card-stroke-color);\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-color: var(--i-section-strong-stroke-color);\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-color: var(--i-section-weak-stroke-color);\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 .transition-opacity {\n	transition-property: opacity;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-medium {\n	transition-duration: .6s;\n}\n\n		#ijs .duration-slow {\n	transition-duration: .9s;\n}\n\n		#ijs .duration-snappy {\n	transition-duration: .4s;\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-input {\n	font-style: var(--i-style-input);\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 .top-filters {\n	top: var(--i-filters-offset-top);\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-offset-color: var(--i-color-lowest);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: var(--i-color-a-9);\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 .fr-parent:has(.fr-child:focus-visible) {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-offset-color: var(--i-color-lowest);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: var(--i-color-a-9);\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 .fr-child {}\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 .\\[text-wrap\\:pretty\\] {\n	text-wrap: pretty;\n}\n\n		#ijs .placeholder\\:text-neutral-10::-moz-placeholder {\n	color: var(--i-color-n-10);\n}\n\n		#ijs .placeholder\\:text-neutral-10::placeholder {\n	color: var(--i-color-n-10);\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:-scale-100:active {\n	--tw-scale-x: -1;\n	--tw-scale-y: -1;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\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\\:scale-\\[0\\.975\\]:active {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\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	background-color: var(--i-job-card-bg-active);\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-color: var(--i-job-card-stroke-color-active);\n}\n\n		@media (pointer: coarse) {\n\n	#ijs .pointer-coarse\\:overflow-x-auto {\n		overflow-x: auto;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:w-full {\n		width: 100%;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:flex-wrap {\n		flex-wrap: wrap;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:rounded-section {\n		border-radius: var(--i-radius-section);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:bg-app {\n		background-color: var(--i-app-bg);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:p-2 {\n		padding: 0.5rem;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\: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\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:hover\\:bg-interactive-accent-bg-hover:hover {\n		background-color: var(--i-interactive-accent-bg-hover);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:hover\\:bg-interactive-neutral-bg-hover:hover {\n		background-color: var(--i-interactive-neutral-bg-hover);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .group:hover .pointer-fine\\:group-hover\\:text-copy-neutral {\n		color: var(--i-copy);\n	}\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\\: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\\: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\n		#ijs .\\[\\&\\:has\\(\\.fr-child\\:active\\)\\]\\:scale-\\[0\\.975\\]:has(.fr-child:active) {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\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";
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a2, b2) => {
+  for (var prop in b2 || (b2 = {}))
+    if (__hasOwnProp.call(b2, prop))
+      __defNormalProp2(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b2)) {
+      if (__propIsEnum.call(b2, prop))
+        __defNormalProp2(a2, prop, b2[prop]);
+    }
+  return a2;
+};
+var COLOR_SHADES = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
+var OKLCH_PRESETS = {
+  light: {
+    "1": [98.8, 0.015],
+    "2": [97.8, 0.018],
+    "3": [95.8, 0.025],
+    "4": [92, 0.04],
+    "5": [89, 0.05],
+    "6": [85, 0.07],
+    "7": [80.5, 0.08],
+    "8": [74, 0.11],
+    "9": [60, 0.22],
+    "10": [60.5, 0.2],
+    "11": [50, 0.19],
+    "12": [25, 0.18]
+  },
+  dark: {
+    "1": [19, 0.015],
+    "2": [21, 0.018],
+    "3": [25.5, 0.055],
+    "4": [29.3, 0.084],
+    "5": [33.5, 0.098],
+    "6": [39.05, 0.107],
+    "7": [45, 0.11],
+    "8": [55, 0.13],
+    "9": [60, 0.22],
+    "10": [67, 0.18],
+    "11": [79.3, 0.12],
+    "12": [95, 0.04]
+  }
+};
+var getPaletteColor = (hueAngle, chromaMultipler = 1, mode) => (i2) => {
+  const [l2, c2] = OKLCH_PRESETS[mode][i2];
+  const color = "oklch(" + l2 + "% " + c2 * chromaMultipler + " " + hueAngle + ")";
+  return color;
+};
+var generatePalette = (params) => {
+  const getColor = getPaletteColor(params.hue, params.chroma, params.mode);
+  return Object.fromEntries(
+    COLOR_SHADES.map(
+      (level) => [params.prefix + level, params.transform ? params.transform(getColor(level)) : getColor(level)]
+    )
+  );
+};
+var flatten = (obj) => {
+  const entries = Object.keys(obj).flatMap((key) => {
+    const current = obj[key];
+    if (typeof current === "object" && current !== null) {
+      return Object.keys(current).map((childKey) => {
+        const shade = current[childKey];
+        return [`${String(key)}.${childKey}`, shade];
+      });
+    }
+    return [[key, current]];
+  });
+  return Object.fromEntries(entries);
+};
+var asCssVar = (params) => {
+  function genRef(target, path) {
+    const varName = [params.prefix, path.toString().replace(/\./g, "-")].join("");
+    return target === "declaration" ? `--${varName}` : `var(--${varName})`;
+  }
+  return genRef;
+};
+var designTokens = () => {
+  return {
+    core: (coreFn) => ({
+      semantic: (semanticFn) => ({
+        component: (componentFn) => ({
+          from: (config) => {
+            const { theme, getToken } = config;
+            const getRef = (path) => getToken("reference", path.toString());
+            const core = coreFn({ theme });
+            const semantic = semanticFn({ theme, core: getRef, raw: { core } });
+            const component = componentFn({
+              theme,
+              core: getRef,
+              semantic: getRef,
+              raw: { core, semantic }
+            });
+            const values = flatten(__spreadValues(__spreadValues(__spreadValues({}, core), semantic), component));
+            return {
+              values,
+              declarations: Object.fromEntries(
+                Object.entries(values).map(([key, value]) => {
+                  return [
+                    config.getToken("declaration", key),
+                    value
+                  ];
+                })
+              ),
+              ref: (path) => getToken("reference", path.toString())
+            };
+          }
+        })
+      })
+    })
+  };
+};
 const match = (m2) => {
   const patterns = [];
   const i2 = (m22) => ({
@@ -4144,143 +4328,12 @@ const match = (m2) => {
   });
   return i2(m2);
 };
-const colorLevels = {
-  "1": true,
-  "2": true,
-  "3": true,
-  "4": true,
-  "5": true,
-  "6": true,
-  "7": true,
-  "8": true,
-  "9": true,
-  "10": true,
-  "11": true,
-  "12": true
-};
-const COLOR_LEVELS = Object.keys(colorLevels);
-const colorPresets = {
-  light: {
-    "1": {
-      l: 98.8,
-      c: 0.015
-    },
-    "2": {
-      l: 97.8,
-      c: 0.018
-    },
-    "3": {
-      l: 95.8,
-      c: 0.025
-    },
-    "4": {
-      l: 92,
-      c: 0.04
-    },
-    "5": {
-      l: 89,
-      c: 0.05
-    },
-    "6": {
-      l: 85,
-      c: 0.07
-    },
-    "7": {
-      l: 80.5,
-      c: 0.08
-    },
-    "8": {
-      l: 74,
-      c: 0.11
-    },
-    "9": {
-      l: 60,
-      c: 0.22
-    },
-    "10": {
-      l: 60.5,
-      c: 0.2
-    },
-    "11": {
-      l: 50,
-      c: 0.19
-    },
-    "12": {
-      l: 25,
-      c: 0.18
-    }
-  },
-  dark: {
-    "1": {
-      l: 19,
-      c: 0.015
-    },
-    "2": {
-      l: 21,
-      c: 0.018
-    },
-    "3": {
-      l: 25.5,
-      c: 0.055
-    },
-    "4": {
-      l: 29.3,
-      c: 0.084
-    },
-    "5": {
-      l: 33.5,
-      c: 0.098
-    },
-    "6": {
-      l: 39.05,
-      c: 0.107
-    },
-    "7": {
-      l: 45,
-      c: 0.11
-    },
-    "8": {
-      l: 55,
-      c: 0.13
-    },
-    "9": {
-      l: 60,
-      c: 0.22
-    },
-    "10": {
-      l: 67,
-      c: 0.18
-    },
-    "11": {
-      l: 79.3,
-      c: 0.12
-    },
-    "12": {
-      l: 95,
-      c: 0.04
-    }
-  }
-};
-const getPaletteColor = (hueAngle, chromaMultipler = 1, mode) => (i2) => {
-  const {
-    c: c2,
-    l: l2
-  } = colorPresets[mode][i2];
-  const color = "oklch(" + l2 + "% " + c2 * chromaMultipler + " " + hueAngle + ")";
-  return color;
-};
-const generatePalette = (params) => {
-  const getColor = getPaletteColor(params.hue, params.chroma, params.mode);
-  return Object.fromEntries(COLOR_LEVELS.map((level) => [params.prefix + level, extractOklch(getColor(level))]));
-};
-const extractOklch = (color) => {
-  return color.replace("oklch(", "").replace(")", "");
-};
-const prefixInploi = (v2) => `--i-${v2}`;
-const prefixVar = (v2) => `var(${prefixInploi(v2)})`;
-const [black, white] = ["0 0 0", "100 0 0"];
-const generateColorThemeVars = (theme) => {
-  return {
+const [black, white] = ["oklch(0 0 0)", "oklch(100 0 0)"];
+const transparent = "transparent";
+const tokens = designTokens().core(({
+  theme
+}) => ({
+  color: {
     black,
     white,
     lowest: theme.mode === "light" ? white : black,
@@ -4303,12 +4356,14 @@ const generateColorThemeVars = (theme) => {
       chroma: theme.accent.chroma,
       mode: theme.mode
     })
-  };
-};
-const oklch = (color, opacity) => `oklch(${color} / ${opacity ?? 1})`;
-const transparent = oklch(black, 0);
-const generateTokenVars = (theme, color) => {
+  }
+})).semantic(({
+  core,
+  theme,
+  raw
+}) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const withOpacity = (token, opacity) => raw.core.color[token].replace(")", ` / ${opacity})`);
   const {
     typography,
     highlights
@@ -4330,28 +4385,28 @@ const generateTokenVars = (theme, color) => {
     "weight-job-heading": ((_j = typography.jobHeading) == null ? void 0 : _j.weight) ?? typography.weight ?? "inherit",
     "style-input": ((_k = typography.input) == null ? void 0 : _k.style) ?? typography.style ?? "inherit",
     "weight-input": ((_l = typography.input) == null ? void 0 : _l.weight) ?? typography.weight ?? "inherit",
-    "app-bg": oklch(color.lowest),
-    copy: oklch(highContrast ? color.highest : color["n-12"]),
-    "copy-lowcontrast": oklch(color["n-11"]),
-    "copy-info": oklch(highContrast ? color["n-11"] : color["n-10"]),
-    "copy-icon": oklch(highContrast ? color["n-12"] : color["n-11"]),
-    "copy-accent": oklch(highContrast ? color.highest : color["a-12"]),
-    "copy-accent-lowcontrast": oklch(highContrast ? color["a-12"] : color["a-11"]),
-    "copy-accent-icon": oklch(highContrast ? color["a-12"] : color["a-11"]),
-    "copy-inverted": oklch(color.lowest),
-    "copy-inverted-lowcontrast": oklch(color["n-4"]),
-    "copy-inverted-icon": oklch(color["n-3"]),
-    "tag-neutral-weak-bg": highlights === "fill" ? oklch(color["n-2"]) : transparent,
-    "tag-neutral-weak-copy": oklch(color["n-12"]),
-    "tag-neutral-weak-stroke-color": highlights === "stroke" ? oklch(color["n-8"]) : transparent,
-    "tag-neutral-strong-bg": highlights === "fill" ? oklch(color["n-12"]) : transparent,
-    "tag-neutral-strong-copy": oklch(highlights === "fill" ? color.white : color["n-12"]),
-    "tag-neutral-strong-stroke-color": oklch(highContrast ? color["n-12"] : color["n-4"], highlights === "stroke" ? 1 : 0),
-    "tag-monetary-weak-bg": oklch(color["m-3"]),
-    "tag-monetary-weak-copy": oklch(color["m-11"]),
-    "tag-accent-strong-bg": oklch(theme.mode === "dark" ? color["a-9"] : color["a-11"]),
-    "tag-accent-strong-copy": oklch(color.white),
-    "tag-accent-strong-stroke-color": oklch(black, 0),
+    "app-bg": core("color.lowest"),
+    copy: highContrast ? core("color.highest") : core("color.n-12"),
+    "copy-lowcontrast": core("color.n-11"),
+    "copy-info": highContrast ? core("color.n-11") : core("color.n-10"),
+    "copy-icon": highContrast ? core("color.n-12") : core("color.n-11"),
+    "copy-accent": highContrast ? core("color.highest") : core("color.a-12"),
+    "copy-accent-lowcontrast": highContrast ? core("color.a-12") : core("color.a-11"),
+    "copy-accent-icon": highContrast ? core("color.a-12") : core("color.a-11"),
+    "copy-inverted": core("color.lowest"),
+    "copy-inverted-lowcontrast": core("color.n-4"),
+    "copy-inverted-icon": core("color.n-3"),
+    "tag-neutral-weak-bg": highlights === "fill" ? core("color.n-2") : transparent,
+    "tag-neutral-weak-copy": core("color.n-12"),
+    "tag-neutral-weak-stroke-color": highlights === "stroke" ? core("color.n-8") : transparent,
+    "tag-neutral-strong-bg": highlights === "fill" ? core("color.n-12") : transparent,
+    "tag-neutral-strong-copy": highlights === "fill" ? core("color.white") : core("color.n-12"),
+    "tag-neutral-strong-stroke-color": withOpacity(highContrast ? "n-12" : "n-4", highlights === "stroke" ? 1 : 0),
+    "tag-monetary-weak-bg": core("color.m-3"),
+    "tag-monetary-weak-copy": core("color.m-11"),
+    "tag-accent-strong-bg": theme.mode === "dark" ? core("color.a-9") : core("color.a-11"),
+    "tag-accent-strong-copy": core("color.white"),
+    "tag-accent-strong-stroke-color": transparent,
     "radius-app": match(theme).with({
       corners: "rounded"
     }, () => "2rem").with({
@@ -4385,12 +4440,12 @@ const generateTokenVars = (theme, color) => {
     }, () => "0.25rem").with({
       corners: "sharp"
     }, () => "0").otherwise(),
-    "interactive-neutral-bg": oklch(highContrast ? color["n-5"] : color["n-4"], 0.01),
-    "interactive-neutral-bg-hover": oklch(highContrast ? color["n-5"] : color["n-4"]),
-    "interactive-neutral-text": oklch(color["n-12"]),
-    "interactive-accent-bg": oklch(highlights === "fill" ? color["a-4"] : color["a-3"], 0.01),
-    "interactive-accent-bg-hover": oklch(highlights === "fill" ? color["a-4"] : color["a-3"]),
-    "interactive-accent-text": oklch(color["a-11"]),
+    "interactive-neutral-bg": withOpacity(highContrast ? "n-5" : "n-4", 0.01),
+    "interactive-neutral-bg-hover": highContrast ? core("color.n-5") : core("color.n-4"),
+    "interactive-neutral-text": core("color.n-12"),
+    "interactive-accent-bg": withOpacity(highlights === "fill" ? "a-4" : "a-3", 0.01),
+    "interactive-accent-bg-hover": highlights === "fill" ? core("color.a-4") : core("color.a-3"),
+    "interactive-accent-text": core("color.a-11"),
     "radius-interactive": match(theme).with({
       corners: "rounded"
     }, () => "1.5rem").with({
@@ -4398,43 +4453,42 @@ const generateTokenVars = (theme, color) => {
     }, () => ".5rem").with({
       corners: "sharp"
     }, () => "0").otherwise(),
-    "section-weak-bg": highlights === "fill" ? oklch(color["n-2"]) : transparent,
-    "section-strong-bg": highlights === "fill" ? highContrast ? oklch(color["n-3"]) : oklch(color["n-2"]) : transparent,
-    "section-weak-stroke-color": highlights === "fill" ? transparent : highContrast ? oklch(color["n-7"]) : oklch(color["n-3"]),
-    "section-strong-stroke-color": highlights === "fill" ? transparent : highContrast ? oklch(color["n-11"]) : oklch(color["n-4"]),
+    "section-weak-bg": highlights === "fill" ? core("color.n-2") : transparent,
+    "section-strong-bg": highlights === "fill" ? highContrast ? core("color.n-3") : core("color.n-2") : transparent,
+    "section-weak-stroke-color": highlights === "fill" ? transparent : highContrast ? core("color.n-7") : core("color.n-3"),
+    "section-strong-stroke-color": highlights === "fill" ? transparent : highContrast ? core("color.n-11") : core("color.n-4"),
     "section-stroke-width": match(theme).with({
       highlights: "stroke",
       highcontrast: true
     }, () => "1.5px").otherwise(() => "1px"),
     "job-card-bg": match(theme).with({
       highlights: "fill"
-    }, () => oklch(color.lowest)).otherwise(() => transparent),
+    }, () => core("color.lowest")).otherwise(() => transparent),
     "job-card-bg-active": match(theme).with({
       highlights: "fill"
-    }, () => oklch(color.lowest)).otherwise(() => transparent),
-    "job-card-stroke-color": highContrast ? oklch(color["n-10"]) : oklch(color["n-4"]),
-    "job-card-stroke-color-active": oklch(color["a-9"]),
+    }, () => core("color.lowest")).otherwise(() => transparent),
+    "job-card-stroke-color": highContrast ? core("color.n-10") : core("color.n-4"),
+    "job-card-stroke-color-active": core("color.a-9"),
     "job-card-stroke-width": match(theme).with({
       highlights: "stroke",
       highcontrast: true
     }, () => "1.5px").otherwise(() => "1px")
   };
-};
+}).component(() => ({}));
+const asInploiVar = asCssVar({
+  prefix: "i-"
+});
 const generateColorThemeCss = (theme) => {
-  const generated = generateColorThemeVars(theme);
-  const prefixedVars = new Proxy(generated, {
-    get: (_2, prop) => prefixVar(prop)
-  });
-  const tokenCss = Object.entries(generateTokenVars(theme, prefixedVars)).map(([key, value]) => `${prefixInploi(key)}: ${value};`);
-  const colorsCss = Object.entries(generated).map(([key, value]) => {
-    invariant(key);
-    return `${prefixInploi(key)}: ${value};`;
+  const core = tokens.from({
+    theme,
+    getToken: asInploiVar
   });
+  const tokenCss = Object.entries(core.declarations).map(([key, value]) => `${key}: ${value};`);
   return `#${JOB_SEARCH_SCOPE_ELEMENT_ID} {
-${colorsCss.concat(tokenCss).join("\n")}
+${tokenCss.concat(tokenCss).join("\n")}
 }`;
 };
-const FILTER_KEYS = ["company_id", "company_name", "industry", "employment_type", "location_type", "pay_type", "pay_currency", "pay_mask", "pay", "pay_min", "pay_max", "title", "category", "skills", "address_1", "address_2", "town", "city", "postcode", "country", "contract_type", "pay_display"];
+const FILTER_KEYS = ["company_name", "employment_type", "location_type", "pay_type", "pay_currency", "pay_mask", "pay", "pay_min", "pay_max", "title", "industry", "category", "skills", "town", "city", "country", "contract_type", "pay_display"];
 const createJobSearchDomManager = () => {
   return {
     getRenderTargetElement: () => {
@@ -4465,7 +4519,8 @@ const jobSearchPlugin = (params) => createPlugin(({
     apiClient,
     logger,
     analytics,
-    class: ((_a = params.theme.accessibility) == null ? void 0 : _a.reducedMotion) ? "reduced-motion" : void 0
+    class: ((_a = params.theme.accessibility) == null ? void 0 : _a.reducedMotion) ? "reduced-motion" : void 0,
+    jobCardConfig: params.jobCard
   })]);
   return {
     /** Returns a string with the initial rendering state of the UI.