@inploi/plugin-job-search 0.1.4 → 0.2.0

package/dist/plugin-job-search.js

@@ -512,6 +512,126 @@ function C$1(t2, l2, c2, p2, u2) {
   return B2 || ("string" == typeof H2 ? B2 = s$1(H2) : null != H2 && false !== H2 && true !== H2 && (B2 = C$1(H2, l2, "svg" === E2 || "foreignObject" !== E2 && c2, p2, t2))), d$1 && d$1(t2), t2.__ = void 0, m$1 && m$1(t2), !B2 && S.has(E2) ? q2 + "/>" : q2 + ">" + B2 + "</" + E2 + ">";
 }
 var S = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
+function r$1(e2) {
+  var t2, f2, n2 = "";
+  if ("string" == typeof e2 || "number" == typeof e2)
+    n2 += e2;
+  else if ("object" == typeof e2)
+    if (Array.isArray(e2))
+      for (t2 = 0; t2 < e2.length; t2++)
+        e2[t2] && (f2 = r$1(e2[t2])) && (n2 && (n2 += " "), n2 += f2);
+    else
+      for (t2 in e2)
+        e2[t2] && (n2 && (n2 += " "), n2 += t2);
+  return n2;
+}
+function clsx() {
+  for (var e2, t2, f2 = 0, n2 = ""; f2 < arguments.length; )
+    (e2 = arguments[f2++]) && (t2 = r$1(e2)) && (n2 && (n2 += " "), n2 += t2);
+  return n2;
+}
+const falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
+const defineConfig = (options) => {
+  const cx1 = function() {
+    for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
+      inputs[_key] = arguments[_key];
+    }
+    var ref, ref1;
+    if (typeof (options === null || options === void 0 ? void 0 : (ref = options.hooks) === null || ref === void 0 ? void 0 : ref["cx:done"]) !== "undefined")
+      return options === null || options === void 0 ? void 0 : options.hooks["cx:done"](clsx(inputs));
+    if (typeof (options === null || options === void 0 ? void 0 : (ref1 = options.hooks) === null || ref1 === void 0 ? void 0 : ref1.onComplete) !== "undefined")
+      return options === null || options === void 0 ? void 0 : options.hooks.onComplete(clsx(inputs));
+    return clsx(inputs);
+  };
+  const cva1 = (config) => {
+    return (props) => {
+      var ref;
+      if ((config === null || config === void 0 ? void 0 : config.variants) == null)
+        return cx1(config === null || config === void 0 ? void 0 : config.base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+      const { variants, defaultVariants } = config;
+      const getVariantClassNames = Object.keys(variants).map((variant) => {
+        const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+        const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+        const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+        return variants[variant][variantKey];
+      });
+      const defaultsAndProps = { ...defaultVariants, ...props && Object.entries(props).reduce((acc, param) => {
+        let [key, value] = param;
+        return typeof value === "undefined" ? acc : { ...acc, [key]: value };
+      }, {}) };
+      const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
+        let { class: cvClass, className: cvClassName, ...cvConfig } = param1;
+        return Object.entries(cvConfig).every((param) => {
+          let [cvKey, cvSelector] = param;
+          const selector = defaultsAndProps[cvKey];
+          return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
+        }) ? [...acc, cvClass, cvClassName] : acc;
+      }, []);
+      return cx1(config === null || config === void 0 ? void 0 : config.base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+  };
+  const compose1 = function() {
+    for (var _len = arguments.length, components = new Array(_len), _key = 0; _key < _len; _key++) {
+      components[_key] = arguments[_key];
+    }
+    return (props) => {
+      const propsWithoutClass = Object.fromEntries(Object.entries(props || {}).filter((param) => {
+        let [key] = param;
+        return !["class", "className"].includes(key);
+      }));
+      return cx1(components.map((component) => component(propsWithoutClass)), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+  };
+  return { compose: compose1, cva: cva1, cx: cx1 };
+};
+const { compose, cva, cx } = defineConfig();
+const btnClass = cva({
+  base: "fr animate-selected-tag justify-center touch-hitbox text-style-filter ease-expo-out rounded-interactive relative flex cursor-pointer items-center py-1 transition-all duration-snappy active:scale-95",
+  variants: {
+    variant: {
+      neutral: "bg-interactive-neutral-bg pointer-fine:hover:bg-interactive-neutral-bg-hover text-interactive-neutral-text",
+      accent: "bg-interactive-accent-bg pointer-fine:hover:bg-interactive-accent-bg-hover text-interactive-accent-text"
+    },
+    icon: {
+      none: "",
+      right: "",
+      left: ""
+    },
+    size: {
+      sm: "py-1",
+      lg: "py-2"
+    }
+  },
+  compoundVariants: [
+    {
+      size: "sm",
+      icon: "right",
+      class: "pl-3 pr-1"
+    },
+    {
+      size: "sm",
+      icon: "left",
+      class: "pl-1 pr-3"
+    },
+    {
+      size: "sm",
+      icon: "none",
+      class: "px-3"
+    },
+    {
+      size: "lg",
+      icon: "right",
+      class: "pl-5 pr-3"
+    }
+    // { size: 'lg', icon: 'left', class: 'pl-3 pr-5' },
+    // { size: 'lg', icon: 'none', class: 'px-5' },
+  ],
+  defaultVariants: {
+    variant: "neutral",
+    icon: "none",
+    size: "sm"
+  }
+});
 var f$1 = 0;
 function u$1(e2, t2, n2, o2, i2, u2) {
   var a2, c2, p2 = {};
@@ -523,7 +643,7 @@ function u$1(e2, t2, n2, o2, i2, u2) {
       void 0 === p2[c2] && (p2[c2] = a2[c2]);
   return l$2.vnode && l$2.vnode(l2), l2;
 }
-const Fallback = ({
+const UnstyledErrorView = ({
   error,
   resetError
 }) => {
@@ -554,6 +674,26 @@ const Fallback = ({
     })]
   });
 };
+const ErrorView = ({
+  error,
+  resetError
+}) => {
+  return u$1("div", {
+    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: [u$1("p", {
+      class: "text-neutral-11",
+      children: ["An error occured: ", error.message]
+    }), u$1("button", {
+      class: btnClass({
+        variant: "neutral",
+        size: "lg",
+        class: "border-px flex flex-none flex-nowrap justify-center truncate border-transparent"
+      }),
+      onClick: resetError,
+      children: "Retry"
+    })]
+  });
+};
 class ErrorBoundary extends b$2 {
   constructor() {
     super(...arguments);
@@ -574,9 +714,9 @@ class ErrorBoundary extends b$2 {
   render() {
     if (this.state.error) {
       const {
-        Fallback: Fallback2
+        Fallback
       } = this.props;
-      return u$1(Fallback2, {
+      return u$1(Fallback, {
         error: this.state.error,
         resetError: () => {
           this.setState({
@@ -751,10 +891,10 @@ const Icon = ({
     })
   });
 };
-var t, r$1, u, i, o = 0, f = [], c = [], e = l$2.__b, a = l$2.__r, v = l$2.diffed, l = l$2.__c, m = l$2.unmount;
+var t, r, u, i, o = 0, f = [], c = [], e = l$2.__b, a = l$2.__r, v = l$2.diffed, l = l$2.__c, m = l$2.unmount;
 function d(t2, u2) {
-  l$2.__h && l$2.__h(r$1, t2, o || u2), o = 0;
-  var i2 = r$1.__H || (r$1.__H = { __: [], __h: [] });
+  l$2.__h && l$2.__h(r, t2, o || u2), o = 0;
+  var i2 = r.__H || (r.__H = { __: [], __h: [] });
   return t2 >= i2.__.length && i2.__.push({ __V: c }), i2.__[t2];
 }
 function h(n2) {
@@ -765,7 +905,7 @@ function s(n2, u2, i2) {
   if (o2.t = n2, !o2.__c && (o2.__ = [i2 ? i2(u2) : B$1(void 0, u2), function(n3) {
     var t2 = o2.__N ? o2.__N[0] : o2.__[0], r2 = o2.t(t2, n3);
     t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
-  }], o2.__c = r$1, !r$1.u)) {
+  }], o2.__c = r, !r.u)) {
     var f2 = function(n3, t2, r2) {
       if (!o2.__c.__H)
         return true;
@@ -784,25 +924,25 @@ function s(n2, u2, i2) {
         }
       }), !(!i3 && o2.__c.props === n3) && (!c2 || c2.call(this, n3, t2, r2));
     };
-    r$1.u = true;
-    var c2 = r$1.shouldComponentUpdate, e2 = r$1.componentWillUpdate;
-    r$1.componentWillUpdate = function(n3, t2, r2) {
+    r.u = true;
+    var c2 = r.shouldComponentUpdate, e2 = r.componentWillUpdate;
+    r.componentWillUpdate = function(n3, t2, r2) {
       if (this.__e) {
         var u3 = c2;
         c2 = void 0, f2(n3, t2, r2), c2 = u3;
       }
       e2 && e2.call(this, n3, t2, r2);
-    }, r$1.shouldComponentUpdate = f2;
+    }, r.shouldComponentUpdate = f2;
   }
   return o2.__N || o2.__;
 }
 function p(u2, i2) {
   var o2 = d(t++, 3);
-  !l$2.__s && z$1(o2.__H, i2) && (o2.__ = u2, o2.i = i2, r$1.__H.__h.push(o2));
+  !l$2.__s && z$1(o2.__H, i2) && (o2.__ = u2, o2.i = i2, r.__H.__h.push(o2));
 }
 function y(u2, i2) {
   var o2 = d(t++, 4);
-  !l$2.__s && z$1(o2.__H, i2) && (o2.__ = u2, o2.i = i2, r$1.__h.push(o2));
+  !l$2.__s && z$1(o2.__H, i2) && (o2.__ = u2, o2.i = i2, r.__h.push(o2));
 }
 function _(n2) {
   return o = 5, F$1(function() {
@@ -828,15 +968,15 @@ function T$1(n2, t2) {
   }, t2);
 }
 function q$1(n2) {
-  var u2 = r$1.context[n2.__c], i2 = d(t++, 9);
-  return i2.c = n2, u2 ? (null == i2.__ && (i2.__ = true, u2.sub(r$1)), u2.props.value) : n2.__;
+  var u2 = r.context[n2.__c], i2 = d(t++, 9);
+  return i2.c = n2, u2 ? (null == i2.__ && (i2.__ = true, u2.sub(r)), u2.props.value) : n2.__;
 }
 function x$1(t2, r2) {
   l$2.useDebugValue && l$2.useDebugValue(r2 ? r2(t2) : t2);
 }
 function P$1(n2) {
   var u2 = d(t++, 10), i2 = h();
-  return u2.__ = n2, r$1.componentDidCatch || (r$1.componentDidCatch = function(n3, t2) {
+  return u2.__ = n2, r.componentDidCatch || (r.componentDidCatch = function(n3, t2) {
     u2.__ && u2.__(n3, t2), i2[1](n3);
   }), [i2[0], function() {
     i2[1](void 0);
@@ -845,7 +985,7 @@ function P$1(n2) {
 function V$1() {
   var n2 = d(t++, 11);
   if (!n2.__) {
-    for (var u2 = r$1.__v; null !== u2 && !u2.__m && null !== u2.__; )
+    for (var u2 = r.__v; null !== u2 && !u2.__m && null !== u2.__; )
       u2 = u2.__;
     var i2 = u2.__m || (u2.__m = [0, 0]);
     n2.__ = "P" + i2[0] + "-" + i2[1]++;
@@ -862,19 +1002,19 @@ function b() {
       }
 }
 l$2.__b = function(n2) {
-  r$1 = null, e && e(n2);
+  r = null, e && e(n2);
 }, l$2.__r = function(n2) {
   a && a(n2), t = 0;
-  var i2 = (r$1 = n2.__c).__H;
-  i2 && (u === r$1 ? (i2.__h = [], r$1.__h = [], i2.__.forEach(function(n3) {
+  var i2 = (r = n2.__c).__H;
+  i2 && (u === r ? (i2.__h = [], r.__h = [], i2.__.forEach(function(n3) {
     n3.__N && (n3.__ = n3.__N), n3.__V = c, n3.__N = n3.i = void 0;
-  })) : (i2.__h.forEach(k$1), i2.__h.forEach(w$1), i2.__h = [], t = 0)), u = r$1;
+  })) : (i2.__h.forEach(k$1), i2.__h.forEach(w$1), i2.__h = [], t = 0)), u = r;
 }, l$2.diffed = function(t2) {
   v && v(t2);
   var o2 = t2.__c;
   o2 && o2.__H && (o2.__H.__h.length && (1 !== f.push(o2) && i === l$2.requestAnimationFrame || ((i = l$2.requestAnimationFrame) || j$1)(b)), o2.__H.__.forEach(function(n2) {
     n2.i && (n2.__H = n2.i), n2.__V !== c && (n2.__ = n2.__V), n2.i = void 0, n2.__V = c;
-  })), u = r$1 = null;
+  })), u = r = null;
 }, l$2.__c = function(t2, r2) {
   r2.some(function(t3) {
     try {
@@ -906,12 +1046,12 @@ function j$1(n2) {
   g$1 && (t2 = requestAnimationFrame(r2));
 }
 function k$1(n2) {
-  var t2 = r$1, u2 = n2.__c;
-  "function" == typeof u2 && (n2.__c = void 0, u2()), r$1 = t2;
+  var t2 = r, u2 = n2.__c;
+  "function" == typeof u2 && (n2.__c = void 0, u2()), r = t2;
 }
 function w$1(n2) {
-  var t2 = r$1;
-  n2.__c = n2.__(), r$1 = t2;
+  var t2 = r;
+  n2.__c = n2.__(), r = t2;
 }
 function z$1(n2, t2) {
   return !n2 || n2.length !== t2.length || t2.some(function(t3, r2) {
@@ -924,6 +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) => {
+  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];
@@ -1963,16 +2110,6 @@ const subscribeCallback = (key, callbacks, callback) => {
     }
   };
 };
-const withMiddleware = (useSWR2, middleware2) => {
-  return (...args) => {
-    const [key, fn2, config] = normalize(args);
-    const uses = (config.use || []).concat(middleware2);
-    return useSWR2(key, fn2, {
-      ...config,
-      use: uses
-    });
-  };
-};
 setupDevTools();
 const use = wn.use || ((promise) => {
   if (promise.status === "pending") {
@@ -2691,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 {
@@ -2871,10 +3026,10 @@ const getRelativeTimeDifference = ({
   return diffIn.months < 0 ? "a long time ago" : "in a long time";
 };
 const SEVEN_DAYS_MS = 1e3 * 60 * 60 * 24 * 7;
-const AvailablePropertiesSchema = record(transform(array(coerce(string(), String)), (schema) => schema.map((s2) => ({
-  value: s2,
-  label: s2
-}))));
+const AvailablePropertiesSchema = record(array(object({
+  label: coerce(string(), String),
+  value: coerce(string(), String)
+})));
 const PaginationSchema = object({
   total: number(),
   current_page: number(),
@@ -2891,7 +3046,7 @@ const payPeriods = {
 const JobPayloadSchema = object({
   id: number(),
   company_name: string(),
-  employment_type: union([literal("FULL_TIME"), literal("PART_TIME"), literal("TEMPORARY"), literal("CONTRACTOR"), literal("INTERN"), literal("VOLUNTEER"), literal("OTHER")]),
+  employment_type: string(),
   location_type: union([literal("LOCATION"), literal("REMOTE"), literal("HYBRID")]),
   pay_type: union([literal("ANNUALLY"), literal("HOURLY"), literal("MONTHLY"), literal("WEEKLY"), literal("DAILY")]),
   pay_currency: string(),
@@ -2907,15 +3062,17 @@ const JobPayloadSchema = object({
   pay_max: nullable(string()),
   description: string(),
   title: string(),
-  coordinates: object({
-    lat: number(),
-    lng: number()
-  }),
   // E.g.: Any varchar, e.g.: "Permanent contract"
   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;
@@ -2939,6 +3096,7 @@ const JobSchema = transform(JobPayloadSchema, (schema) => {
     throw new Error("Invalid pay data");
   })();
   return {
+    raw: schema,
     id: schema.id,
     isNew,
     company: {
@@ -2949,7 +3107,6 @@ const JobSchema = transform(JobPayloadSchema, (schema) => {
     pay,
     description: schema.description,
     title: schema.title,
-    coordinates: schema.coordinates,
     contractType: schema.contract_type,
     href: schema.href,
     relativePostedDate: schema.created_at ? getRelativeTimeDifference({
@@ -3046,80 +3203,6 @@ const SWR_SETTINGS = {
   revalidateIfStale: false,
   revalidateFirstPage: false
 };
-const cacheKey = (value) => JSON.stringify(value);
-function r(e2) {
-  var t2, f2, n2 = "";
-  if ("string" == typeof e2 || "number" == typeof e2)
-    n2 += e2;
-  else if ("object" == typeof e2)
-    if (Array.isArray(e2))
-      for (t2 = 0; t2 < e2.length; t2++)
-        e2[t2] && (f2 = r(e2[t2])) && (n2 && (n2 += " "), n2 += f2);
-    else
-      for (t2 in e2)
-        e2[t2] && (n2 && (n2 += " "), n2 += t2);
-  return n2;
-}
-function clsx() {
-  for (var e2, t2, f2 = 0, n2 = ""; f2 < arguments.length; )
-    (e2 = arguments[f2++]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2);
-  return n2;
-}
-const falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
-const defineConfig = (options) => {
-  const cx1 = function() {
-    for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
-      inputs[_key] = arguments[_key];
-    }
-    var ref, ref1;
-    if (typeof (options === null || options === void 0 ? void 0 : (ref = options.hooks) === null || ref === void 0 ? void 0 : ref["cx:done"]) !== "undefined")
-      return options === null || options === void 0 ? void 0 : options.hooks["cx:done"](clsx(inputs));
-    if (typeof (options === null || options === void 0 ? void 0 : (ref1 = options.hooks) === null || ref1 === void 0 ? void 0 : ref1.onComplete) !== "undefined")
-      return options === null || options === void 0 ? void 0 : options.hooks.onComplete(clsx(inputs));
-    return clsx(inputs);
-  };
-  const cva1 = (config) => {
-    return (props) => {
-      var ref;
-      if ((config === null || config === void 0 ? void 0 : config.variants) == null)
-        return cx1(config === null || config === void 0 ? void 0 : config.base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-      const { variants, defaultVariants } = config;
-      const getVariantClassNames = Object.keys(variants).map((variant) => {
-        const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-        const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-        const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-        return variants[variant][variantKey];
-      });
-      const defaultsAndProps = { ...defaultVariants, ...props && Object.entries(props).reduce((acc, param) => {
-        let [key, value] = param;
-        return typeof value === "undefined" ? acc : { ...acc, [key]: value };
-      }, {}) };
-      const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
-        let { class: cvClass, className: cvClassName, ...cvConfig } = param1;
-        return Object.entries(cvConfig).every((param) => {
-          let [cvKey, cvSelector] = param;
-          const selector = defaultsAndProps[cvKey];
-          return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
-        }) ? [...acc, cvClass, cvClassName] : acc;
-      }, []);
-      return cx1(config === null || config === void 0 ? void 0 : config.base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
-  };
-  const compose1 = function() {
-    for (var _len = arguments.length, components = new Array(_len), _key = 0; _key < _len; _key++) {
-      components[_key] = arguments[_key];
-    }
-    return (props) => {
-      const propsWithoutClass = Object.fromEntries(Object.entries(props || {}).filter((param) => {
-        let [key] = param;
-        return !["class", "className"].includes(key);
-      }));
-      return cx1(components.map((component) => component(propsWithoutClass)), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
-  };
-  return { compose: compose1, cva: cva1, cx: cx1 };
-};
-const { compose, cva, cx } = defineConfig();
 const tagClass = cva({
   base: "truncate max-w-full block fr font-style-tag font-family-tag font-weight-tag text-style-tag",
   variants: {
@@ -3166,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:
@@ -3191,7 +3273,7 @@ const CurrentValueTag = ({
               size: "sm",
               variant: "accentStrong",
               interactive: true,
-              class: "truncate tabular-nums"
+              class: "ijs-filter-current truncate tabular-nums"
             }),
             children: selectedSuggestions.length
           });
@@ -3201,53 +3283,6 @@ const CurrentValueTag = ({
       exhaustive(query);
   }
 };
-const btnClass = cva({
-  base: "fr animate-selected-tag justify-center touch-hitbox text-style-filter ease-expo-out rounded-interactive relative flex cursor-pointer items-center py-1 transition-all duration-snappy active:scale-95",
-  variants: {
-    variant: {
-      neutral: "bg-interactive-neutral-bg pointer-fine:hover:bg-interactive-neutral-bg-hover text-interactive-neutral-text",
-      accent: "bg-interactive-accent-bg pointer-fine:hover:bg-interactive-accent-bg-hover text-interactive-accent-text"
-    },
-    icon: {
-      none: "",
-      right: "",
-      left: ""
-    },
-    size: {
-      sm: "py-1",
-      lg: "py-2"
-    }
-  },
-  compoundVariants: [
-    {
-      size: "sm",
-      icon: "right",
-      class: "pl-3 pr-1"
-    },
-    {
-      size: "sm",
-      icon: "left",
-      class: "pl-1 pr-3"
-    },
-    {
-      size: "sm",
-      icon: "none",
-      class: "px-3"
-    },
-    {
-      size: "lg",
-      icon: "right",
-      class: "pl-5 pr-3"
-    }
-    // { size: 'lg', icon: 'left', class: 'pl-3 pr-5' },
-    // { size: 'lg', icon: 'none', class: 'px-5' },
-  ],
-  defaultVariants: {
-    variant: "neutral",
-    icon: "none",
-    size: "sm"
-  }
-});
 const SUGGESTION_COUNT = 8;
 const TAG_HEIGHT = 42;
 const GAP = 8;
@@ -3335,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,
@@ -3386,7 +3420,8 @@ const FilterContentActive = ({
                       size: "lg",
                       variant: active ? "accentStrong" : "neutralStrong",
                       interactive: true,
-                      disabled: suggestion.disabled
+                      disabled: suggestion.disabled,
+                      class: "ijs-filter-tag"
                     }),
                     children: suggestion.label
                   })
@@ -3407,6 +3442,7 @@ const FilterContentActive = ({
                     class: "font-style-tag font-family-tag font-weight-tag text-style-tag",
                     children: "Show More"
                   }), u$1(Icon, {
+                    "aria-hidden": true,
                     name: "plus"
                   })]
                 })
@@ -3430,6 +3466,7 @@ const FilterContentActive = ({
             onValueChange(void 0);
           },
           children: [u$1(Icon, {
+            "aria-hidden": true,
             name: "x"
           }), " Clear"]
         })
@@ -3468,7 +3505,7 @@ const filterIcons = {
   category: "briefcase"
 };
 const wrapperClass$1 = cva({
-  base: "group flex min-w-0 fr overflow-hidden rounded-section text-copy-neutral-lowcontrast ring-width-section transition-all duration-medium ease-expo-out fr-parent [&:has(.fr-child:active)]:scale-[0.975] origin-[50%_1.75rem]",
+  base: "group ijs-filter flex min-w-0 fr overflow-hidden rounded-section text-copy-neutral-lowcontrast ring-width-section transition-all duration-medium ease-expo-out fr-parent [&:has(.fr-child:active)]:scale-[0.975] origin-[50%_1.75rem]",
   variants: {
     hasValue: {
       false: "bg-section-weak-bg ring-section-weak-stroke",
@@ -3541,10 +3578,11 @@ const Filter = ({
         "aria-label": active ? "Close filter" : "Open filter",
         class: headerClass({
           state: active ? "active" : hasValue ? "filled" : "default",
-          class: "rounded-section fr-child flex w-full cursor-pointer select-none items-center gap-2 py-4 pl-4"
+          class: "ijs-filter-heading rounded-section fr-child flex w-full cursor-pointer select-none items-center gap-2 py-4 pl-4"
         }),
         onClick: () => onActiveChange(!active),
         children: [u$1(Icon, {
+          "aria-hidden": true,
           class: "flex-none",
           name: icon
         }), u$1("p", {
@@ -3582,8 +3620,8 @@ const Filter = ({
           selectedValues
         })
       }), u$1(Icon, {
-        class: chevronClass(),
         "aria-hidden": true,
+        class: chevronClass(),
         name: "chevron-right"
       })]
     })]
@@ -3664,7 +3702,10 @@ const FilterSection = ({
   const [activeKey, setActiveKey] = h((_a = properties[0]) == null ? void 0 : _a.key);
   useFilterKeyboardFocus(activeKey, parentRef);
   const defaultFilters = F$1(() => getFilterDefaults(properties), [properties]);
-  const unfilteredQuery = getQueryState(useSWR(cacheKey(defaultFilters), () => getAvailableFilters({
+  const unfilteredQuery = getQueryState(useSWR(cacheKey({
+    filter: defaultFilters,
+    baseKey: "filters"
+  }), () => getAvailableFilters({
     apiClient,
     logger,
     filters: defaultFilters
@@ -3676,7 +3717,10 @@ const FilterSection = ({
       ...appliedFilters,
       [keyToExclude]: defaultFilters[keyToExclude]
     };
-    return useSWR(cacheKey(filters), () => getAvailableFilters({
+    return useSWR(cacheKey({
+      filter: filters,
+      baseKey: "filters"
+    }), () => getAvailableFilters({
       apiClient,
       logger,
       filters
@@ -3685,7 +3729,7 @@ const FilterSection = ({
   return u$1("aside", {
     children: u$1("div", {
       role: "tablist",
-      class: "top-filters sticky flex flex-col gap-2 px-4 md:px-0",
+      class: "top-filters ijs-filters-section sticky flex flex-col gap-2 px-4 md:px-0",
       children: properties.map((property) => {
         const active = activeKey === property.key;
         const value = appliedFilters[property.key] ?? {
@@ -3709,7 +3753,7 @@ const FilterSection = ({
         const onActiveChange = (active2) => setActiveKey(active2 ? property.key : void 0);
         const useQuery = makeQueryWithoutFilter(property.key);
         return u$1(ErrorBoundary, {
-          Fallback,
+          Fallback: ErrorView,
           children: u$1(Filter, {
             unfilteredQuery,
             active,
@@ -3730,212 +3774,9 @@ const FilterSection = ({
     })
   });
 };
-const getFirstPageKey = (getKey) => {
-  return serialize(getKey ? getKey(0, null) : null)[0];
-};
-const EMPTY_PROMISE = Promise.resolve();
-const infinite = (useSWRNext) => (getKey, fn2, config) => {
-  const didMountRef = _(false);
-  const { cache: cache$1, initialSize = 1, revalidateAll = false, persistSize = false, revalidateFirstPage = true, revalidateOnMount = false, parallel = false } = config;
-  const [, , , PRELOAD] = SWRGlobalState.get(cache);
-  let infiniteKey;
-  try {
-    infiniteKey = getFirstPageKey(getKey);
-    if (infiniteKey)
-      infiniteKey = INFINITE_PREFIX + infiniteKey;
-  } catch (err) {
-  }
-  const [get, set, subscribeCache] = createCacheHelper(cache$1, infiniteKey);
-  const getSnapshot = T$1(() => {
-    const size = isUndefined(get()._l) ? initialSize : get()._l;
-    return size;
-  }, [
-    cache$1,
-    infiniteKey,
-    initialSize
-  ]);
-  shimExports.useSyncExternalStore(T$1(
-    (callback) => {
-      if (infiniteKey)
-        return subscribeCache(infiniteKey, () => {
-          callback();
-        });
-      return () => {
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      cache$1,
-      infiniteKey
-    ]
-  ), getSnapshot, getSnapshot);
-  const resolvePageSize = T$1(() => {
-    const cachedPageSize = get()._l;
-    return isUndefined(cachedPageSize) ? initialSize : cachedPageSize;
-  }, [
-    infiniteKey,
-    initialSize
-  ]);
-  const lastPageSizeRef = _(resolvePageSize());
-  useIsomorphicLayoutEffect(() => {
-    if (!didMountRef.current) {
-      didMountRef.current = true;
-      return;
-    }
-    if (infiniteKey) {
-      set({
-        _l: persistSize ? lastPageSizeRef.current : resolvePageSize()
-      });
-    }
-  }, [
-    infiniteKey,
-    cache$1
-  ]);
-  const shouldRevalidateOnMount = revalidateOnMount && !didMountRef.current;
-  const swr = useSWRNext(infiniteKey, async (key) => {
-    const forceRevalidateAll = get()._i;
-    const data = [];
-    const pageSize = resolvePageSize();
-    const [getCache] = createCacheHelper(cache$1, key);
-    const cacheData = getCache().data;
-    const revalidators = [];
-    let previousPageData = null;
-    for (let i2 = 0; i2 < pageSize; ++i2) {
-      const [pageKey, pageArg] = serialize(getKey(i2, parallel ? null : previousPageData));
-      if (!pageKey) {
-        break;
-      }
-      const [getSWRCache, setSWRCache] = createCacheHelper(cache$1, pageKey);
-      let pageData = getSWRCache().data;
-      const shouldFetchPage = revalidateAll || forceRevalidateAll || isUndefined(pageData) || revalidateFirstPage && !i2 && !isUndefined(cacheData) || shouldRevalidateOnMount || cacheData && !isUndefined(cacheData[i2]) && !config.compare(cacheData[i2], pageData);
-      if (fn2 && shouldFetchPage) {
-        const revalidate = async () => {
-          const hasPreloadedRequest = pageKey in PRELOAD;
-          if (!hasPreloadedRequest) {
-            pageData = await fn2(pageArg);
-          } else {
-            const req = PRELOAD[pageKey];
-            delete PRELOAD[pageKey];
-            pageData = await req;
-          }
-          setSWRCache({
-            data: pageData,
-            _k: pageArg
-          });
-          data[i2] = pageData;
-        };
-        if (parallel) {
-          revalidators.push(revalidate);
-        } else {
-          await revalidate();
-        }
-      } else {
-        data[i2] = pageData;
-      }
-      if (!parallel) {
-        previousPageData = pageData;
-      }
-    }
-    if (parallel) {
-      await Promise.all(revalidators.map((r2) => r2()));
-    }
-    set({
-      _i: UNDEFINED
-    });
-    return data;
-  }, config);
-  const mutate2 = T$1(
-    // eslint-disable-next-line func-names
-    function(data, opts) {
-      const options = typeof opts === "boolean" ? {
-        revalidate: opts
-      } : opts || {};
-      const shouldRevalidate = options.revalidate !== false;
-      if (!infiniteKey)
-        return EMPTY_PROMISE;
-      if (shouldRevalidate) {
-        if (!isUndefined(data)) {
-          set({
-            _i: false
-          });
-        } else {
-          set({
-            _i: true
-          });
-        }
-      }
-      return arguments.length ? swr.mutate(data, {
-        ...options,
-        revalidate: shouldRevalidate
-      }) : swr.mutate();
-    },
-    // swr.mutate is always the same reference
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      infiniteKey,
-      cache$1
-    ]
-  );
-  const setSize = T$1(
-    (arg) => {
-      if (!infiniteKey)
-        return EMPTY_PROMISE;
-      const [, changeSize] = createCacheHelper(cache$1, infiniteKey);
-      let size;
-      if (isFunction(arg)) {
-        size = arg(resolvePageSize());
-      } else if (typeof arg == "number") {
-        size = arg;
-      }
-      if (typeof size != "number")
-        return EMPTY_PROMISE;
-      changeSize({
-        _l: size
-      });
-      lastPageSizeRef.current = size;
-      const data = [];
-      const [getInfiniteCache] = createCacheHelper(cache$1, infiniteKey);
-      let previousPageData = null;
-      for (let i2 = 0; i2 < size; ++i2) {
-        const [pageKey] = serialize(getKey(i2, previousPageData));
-        const [getCache] = createCacheHelper(cache$1, pageKey);
-        const pageData = pageKey ? getCache().data : UNDEFINED;
-        if (isUndefined(pageData)) {
-          return mutate2(getInfiniteCache().data);
-        }
-        data.push(pageData);
-        previousPageData = pageData;
-      }
-      return mutate2(data);
-    },
-    // exclude getKey from the dependencies, which isn't allowed to change during the lifecycle
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      infiniteKey,
-      cache$1,
-      mutate2,
-      resolvePageSize
-    ]
-  );
-  return {
-    size: resolvePageSize(),
-    setSize,
-    mutate: mutate2,
-    get data() {
-      return swr.data;
-    },
-    get error() {
-      return swr.error;
-    },
-    get isValidating() {
-      return swr.isValidating;
-    },
-    get isLoading() {
-      return swr.isLoading;
-    }
-  };
-};
-const useSWRInfinite = withMiddleware(useSWR, infinite);
+function isKeyInObj(key, obj) {
+  return key in obj;
+}
 const SkeletonText = ({
   chars
 }) => {
@@ -3943,18 +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: "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 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 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(),
@@ -3962,21 +3836,23 @@ const JobCard = ({
       class: "flex flex-1 flex-col gap-4",
       children: [u$1("div", {
         class: "flex flex-col items-start gap-1",
-        children: [job.isNew ? u$1("span", {
-          class: badgeClass(),
-          children: "NEW"
-        }) : u$1("p", {
-          class: "text-style-job-card-info text-copy-job-info",
-          children: ["Posted ", job.relativePostedDate]
-        }), u$1("div", {
-          class: "flex flex-col gap-1",
+        children: [u$1("div", {
+          class: "order-2 flex flex-col gap-1",
           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"
+          }),
+          children: "NEW"
+        }) : u$1("p", {
+          class: "text-style-job-card-info text-copy-job-info order-1",
+          children: ["Posted ", job.relativePostedDate]
         })]
       }), u$1("div", {
         class: "flex flex-col items-start gap-2",
@@ -3986,17 +3862,18 @@ const JobCard = ({
             size: "xs"
           }),
           children: job.pay
-        }), job.contractType && u$1("div", {
+        }), tags.length > 0 && u$1("div", {
           class: "flex items-center gap-2",
-          children: u$1("span", {
+          children: tags.map((tag) => u$1("span", {
             class: tagClass({
               size: "xs"
             }),
-            children: job.contractType
-          })
+            children: tag
+          }, tag))
         })]
       })]
     }), u$1("div", {
+      "aria-hidden": true,
       class: "flex items-center",
       children: u$1(Icon, {
         name: "chevron-right",
@@ -4015,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",
@@ -4046,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",
@@ -4054,18 +3931,19 @@ 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]"
             })
           })]
         })]
       })]
     }), u$1("div", {
+      "aria-hidden": true,
       class: "flex items-center",
       children: u$1(Icon, {
         name: "chevron-right",
@@ -4102,70 +3980,69 @@ const LoadMore = ({
     });
   }
 };
-const useResultsFocus = (data) => {
-  const resultsRef = _(null);
-  p(() => {
-    var _a;
-    if (!data)
-      return;
-    if (data.length <= 1)
-      return;
-    const firstNewJob = (_a = resultsRef.current) == null ? void 0 : _a.querySelector(`li[data-page="${data.length}"] > *:is(a, button)`);
-    if (firstNewJob instanceof HTMLElement)
-      firstNewJob.focus();
-  }, [data]);
-  return resultsRef;
-};
 const getResultsCount = ({
   pagination
 }) => {
   invariant(pagination.total >= 0);
   if (pagination.total === 1)
     return "1 job found";
-  if (pagination.total < pagination.per_page)
-    return pagination.total + " jobs found";
-  if (pagination.total > pagination.per_page * pagination.current_page)
-    return "Showing " + pagination.per_page * pagination.current_page + " of " + pagination.total + " jobs";
-  return "Showing all " + pagination.total + " jobs";
+  return `${pagination.total} jobs found`;
 };
 const ResultsSection = ({
   appliedFilters,
   apiClient,
-  logger
+  logger,
+  jobCardConfig
+}) => {
+  const [page, setPage] = h(1);
+  return u$1(g$3, {
+    children: Array.from({
+      length: page
+    }).map((a2, index) => {
+      const isLast = index === page - 1;
+      return u$1(ErrorBoundary, {
+        Fallback: ErrorView,
+        children: u$1(ResultsPage, {
+          appliedFilters,
+          apiClient,
+          logger,
+          page: index + 1,
+          isFirst: index === 0,
+          isLast,
+          fetchNextPage: () => setPage(page + 1),
+          jobCardConfig
+        }, index)
+      }, index);
+    })
+  });
+};
+const ResultsPage = ({
+  appliedFilters,
+  apiClient,
+  logger,
+  page,
+  isFirst,
+  isLast,
+  fetchNextPage,
+  jobCardConfig
 }) => {
-  const {
-    setSize,
-    size,
-    ...swr
-  } = useSWRInfinite((index, prevPageData) => {
-    if (prevPageData === null)
-      return index + 1 + "/" + cacheKey(appliedFilters);
-    if (prevPageData.pagination.last_page === prevPageData.pagination.current_page)
-      return null;
-    return index + 1 + "/" + JSON.stringify(appliedFilters);
-  }, (key) => {
-    const page = Number(key.split("/")[0]);
-    invariant(!Number.isNaN(page));
-    return getJobSearchResults({
-      apiClient,
-      logger,
-      filters: appliedFilters,
-      page
-    });
-  }, SWR_SETTINGS);
   const {
     data,
     error,
     state
-  } = getQueryState(swr);
-  const fetchNextPage = () => {
-    setSize((size2) => size2 + 1);
-  };
-  const resultsRef = useResultsFocus(data);
+  } = getQueryState(useSWR(cacheKey({
+    filter: appliedFilters,
+    baseKey: page.toString()
+  }), () => getJobSearchResults({
+    apiClient,
+    logger,
+    filters: appliedFilters,
+    page
+  }), SWR_SETTINGS));
   switch (state) {
     case "loading":
       return u$1(g$3, {
-        children: [u$1("p", {
+        children: [isFirst && u$1("p", {
           class: "text-style-tag text-copy-job-info animate-skeleton m-0 self-center p-0",
           children: u$1(SkeletonText, {
             chars: 8
@@ -4178,7 +4055,7 @@ const ResultsSection = ({
           }).map((_2, i2) => u$1("li", {
             children: u$1(JobCardSkeleton, {
               seed: i2,
-              animationDelay: (i2 - 4) * 0.1
+              animationDelay: (i2 - PAGE_SIZE) * 0.1
             })
           }, i2))
         })]
@@ -4187,12 +4064,12 @@ const ResultsSection = ({
       throw error;
     case "revalidating":
     case "loaded": {
-      const firstPage = data[0];
-      invariant(firstPage);
-      if (firstPage.pagination.total === 0)
+      invariant(data.pagination.current_page === page);
+      if (data.pagination.total === 0)
         return u$1("div", {
           class: "mx-auto flex flex-col items-center gap-2 px-2 py-4 text-center",
           children: [u$1(Icon, {
+            "aria-hidden": true,
             name: "magnifier",
             class: "text-copy-neutral-lowcontrast"
           }), u$1("div", {
@@ -4206,33 +4083,29 @@ const ResultsSection = ({
             })]
           })]
         });
-      const lastPage = data[data.length - 1];
-      invariant(lastPage);
-      const hasMore = lastPage.pagination.last_page !== lastPage.pagination.current_page;
+      const hasMore = data.pagination.last_page !== data.pagination.current_page;
       return u$1(g$3, {
-        children: [u$1("p", {
+        children: [isFirst && u$1("p", {
           class: "text-copy-neutral-lowcontrast text-style-tag m-0 p-0 text-center",
           children: getResultsCount({
-            pagination: lastPage.pagination
+            pagination: data.pagination
           })
         }), u$1("ul", {
+          "aria-label": `Page ${page}`,
           class: "flex flex-col gap-3",
-          ref: resultsRef,
-          children: data.map((page) => {
-            return page.results.map((job) => {
-              return u$1("li", {
-                "data-page": page.pagination.current_page,
-                class: "ease-expo-out duration-slow transition-opacity",
-                style: {
-                  opacity: state === "revalidating" && size === 1 ? 0.33 : 1
-                },
-                children: u$1(JobCard, {
-                  job
-                })
-              }, job.id);
-            });
+          children: data.results.map((job) => {
+            return u$1("li", {
+              class: "ease-expo-out duration-slow transition-opacity",
+              style: {
+                opacity: state === "revalidating" ? 0.33 : 1
+              },
+              children: u$1(JobCard, {
+                job,
+                config: jobCardConfig
+              })
+            }, job.id);
           })
-        }), hasMore && LoadMore({
+        }), hasMore && isLast && u$1(LoadMore, {
           state,
           fetchNextPage
         })]
@@ -4265,7 +4138,8 @@ const JobSearch = ({
   apiClient,
   logger,
   properties,
-  class: className
+  class: className,
+  jobCardConfig
 }) => {
   const appRef = _(null);
   const [appliedFilters, setAppliedFilters] = h(() => getFilterDefaults(properties));
@@ -4274,9 +4148,9 @@ const JobSearch = ({
     class: className,
     id: JOB_SEARCH_SCOPE_ELEMENT_ID,
     children: u$1("div", {
-      class: "bg-app rounded-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-4 md:grid md:grid-cols-3 md:px-4",
+      class: "ijs-app bg-app rounded-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-4 md:grid md:grid-cols-3 md:px-4",
       children: [u$1(ErrorBoundary, {
-        Fallback,
+        Fallback: ErrorView,
         children: u$1(FilterSection, {
           appliedFilters,
           onFilterValueChange: (key, value) => {
@@ -4295,19 +4169,138 @@ const JobSearch = ({
         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: u$1(ErrorBoundary, {
-            Fallback,
+            Fallback: ErrorView,
             children: u$1(ResultsSection, {
               appliedFilters,
               logger,
-              apiClient
-            })
+              apiClient,
+              jobCardConfig
+            }, cacheKey({
+              filter: appliedFilters,
+              baseKey: "resultsSection"
+            }))
           })
         })
       })]
     })
   });
 };
-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 .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-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) => ({
@@ -4335,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,
@@ -4494,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
@@ -4521,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({
@@ -4576,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({
@@ -4589,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: () => {
@@ -4648,7 +4511,7 @@ const jobSearchPlugin = (params) => createPlugin(({
     id: "inploi-job-search-theme"
   }, generateColorThemeCss(params.theme))];
   const App = y$2(ErrorBoundary, {
-    Fallback
+    Fallback: UnstyledErrorView
   }, [styleElements, y$2(IconSpritesheet, {
     theme: params.theme
   }), y$2(JobSearch, {
@@ -4656,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.