@nolwenture/formik-jsonschema-form 2.0.2 → 3.0.0-beta.1

package/dist/cjs/v3/raw/serialize/toString.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toString = exports.escapeAttr = exports.escapeText = void 0;
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+const BOOLEAN = new Set(["selected", "checked", "disabled", "readonly", "multiple", "hidden", "required"]);
+const SAFE_NAME = /^[a-zA-Z_:][-a-zA-Z0-9_:.]*$/;
+const SAFE_TAG = /^[a-z][a-z0-9-]*$/;
+// Event handlers are never library output; dropped as defence in depth (TASK-063 review N3).
+const HANDLER = /^on/i;
+const escapeText = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+exports.escapeText = escapeText;
+const escapeAttr = (text) => (0, exports.escapeText)(text).replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+exports.escapeAttr = escapeAttr;
+const attrsOf = (node) => Object.entries(node.attrs)
+    .map(([name, value]) => {
+    if (!SAFE_NAME.test(name) || HANDLER.test(name) || value === undefined || value === null || value === false)
+        return "";
+    // a select's / textarea's value is state: React SSR marks the option or writes the text (below)
+    if (name === "value" && (node.tag === "select" || node.tag === "textarea"))
+        return "";
+    if (value === true)
+        return BOOLEAN.has(name) ? ` ${name}` : ` ${name}="true"`;
+    return ` ${name}="${(0, exports.escapeAttr)(String(value))}"`;
+})
+    .join("");
+/** The values a select's `value` selects (React SSR: `selected` on those options), or undefined when it has none. */
+const selection = (node) => {
+    const value = node.attrs.value;
+    if (value === undefined || value === null)
+        return undefined;
+    return new Set((Array.isArray(value) ? value : [value]).map(String));
+};
+const childToString = (child, selected) => {
+    if (child === null || child === undefined || child === false)
+        return "";
+    if (typeof child === "string")
+        return (0, exports.escapeText)(child);
+    if (typeof child === "number")
+        return String(child);
+    if (selected && child.tag === "option")
+        return (0, exports.toString)({ ...child, attrs: { ...child.attrs, selected: selected.has(String(child.attrs.value ?? "")) } });
+    return (0, exports.toString)(child, selected);
+};
+const toString = (node, selected) => {
+    // A fragment (composite registry component) serialises its children only.
+    if (node.tag === "#fragment")
+        return node.children.map((c) => childToString(c, selected)).join("");
+    if (!SAFE_TAG.test(node.tag))
+        return "";
+    const open = `<${node.tag}${attrsOf(node)}>`;
+    if (VOID.has(node.tag))
+        return open;
+    if (node.tag === "textarea")
+        return `${open}${(0, exports.escapeText)(node.attrs.value === undefined || node.attrs.value === null ? "" : String(node.attrs.value))}</textarea>`;
+    const inner = node.tag === "select" ? selection(node) : node.tag === "optgroup" ? selected : undefined;
+    return `${open}${node.children.map((c) => childToString(c, inner)).join("")}</${node.tag}>`;
+};
+exports.toString = toString;

package/dist/cjs/v3/raw/store/createStore.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStore = exports.touchAll = exports.toFormErrors = exports.prepareForValidation = void 0;
+// The RAW state store (S6, §2.7 S-A): the second StateAdapter next to the React layer's Formik adapter.
+// It follows Formik 2's semantics where the corpus and the scripts compare state: setFieldValue /
+// setFieldTouched validate the whole form (validateOnChange / validateOnBlur), "" is undefined for
+// validation, the first message per path wins, submit touches every value and keeps isSubmitting true
+// after a synchronous onSubmit (the consumer resets it, as with Formik).
+const json_1 = require("../core/json");
+const paths_1 = require("../core/paths");
+/** formik prepareDataForValidation: "" is undefined, nested objects and arrays included. */
+const prepareForValidation = (values) => {
+    const out = Array.isArray(values) ? [] : {};
+    for (const key of Object.keys(values ?? {})) {
+        const v = values[key];
+        if (Array.isArray(v))
+            out[key] = v.map((x) => (Array.isArray(x) || (0, json_1.isPlainObject)(x) ? (0, exports.prepareForValidation)(x) : x !== "" ? x : undefined));
+        else if ((0, json_1.isPlainObject)(v))
+            out[key] = (0, exports.prepareForValidation)(v);
+        else
+            out[key] = v !== "" ? v : undefined;
+    }
+    return out;
+};
+exports.prepareForValidation = prepareForValidation;
+/** formik yupToFormErrors: the first message per path. */
+const toFormErrors = (error) => {
+    let errors = {};
+    const inner = error?.inner ?? [];
+    if (!inner.length)
+        return error?.path !== undefined ? (0, paths_1.setIn)(errors, error.path, error.message) : errors;
+    for (const e of inner) {
+        if (e.path === undefined)
+            continue;
+        const segments = String(e.path).split(/[.[\]]+/).filter(Boolean);
+        let existing = errors;
+        for (const s of segments)
+            existing = existing?.[s];
+        if (!existing)
+            errors = (0, paths_1.setIn)(errors, e.path, e.message);
+    }
+    return errors;
+};
+exports.toFormErrors = toFormErrors;
+/** formik setNestedObjectValues(values, true): the touched map after a submit attempt. */
+const touchAll = (values, seen = new WeakSet()) => {
+    const out = Array.isArray(values) ? [] : {};
+    for (const key of Object.keys(values ?? {})) {
+        const v = values[key];
+        if (v !== null && typeof v === "object") {
+            if (!seen.has(v)) {
+                seen.add(v);
+                out[key] = (0, exports.touchAll)(v, seen);
+            }
+        }
+        else
+            out[key] = true;
+    }
+    return out;
+};
+exports.touchAll = touchAll;
+const equal = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+const createStore = (options = {}) => {
+    let state = { values: options.initialValues ?? {}, errors: {}, touched: {}, isSubmitting: false, submitCount: 0 };
+    const listeners = new Set();
+    const set = (patch) => {
+        state = { ...state, ...patch };
+        listeners.forEach((l) => l(state));
+    };
+    const onChange = options.validateOnChange ?? true;
+    const onBlur = options.validateOnBlur ?? true;
+    const validateForm = async (values = state.values) => {
+        if (!options.validationSchema)
+            return {};
+        try {
+            await options.validationSchema.validate((0, exports.prepareForValidation)(values), { abortEarly: false });
+            return {};
+        }
+        catch (error) {
+            return (0, exports.toFormErrors)(error);
+        }
+    };
+    const validate = async (values) => {
+        const errors = await validateForm(values);
+        if (!equal(errors, state.errors))
+            set({ errors });
+        if (options.validationSchema)
+            options.onValidated?.(errors);
+        return errors;
+    };
+    const store = {
+        getState: () => state,
+        setState: (patch) => set(patch),
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => void listeners.delete(listener);
+        },
+        async setValues(values, shouldValidate = onChange) {
+            set({ values });
+            if (shouldValidate)
+                await validate(values);
+        },
+        async setFieldValue(path, value, shouldValidate = onChange) {
+            const values = path ? (0, paths_1.setIn)(state.values, path, value) : value;
+            set({ values });
+            if (shouldValidate)
+                await validate(values);
+        },
+        async setFieldTouched(path, touched = true, shouldValidate = onBlur) {
+            set({ touched: (0, paths_1.setIn)(state.touched, path, touched) });
+            if (shouldValidate)
+                await validate(state.values);
+        },
+        setFieldError(path, message) {
+            set({ errors: (0, paths_1.setIn)(state.errors, path, message) });
+        },
+        setSubmitting: (isSubmitting) => set({ isSubmitting }),
+        validateForm: (values) => validateForm(values),
+        async submitForm() {
+            set({ touched: (0, exports.touchAll)(state.values), isSubmitting: true, submitCount: state.submitCount + 1 });
+            const errors = await validate(state.values);
+            if (Object.keys(errors).length)
+                return set({ isSubmitting: false });
+            const result = options.onSubmit?.(state.values, store);
+            // formik: a synchronous onSubmit leaves isSubmitting true; a promise resets it when it settles.
+            if (result && typeof result.then === "function") {
+                await Promise.resolve(result).finally(() => set({ isSubmitting: false }));
+            }
+        },
+    };
+    return store;
+};
+exports.createStore = createStore;

package/dist/cjs/v3/raw/styles/color.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readableColor = exports.getLuminance = exports.darken = exports.lighten = exports.parseToRgb = void 0;
+// polished 4.3 readableColor / lighten / darken as a RAW port (§4.3 (3): themeToCssVars computes the
+// derived colours of the 2.x styles from the theme). Same parsing, rounding and output format as polished on
+// the colours it accepts (unit-tested against polished); a value it cannot parse (a token theme's
+// `var(--x)`) returns undefined instead of throwing, and the caller decides the fallback.
+const colorNames_1 = require("./colorNames");
+const HEX = /^#[a-fA-F0-9]{6}$/;
+const HEX_ALPHA = /^#[a-fA-F0-9]{8}$/;
+const SHORT_HEX = /^#[a-fA-F0-9]{3}$/;
+const SHORT_HEX_ALPHA = /^#[a-fA-F0-9]{4}$/;
+const RGB = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+const RGBA = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+const HSL = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+const HSLA = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+const int = (s, radix = 10) => parseInt(s, radix);
+const alphaOf = (s) => (parseFloat(s) > 1 ? parseFloat(s) / 100 : parseFloat(s));
+const hslToChannels = (hue, saturation, lightness) => {
+    if (saturation === 0)
+        return [lightness, lightness, lightness];
+    const huePrime = (((hue % 360) + 360) % 360) / 60;
+    const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+    const second = chroma * (1 - Math.abs((huePrime % 2) - 1));
+    const sextant = [[chroma, second, 0], [second, chroma, 0], [0, chroma, second], [0, second, chroma], [second, 0, chroma], [chroma, 0, second]];
+    const [r, g, b] = sextant[Math.floor(huePrime)] ?? [0, 0, 0];
+    const m = lightness - chroma / 2;
+    return [r + m, g + m, b + m];
+};
+const toInts = (channels) => channels.map((c) => Math.round(c * 255));
+/** polished parseToRgb; undefined where polished throws. */
+const parseToRgb = (color) => {
+    if (typeof color !== "string")
+        return undefined;
+    const c = colorNames_1.NAMED_COLORS[color.toLowerCase()] ? `#${colorNames_1.NAMED_COLORS[color.toLowerCase()]}` : color;
+    const pair = (i, j = i + 1) => int(`${c[i]}${c[j]}`, 16);
+    if (HEX.test(c))
+        return { red: pair(1), green: pair(3), blue: pair(5) };
+    if (HEX_ALPHA.test(c))
+        return { red: pair(1), green: pair(3), blue: pair(5), alpha: parseFloat((pair(7) / 255).toFixed(2)) };
+    if (SHORT_HEX.test(c))
+        return { red: pair(1, 1), green: pair(2, 2), blue: pair(3, 3) };
+    if (SHORT_HEX_ALPHA.test(c))
+        return { red: pair(1, 1), green: pair(2, 2), blue: pair(3, 3), alpha: parseFloat((pair(4, 4) / 255).toFixed(2)) };
+    let m = RGB.exec(c);
+    if (m)
+        return { red: int(m[1]), green: int(m[2]), blue: int(m[3]) };
+    m = RGBA.exec(c.substring(0, 50));
+    if (m)
+        return { red: int(m[1]), green: int(m[2]), blue: int(m[3]), alpha: alphaOf(m[4]) };
+    m = HSL.exec(c) ?? HSLA.exec(c.substring(0, 50));
+    if (!m)
+        return undefined;
+    const [red, green, blue] = toInts(hslToChannels(int(m[1]), int(m[2]) / 100, int(m[3]) / 100));
+    return m[4] === undefined ? { red, green, blue } : { red, green, blue, alpha: alphaOf(m[4]) };
+};
+exports.parseToRgb = parseToRgb;
+const rgbToHsl = (c) => {
+    const [r, g, b] = [c.red / 255, c.green / 255, c.blue / 255];
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const lightness = (max + min) / 2;
+    const alpha = c.alpha !== undefined ? { alpha: c.alpha } : {};
+    if (max === min)
+        return { hue: 0, saturation: 0, lightness, ...alpha };
+    const delta = max - min;
+    const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    const hue = (max === r ? (g - b) / delta + (g < b ? 6 : 0) : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4) * 60;
+    return { hue, saturation, lightness, ...alpha };
+};
+const reduceHex = (hex) => (hex.length === 7 && hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6] ? `#${hex[1]}${hex[3]}${hex[5]}` : hex);
+const toHex = (n) => n.toString(16).padStart(2, "0");
+/** polished toColorString of an HSL colour: reduced hex, or rgba() with an alpha below 1. */
+const hslToString = ({ hue, saturation, lightness, alpha }) => {
+    const ints = toInts(hslToChannels(hue, saturation, lightness));
+    if (alpha !== undefined && alpha < 1)
+        return `rgba(${ints.join(",")},${alpha})`;
+    return reduceHex(`#${ints.map(toHex).join("")}`.toLowerCase());
+};
+const shift = (amount, color) => {
+    if (color === "transparent")
+        return color;
+    const rgb = (0, exports.parseToRgb)(color);
+    if (!rgb)
+        return undefined;
+    const hsl = rgbToHsl(rgb);
+    return hslToString({ ...hsl, lightness: Math.max(0, Math.min(1, hsl.lightness + amount)) });
+};
+const lighten = (amount, color) => shift(amount, color);
+exports.lighten = lighten;
+const darken = (amount, color) => shift(-amount, color);
+exports.darken = darken;
+/** polished getLuminance (relative luminance, 3 decimals). */
+const getLuminance = (color) => {
+    if (color === "transparent")
+        return 0;
+    const rgb = (0, exports.parseToRgb)(color);
+    if (!rgb)
+        return undefined;
+    const [r, g, b] = [rgb.red, rgb.green, rgb.blue].map((v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return parseFloat((0.2126 * r + 0.7152 * g + 0.0722 * b).toFixed(3));
+};
+exports.getLuminance = getLuminance;
+/** polished readableColor(color) with its defaults: "#000" on light colours, "#fff" on dark ones. */
+const readableColor = (color) => {
+    const luminance = (0, exports.getLuminance)(color);
+    return luminance === undefined ? undefined : luminance > 0.179 ? "#000" : "#fff";
+};
+exports.readableColor = readableColor;

package/dist/cjs/v3/raw/styles/colorNames.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NAMED_COLORS = void 0;
+// The CSS named colours polished 4.3 accepts (name:hex), for the colour port (color.ts).
+const TABLE = "aliceblue:f0f8ff,antiquewhite:faebd7,aqua:00ffff,aquamarine:7fffd4,azure:f0ffff,beige:f5f5dc,bisque:ffe4c4," +
+    "black:000,blanchedalmond:ffebcd,blue:0000ff,blueviolet:8a2be2,brown:a52a2a,burlywood:deb887,cadetblue:5f9ea0," +
+    "chartreuse:7fff00,chocolate:d2691e,coral:ff7f50,cornflowerblue:6495ed,cornsilk:fff8dc,crimson:dc143c," +
+    "cyan:00ffff,darkblue:00008b,darkcyan:008b8b,darkgoldenrod:b8860b,darkgray:a9a9a9,darkgreen:006400," +
+    "darkgrey:a9a9a9,darkkhaki:bdb76b,darkmagenta:8b008b,darkolivegreen:556b2f,darkorange:ff8c00,darkorchid:9932cc," +
+    "darkred:8b0000,darksalmon:e9967a,darkseagreen:8fbc8f,darkslateblue:483d8b,darkslategray:2f4f4f," +
+    "darkslategrey:2f4f4f,darkturquoise:00ced1,darkviolet:9400d3,deeppink:ff1493,deepskyblue:00bfff,dimgray:696969," +
+    "dimgrey:696969,dodgerblue:1e90ff,firebrick:b22222,floralwhite:fffaf0,forestgreen:228b22,fuchsia:ff00ff," +
+    "gainsboro:dcdcdc,ghostwhite:f8f8ff,gold:ffd700,goldenrod:daa520,gray:808080,green:008000,greenyellow:adff2f," +
+    "grey:808080,honeydew:f0fff0,hotpink:ff69b4,indianred:cd5c5c,indigo:4b0082,ivory:fffff0,khaki:f0e68c," +
+    "lavender:e6e6fa,lavenderblush:fff0f5,lawngreen:7cfc00,lemonchiffon:fffacd,lightblue:add8e6,lightcoral:f08080," +
+    "lightcyan:e0ffff,lightgoldenrodyellow:fafad2,lightgray:d3d3d3,lightgreen:90ee90,lightgrey:d3d3d3," +
+    "lightpink:ffb6c1,lightsalmon:ffa07a,lightseagreen:20b2aa,lightskyblue:87cefa,lightslategray:789," +
+    "lightslategrey:789,lightsteelblue:b0c4de,lightyellow:ffffe0,lime:0f0,limegreen:32cd32,linen:faf0e6," +
+    "magenta:f0f,maroon:800000,mediumaquamarine:66cdaa,mediumblue:0000cd,mediumorchid:ba55d3,mediumpurple:9370db," +
+    "mediumseagreen:3cb371,mediumslateblue:7b68ee,mediumspringgreen:00fa9a,mediumturquoise:48d1cc," +
+    "mediumvioletred:c71585,midnightblue:191970,mintcream:f5fffa,mistyrose:ffe4e1,moccasin:ffe4b5," +
+    "navajowhite:ffdead,navy:000080,oldlace:fdf5e6,olive:808000,olivedrab:6b8e23,orange:ffa500,orangered:ff4500," +
+    "orchid:da70d6,palegoldenrod:eee8aa,palegreen:98fb98,paleturquoise:afeeee,palevioletred:db7093," +
+    "papayawhip:ffefd5,peachpuff:ffdab9,peru:cd853f,pink:ffc0cb,plum:dda0dd,powderblue:b0e0e6,purple:800080," +
+    "rebeccapurple:639,red:f00,rosybrown:bc8f8f,royalblue:4169e1,saddlebrown:8b4513,salmon:fa8072," +
+    "sandybrown:f4a460,seagreen:2e8b57,seashell:fff5ee,sienna:a0522d,silver:c0c0c0,skyblue:87ceeb,slateblue:6a5acd," +
+    "slategray:708090,slategrey:708090,snow:fffafa,springgreen:00ff7f,steelblue:4682b4,tan:d2b48c,teal:008080," +
+    "thistle:d8bfd8,tomato:ff6347,turquoise:40e0d0,violet:ee82ee,wheat:f5deb3,white:fff,whitesmoke:f5f5f5," +
+    "yellow:ff0,yellowgreen:9acd32,";
+exports.NAMED_COLORS = Object.fromEntries(TABLE.split(",").filter(Boolean).map((pair) => pair.split(":")));

package/dist/cjs/v3/raw/styles/defaultStyles.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_STYLES = void 0;
+// GENERATED by src/v3/__styles__/generate.test.tsx (`npm run styles`) from the 2.x styled-components: do not edit.
+// The default stylesheet (S7, §4.3): unlayered, 2.x selectors and specificity, theme values as --fjsf-* variables.
+exports.DEFAULT_STYLES = [
+    ".fjsf-CommonFieldWrapper{display:flex;flex-direction:column;}.fjsf-CommonFieldWrapper input{background-color:var(--fjsf-color-background-input);border-radius:var(--fjsf-border-radius-none);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);padding:var(--fjsf-spacing-s);}.fjsf-CommonFieldWrapper input ::placeholder{color:var(--fjsf-color-text-muted);}.fjsf-CommonFieldWrapper input:read-only{border:none;background-color:transparent;padding:0;}.fjsf-CommonFieldWrapper input:read-only::placeholder{color:var(--fjsf-color-text-default);}.fjsf-CommonFieldWrapper input:read-only:focus,.fjsf-CommonFieldWrapper input:read-only:focus-visible{border:none;stroke:none;box-shadow:none;}.fjsf-CommonFieldWrapper input:disabled{background-color:var(--fjsf-color-background-input);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);padding:var(--fjsf-spacing-s);}.fjsf-CommonFieldWrapper input:disabled::placeholder{color:var(--fjsf-color-text-muted);}.fjsf-CommonFieldWrapper input:disabled:focus,.fjsf-CommonFieldWrapper input:disabled:focus-visible{border:none;stroke:none;box-shadow:none;}.fjsf-CommonFieldWrapper input:focus,.fjsf-CommonFieldWrapper input:focus-visible{outline:var(--fjsf-focus-default-outline);outline-offset:var(--fjsf-focus-default-outline-offset);box-shadow:var(--fjsf-focus-default-box-shadow);}.fjsf-CommonFieldWrapper select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--fjsf-color-background-input);border-radius:var(--fjsf-border-radius-none);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);color:var(--fjsf-color-text-default);cursor:pointer;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);font-weight:var(--fjsf-typography-weight-normal);outline:none;padding:var(--fjsf-spacing-s) var(--fjsf-spacing-xxxxl) var(--fjsf-spacing-s) var(--fjsf-spacing-m);width:100%;background-image:var(--fjsf-select-arrow);background-position:right var(--fjsf-spacing-m) top 50%;background-repeat:no-repeat;background-size:var(--fjsf-spacing-l);}.fjsf-CommonFieldWrapper select[readonly]{background-image:none;border:none;background-color:transparent;padding:0;}.fjsf-CommonFieldWrapper select:focus{outline:var(--fjsf-focus-default-outline);outline-offset:var(--fjsf-focus-default-outline-offset);box-shadow:var(--fjsf-focus-default-box-shadow);}.fjsf-CommonFieldWrapper select:disabled{background-color:var(--fjsf-color-background-input);background-image:var(--fjsf-select-arrow);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);padding:var(--fjsf-spacing-s) var(--fjsf-spacing-xxxxl) var(--fjsf-spacing-s) var(--fjsf-spacing-m);}.fjsf-CommonFieldWrapper select[multiple]{appearance:auto;background-image:none;overflow:auto;}.fjsf-CommonFieldWrapper textarea{background-color:var(--fjsf-color-background-input);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);padding:var(--fjsf-spacing-s);}.fjsf-CommonFieldWrapper textarea:read-only{border:none;background-color:transparent;padding:0;min-height:unset;resize:none;field-sizing:content;}.fjsf-CommonFieldWrapper textarea:read-only::placeholder{color:var(--fjsf-color-text-default);}.fjsf-CommonFieldWrapper textarea:disabled{background-color:var(--fjsf-color-background-input);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);min-height:5rem;padding:var(--fjsf-spacing-s);}.fjsf-CommonFieldWrapper textarea:disabled::placeholder{color:var(--fjsf-color-text-muted);}",
+    ".fjsf-CommonCheckboxStyles input[type=\"checkbox\"]{margin-left:0;-webkit-appearance:none;appearance:none;background-color:var(--fjsf-color-background-input);border-radius:var(--fjsf-border-radius-none);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);color:var(--fjsf-on-input);cursor:pointer;display:grid;font:inherit;height:var(--fjsf-spacing-l);margin:0;place-content:center;width:var(--fjsf-spacing-l);}.fjsf-CommonCheckboxStyles input[type=\"checkbox\"]:before{background-color:CanvasText;content:\"\";width:var(--fjsf-spacing-m);height:var(--fjsf-spacing-m);transform:scale(0);transition:0.12s transform ease-in-out;transform-origin:center;clip-path:polygon(\n        34.469% 100%,\n        1.486% 62.13%,\n        1.486% 62.13%,\n        0.951% 61.408%,\n        0.535% 60.618%,\n        0.238% 59.777%,\n        0.059% 58.903%,\n        0% 58.011%,\n        0.059% 57.119%,\n        0.238% 56.244%,\n        0.535% 55.403%,\n        0.951% 54.613%,\n        1.486% 53.891%,\n        8.662% 45.652%,\n        8.662% 45.652%,\n        9.291% 45.037%,\n        9.979% 44.56%,\n        10.712% 44.218%,\n        11.474% 44.013%,\n        12.25% 43.945%,\n        13.027% 44.013%,\n        13.789% 44.218%,\n        14.521% 44.56%,\n        15.209% 45.037%,\n        15.838% 45.652%,\n        38.057% 71.162%,\n        85.648% 16.521%,\n        85.648% 16.521%,\n        86.277% 15.907%,\n        86.965% 15.429%,\n        87.697% 15.088%,\n        88.459% 14.883%,\n        89.236% 14.815%,\n        90.013% 14.883%,\n        90.775% 15.088%,\n        91.507% 15.429%,\n        92.195% 15.907%,\n        92.824% 16.521%,\n        100% 24.761%,\n        100% 24.761%,\n        100.535% 25.483%,\n        100.951% 26.273%,\n        101.248% 27.114%,\n        101.427% 27.989%,\n        101.486% 28.88%,\n        101.427% 29.772%,\n        101.248% 30.647%,\n        100.951% 31.488%,\n        100.535% 32.278%,\n        100% 33%,\n        41.645% 100%,\n        41.645% 100%,\n        41.016% 100.614%,\n        40.328% 101.092%,\n        39.596% 101.433%,\n        38.834% 101.638%,\n        38.057% 101.706%,\n        37.281% 101.638%,\n        36.519% 101.433%,\n        35.786% 101.092%,\n        35.098% 100.614%,\n        34.469% 100%\n      );}.fjsf-CommonCheckboxStyles input[type=\"checkbox\"]:focus{outline:var(--fjsf-focus-default-outline);outline-offset:var(--fjsf-focus-default-outline-offset);box-shadow:var(--fjsf-focus-default-box-shadow);}.fjsf-CommonCheckboxStyles input[type=\"checkbox\"]:checked{background-color:var(--fjsf-color-intent-default-none);}.fjsf-CommonCheckboxStyles input[type=\"checkbox\"]:checked:before{transform:scale(1);}.fjsf-CommonCheckboxStyles input[type=\"checkbox\"][readonly]{background:transparent;}.fjsf-CommonCheckboxStyles input[type=\"checkbox\"]:disabled{background-color:var(--fjsf-color-background-input);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);}",
+    ".fjsf-IconWrapper{display:flex;}",
+    ".fjsf-ObjectFieldItem{color:var(--fjsf-color-text-default);display:flex;}",
+    ".fjsf-ObjectFieldItemButtons{align-items:flex-start;display:flex;gap:var(--fjsf-spacing-s);margin:var(--fjsf-spacing-s);}",
+    ".fjsf-ObjectFieldButton{line-height:1;padding:var(--fjsf-spacing-s) var(--fjsf-spacing-m);justify-content:center;}",
+    ".fjsf-ObjectFieldSectionWrapper{display:flex;flex-direction:column;gap:var(--fjsf-spacing-m);padding:var(--fjsf-spacing-s) var(--fjsf-spacing-l) var(--fjsf-spacing-s) var(--fjsf-spacing-s);}",
+    ".fjsf-ObjectFieldSectionTitle{display:flex;gap:var(--fjsf-spacing-s);float:left;width:100%;margin:0;justify-content:space-between;}",
+    ".fjsf-ObjectFieldSectionChildrenWrapper{display:flex;flex-direction:column;gap:var(--fjsf-spacing-m);}",
+    ".fjsf-ArrayFieldItem{padding:var(--fjsf-spacing-l);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);margin-bottom:var(--fjsf-spacing-s);}",
+    ".fjsf-BooleanFieldWrapper{align-items:center;color:var(--fjsf-color-text-default);cursor:pointer;display:flex;font-family:var(--fjsf-typography-font-family-base);gap:var(--fjsf-spacing-s);}.fjsf-BooleanFieldWrapper:has(input[readonly]){pointer-events:none;cursor:pointer;}",
+    ".fjsf-Row{display:flex;flex-direction:row;font-family:var(--fjsf-typography-font-family-base);position:relative;}",
+    ".fjsf-DisplayInput{display:flex;flex-grow:1;padding-right:var(--fjsf-spacing-xxxl)!important;}.fjsf-DisplayInput:disabled{background-color:transparent;border:none;}.fjsf-DisplayInput:read-only:focus,.fjsf-DisplayInput:read-only:focus-visible{border:none;stroke:none;box-shadow:none;}",
+    ".fjsf-HiddenNative{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}",
+    ".fjsf-PickerButton{position:absolute;right:0;top:0;height:100%;left:auto;border:none;background:inherit;cursor:pointer;font:inherit;}.fjsf-PickerButton:focus,.fjsf-PickerButton:focus-visible{outline:var(--fjsf-focus-default-outline);outline-offset:var(--fjsf-focus-default-outline-offset);box-shadow:var(--fjsf-focus-default-box-shadow);}.fjsf-PickerButton:disabled{cursor:not-allowed;opacity:0.6;}.fjsf-PickerButton svg{display:flex;color:var(--fjsf-color-intent-default-primary);}",
+    ".fjsf-FileUploadFieldFileUploadButton{background-color:var(--fjsf-color-intent-default-none);color:var(--fjsf-on-intent-none);padding:var(--fjsf-spacing-s) var(--fjsf-spacing-xl);border:none;border-radius:var(--fjsf-border-radius-none);cursor:pointer;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);}",
+    ".fjsf-FileUploadFieldHiddenFileInput{display:none;}",
+    ".fjsf-FileUploadFieldProgressBarContainer{width:7.5rem;height:var(--fjsf-spacing-xl);border-radius:var(--fjsf-stroke-width-thick);background-color:var(--fjsf-color-background-input);position:relative;margin-left:var(--fjsf-spacing-s);}",
+    ".fjsf-FileUploadFieldProgressBar{width:var(--fjsf-progress);height:100%;background-color:var(--fjsf-color-palette-neutral-500);border-radius:var(--fjsf-stroke-width-thick);transition:width 0.2s ease;}",
+    ".fjsf-FileUploadFieldProgressText{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--fjsf-color-palette-neutral-200);font-family:var(--fjsf-typography-font-family-base);font-weight:var(--fjsf-typography-weight-bold);}",
+    ".fjsf-FileUploadFieldFileItemContainer{margin-bottom:var(--fjsf-spacing-s);display:flex;align-items:center;}",
+    ".fjsf-FileUploadFieldRemoveButton{margin-left:var(--fjsf-spacing-s);background-color:transparent;border:none;cursor:pointer;}",
+    ".fjsf-FileUploadFieldFileInfoText{margin-left:var(--fjsf-spacing-s);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);color:var(--fjsf-color-text-default);}",
+    ".fjsf-FileUploadFieldContainer{align-items:center;background-color:var(--fjsf-color-background-input);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);display:flex;flex-direction:column;gap:var(--fjsf-spacing-m);justify-content:center;padding:var(--fjsf-spacing-xxl);margin:var(--fjsf-spacing-s) 0 var(--fjsf-spacing-l) 0;position:relative;transition:0.3s filter ease;}.fjsf-FileUploadFieldContainer:hover{filter:brightness(110%);}:where([data-fjsf-readonly=\"true\"]) > .fjsf-FileUploadFieldContainer{align-items:center;background-color:transparent;border:none;display:flex;flex-direction:column;gap:var(--fjsf-spacing-m);justify-content:center;padding:0;margin:var(--fjsf-spacing-s) 0 var(--fjsf-spacing-l) 0;position:relative;transition:0.3s filter ease;}:where([data-fjsf-readonly=\"true\"]) > .fjsf-FileUploadFieldContainer:hover{filter:none;}",
+    ".fjsf-HiddenFileInput{cursor:pointer;height:100%;opacity:0;position:absolute;width:100%;z-index:1;}",
+    ".fjsf-UploadIcon{color:var(--fjsf-color-palette-neutral-500);height:auto;width:5rem;}",
+    ".fjsf-InfoText{font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);margin:0;}",
+    ".fjsf-Divider{background:linear-gradient(\n    180deg,\n    transparent calc(50% - 2px),\n    var(--fjsf-color-palette-neutral-500) calc(50%),\n    transparent 50%\n  );color:var(--fjsf-color-palette-neutral-500);display:flex;flex-direction:row;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-large);gap:var(--fjsf-spacing-m);justify-content:center;margin:0;text-transform:uppercase;width:70%;}",
+    ".fjsf-DividerText{background-color:var(--fjsf-color-background-input);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-large);margin:0;padding:0 var(--fjsf-spacing-m);text-transform:uppercase;}",
+    ".fjsf-FileInfoText{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);margin-bottom:0;text-align:center;}",
+    ".fjsf-FileInfoTextMinimized{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);margin:0;text-align:center;}",
+    ".fjsf-FileUploadButton{z-index:2;}",
+    ".fjsf-FileUploadText{z-index:2;color:var(--fjsf-color-intent-default-primary);text-decoration:underline;}.fjsf-FileUploadText:hover{color:var(--fjsf-primary-dark);}",
+    ".fjsf-FileItemContainer{display:flex;flex-direction:column;font-family:var(--fjsf-typography-font-family-base);margin:var(--fjsf-spacing-m) 0;width:100%;}",
+    ".fjsf-UploadedFileItemContainer{align-items:flex-start;background-color:var(--fjsf-color-background-default);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);display:flex;flex-direction:row;font-family:var(--fjsf-typography-font-family-base);gap:var(--fjsf-spacing-m);justify-content:space-between;margin:0;min-width:0;padding:var(--fjsf-spacing-m) var(--fjsf-spacing-l);width:100%;}:where([data-fjsf-readonly=\"true\"] > .fjsf-FileUploadFieldContainer) .fjsf-UploadedFileItemContainer{align-items:center;background-color:transparent;border:none;display:flex;flex-direction:row;font-family:var(--fjsf-typography-font-family-base);gap:var(--fjsf-spacing-m);justify-content:space-between;margin:0;min-width:0;padding:0;width:100%;}",
+    ".fjsf-UploadedFileInfoContainer{align-items:flex-start;display:flex;gap:var(--fjsf-spacing-xs);flex:1;min-width:0;}:where([data-fjsf-readonly=\"true\"] > .fjsf-FileUploadFieldContainer) .fjsf-UploadedFileInfoContainer{align-items:center;display:flex;gap:var(--fjsf-spacing-xs);flex:1;min-width:0;}",
+    ".fjsf-UploadedFileWrapper{display:flex;justify-content:left;width:100%;z-index:2;}",
+    ".fjsf-FileTypeIcon{align-items:center;display:flex;}.fjsf-FileTypeIcon svg{color:var(--fjsf-color-intent-default-primary);}",
+    ".fjsf-UploadingFileName{color:var(--fjsf-color-text-default);display:flex;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);margin-bottom:0;min-width:0;overflow-wrap:anywhere;word-break:break-word;}",
+    ".fjsf-UploadedFileName{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);margin-bottom:0;min-width:0;overflow-wrap:anywhere;word-break:break-word;}",
+    ".fjsf-FileSize{color:var(--fjsf-color-text-muted);}",
+    ".fjsf-RemoveButton{background-color:transparent;border:none;cursor:pointer;padding:0;}",
+    ".fjsf-RemoveButtonIcon{color:var(--fjsf-color-intent-default-danger);font-size:1;height:auto;margin-top:var(--fjsf-spacing-xs);transition:0.3s color ease;width:1rem;}.fjsf-RemoveButtonIcon:hover{color:var(--fjsf-color-palette-danger-700);}",
+    ".fjsf-ProgressBarContainer{background-color:var(--fjsf-color-palette-neutral-300);height:var(--fjsf-spacing-s);margin-top:var(--fjsf-spacing-xs);width:100%;}",
+    ".fjsf-ProgressBar{background-color:var(--fjsf-color-palette-primary-600);border-radius:var(--fjsf-stroke-width-thick);height:100%;transition:width 0.2s ease;width:0;width:var(--fjsf-progress);}",
+    ".fjsf-DragOverlay{align-items:center;background-color:var(--fjsf-color-overlay-80);border:4px dashed var(--fjsf-color-intent-default-none);bottom:0;color:var(--fjsf-color-palette-primary-100);display:flex;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-h1);font-weight:var(--fjsf-typography-weight-bold);justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:3;}",
+    ".fjsf-FieldWrapper{display:flex;flex-direction:column;gap:var(--fjsf-spacing-xs);color:var(--fjsf-color-text-default);opacity:1;pointer-events:auto;}.fjsf-FieldWrapper:where([aria-disabled=\"true\"]){display:flex;flex-direction:column;gap:var(--fjsf-spacing-xs);color:var(--fjsf-color-text-default);opacity:0.6;pointer-events:none;}",
+    ".fjsf-FieldTitleInfoWrapper{display:flex;flex-direction:row;flex-wrap:wrap;}",
+    ".fjsf-FieldTitle{font-size:var(--fjsf-typography-size-base);font-family:var(--fjsf-typography-font-family-base);font-weight:var(--fjsf-typography-weight-medium);margin-right:var(--fjsf-spacing-s);color:var(--fjsf-color-text-default);}",
+    ".fjsf-FieldDescription{color:var(--fjsf-color-text-default);margin:0;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);font-weight:var(--fjsf-typography-weight-normal);}:where([data-fjsf-readonly=\"true\"]) > .fjsf-FieldDescription{color:var(--fjsf-color-text-default);margin:0;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);font-weight:var(--fjsf-typography-weight-bold);}",
+    ".fjsf-FieldHelp{color:var(--fjsf-color-text-default);margin:0;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);}",
+    ".fjsf-SelectFieldInput[readonly]{pointer-events:none;}",
+    ".fjsf-RadioFieldContainer{color:var(--fjsf-color-text-default);display:flex;flex-direction:column;font-family:var(--fjsf-typography-font-family-base);gap:var(--fjsf-spacing-s);}.fjsf-RadioFieldContainer:has(input[readonly]){flex-direction:column;gap:var(--fjsf-spacing-xxs);}.fjsf-RadioFieldContainer input[type=\"radio\"]{-webkit-appearance:none;appearance:none;background-color:var(--fjsf-color-background-input);border-radius:var(--fjsf-border-radius-circle);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);color:var(--fjsf-on-input);cursor:pointer;display:grid;font:inherit;height:var(--fjsf-spacing-l);margin:0;place-content:center;width:var(--fjsf-spacing-l);}.fjsf-RadioFieldContainer input[type=\"radio\"]:before{background-color:CanvasText;border-radius:var(--fjsf-border-radius-circle);content:\"\";display:inline-block;height:var(--fjsf-spacing-s);transform:scale(0);transition:0.12s transform ease-in-out;width:var(--fjsf-spacing-s);}.fjsf-RadioFieldContainer input[type=\"radio\"]:focus{outline:var(--fjsf-focus-default-outline);outline-offset:var(--fjsf-focus-default-outline-offset);box-shadow:var(--fjsf-focus-default-box-shadow);}.fjsf-RadioFieldContainer input[type=\"radio\"]:checked{background-color:var(--fjsf-color-intent-default-none);}.fjsf-RadioFieldContainer input[type=\"radio\"]:checked:before{transform:scale(1);}.fjsf-RadioFieldContainer input[type=\"radio\"][readonly]{background-color:transparent;}",
+    ".fjsf-RadioFieldElement{display:inline-flex;align-items:center;}.fjsf-RadioFieldElement:has(input[readonly]){pointer-events:none;}",
+    ".fjsf-RadioFieldLabel{margin-left:var(--fjsf-spacing-xs);line-height:var(--fjsf-typography-line-height-small);}",
+    ".fjsf-MultipleChoiceFieldContainer{font-family:var(--fjsf-typography-font-family-base);flex-wrap:wrap;justify-content:start;flex-direction:column;gap:var(--fjsf-spacing-s);margin-top:var(--fjsf-spacing-s);}.fjsf-MultipleChoiceFieldContainer:has(input[readonly]){flex-direction:column;gap:var(--fjsf-spacing-s);}",
+    ".fjsf-SearchableMultiTagSelectFieldContainer{display:flex;flex-direction:column;font-family:var(--fjsf-typography-font-family-base);}",
+    ".fjsf-SearchableMultiTagSelectFieldSearchContainer{display:flex;flex-direction:column;}",
+    ".fjsf-SearchableMultiTagSelectFieldBadgeContainer{font-family:var(--fjsf-typography-font-family-base);margin:var(--fjsf-spacing-xs) 0;display:inline-flex;gap:var(--fjsf-stroke-width-thin);}",
+    ".fjsf-SearchableMultiTagSelectFieldBadge{color:var(--fjsf-color-background-input);background:var(--fjsf-color-text-default);padding:0 var(--fjsf-spacing-s);border-radius:var(--fjsf-border-radius-none);display:flex;margin-right:var(--fjsf-spacing-xs);gap:var(--fjsf-spacing-s);}",
+    ".fjsf-SearchableMultiTagSelectFieldBadgeCloseElement{background:transparent;color:var(--fjsf-color-background-input);border:none;cursor:pointer;margin:0;padding:0;font-size:var(--fjsf-typography-size-small);align-self:center;font-family:var(--fjsf-typography-font-family-base);}",
+    ".fjsf-SearchableMultiTagSelectFieldOptionList{width:100%;padding:unset;margin:unset;border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);border-radius:var(--fjsf-border-radius-none);position:absolute;background:var(--fjsf-color-background-default);top:100%;z-index:1000;}",
+    ".fjsf-SearchableMultiTagSelectFieldOptionListItem{cursor:pointer;list-style-type:none;padding:var(--fjsf-spacing-xxs) var(--fjsf-spacing-xs);height:var(--fjsf-spacing-xl);}.fjsf-SearchableMultiTagSelectFieldOptionListItem:hover{background:var(--fjsf-color-background-input);}",
+    ".fjsf-SearchableMultiTagSelectFieldOptionListWithoutItem{cursor:default;color:var(--fjsf-color-background-default);list-style-type:none;padding:var(--fjsf-spacing-xxs) var(--fjsf-spacing-xs);height:var(--fjsf-spacing-xl);}",
+    ".fjsf-SearchableSelectFieldDropdownContainer{overflow-y:auto;overflow-x:auto;max-height:6rem;white-space:nowrap;}",
+    ".fjsf-SearchableSelectFieldListOption{cursor:default;}",
+    ".fjsf-SearchableSelectFieldListExpand{text-decoration:underline;}.fjsf-SearchableSelectFieldListExpand:hover{background:none;}",
+    ".fjsf-SearchableSelectFieldNotFound{cursor:default;}.fjsf-SearchableSelectFieldNotFound:hover{background:none;}",
+    ".fjsf-SearchableSelectFieldInputElement{width:100%;padding-right:var(--fjsf-spacing-xxl);text-overflow:ellipsis;}",
+    ".fjsf-SearchableSelectFieldClearButton{background-color:var(--fjsf-color-palette-neutral-500);border-radius:var(--fjsf-border-radius-circle);bottom:0;color:var(--fjsf-on-neutral-500);cursor:pointer;font-size:var(--fjsf-typography-size-small);height:1rem;line-height:1rem;margin:auto;min-width:1rem;position:absolute;right:var(--fjsf-spacing-xs);text-align:center;top:0;}",
+    ".fjsf-SearchableSelectFieldInputContainer{display:flex;}",
+    ".fjsf-TextAreaFieldInput{background-color:var(--fjsf-color-background-input);color:var(--fjsf-color-text-default);display:inline-block;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);min-height:5rem;padding:var(--fjsf-spacing-s);}",
+    ".fjsf-ToggleFieldToggle{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;height:1rem;background:var(--fjsf-color-intent-default-none);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);-webkit-transition:0.4s;transition:0.4s;border-radius:var(--fjsf-border-radius-circle);}.fjsf-ToggleFieldToggle:before{position:absolute;content:\"\";height:0.9rem;width:0.9rem;background:var(--fjsf-color-background-default);-webkit-transition:0.4s;transition:0.4s;border-radius:var(--fjsf-border-radius-circle);top:0.05rem;left:0.13rem;}",
+    ".fjsf-ToggleFieldLabel{position:relative;display:inline-block;width:2rem;}.fjsf-ToggleFieldLabel:has(input[readonly]){pointer-events:none;}",
+    ".fjsf-ToggleFieldInputElement{opacity:0;width:0;height:0;}.fjsf-ToggleFieldInputElement:focus+.fjsf-ToggleFieldToggle{outline:var(--fjsf-focus-default-outline);outline-offset:var(--fjsf-focus-default-outline-offset);box-shadow:var(--fjsf-focus-default-box-shadow);}.fjsf-ToggleFieldInputElement:checked+.fjsf-ToggleFieldToggle:before{transform:translateX(0.75rem);}",
+    ".fjsf-ObjectFieldTemplateWrapper{display:flex;flex-direction:column;gap:var(--fjsf-spacing-m);color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);margin-inline:0;margin-bottom:var(--fjsf-spacing-xs);}.fjsf-ObjectFieldTemplateWrapper:has(input[disabled]),.fjsf-ObjectFieldTemplateWrapper:has(option[disabled]),.fjsf-ObjectFieldTemplateWrapper:has(select[disabled]),.fjsf-ObjectFieldTemplateWrapper:has(textarea[disabled]){border-color:var(--fjsf-border-muted);}.fjsf-ObjectFieldTemplateWrapper:has(input[disabled]) legend,.fjsf-ObjectFieldTemplateWrapper:has(option[disabled]) legend,.fjsf-ObjectFieldTemplateWrapper:has(select[disabled]) legend,.fjsf-ObjectFieldTemplateWrapper:has(textarea[disabled]) legend{color:var(--fjsf-text-muted);}.fjsf-ObjectFieldTemplateWrapper:has(input[disabled]) legend+p,.fjsf-ObjectFieldTemplateWrapper:has(option[disabled]) legend+p,.fjsf-ObjectFieldTemplateWrapper:has(select[disabled]) legend+p,.fjsf-ObjectFieldTemplateWrapper:has(textarea[disabled]) legend+p{color:var(--fjsf-text-muted);}",
+    ".fjsf-ObjectFieldTemplateTitle{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);}",
+    ".fjsf-ObjectFieldTitleInfoWrapper{display:flex;flex-direction:row;flex-wrap:wrap;}",
+    ".fjsf-CollapsibleObjectFieldTemplateTitle{display:flex;align-items:center;gap:var(--fjsf-spacing-s);}",
+    ".fjsf-CollapsibleObjectFieldTemplateToggle{display:flex;flex-direction:column;}",
+    ".fjsf-ErrorText{color:var(--fjsf-color-intent-default-danger);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);margin-top:var(--fjsf-spacing-xs);}",
+    ".fjsf-FieldInfoBoxElement{font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);margin:0;min-width:max-content;opacity:0;position:absolute;transition:opacity 0.5s;visibility:hidden;word-wrap:break-word;z-index:1080;top:auto;bottom:140%;left:50%;right:50%;transform:translate(\n    -50%,\n    0\n  );}.fjsf-FieldInfoBoxElement:where([data-fjsf-info-position=\"right\"]){font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);margin:0;min-width:max-content;opacity:0;position:absolute;transition:opacity 0.5s;visibility:hidden;word-wrap:break-word;z-index:1080;top:50%;bottom:50%;left:100%;right:auto;transform:translate(\n    0,\n    -50%\n  );}.fjsf-FieldInfoBoxElement:where([data-fjsf-info-position=\"bottom\"]){font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);margin:0;min-width:max-content;opacity:0;position:absolute;transition:opacity 0.5s;visibility:hidden;word-wrap:break-word;z-index:1080;top:140%;bottom:auto;left:50%;right:50%;transform:translate(\n    -50%,\n    0\n  );}.fjsf-FieldInfoBoxElement:where([data-fjsf-info-position=\"left\"]){font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);margin:0;min-width:max-content;opacity:0;position:absolute;transition:opacity 0.5s;visibility:hidden;word-wrap:break-word;z-index:1080;top:50%;bottom:50%;left:auto;right:100%;transform:translate(\n    0,\n    -50%\n  );}",
+    ".fjsf-FieldInfoBoxArrowElement{top:100%;left:50%;bottom:unset;border:solid transparent;content:\"\";height:0;width:0;position:absolute;pointer-events:none;border-top-color:var(--fjsf-color-intent-default-warning);border-bottom-color:transparent;border-right-color:transparent;border-left-color:transparent;border-width:5px;margin-left:-5px;}.fjsf-FieldInfoBoxArrowElement:where([data-fjsf-info-position=\"right\"]){top:40%;left:-2%;bottom:unset;border:solid transparent;content:\"\";height:0;width:0;position:absolute;pointer-events:none;border-top-color:transparent;border-bottom-color:transparent;border-right-color:var(--fjsf-color-intent-default-warning);border-left-color:transparent;border-width:5px;margin-left:-5px;}.fjsf-FieldInfoBoxArrowElement:where([data-fjsf-info-position=\"bottom\"]){top:unset;left:50%;bottom:100%;border:solid transparent;content:\"\";height:0;width:0;position:absolute;pointer-events:none;border-top-color:transparent;border-bottom-color:var(--fjsf-color-intent-default-warning);border-right-color:transparent;border-left-color:transparent;border-width:5px;margin-left:-5px;}.fjsf-FieldInfoBoxArrowElement:where([data-fjsf-info-position=\"left\"]){top:40%;left:102.5%;bottom:unset;border:solid transparent;content:\"\";height:0;width:0;position:absolute;pointer-events:none;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-left-color:var(--fjsf-color-intent-default-warning);border-width:5px;margin-left:-5px;}",
+    ".fjsf-FieldInfoBoxInnerElement{background:var(--fjsf-color-intent-default-warning);border-radius:var(--fjsf-border-radius-none);border:none;color:var(--fjsf-color-text-default);cursor:default;font-size:var(--fjsf-typography-size-small);line-height:var(--fjsf-typography-line-height-small);max-width:30ch;padding:var(--fjsf-spacing-s) var(--fjsf-spacing-m);text-align:left;white-space:pre-wrap;}",
+    ".fjsf-InlineFieldInfoBoxInnerElement{background:var(--fjsf-color-intent-default-warning);border-radius:var(--fjsf-border-radius-none);border:none;color:var(--fjsf-color-text-default);cursor:default;font-size:var(--fjsf-typography-size-small);line-height:var(--fjsf-typography-line-height-small);padding:var(--fjsf-spacing-s) var(--fjsf-spacing-m);text-align:left;white-space:pre-wrap;}",
+    ".fjsf-FieldInfoContainer{background:none;border-radius:var(--fjsf-border-radius-circle);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);color:var(--fjsf-color-text-default);cursor:pointer;font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);margin:0 var(--fjsf-spacing-s) 0 calc(-1 * var(--fjsf-spacing-xs));outline:none;padding:0 var(--fjsf-spacing-s);position:relative;text-decoration:unset;width:fit-content;}.fjsf-FieldInfoContainer:active,.fjsf-FieldInfoContainer:focus{color:var(--fjsf-on-text);background:var(--fjsf-color-text-default);}.fjsf-FieldInfoContainer:active .fjsf-FieldInfoBoxElement,.fjsf-FieldInfoContainer:focus .fjsf-FieldInfoBoxElement{opacity:1;visibility:visible;}",
+    ".fjsf-InlineFieldInfoWrapper{display:flex;margin:var(--fjsf-spacing-m) 0;width:100%;}",
+    ".fjsf-Form{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);}.fjsf-Form :focus{outline:var(--fjsf-focus-default-outline);outline-offset:var(--fjsf-focus-default-outline-offset);box-shadow:var(--fjsf-focus-default-box-shadow);}",
+    ".fjsf-RequiredIndicator ::before{content:\"*\";}",
+    ".fjsf-view-FieldWrapper{color:var(--fjsf-color-text-default);display:flex;flex-direction:column;font-family:var(--fjsf-typography-font-family-base);gap:var(--fjsf-spacing-s);width:min(100%, 70rem);}",
+    ".fjsf-view-FieldTitle{color:var(--fjsf-color-text-default);display:inline-block;font-family:var(--fjsf-typography-font-family-heading);font-size:var(--fjsf-typography-size-base);font-weight:var(--fjsf-typography-weight-bold);width:100%;}",
+    ".fjsf-view-FieldDescription{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-weight:var(--fjsf-typography-weight-normal);font-style:italic;font-size:var(--fjsf-typography-size-small);}",
+    ".fjsf-view-StringFieldValue{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);font-weight:var(--fjsf-typography-weight-normal);padding-left:var(--fjsf-spacing-l);white-space:pre-line;}",
+    ".fjsf-view-TextAreaValue{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);font-weight:var(--fjsf-typography-weight-normal);padding-left:var(--fjsf-spacing-l);white-space:pre-line;}",
+    ".fjsf-view-ArrayFieldItem{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);font-weight:var(--fjsf-typography-weight-normal);background-color:var(--fjsf-color-background-default);padding:var(--fjsf-spacing-l);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);}",
+    ".fjsf-view-EJSFieldValue{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);font-weight:var(--fjsf-typography-weight-normal);padding-left:var(--fjsf-spacing-l);width:100%;}",
+    ".fjsf-view-NotSelected{display:flex;align-items:start;}",
+    ".fjsf-view-Selected{display:flex;align-items:start;}",
+    ".fjsf-view-SelectedBox{color:var(--fjsf-color-text-default);background:var(--fjsf-color-background-default);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);display:flex;justify-content:center;align-items:start;min-width:1rem;min-height:1rem;}",
+    ".fjsf-view-NotSelectedBox{background:var(--fjsf-color-background-default);border:var(--fjsf-stroke-width-thin) solid var(--fjsf-color-border-default);border-radius:var(--fjsf-border-radius-none);display:inline-flex;min-width:1rem;min-height:1rem;}",
+    ".fjsf-view-SelectedIcon{color:var(--fjsf-color-text-default);width:0.75rem;}",
+    ".fjsf-view-BooleanFieldWrapper{font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-small);padding-left:var(--fjsf-spacing-l);-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;}",
+    ".fjsf-view-MultipleChoiceFieldWrapper{font-size:var(--fjsf-typography-size-small);padding-left:var(--fjsf-spacing-l);-webkit-column-break-inside:auto;page-break-inside:auto;break-inside:auto;}.fjsf-view-MultipleChoiceFieldWrapper label{align-items:start;}",
+    ".fjsf-view-Form{display:flex;flex-direction:column;gap:var(--fjsf-spacing-s);}",
+    ".fjsf-view-ObjectFieldTemplateWrapper{display:flex;flex-direction:column;gap:var(--fjsf-spacing-l);}@media print{.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"1\"],.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"2\"]{display:block;break-inside:auto;page-break-inside:auto;}.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"1\"]>div,.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"2\"]>div{margin-bottom:1rem;}.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"1\"]>div:last-child,.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"2\"]>div:last-child{margin-bottom:0;}}",
+    ".fjsf-view-ObjectFieldTemplateTitle{color:var(--fjsf-color-text-default);font-family:var(--fjsf-typography-font-family-base);font-size:var(--fjsf-typography-size-base);font-weight:var(--fjsf-typography-weight-medium);page-break-after:avoid;break-after:avoid;}.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level]>.fjsf-view-ObjectFieldTemplateTitle{font-size:var(--fjsf-typography-size-base);}.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"0\"]>.fjsf-view-ObjectFieldTemplateTitle{font-family:var(--fjsf-typography-font-family-heading);font-size:var(--fjsf-typography-size-h2);font-weight:var(--fjsf-typography-weight-bold);max-width:85%;}.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"1\"]>.fjsf-view-ObjectFieldTemplateTitle{font-size:var(--fjsf-typography-size-h3);font-weight:var(--fjsf-typography-weight-medium);margin-top:var(--fjsf-spacing-m);}.fjsf-view-ObjectFieldTemplateWrapper[data-fjsf-level=\"2\"]>.fjsf-view-ObjectFieldTemplateTitle{font-size:var(--fjsf-typography-size-h4);font-weight:var(--fjsf-typography-weight-medium);}",
+    ".fjsf-view-FormWrapper{font-family:var(--fjsf-typography-font-family-base);}",
+].join("\n");

package/dist/cjs/v3/raw/styles/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DERIVED_URLS = exports.DERIVED_COLORS = exports.FOCUS_PROPERTIES = exports.varName = exports.cssVarsToString = exports.themeToCssVars = exports.fjsfSelectors = exports.fjsfClassNames = exports.getDefaultStyles = void 0;
+// S7 styling (§4.3): the generated default stylesheet, the --fjsf-* theme variables and the frozen
+// `fjsf-<LegacyName>` class contract.
+const componentTable_1 = require("../model/form/componentTable");
+const defaultStyles_1 = require("./defaultStyles");
+/** The default stylesheet (also `styles.css`): inline it before your own CSS, e.g. in PDF HTML. */
+const getDefaultStyles = () => defaultStyles_1.DEFAULT_STYLES;
+exports.getDefaultStyles = getDefaultStyles;
+/** Form registry names -> their class (an alias gives the class its element carries). Frozen for 3.x. */
+exports.fjsfClassNames = Object.freeze(Object.fromEntries(Object.entries(componentTable_1.FORM_COMPONENTS)
+    .filter((e) => Array.isArray(e[1]))
+    .map(([name, chain]) => [name, `fjsf-${chain[chain.length - 1]}`])));
+/** The same as selectors (`.fjsf-X`), what `${FormComponents.X}` interpolates. */
+exports.fjsfSelectors = Object.freeze(Object.fromEntries(Object.entries(exports.fjsfClassNames).map(([name, cls]) => [name, `.${cls}`])));
+var themeToCssVars_1 = require("./themeToCssVars");
+Object.defineProperty(exports, "themeToCssVars", { enumerable: true, get: function () { return themeToCssVars_1.themeToCssVars; } });
+Object.defineProperty(exports, "cssVarsToString", { enumerable: true, get: function () { return themeToCssVars_1.cssVarsToString; } });
+var vars_1 = require("./vars");
+Object.defineProperty(exports, "varName", { enumerable: true, get: function () { return vars_1.varName; } });
+Object.defineProperty(exports, "FOCUS_PROPERTIES", { enumerable: true, get: function () { return vars_1.FOCUS_PROPERTIES; } });
+Object.defineProperty(exports, "DERIVED_COLORS", { enumerable: true, get: function () { return vars_1.DERIVED_COLORS; } });
+Object.defineProperty(exports, "DERIVED_URLS", { enumerable: true, get: function () { return vars_1.DERIVED_URLS; } });

package/dist/cjs/v3/raw/styles/themeToCssVars.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssVarsToString = exports.themeToCssVars = void 0;
+// themeToCssVars (S7, §4.3 (3)): the component-library theme shape as the --fjsf-* variables styles.css
+// reads, so a consumer keeps one theme. Also token themes: a value polished could not parse (`var(--x)`)
+// still gives every derived colour (a color-mix() for lighten/darken; "#000" for readableColor, which needs a
+// real colour to decide) instead of throwing as 2.x did.
+const json_1 = require("../core/json");
+const color_1 = require("./color");
+const vars_1 = require("./vars");
+/** Values that could end a declaration or the style element are not written (the theme is CSS text). */
+const UNSAFE = /[;{}<>]/;
+const leaf = (value) => (typeof value === "string" || typeof value === "number" ? String(value).trim() : undefined);
+/** "outline: 2px solid blue; box-shadow: none" -> the FOCUS_PROPERTIES; a property it does not set reverts. */
+const focusVars = (key, declarations, out) => {
+    const given = new Map(String(declarations ?? "")
+        .split(";")
+        .map((d) => d.split(":"))
+        .filter((d) => d.length >= 2)
+        .map(([p, ...v]) => [p.trim().toLowerCase(), v.join(":").trim()]));
+    for (const p of vars_1.FOCUS_PROPERTIES) {
+        const v = given.get(p);
+        out[(0, vars_1.varName)(["focus", key, p])] = v && !UNSAFE.test(v) ? v : "revert";
+    }
+};
+const derivedValue = (fn, amount, color) => {
+    if (fn === "readableColor")
+        return (0, color_1.readableColor)(color) ?? "#000";
+    const computed = fn === "lighten" ? (0, color_1.lighten)(amount, color) : (0, color_1.darken)(amount, color);
+    return computed ?? `color-mix(in srgb, ${color}, ${fn === "lighten" ? "white" : "black"} ${Math.round(amount * 100)}%)`;
+};
+/** The --fjsf-* variables of a theme (set them on :root or on a form's container). */
+const themeToCssVars = (theme) => {
+    const out = {};
+    const walk = (node, keys) => {
+        if (keys.length === 2 && keys[0] === "focus")
+            return focusVars(keys[1], node, out);
+        if ((0, json_1.isPlainObject)(node))
+            return Object.entries(node).forEach(([k, v]) => walk(v, [...keys, k]));
+        const value = leaf(node);
+        if (value !== undefined && !UNSAFE.test(value))
+            out[(0, vars_1.varName)(keys)] = value;
+    };
+    walk(theme, []);
+    for (const d of vars_1.DERIVED_COLORS) {
+        const color = out[(0, vars_1.varName)(d.path)];
+        if (color !== undefined)
+            out[d.name] = derivedValue(d.fn, "amount" in d ? d.amount : undefined, color);
+    }
+    for (const d of vars_1.DERIVED_URLS) {
+        const value = out[(0, vars_1.varName)(d.path)];
+        if (value !== undefined)
+            out[d.name] = d.url(value);
+    }
+    return out;
+};
+exports.themeToCssVars = themeToCssVars;
+/** The variables as one CSS rule, e.g. for a <style> element or the PDF HTML. */
+const cssVarsToString = (vars, selector = ":root") => `${selector}{${Object.entries(vars).map(([k, v]) => `${k}:${v};`).join("")}}`;
+exports.cssVarsToString = cssVarsToString;

package/dist/cjs/v3/raw/styles/vars.js

@@ -0,0 +1,28 @@
+"use strict";
+// The --fjsf-* variable contract of styles.css (S7, §4.3 (3)): one variable per theme leaf, the focus
+// declarations as three properties, and the derived colours 2.x computed with polished.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DERIVED_URLS = exports.DERIVED_COLORS = exports.FOCUS_PROPERTIES = exports.varName = void 0;
+/** `--fjsf-color-text-default` for theme.color.text.default (camelCase keys become kebab-case). */
+const varName = (keys) => `--fjsf-${keys.map((k) => k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)).join("-")}`;
+exports.varName = varName;
+/** A theme's `focus.*` value is a declaration list; styles.css applies these three properties of it. */
+exports.FOCUS_PROPERTIES = ["outline", "outline-offset", "box-shadow"];
+/** The derived colours: variable, polished function, amount and the theme path it reads. */
+exports.DERIVED_COLORS = [
+    { name: "--fjsf-on-text", fn: "readableColor", path: ["color", "text", "default"] },
+    { name: "--fjsf-on-input", fn: "readableColor", path: ["color", "background", "input"] },
+    { name: "--fjsf-on-intent-none", fn: "readableColor", path: ["color", "intent", "default", "none"] },
+    { name: "--fjsf-on-neutral-500", fn: "readableColor", path: ["color", "palette", "neutral", "500"] },
+    { name: "--fjsf-border-muted", fn: "lighten", amount: 0.4, path: ["color", "border", "default"] },
+    { name: "--fjsf-text-muted", fn: "lighten", amount: 0.4, path: ["color", "text", "default"] },
+    { name: "--fjsf-primary-dark", fn: "darken", amount: 0.3, path: ["color", "intent", "default", "primary"] },
+];
+/** 2.x encoded a theme colour into an SVG data URL (Form/styles/common.tsx:78,96, the select arrow): a variable holds the whole url(). */
+exports.DERIVED_URLS = [
+    {
+        name: "--fjsf-select-arrow",
+        path: ["color", "text", "default"],
+        url: (color) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 320 512'%3E%3Cpath fill='${encodeURIComponent(color)}' d='M31 192h258c17 0 26 21 14 33l-129 129c-8 8-21 8-29 0L17 225c-12-12-3-33 14-33z'/%3E%3C/svg%3E")`,
+    },
+];