@bpmn-io/form-js-playground 1.4.1 → 1.5.0

package/dist/form-playground.umd.js

@@ -2877,6 +2877,17 @@
       return sysLocaleCache;
     }
   }
+  let weekInfoCache = {};
+  function getCachedWeekInfo(locString) {
+    let data = weekInfoCache[locString];
+    if (!data) {
+      const locale = new Intl.Locale(locString);
+      // browsers currently implement this as a property, but spec says it should be a getter function
+      data = "getWeekInfo" in locale ? locale.getWeekInfo() : locale.weekInfo;
+      weekInfoCache[locString] = data;
+    }
+    return data;
+  }
   function parseLocaleString(localeStr) {
     // I really want to avoid writing a BCP 47 parser
     // see, e.g. https://github.com/wooorm/bcp-47
@@ -2933,7 +2944,7 @@
   function mapMonths(f) {
     const ms = [];
     for (let i = 1; i <= 12; i++) {
-      const dt = DateTime.utc(2016, i, 1);
+      const dt = DateTime.utc(2009, i, 1);
       ms.push(f(dt));
     }
     return ms;
@@ -2946,8 +2957,8 @@
     }
     return ms;
   }
-  function listStuff(loc, length, defaultOK, englishFn, intlFn) {
-    const mode = loc.listingMode(defaultOK);
+  function listStuff(loc, length, englishFn, intlFn) {
+    const mode = loc.listingMode();
     if (mode === "error") {
       return null;
     } else if (mode === "en") {
@@ -3005,8 +3016,12 @@
   class PolyDateFormatter {
     constructor(dt, intl, opts) {
       this.opts = opts;
+      this.originalZone = undefined;
       let z = undefined;
-      if (dt.zone.isUniversal) {
+      if (this.opts.timeZone) {
+        // Don't apply any workarounds if a timeZone is explicitly provided in opts
+        this.dt = dt;
+      } else if (dt.zone.type === "fixed") {
         // UTC-8 or Etc/UTC-8 are not part of tzdata, only Etc/GMT+8 and the like.
         // That is why fixed-offset TZ is set to that unless it is:
         // 1. Representing offset 0 when UTC is used to maintain previous behavior and does not become GMT.
@@ -3019,25 +3034,27 @@
           z = offsetZ;
           this.dt = dt;
         } else {
-          // Not all fixed-offset zones like Etc/+4:30 are present in tzdata.
-          // So we have to make do. Two cases:
-          // 1. The format options tell us to show the zone. We can't do that, so the best
-          // we can do is format the date in UTC.
-          // 2. The format options don't tell us to show the zone. Then we can adjust them
-          // the time and tell the formatter to show it to us in UTC, so that the time is right
-          // and the bad zone doesn't show up.
+          // Not all fixed-offset zones like Etc/+4:30 are present in tzdata so
+          // we manually apply the offset and substitute the zone as needed.
           z = "UTC";
-          if (opts.timeZoneName) {
-            this.dt = dt;
-          } else {
-            this.dt = dt.offset === 0 ? dt : DateTime.fromMillis(dt.ts + dt.offset * 60 * 1000);
-          }
+          this.dt = dt.offset === 0 ? dt : dt.setZone("UTC").plus({
+            minutes: dt.offset
+          });
+          this.originalZone = dt.zone;
         }
       } else if (dt.zone.type === "system") {
         this.dt = dt;
-      } else {
+      } else if (dt.zone.type === "iana") {
         this.dt = dt;
         z = dt.zone.name;
+      } else {
+        // Custom zones can have any offset / offsetName so we just manually
+        // apply the offset and substitute the zone as needed.
+        z = "UTC";
+        this.dt = dt.setZone("UTC").plus({
+          minutes: dt.offset
+        });
+        this.originalZone = dt.zone;
       }
       const intlOpts = {
         ...this.opts
@@ -3046,10 +3063,34 @@
       this.dtf = getCachedDTF(intl, intlOpts);
     }
     format() {
+      if (this.originalZone) {
+        // If we have to substitute in the actual zone name, we have to use
+        // formatToParts so that the timezone can be replaced.
+        return this.formatToParts().map(({
+          value
+        }) => value).join("");
+      }
       return this.dtf.format(this.dt.toJSDate());
     }
     formatToParts() {
-      return this.dtf.formatToParts(this.dt.toJSDate());
+      const parts = this.dtf.formatToParts(this.dt.toJSDate());
+      if (this.originalZone) {
+        return parts.map(part => {
+          if (part.type === "timeZoneName") {
+            const offsetName = this.originalZone.offsetName(this.dt.ts, {
+              locale: this.dt.locale,
+              format: this.opts.timeZoneName
+            });
+            return {
+              ...part,
+              value: offsetName
+            };
+          } else {
+            return part;
+          }
+        });
+      }
+      return parts;
     }
     resolvedOptions() {
       return this.dtf.resolvedOptions();
@@ -3084,6 +3125,11 @@
       }
     }
   }
+  const fallbackWeekSettings = {
+    firstDay: 1,
+    minimalDays: 4,
+    weekend: [6, 7]
+  };
 
   /**
    * @private
@@ -3091,15 +3137,16 @@
 
   class Locale {
     static fromOpts(opts) {
-      return Locale.create(opts.locale, opts.numberingSystem, opts.outputCalendar, opts.defaultToEN);
+      return Locale.create(opts.locale, opts.numberingSystem, opts.outputCalendar, opts.weekSettings, opts.defaultToEN);
     }
-    static create(locale, numberingSystem, outputCalendar, defaultToEN = false) {
+    static create(locale, numberingSystem, outputCalendar, weekSettings, defaultToEN = false) {
       const specifiedLocale = locale || Settings.defaultLocale;
       // the system locale is useful for human readable strings but annoying for parsing/formatting known formats
       const localeR = specifiedLocale || (defaultToEN ? "en-US" : systemLocale());
       const numberingSystemR = numberingSystem || Settings.defaultNumberingSystem;
       const outputCalendarR = outputCalendar || Settings.defaultOutputCalendar;
-      return new Locale(localeR, numberingSystemR, outputCalendarR, specifiedLocale);
+      const weekSettingsR = validateWeekSettings(weekSettings) || Settings.defaultWeekSettings;
+      return new Locale(localeR, numberingSystemR, outputCalendarR, weekSettingsR, specifiedLocale);
     }
     static resetCache() {
       sysLocaleCache = null;
@@ -3110,15 +3157,17 @@
     static fromObject({
       locale,
       numberingSystem,
-      outputCalendar
+      outputCalendar,
+      weekSettings
     } = {}) {
-      return Locale.create(locale, numberingSystem, outputCalendar);
+      return Locale.create(locale, numberingSystem, outputCalendar, weekSettings);
     }
-    constructor(locale, numbering, outputCalendar, specifiedLocale) {
+    constructor(locale, numbering, outputCalendar, weekSettings, specifiedLocale) {
       const [parsedLocale, parsedNumberingSystem, parsedOutputCalendar] = parseLocaleString(locale);
       this.locale = parsedLocale;
       this.numberingSystem = numbering || parsedNumberingSystem || null;
       this.outputCalendar = outputCalendar || parsedOutputCalendar || null;
+      this.weekSettings = weekSettings;
       this.intl = intlConfigString(this.locale, this.numberingSystem, this.outputCalendar);
       this.weekdaysCache = {
         format: {},
@@ -3148,7 +3197,7 @@
       if (!alts || Object.getOwnPropertyNames(alts).length === 0) {
         return this;
       } else {
-        return Locale.create(alts.locale || this.specifiedLocale, alts.numberingSystem || this.numberingSystem, alts.outputCalendar || this.outputCalendar, alts.defaultToEN || false);
+        return Locale.create(alts.locale || this.specifiedLocale, alts.numberingSystem || this.numberingSystem, alts.outputCalendar || this.outputCalendar, validateWeekSettings(alts.weekSettings) || this.weekSettings, alts.defaultToEN || false);
       }
     }
     redefaultToEN(alts = {}) {
@@ -3163,8 +3212,8 @@
         defaultToEN: false
       });
     }
-    months(length, format = false, defaultOK = true) {
-      return listStuff(this, length, defaultOK, months, () => {
+    months(length, format = false) {
+      return listStuff(this, length, months, () => {
         const intl = format ? {
             month: length,
             day: "numeric"
@@ -3178,8 +3227,8 @@
         return this.monthsCache[formatStr][length];
       });
     }
-    weekdays(length, format = false, defaultOK = true) {
-      return listStuff(this, length, defaultOK, weekdays, () => {
+    weekdays(length, format = false) {
+      return listStuff(this, length, weekdays, () => {
         const intl = format ? {
             weekday: length,
             year: "numeric",
@@ -3195,8 +3244,8 @@
         return this.weekdaysCache[formatStr][length];
       });
     }
-    meridiems(defaultOK = true) {
-      return listStuff(this, undefined, defaultOK, () => meridiems, () => {
+    meridiems() {
+      return listStuff(this, undefined, () => meridiems, () => {
         // In theory there could be aribitrary day periods. We're gonna assume there are exactly two
         // for AM and PM. This is probably wrong, but it's makes parsing way easier.
         if (!this.meridiemCache) {
@@ -3209,8 +3258,8 @@
         return this.meridiemCache;
       });
     }
-    eras(length, defaultOK = true) {
-      return listStuff(this, length, defaultOK, eras, () => {
+    eras(length) {
+      return listStuff(this, length, eras, () => {
         const intl = {
           era: length
         };
@@ -3246,6 +3295,24 @@
     isEnglish() {
       return this.locale === "en" || this.locale.toLowerCase() === "en-us" || new Intl.DateTimeFormat(this.intl).resolvedOptions().locale.startsWith("en-us");
     }
+    getWeekSettings() {
+      if (this.weekSettings) {
+        return this.weekSettings;
+      } else if (!hasLocaleWeekInfo()) {
+        return fallbackWeekSettings;
+      } else {
+        return getCachedWeekInfo(this.locale);
+      }
+    }
+    getStartOfWeek() {
+      return this.getWeekSettings().firstDay;
+    }
+    getMinDaysInFirstWeek() {
+      return this.getWeekSettings().minimalDays;
+    }
+    getWeekendDays() {
+      return this.getWeekSettings().weekend;
+    }
     equals(other) {
       return this.locale === other.locale && this.numberingSystem === other.numberingSystem && this.outputCalendar === other.outputCalendar;
     }
@@ -3414,7 +3481,7 @@
       if (lowered === "default") return defaultZone;else if (lowered === "local" || lowered === "system") return SystemZone.instance;else if (lowered === "utc" || lowered === "gmt") return FixedOffsetZone.utcInstance;else return FixedOffsetZone.parseSpecifier(lowered) || IANAZone.create(input);
     } else if (isNumber$2(input)) {
       return FixedOffsetZone.instance(input);
-    } else if (typeof input === "object" && input.offset && typeof input.offset === "number") {
+    } else if (typeof input === "object" && "offset" in input && typeof input.offset === "function") {
       // This is dumb, but the instanceof check above doesn't seem to really work
       // so we're duck checking it
       return input;
@@ -3429,7 +3496,8 @@
     defaultNumberingSystem = null,
     defaultOutputCalendar = null,
     twoDigitCutoffYear = 60,
-    throwOnInvalid;
+    throwOnInvalid,
+    defaultWeekSettings = null;
 
   /**
    * Settings contains static getters and setters that control Luxon's overall behavior. Luxon is a simple library with few options, but the ones it does have live here.
@@ -3520,6 +3588,31 @@
       defaultOutputCalendar = outputCalendar;
     }
 
+    /**
+     * @typedef {Object} WeekSettings
+     * @property {number} firstDay
+     * @property {number} minimalDays
+     * @property {number[]} weekend
+     */
+
+    /**
+     * @return {WeekSettings|null}
+     */
+    static get defaultWeekSettings() {
+      return defaultWeekSettings;
+    }
+
+    /**
+     * Allows overriding the default locale week settings, i.e. the start of the week, the weekend and
+     * how many days are required in the first week of a year.
+     * Does not affect existing instances.
+     *
+     * @param {WeekSettings|null} weekSettings
+     */
+    static set defaultWeekSettings(weekSettings) {
+      defaultWeekSettings = validateWeekSettings(weekSettings);
+    }
+
     /**
      * Get the cutoff year after which a string encoding a year as two digits is interpreted to occur in the current century.
      * @type {number}
@@ -3531,10 +3624,10 @@
     /**
      * Set the cutoff year after which a string encoding a year as two digits is interpreted to occur in the current century.
      * @type {number}
-     * @example Settings.twoDigitCutoffYear = 0 // cut-off year is 0, so all 'yy' are interpretted as current century
+     * @example Settings.twoDigitCutoffYear = 0 // cut-off year is 0, so all 'yy' are interpreted as current century
      * @example Settings.twoDigitCutoffYear = 50 // '49' -> 1949; '50' -> 2050
-     * @example Settings.twoDigitCutoffYear = 1950 // interpretted as 50
-     * @example Settings.twoDigitCutoffYear = 2050 // ALSO interpretted as 50
+     * @example Settings.twoDigitCutoffYear = 1950 // interpreted as 50
+     * @example Settings.twoDigitCutoffYear = 2050 // ALSO interpreted as 50
      */
     static set twoDigitCutoffYear(cutoffYear) {
       twoDigitCutoffYear = cutoffYear % 100;
@@ -3566,6 +3659,224 @@
     }
   }
 
+  class Invalid {
+    constructor(reason, explanation) {
+      this.reason = reason;
+      this.explanation = explanation;
+    }
+    toMessage() {
+      if (this.explanation) {
+        return `${this.reason}: ${this.explanation}`;
+      } else {
+        return this.reason;
+      }
+    }
+  }
+
+  const nonLeapLadder = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
+    leapLadder = [0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335];
+  function unitOutOfRange(unit, value) {
+    return new Invalid("unit out of range", `you specified ${value} (of type ${typeof value}) as a ${unit}, which is invalid`);
+  }
+  function dayOfWeek(year, month, day) {
+    const d = new Date(Date.UTC(year, month - 1, day));
+    if (year < 100 && year >= 0) {
+      d.setUTCFullYear(d.getUTCFullYear() - 1900);
+    }
+    const js = d.getUTCDay();
+    return js === 0 ? 7 : js;
+  }
+  function computeOrdinal(year, month, day) {
+    return day + (isLeapYear(year) ? leapLadder : nonLeapLadder)[month - 1];
+  }
+  function uncomputeOrdinal(year, ordinal) {
+    const table = isLeapYear(year) ? leapLadder : nonLeapLadder,
+      month0 = table.findIndex(i => i < ordinal),
+      day = ordinal - table[month0];
+    return {
+      month: month0 + 1,
+      day
+    };
+  }
+  function isoWeekdayToLocal(isoWeekday, startOfWeek) {
+    return (isoWeekday - startOfWeek + 7) % 7 + 1;
+  }
+
+  /**
+   * @private
+   */
+
+  function gregorianToWeek(gregObj, minDaysInFirstWeek = 4, startOfWeek = 1) {
+    const {
+        year,
+        month,
+        day
+      } = gregObj,
+      ordinal = computeOrdinal(year, month, day),
+      weekday = isoWeekdayToLocal(dayOfWeek(year, month, day), startOfWeek);
+    let weekNumber = Math.floor((ordinal - weekday + 14 - minDaysInFirstWeek) / 7),
+      weekYear;
+    if (weekNumber < 1) {
+      weekYear = year - 1;
+      weekNumber = weeksInWeekYear(weekYear, minDaysInFirstWeek, startOfWeek);
+    } else if (weekNumber > weeksInWeekYear(year, minDaysInFirstWeek, startOfWeek)) {
+      weekYear = year + 1;
+      weekNumber = 1;
+    } else {
+      weekYear = year;
+    }
+    return {
+      weekYear,
+      weekNumber,
+      weekday,
+      ...timeObject(gregObj)
+    };
+  }
+  function weekToGregorian(weekData, minDaysInFirstWeek = 4, startOfWeek = 1) {
+    const {
+        weekYear,
+        weekNumber,
+        weekday
+      } = weekData,
+      weekdayOfJan4 = isoWeekdayToLocal(dayOfWeek(weekYear, 1, minDaysInFirstWeek), startOfWeek),
+      yearInDays = daysInYear(weekYear);
+    let ordinal = weekNumber * 7 + weekday - weekdayOfJan4 - 7 + minDaysInFirstWeek,
+      year;
+    if (ordinal < 1) {
+      year = weekYear - 1;
+      ordinal += daysInYear(year);
+    } else if (ordinal > yearInDays) {
+      year = weekYear + 1;
+      ordinal -= daysInYear(weekYear);
+    } else {
+      year = weekYear;
+    }
+    const {
+      month,
+      day
+    } = uncomputeOrdinal(year, ordinal);
+    return {
+      year,
+      month,
+      day,
+      ...timeObject(weekData)
+    };
+  }
+  function gregorianToOrdinal(gregData) {
+    const {
+      year,
+      month,
+      day
+    } = gregData;
+    const ordinal = computeOrdinal(year, month, day);
+    return {
+      year,
+      ordinal,
+      ...timeObject(gregData)
+    };
+  }
+  function ordinalToGregorian(ordinalData) {
+    const {
+      year,
+      ordinal
+    } = ordinalData;
+    const {
+      month,
+      day
+    } = uncomputeOrdinal(year, ordinal);
+    return {
+      year,
+      month,
+      day,
+      ...timeObject(ordinalData)
+    };
+  }
+
+  /**
+   * Check if local week units like localWeekday are used in obj.
+   * If so, validates that they are not mixed with ISO week units and then copies them to the normal week unit properties.
+   * Modifies obj in-place!
+   * @param obj the object values
+   */
+  function usesLocalWeekValues(obj, loc) {
+    const hasLocaleWeekData = !isUndefined$1(obj.localWeekday) || !isUndefined$1(obj.localWeekNumber) || !isUndefined$1(obj.localWeekYear);
+    if (hasLocaleWeekData) {
+      const hasIsoWeekData = !isUndefined$1(obj.weekday) || !isUndefined$1(obj.weekNumber) || !isUndefined$1(obj.weekYear);
+      if (hasIsoWeekData) {
+        throw new ConflictingSpecificationError("Cannot mix locale-based week fields with ISO-based week fields");
+      }
+      if (!isUndefined$1(obj.localWeekday)) obj.weekday = obj.localWeekday;
+      if (!isUndefined$1(obj.localWeekNumber)) obj.weekNumber = obj.localWeekNumber;
+      if (!isUndefined$1(obj.localWeekYear)) obj.weekYear = obj.localWeekYear;
+      delete obj.localWeekday;
+      delete obj.localWeekNumber;
+      delete obj.localWeekYear;
+      return {
+        minDaysInFirstWeek: loc.getMinDaysInFirstWeek(),
+        startOfWeek: loc.getStartOfWeek()
+      };
+    } else {
+      return {
+        minDaysInFirstWeek: 4,
+        startOfWeek: 1
+      };
+    }
+  }
+  function hasInvalidWeekData(obj, minDaysInFirstWeek = 4, startOfWeek = 1) {
+    const validYear = isInteger(obj.weekYear),
+      validWeek = integerBetween(obj.weekNumber, 1, weeksInWeekYear(obj.weekYear, minDaysInFirstWeek, startOfWeek)),
+      validWeekday = integerBetween(obj.weekday, 1, 7);
+    if (!validYear) {
+      return unitOutOfRange("weekYear", obj.weekYear);
+    } else if (!validWeek) {
+      return unitOutOfRange("week", obj.weekNumber);
+    } else if (!validWeekday) {
+      return unitOutOfRange("weekday", obj.weekday);
+    } else return false;
+  }
+  function hasInvalidOrdinalData(obj) {
+    const validYear = isInteger(obj.year),
+      validOrdinal = integerBetween(obj.ordinal, 1, daysInYear(obj.year));
+    if (!validYear) {
+      return unitOutOfRange("year", obj.year);
+    } else if (!validOrdinal) {
+      return unitOutOfRange("ordinal", obj.ordinal);
+    } else return false;
+  }
+  function hasInvalidGregorianData(obj) {
+    const validYear = isInteger(obj.year),
+      validMonth = integerBetween(obj.month, 1, 12),
+      validDay = integerBetween(obj.day, 1, daysInMonth(obj.year, obj.month));
+    if (!validYear) {
+      return unitOutOfRange("year", obj.year);
+    } else if (!validMonth) {
+      return unitOutOfRange("month", obj.month);
+    } else if (!validDay) {
+      return unitOutOfRange("day", obj.day);
+    } else return false;
+  }
+  function hasInvalidTimeData(obj) {
+    const {
+      hour,
+      minute,
+      second,
+      millisecond
+    } = obj;
+    const validHour = integerBetween(hour, 0, 23) || hour === 24 && minute === 0 && second === 0 && millisecond === 0,
+      validMinute = integerBetween(minute, 0, 59),
+      validSecond = integerBetween(second, 0, 59),
+      validMillisecond = integerBetween(millisecond, 0, 999);
+    if (!validHour) {
+      return unitOutOfRange("hour", hour);
+    } else if (!validMinute) {
+      return unitOutOfRange("minute", minute);
+    } else if (!validSecond) {
+      return unitOutOfRange("second", second);
+    } else if (!validMillisecond) {
+      return unitOutOfRange("millisecond", millisecond);
+    } else return false;
+  }
+
   /*
     This is just a junk drawer, containing anything used across multiple classes.
     Because Luxon is small(ish), this should stay small and we won't worry about splitting
@@ -3603,6 +3914,13 @@
       return false;
     }
   }
+  function hasLocaleWeekInfo() {
+    try {
+      return typeof Intl !== "undefined" && !!Intl.Locale && ("weekInfo" in Intl.Locale.prototype || "getWeekInfo" in Intl.Locale.prototype);
+    } catch (e) {
+      return false;
+    }
+  }
 
   // OBJECTS AND ARRAYS
 
@@ -3633,6 +3951,22 @@
   function hasOwnProperty(obj, prop) {
     return Object.prototype.hasOwnProperty.call(obj, prop);
   }
+  function validateWeekSettings(settings) {
+    if (settings == null) {
+      return null;
+    } else if (typeof settings !== "object") {
+      throw new InvalidArgumentError("Week settings must be an object");
+    } else {
+      if (!integerBetween(settings.firstDay, 1, 7) || !integerBetween(settings.minimalDays, 1, 7) || !Array.isArray(settings.weekend) || settings.weekend.some(v => !integerBetween(v, 1, 7))) {
+        throw new InvalidArgumentError("Invalid week settings");
+      }
+      return {
+        firstDay: settings.firstDay,
+        minimalDays: settings.minimalDays,
+        weekend: Array.from(settings.weekend)
+      };
+    }
+  }
 
   // NUMBERS AND STRINGS
 
@@ -3701,22 +4035,30 @@
     }
   }
 
-  // covert a calendar object to a local timestamp (epoch, but with the offset baked in)
+  // convert a calendar object to a local timestamp (epoch, but with the offset baked in)
   function objToLocalTS(obj) {
     let d = Date.UTC(obj.year, obj.month - 1, obj.day, obj.hour, obj.minute, obj.second, obj.millisecond);
 
     // for legacy reasons, years between 0 and 99 are interpreted as 19XX; revert that
     if (obj.year < 100 && obj.year >= 0) {
       d = new Date(d);
-      d.setUTCFullYear(d.getUTCFullYear() - 1900);
+      // set the month and day again, this is necessary because year 2000 is a leap year, but year 100 is not
+      // so if obj.year is in 99, but obj.day makes it roll over into year 100,
+      // the calculations done by Date.UTC are using year 2000 - which is incorrect
+      d.setUTCFullYear(obj.year, obj.month - 1, obj.day);
     }
     return +d;
   }
-  function weeksInWeekYear(weekYear) {
-    const p1 = (weekYear + Math.floor(weekYear / 4) - Math.floor(weekYear / 100) + Math.floor(weekYear / 400)) % 7,
-      last = weekYear - 1,
-      p2 = (last + Math.floor(last / 4) - Math.floor(last / 100) + Math.floor(last / 400)) % 7;
-    return p1 === 4 || p2 === 3 ? 53 : 52;
+
+  // adapted from moment.js: https://github.com/moment/moment/blob/000ac1800e620f770f4eb31b5ae908f6167b0ab2/src/lib/units/week-calendar-utils.js
+  function firstWeekOffset(year, minDaysInFirstWeek, startOfWeek) {
+    const fwdlw = isoWeekdayToLocal(dayOfWeek(year, 1, minDaysInFirstWeek), startOfWeek);
+    return -fwdlw + minDaysInFirstWeek - 1;
+  }
+  function weeksInWeekYear(weekYear, minDaysInFirstWeek = 4, startOfWeek = 1) {
+    const weekOffset = firstWeekOffset(weekYear, minDaysInFirstWeek, startOfWeek);
+    const weekOffsetNext = firstWeekOffset(weekYear + 1, minDaysInFirstWeek, startOfWeek);
+    return (daysInYear(weekYear) - weekOffset + weekOffsetNext) / 7;
   }
   function untruncateYear(year) {
     if (year > 99) {
@@ -3940,6 +4282,9 @@
       return new Formatter(locale, opts);
     }
     static parseFormat(fmt) {
+      // white-space is always considered a literal in user-provided formats
+      // the " " token has a special meaning (see unitForToken)
+
       let current = null,
         currentFull = "",
         bracketed = false;
@@ -3949,7 +4294,7 @@
         if (c === "'") {
           if (currentFull.length > 0) {
             splits.push({
-              literal: bracketed,
+              literal: bracketed || /^\s+$/.test(currentFull),
               val: currentFull
             });
           }
@@ -3963,7 +4308,7 @@
         } else {
           if (currentFull.length > 0) {
             splits.push({
-              literal: false,
+              literal: /^\s+$/.test(currentFull),
               val: currentFull
             });
           }
@@ -3973,7 +4318,7 @@
       }
       if (currentFull.length > 0) {
         splits.push({
-          literal: bracketed,
+          literal: bracketed || /^\s+$/.test(currentFull),
           val: currentFull
         });
       }
@@ -3997,33 +4342,24 @@
       });
       return df.format();
     }
-    formatDateTime(dt, opts = {}) {
-      const df = this.loc.dtFormatter(dt, {
+    dtFormatter(dt, opts = {}) {
+      return this.loc.dtFormatter(dt, {
         ...this.opts,
         ...opts
       });
-      return df.format();
     }
-    formatDateTimeParts(dt, opts = {}) {
-      const df = this.loc.dtFormatter(dt, {
-        ...this.opts,
-        ...opts
-      });
-      return df.formatToParts();
+    formatDateTime(dt, opts) {
+      return this.dtFormatter(dt, opts).format();
     }
-    formatInterval(interval, opts = {}) {
-      const df = this.loc.dtFormatter(interval.start, {
-        ...this.opts,
-        ...opts
-      });
+    formatDateTimeParts(dt, opts) {
+      return this.dtFormatter(dt, opts).formatToParts();
+    }
+    formatInterval(interval, opts) {
+      const df = this.dtFormatter(interval.start, opts);
       return df.dtf.formatRange(interval.start.toJSDate(), interval.end.toJSDate());
     }
-    resolvedOptions(dt, opts = {}) {
-      const df = this.loc.dtFormatter(dt, {
-        ...this.opts,
-        ...opts
-      });
-      return df.resolvedOptions();
+    resolvedOptions(dt, opts) {
+      return this.dtFormatter(dt, opts).resolvedOptions();
     }
     num(n, p = 0) {
       // we get some perf out of doing this here, annoyingly
@@ -4077,7 +4413,7 @@
           era: length
         }, "era"),
         tokenToString = token => {
-          // Where possible: http://cldr.unicode.org/translation/date-time-1/date-time#TOC-Standalone-vs.-Format-Styles
+          // Where possible: https://cldr.unicode.org/translation/date-time/date-time-symbols
           switch (token) {
             // ms
             case "S":
@@ -4263,6 +4599,14 @@
               return this.num(dt.weekNumber);
             case "WW":
               return this.num(dt.weekNumber, 2);
+            case "n":
+              return this.num(dt.localWeekNumber);
+            case "nn":
+              return this.num(dt.localWeekNumber, 2);
+            case "ii":
+              return this.num(dt.localWeekYear.toString().slice(-2), 2);
+            case "iiii":
+              return this.num(dt.localWeekYear, 4);
             case "o":
               return this.num(dt.ordinal);
             case "ooo":
@@ -4324,20 +4668,6 @@
     }
   }
 
-  class Invalid {
-    constructor(reason, explanation) {
-      this.reason = reason;
-      this.explanation = explanation;
-    }
-    toMessage() {
-      if (this.explanation) {
-        return `${this.reason}: ${this.explanation}`;
-      } else {
-        return this.reason;
-      }
-    }
-  }
-
   /*
    * This file handles parsing for well-specified formats. Here's how it works:
    * Two things go into parsing: a regex to match with and an extractor to take apart the groups in the match.
@@ -4666,27 +4996,60 @@
     };
     return new Duration(conf);
   }
-  function antiTrunc(n) {
-    return n < 0 ? Math.floor(n) : Math.ceil(n);
-  }
-
-  // NB: mutates parameters
-  function convert(matrix, fromMap, fromUnit, toMap, toUnit) {
-    const conv = matrix[toUnit][fromUnit],
-      raw = fromMap[fromUnit] / conv,
-      sameSign = Math.sign(raw) === Math.sign(toMap[toUnit]),
-      // ok, so this is wild, but see the matrix in the tests
-      added = !sameSign && toMap[toUnit] !== 0 && Math.abs(raw) <= 1 ? antiTrunc(raw) : Math.trunc(raw);
-    toMap[toUnit] += added;
-    fromMap[fromUnit] -= added * conv;
+  function durationToMillis(matrix, vals) {
+    let sum = vals.milliseconds ?? 0;
+    for (const unit of reverseUnits.slice(1)) {
+      if (vals[unit]) {
+        sum += vals[unit] * matrix[unit]["milliseconds"];
+      }
+    }
+    return sum;
   }
 
   // NB: mutates parameters
   function normalizeValues(matrix, vals) {
-    reverseUnits.reduce((previous, current) => {
+    // the logic below assumes the overall value of the duration is positive
+    // if this is not the case, factor is used to make it so
+    const factor = durationToMillis(matrix, vals) < 0 ? -1 : 1;
+    orderedUnits$1.reduceRight((previous, current) => {
       if (!isUndefined$1(vals[current])) {
         if (previous) {
-          convert(matrix, vals, previous, vals, current);
+          const previousVal = vals[previous] * factor;
+          const conv = matrix[current][previous];
+
+          // if (previousVal < 0):
+          // lower order unit is negative (e.g. { years: 2, days: -2 })
+          // normalize this by reducing the higher order unit by the appropriate amount
+          // and increasing the lower order unit
+          // this can never make the higher order unit negative, because this function only operates
+          // on positive durations, so the amount of time represented by the lower order unit cannot
+          // be larger than the higher order unit
+          // else:
+          // lower order unit is positive (e.g. { years: 2, days: 450 } or { years: -2, days: 450 })
+          // in this case we attempt to convert as much as possible from the lower order unit into
+          // the higher order one
+          //
+          // Math.floor takes care of both of these cases, rounding away from 0
+          // if previousVal < 0 it makes the absolute value larger
+          // if previousVal >= it makes the absolute value smaller
+          const rollUp = Math.floor(previousVal / conv);
+          vals[current] += rollUp * factor;
+          vals[previous] -= rollUp * conv * factor;
+        }
+        return current;
+      } else {
+        return previous;
+      }
+    }, null);
+
+    // try to convert any decimals into smaller units if possible
+    // for example for { years: 2.5, days: 0, seconds: 0 } we want to get { years: 2, days: 182, hours: 12 }
+    orderedUnits$1.reduce((previous, current) => {
+      if (!isUndefined$1(vals[current])) {
+        if (previous) {
+          const fraction = vals[previous] % 1;
+          vals[previous] -= fraction;
+          vals[current] += fraction * matrix[previous][current];
         }
         return current;
       } else {
@@ -4980,9 +5343,10 @@
 
     /**
      * Returns a string representation of a Duration with all units included.
-     * To modify its behavior use the `listStyle` and any Intl.NumberFormat option, though `unitDisplay` is especially relevant.
-     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-     * @param opts - On option object to override the formatting. Accepts the same keys as the options parameter of the native `Int.NumberFormat` constructor, as well as `listStyle`.
+     * To modify its behavior, use `listStyle` and any Intl.NumberFormat option, though `unitDisplay` is especially relevant.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+     * @param {Object} opts - Formatting options. Accepts the same keys as the options parameter of the native `Intl.NumberFormat` constructor, as well as `listStyle`.
+     * @param {string} [opts.listStyle='narrow'] - How to format the merged list. Corresponds to the `style` property of the options parameter of the native `Intl.ListFormat` constructor.
      * @example
      * ```js
      * var dur = Duration.fromObject({ days: 1, hours: 5, minutes: 6 })
@@ -4992,6 +5356,7 @@
      * ```
      */
     toHuman(opts = {}) {
+      if (!this.isValid) return INVALID$3;
       const l = orderedUnits$1.map(unit => {
         const val = this.values[unit];
         if (isUndefined$1(val)) {
@@ -5077,21 +5442,13 @@
         suppressSeconds: false,
         includePrefix: false,
         format: "extended",
-        ...opts
+        ...opts,
+        includeOffset: false
       };
-      const value = this.shiftTo("hours", "minutes", "seconds", "milliseconds");
-      let fmt = opts.format === "basic" ? "hhmm" : "hh:mm";
-      if (!opts.suppressSeconds || value.seconds !== 0 || value.milliseconds !== 0) {
-        fmt += opts.format === "basic" ? "ss" : ":ss";
-        if (!opts.suppressMilliseconds || value.milliseconds !== 0) {
-          fmt += ".SSS";
-        }
-      }
-      let str = value.toFormat(fmt);
-      if (opts.includePrefix) {
-        str = "T" + str;
-      }
-      return str;
+      const dateTime = DateTime.fromMillis(millis, {
+        zone: "UTC"
+      });
+      return dateTime.toISOTime(opts);
     }
 
     /**
@@ -5110,12 +5467,25 @@
       return this.toISO();
     }
 
+    /**
+     * Returns a string representation of this Duration appropriate for the REPL.
+     * @return {string}
+     */
+    [Symbol.for("nodejs.util.inspect.custom")]() {
+      if (this.isValid) {
+        return `Duration { values: ${JSON.stringify(this.values)} }`;
+      } else {
+        return `Duration { Invalid, reason: ${this.invalidReason} }`;
+      }
+    }
+
     /**
      * Returns an milliseconds value of this Duration.
      * @return {number}
      */
     toMillis() {
-      return this.as("milliseconds");
+      if (!this.isValid) return NaN;
+      return durationToMillis(this.matrix, this.values);
     }
 
     /**
@@ -5241,8 +5611,17 @@
 
     /**
      * Reduce this Duration to its canonical representation in its current units.
+     * Assuming the overall value of the Duration is positive, this means:
+     * - excessive values for lower-order units are converted to higher-order units (if possible, see first and second example)
+     * - negative lower-order units are converted to higher order units (there must be such a higher order unit, otherwise
+     *   the overall value would be negative, see third example)
+     * - fractional values for higher-order units are converted to lower-order units (if possible, see fourth example)
+     *
+     * If the overall value is negative, the result of this method is equivalent to `this.negate().normalize().negate()`.
      * @example Duration.fromObject({ years: 2, days: 5000 }).normalize().toObject() //=> { years: 15, days: 255 }
+     * @example Duration.fromObject({ days: 5000 }).normalize().toObject() //=> { days: 5000 }
      * @example Duration.fromObject({ hours: 12, minutes: -45 }).normalize().toObject() //=> { hours: 11, minutes: 15 }
+     * @example Duration.fromObject({ years: 2.5, days: 0, hours: 0 }).normalize().toObject() //=> { years: 2, days: 182, hours: 12 }
      * @return {Duration}
      */
     normalize() {
@@ -5297,16 +5676,13 @@
           if (isNumber$2(vals[k])) {
             own += vals[k];
           }
+
+          // only keep the integer part for now in the hopes of putting any decimal part
+          // into a smaller unit later
           const i = Math.trunc(own);
           built[k] = i;
           accumulated[k] = (own * 1000 - i * 1000) / 1000;
 
-          // plus anything further down the chain that should be rolled up in to this
-          for (const down in vals) {
-            if (orderedUnits$1.indexOf(down) > orderedUnits$1.indexOf(k)) {
-              convert(this.matrix, vals, down, built, k);
-            }
-          }
           // otherwise, keep it in the wings to boil it later
         } else if (isNumber$2(vals[k])) {
           accumulated[k] = vals[k];
@@ -5320,9 +5696,10 @@
           built[lastUnit] += key === lastUnit ? accumulated[key] : accumulated[key] / this.matrix[lastUnit][key];
         }
       }
+      normalizeValues(this.matrix, built);
       return clone$2(this, {
         values: built
-      }, true).normalize();
+      }, true);
     }
 
     /**
@@ -5695,13 +6072,23 @@
      * Unlike {@link Interval#length} this counts sections of the calendar, not periods of time, e.g. specifying 'day'
      * asks 'what dates are included in this interval?', not 'how many days long is this interval?'
      * @param {string} [unit='milliseconds'] - the unit of time to count.
+     * @param {Object} opts - options
+     * @param {boolean} [opts.useLocaleWeeks=false] - If true, use weeks based on the locale, i.e. use the locale-dependent start of the week; this operation will always use the locale of the start DateTime
      * @return {number}
      */
-    count(unit = "milliseconds") {
+    count(unit = "milliseconds", opts) {
       if (!this.isValid) return NaN;
-      const start = this.start.startOf(unit),
-        end = this.end.startOf(unit);
-      return Math.floor(end.diff(start, unit).get(unit)) + 1;
+      const start = this.start.startOf(unit, opts);
+      let end;
+      if (opts?.useLocaleWeeks) {
+        end = this.end.reconfigure({
+          locale: start.locale
+        });
+      } else {
+        end = this.end;
+      }
+      end = end.startOf(unit, opts);
+      return Math.floor(end.diff(start, unit).get(unit)) + (end.valueOf() !== this.end.valueOf());
     }
 
     /**
@@ -5773,7 +6160,7 @@
      */
     splitAt(...dateTimes) {
       if (!this.isValid) return [];
-      const sorted = dateTimes.map(friendlyDateTime).filter(d => this.contains(d)).sort(),
+      const sorted = dateTimes.map(friendlyDateTime).filter(d => this.contains(d)).sort((a, b) => a.toMillis() - b.toMillis()),
         results = [];
       let {
           s
@@ -5980,6 +6367,18 @@
       return `[${this.s.toISO()} – ${this.e.toISO()})`;
     }
 
+    /**
+     * Returns a string representation of this Interval appropriate for the REPL.
+     * @return {string}
+     */
+    [Symbol.for("nodejs.util.inspect.custom")]() {
+      if (this.isValid) {
+        return `Interval { start: ${this.s.toISO()}, end: ${this.e.toISO()} }`;
+      } else {
+        return `Interval { Invalid, reason: ${this.invalidReason} }`;
+      }
+    }
+
     /**
      * Returns a localized string representing this Interval. Accepts the same options as the
      * Intl.DateTimeFormat constructor and any presets defined by Luxon, such as
@@ -6130,6 +6529,50 @@
       return normalizeZone(input, Settings.defaultZone);
     }
 
+    /**
+     * Get the weekday on which the week starts according to the given locale.
+     * @param {Object} opts - options
+     * @param {string} [opts.locale] - the locale code
+     * @param {string} [opts.locObj=null] - an existing locale object to use
+     * @returns {number} the start of the week, 1 for Monday through 7 for Sunday
+     */
+    static getStartOfWeek({
+      locale = null,
+      locObj = null
+    } = {}) {
+      return (locObj || Locale.create(locale)).getStartOfWeek();
+    }
+
+    /**
+     * Get the minimum number of days necessary in a week before it is considered part of the next year according
+     * to the given locale.
+     * @param {Object} opts - options
+     * @param {string} [opts.locale] - the locale code
+     * @param {string} [opts.locObj=null] - an existing locale object to use
+     * @returns {number}
+     */
+    static getMinimumDaysInFirstWeek({
+      locale = null,
+      locObj = null
+    } = {}) {
+      return (locObj || Locale.create(locale)).getMinDaysInFirstWeek();
+    }
+
+    /**
+     * Get the weekdays, which are considered the weekend according to the given locale
+     * @param {Object} opts - options
+     * @param {string} [opts.locale] - the locale code
+     * @param {string} [opts.locObj=null] - an existing locale object to use
+     * @returns {number[]} an array of weekdays, 1 for Monday through 7 for Sunday
+     */
+    static getWeekendWeekdays({
+      locale = null,
+      locObj = null
+    } = {}) {
+      // copy the array, because we cache it internally
+      return (locObj || Locale.create(locale)).getWeekendDays().slice();
+    }
+
     /**
      * Return an array of standalone month names.
      * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
@@ -6255,12 +6698,14 @@
      * Some features of Luxon are not available in all environments. For example, on older browsers, relative time formatting support is not available. Use this function to figure out if that's the case.
      * Keys:
      * * `relative`: whether this environment supports relative time formatting
-     * @example Info.features() //=> { relative: false }
+     * * `localeWeek`: whether this environment supports different weekdays for the start of the week based on the locale
+     * @example Info.features() //=> { relative: false, localeWeek: true }
      * @return {Object}
      */
     static features() {
       return {
-        relative: hasRelative()
+        relative: hasRelative(),
+        localeWeek: hasLocaleWeekInfo()
       };
     }
   }
@@ -6280,14 +6725,35 @@
     const results = {};
     const earlier = cursor;
     let lowestOrder, highWater;
+
+    /* This loop tries to diff using larger units first.
+       If we overshoot, we backtrack and try the next smaller unit.
+       "cursor" starts out at the earlier timestamp and moves closer and closer to "later"
+       as we use smaller and smaller units.
+       highWater keeps track of where we would be if we added one more of the smallest unit,
+       this is used later to potentially convert any difference smaller than the smallest higher order unit
+       into a fraction of that smallest higher order unit
+    */
     for (const [unit, differ] of differs) {
       if (units.indexOf(unit) >= 0) {
         lowestOrder = unit;
         results[unit] = differ(cursor, later);
         highWater = earlier.plus(results);
         if (highWater > later) {
+          // we overshot the end point, backtrack cursor by 1
           results[unit]--;
           cursor = earlier.plus(results);
+
+          // if we are still overshooting now, we need to backtrack again
+          // this happens in certain situations when diffing times in different zones,
+          // because this calculation ignores time zones
+          if (cursor > later) {
+            // keep the "overshot by 1" around as highWater
+            highWater = cursor;
+            // backtrack cursor by 1
+            results[unit]--;
+            cursor = earlier.plus(results);
+          }
         } else {
           cursor = highWater;
         }
@@ -6436,6 +6902,11 @@
   function escapeToken(value) {
     return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
   }
+
+  /**
+   * @param token
+   * @param {Locale} loc
+   */
   function unitForToken(token, loc) {
     const one = digitRegex(loc),
       two = digitRegex(loc, "{2}"),
@@ -6460,9 +6931,9 @@
         switch (t.val) {
           // era
           case "G":
-            return oneOf(loc.eras("short", false), 0);
+            return oneOf(loc.eras("short"), 0);
           case "GG":
-            return oneOf(loc.eras("long", false), 0);
+            return oneOf(loc.eras("long"), 0);
           // years
           case "y":
             return intUnit(oneToSix);
@@ -6480,17 +6951,17 @@
           case "MM":
             return intUnit(two);
           case "MMM":
-            return oneOf(loc.months("short", true, false), 1);
+            return oneOf(loc.months("short", true), 1);
           case "MMMM":
-            return oneOf(loc.months("long", true, false), 1);
+            return oneOf(loc.months("long", true), 1);
           case "L":
             return intUnit(oneOrTwo);
           case "LL":
             return intUnit(two);
           case "LLL":
-            return oneOf(loc.months("short", false, false), 1);
+            return oneOf(loc.months("short", false), 1);
           case "LLLL":
-            return oneOf(loc.months("long", false, false), 1);
+            return oneOf(loc.months("long", false), 1);
           // dates
           case "d":
             return intUnit(oneOrTwo);
@@ -6550,13 +7021,13 @@
           case "c":
             return intUnit(one);
           case "EEE":
-            return oneOf(loc.weekdays("short", false, false), 1);
+            return oneOf(loc.weekdays("short", false), 1);
           case "EEEE":
-            return oneOf(loc.weekdays("long", false, false), 1);
+            return oneOf(loc.weekdays("long", false), 1);
           case "ccc":
-            return oneOf(loc.weekdays("short", true, false), 1);
+            return oneOf(loc.weekdays("short", true), 1);
           case "cccc":
-            return oneOf(loc.weekdays("long", true, false), 1);
+            return oneOf(loc.weekdays("long", true), 1);
           // offset/zone
           case "Z":
           case "ZZ":
@@ -6567,6 +7038,10 @@
           // because we don't have any way to figure out what they are
           case "z":
             return simple(/[a-z_+-/]{1,256}?/i);
+          // this special-case "token" represents a place where a macro-token expanded into a white-space literal
+          // in this case we accept any non-newline white-space
+          case " ":
+            return simple(/[^\S\n\r]/);
           default:
             return literal(t);
         }
@@ -6598,10 +7073,14 @@
     },
     dayperiod: "a",
     dayPeriod: "a",
-    hour: {
+    hour12: {
       numeric: "h",
       "2-digit": "hh"
     },
+    hour24: {
+      numeric: "H",
+      "2-digit": "HH"
+    },
     minute: {
       numeric: "m",
       "2-digit": "mm"
@@ -6615,19 +7094,40 @@
       short: "ZZZ"
     }
   };
-  function tokenForPart(part, formatOpts) {
+  function tokenForPart(part, formatOpts, resolvedOpts) {
     const {
       type,
       value
     } = part;
     if (type === "literal") {
+      const isSpace = /^\s+$/.test(value);
       return {
-        literal: true,
-        val: value
+        literal: !isSpace,
+        val: isSpace ? " " : value
       };
     }
     const style = formatOpts[type];
-    let val = partTypeStyleToTokenVal[type];
+
+    // The user might have explicitly specified hour12 or hourCycle
+    // if so, respect their decision
+    // if not, refer back to the resolvedOpts, which are based on the locale
+    let actualType = type;
+    if (type === "hour") {
+      if (formatOpts.hour12 != null) {
+        actualType = formatOpts.hour12 ? "hour12" : "hour24";
+      } else if (formatOpts.hourCycle != null) {
+        if (formatOpts.hourCycle === "h11" || formatOpts.hourCycle === "h12") {
+          actualType = "hour12";
+        } else {
+          actualType = "hour24";
+        }
+      } else {
+        // tokens only differentiate between 24 hours or not,
+        // so we do not need to check hourCycle here, which is less supported anyways
+        actualType = resolvedOpts.hour12 ? "hour12" : "hour24";
+      }
+    }
+    let val = partTypeStyleToTokenVal[actualType];
     if (typeof val === "object") {
       val = val[style];
     }
@@ -6803,178 +7303,10 @@
       return null;
     }
     const formatter = Formatter.create(locale, formatOpts);
-    const parts = formatter.formatDateTimeParts(getDummyDateTime());
-    return parts.map(p => tokenForPart(p, formatOpts));
-  }
-
-  const nonLeapLadder = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
-    leapLadder = [0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335];
-  function unitOutOfRange(unit, value) {
-    return new Invalid("unit out of range", `you specified ${value} (of type ${typeof value}) as a ${unit}, which is invalid`);
-  }
-  function dayOfWeek(year, month, day) {
-    const d = new Date(Date.UTC(year, month - 1, day));
-    if (year < 100 && year >= 0) {
-      d.setUTCFullYear(d.getUTCFullYear() - 1900);
-    }
-    const js = d.getUTCDay();
-    return js === 0 ? 7 : js;
-  }
-  function computeOrdinal(year, month, day) {
-    return day + (isLeapYear(year) ? leapLadder : nonLeapLadder)[month - 1];
-  }
-  function uncomputeOrdinal(year, ordinal) {
-    const table = isLeapYear(year) ? leapLadder : nonLeapLadder,
-      month0 = table.findIndex(i => i < ordinal),
-      day = ordinal - table[month0];
-    return {
-      month: month0 + 1,
-      day
-    };
-  }
-
-  /**
-   * @private
-   */
-
-  function gregorianToWeek(gregObj) {
-    const {
-        year,
-        month,
-        day
-      } = gregObj,
-      ordinal = computeOrdinal(year, month, day),
-      weekday = dayOfWeek(year, month, day);
-    let weekNumber = Math.floor((ordinal - weekday + 10) / 7),
-      weekYear;
-    if (weekNumber < 1) {
-      weekYear = year - 1;
-      weekNumber = weeksInWeekYear(weekYear);
-    } else if (weekNumber > weeksInWeekYear(year)) {
-      weekYear = year + 1;
-      weekNumber = 1;
-    } else {
-      weekYear = year;
-    }
-    return {
-      weekYear,
-      weekNumber,
-      weekday,
-      ...timeObject(gregObj)
-    };
-  }
-  function weekToGregorian(weekData) {
-    const {
-        weekYear,
-        weekNumber,
-        weekday
-      } = weekData,
-      weekdayOfJan4 = dayOfWeek(weekYear, 1, 4),
-      yearInDays = daysInYear(weekYear);
-    let ordinal = weekNumber * 7 + weekday - weekdayOfJan4 - 3,
-      year;
-    if (ordinal < 1) {
-      year = weekYear - 1;
-      ordinal += daysInYear(year);
-    } else if (ordinal > yearInDays) {
-      year = weekYear + 1;
-      ordinal -= daysInYear(weekYear);
-    } else {
-      year = weekYear;
-    }
-    const {
-      month,
-      day
-    } = uncomputeOrdinal(year, ordinal);
-    return {
-      year,
-      month,
-      day,
-      ...timeObject(weekData)
-    };
-  }
-  function gregorianToOrdinal(gregData) {
-    const {
-      year,
-      month,
-      day
-    } = gregData;
-    const ordinal = computeOrdinal(year, month, day);
-    return {
-      year,
-      ordinal,
-      ...timeObject(gregData)
-    };
-  }
-  function ordinalToGregorian(ordinalData) {
-    const {
-      year,
-      ordinal
-    } = ordinalData;
-    const {
-      month,
-      day
-    } = uncomputeOrdinal(year, ordinal);
-    return {
-      year,
-      month,
-      day,
-      ...timeObject(ordinalData)
-    };
-  }
-  function hasInvalidWeekData(obj) {
-    const validYear = isInteger(obj.weekYear),
-      validWeek = integerBetween(obj.weekNumber, 1, weeksInWeekYear(obj.weekYear)),
-      validWeekday = integerBetween(obj.weekday, 1, 7);
-    if (!validYear) {
-      return unitOutOfRange("weekYear", obj.weekYear);
-    } else if (!validWeek) {
-      return unitOutOfRange("week", obj.week);
-    } else if (!validWeekday) {
-      return unitOutOfRange("weekday", obj.weekday);
-    } else return false;
-  }
-  function hasInvalidOrdinalData(obj) {
-    const validYear = isInteger(obj.year),
-      validOrdinal = integerBetween(obj.ordinal, 1, daysInYear(obj.year));
-    if (!validYear) {
-      return unitOutOfRange("year", obj.year);
-    } else if (!validOrdinal) {
-      return unitOutOfRange("ordinal", obj.ordinal);
-    } else return false;
-  }
-  function hasInvalidGregorianData(obj) {
-    const validYear = isInteger(obj.year),
-      validMonth = integerBetween(obj.month, 1, 12),
-      validDay = integerBetween(obj.day, 1, daysInMonth(obj.year, obj.month));
-    if (!validYear) {
-      return unitOutOfRange("year", obj.year);
-    } else if (!validMonth) {
-      return unitOutOfRange("month", obj.month);
-    } else if (!validDay) {
-      return unitOutOfRange("day", obj.day);
-    } else return false;
-  }
-  function hasInvalidTimeData(obj) {
-    const {
-      hour,
-      minute,
-      second,
-      millisecond
-    } = obj;
-    const validHour = integerBetween(hour, 0, 23) || hour === 24 && minute === 0 && second === 0 && millisecond === 0,
-      validMinute = integerBetween(minute, 0, 59),
-      validSecond = integerBetween(second, 0, 59),
-      validMillisecond = integerBetween(millisecond, 0, 999);
-    if (!validHour) {
-      return unitOutOfRange("hour", hour);
-    } else if (!validMinute) {
-      return unitOutOfRange("minute", minute);
-    } else if (!validSecond) {
-      return unitOutOfRange("second", second);
-    } else if (!validMillisecond) {
-      return unitOutOfRange("millisecond", millisecond);
-    } else return false;
+    const df = formatter.dtFormatter(getDummyDateTime());
+    const parts = df.formatToParts();
+    const resolvedOpts = df.resolvedOptions();
+    return parts.map(p => tokenForPart(p, formatOpts, resolvedOpts));
   }
 
   const INVALID$1 = "Invalid DateTime";
@@ -6984,6 +7316,9 @@
   }
 
   // we cache week data on the DT object and this intermediates the cache
+  /**
+   * @param {DateTime} dt
+   */
   function possiblyCachedWeekData(dt) {
     if (dt.weekData === null) {
       dt.weekData = gregorianToWeek(dt.c);
@@ -6991,6 +7326,16 @@
     return dt.weekData;
   }
 
+  /**
+   * @param {DateTime} dt
+   */
+  function possiblyCachedLocalWeekData(dt) {
+    if (dt.localWeekData === null) {
+      dt.localWeekData = gregorianToWeek(dt.c, dt.loc.getMinDaysInFirstWeek(), dt.loc.getStartOfWeek());
+    }
+    return dt.localWeekData;
+  }
+
   // clone really means, "make a new object with these modifications". all "setters" really use this
   // to create a new object while only changing some of the properties
   function clone$1(inst, alts) {
@@ -7098,7 +7443,7 @@
       setZone,
       zone
     } = opts;
-    if (parsed && Object.keys(parsed).length !== 0) {
+    if (parsed && Object.keys(parsed).length !== 0 || parsedZone) {
       const interpretationZone = parsedZone || zone,
         inst = DateTime.fromObject(parsed, {
           ...opts,
@@ -7140,13 +7485,13 @@
     if (extended) {
       c += ":";
       c += padStart(o.c.minute);
-      if (o.c.second !== 0 || !suppressSeconds) {
+      if (o.c.millisecond !== 0 || o.c.second !== 0 || !suppressSeconds) {
         c += ":";
       }
     } else {
       c += padStart(o.c.minute);
     }
-    if (o.c.second !== 0 || !suppressSeconds) {
+    if (o.c.millisecond !== 0 || o.c.second !== 0 || !suppressSeconds) {
       c += padStart(o.c.second);
       if (o.c.millisecond !== 0 || !suppressMilliseconds) {
         c += ".";
@@ -7235,6 +7580,21 @@
     if (!normalized) throw new InvalidUnitError(unit);
     return normalized;
   }
+  function normalizeUnitWithLocalWeeks(unit) {
+    switch (unit.toLowerCase()) {
+      case "localweekday":
+      case "localweekdays":
+        return "localWeekday";
+      case "localweeknumber":
+      case "localweeknumbers":
+        return "localWeekNumber";
+      case "localweekyear":
+      case "localweekyears":
+        return "localWeekYear";
+      default:
+        return normalizeUnit(unit);
+    }
+  }
 
   // this is a dumbed down version of fromObject() that runs about 60% faster
   // but doesn't do any validation, makes a bunch of assumptions about what units
@@ -7369,6 +7729,10 @@
        * @access private
        */
       this.weekData = null;
+      /**
+       * @access private
+       */
+      this.localWeekData = null;
       /**
        * @access private
        */
@@ -7550,13 +7914,16 @@
      * @param {number} obj.weekYear - an ISO week year
      * @param {number} obj.weekNumber - an ISO week number, between 1 and 52 or 53, depending on the year
      * @param {number} obj.weekday - an ISO weekday, 1-7, where 1 is Monday and 7 is Sunday
+     * @param {number} obj.localWeekYear - a week year, according to the locale
+     * @param {number} obj.localWeekNumber - a week number, between 1 and 52 or 53, depending on the year, according to the locale
+     * @param {number} obj.localWeekday - a weekday, 1-7, where 1 is the first and 7 is the last day of the week, according to the locale
      * @param {number} obj.hour - hour of the day, 0-23
      * @param {number} obj.minute - minute of the hour, 0-59
      * @param {number} obj.second - second of the minute, 0-59
      * @param {number} obj.millisecond - millisecond of the second, 0-999
      * @param {Object} opts - options for creating this DateTime
      * @param {string|Zone} [opts.zone='local'] - interpret the numbers in the context of a particular zone. Can take any value taken as the first argument to setZone()
-     * @param {string} [opts.locale='system's locale'] - a locale to set on the resulting DateTime instance
+     * @param {string} [opts.locale='system\'s locale'] - a locale to set on the resulting DateTime instance
      * @param {string} opts.outputCalendar - the output calendar to set on the resulting DateTime instance
      * @param {string} opts.numberingSystem - the numbering system to set on the resulting DateTime instance
      * @example DateTime.fromObject({ year: 1982, month: 5, day: 25}).toISODate() //=> '1982-05-25'
@@ -7566,6 +7933,7 @@
      * @example DateTime.fromObject({ hour: 10, minute: 26, second: 6 }, { zone: 'local' })
      * @example DateTime.fromObject({ hour: 10, minute: 26, second: 6 }, { zone: 'America/New_York' })
      * @example DateTime.fromObject({ weekYear: 2016, weekNumber: 2, weekday: 3 }).toISODate() //=> '2016-01-13'
+     * @example DateTime.fromObject({ localWeekYear: 2022, localWeekNumber: 1, localWeekday: 1 }, { locale: "en-US" }).toISODate() //=> '2021-12-26'
      * @return {DateTime}
      */
     static fromObject(obj, opts = {}) {
@@ -7574,15 +7942,19 @@
       if (!zoneToUse.isValid) {
         return DateTime.invalid(unsupportedZone(zoneToUse));
       }
+      const loc = Locale.fromObject(opts);
+      const normalized = normalizeObject(obj, normalizeUnitWithLocalWeeks);
+      const {
+        minDaysInFirstWeek,
+        startOfWeek
+      } = usesLocalWeekValues(normalized, loc);
       const tsNow = Settings.now(),
         offsetProvis = !isUndefined$1(opts.specificOffset) ? opts.specificOffset : zoneToUse.offset(tsNow),
-        normalized = normalizeObject(obj, normalizeUnit),
         containsOrdinal = !isUndefined$1(normalized.ordinal),
         containsGregorYear = !isUndefined$1(normalized.year),
         containsGregorMD = !isUndefined$1(normalized.month) || !isUndefined$1(normalized.day),
         containsGregor = containsGregorYear || containsGregorMD,
-        definiteWeekDef = normalized.weekYear || normalized.weekNumber,
-        loc = Locale.fromObject(opts);
+        definiteWeekDef = normalized.weekYear || normalized.weekNumber;
 
       // cases:
       // just a weekday -> this week's instance of that weekday, no worries
@@ -7605,7 +7977,7 @@
       if (useWeekData) {
         units = orderedWeekUnits;
         defaultValues = defaultWeekUnitValues;
-        objNow = gregorianToWeek(objNow);
+        objNow = gregorianToWeek(objNow, minDaysInFirstWeek, startOfWeek);
       } else if (containsOrdinal) {
         units = orderedOrdinalUnits;
         defaultValues = defaultOrdinalUnitValues;
@@ -7629,14 +8001,14 @@
       }
 
       // make sure the values we have are in range
-      const higherOrderInvalid = useWeekData ? hasInvalidWeekData(normalized) : containsOrdinal ? hasInvalidOrdinalData(normalized) : hasInvalidGregorianData(normalized),
+      const higherOrderInvalid = useWeekData ? hasInvalidWeekData(normalized, minDaysInFirstWeek, startOfWeek) : containsOrdinal ? hasInvalidOrdinalData(normalized) : hasInvalidGregorianData(normalized),
         invalid = higherOrderInvalid || hasInvalidTimeData(normalized);
       if (invalid) {
         return DateTime.invalid(invalid);
       }
 
       // compute the actual time
-      const gregorian = useWeekData ? weekToGregorian(normalized) : containsOrdinal ? ordinalToGregorian(normalized) : normalized,
+      const gregorian = useWeekData ? weekToGregorian(normalized, minDaysInFirstWeek, startOfWeek) : containsOrdinal ? ordinalToGregorian(normalized) : normalized,
         [tsFinal, offsetFinal] = objToTS(gregorian, offsetProvis, zoneToUse),
         inst = new DateTime({
           ts: tsFinal,
@@ -7780,7 +8152,7 @@
 
     /**
      * Create an invalid DateTime.
-     * @param {DateTime} reason - simple string of why this DateTime is invalid. Should not contain parameters or anything else data-dependent
+     * @param {string} reason - simple string of why this DateTime is invalid. Should not contain parameters or anything else data-dependent.
      * @param {string} [explanation=null] - longer explanation, may include parameters and other useful debugging information
      * @return {DateTime}
      */
@@ -8015,6 +8387,43 @@
       return this.isValid ? possiblyCachedWeekData(this).weekday : NaN;
     }
 
+    /**
+     * Returns true if this date is on a weekend according to the locale, false otherwise
+     * @returns {boolean}
+     */
+    get isWeekend() {
+      return this.isValid && this.loc.getWeekendDays().includes(this.weekday);
+    }
+
+    /**
+     * Get the day of the week according to the locale.
+     * 1 is the first day of the week and 7 is the last day of the week.
+     * If the locale assigns Sunday as the first day of the week, then a date which is a Sunday will return 1,
+     * @returns {number}
+     */
+    get localWeekday() {
+      return this.isValid ? possiblyCachedLocalWeekData(this).weekday : NaN;
+    }
+
+    /**
+     * Get the week number of the week year according to the locale. Different locales assign week numbers differently,
+     * because the week can start on different days of the week (see localWeekday) and because a different number of days
+     * is required for a week to count as the first week of a year.
+     * @returns {number}
+     */
+    get localWeekNumber() {
+      return this.isValid ? possiblyCachedLocalWeekData(this).weekNumber : NaN;
+    }
+
+    /**
+     * Get the week year according to the locale. Different locales assign week numbers (and therefor week years)
+     * differently, see localWeekNumber.
+     * @returns {number}
+     */
+    get localWeekYear() {
+      return this.isValid ? possiblyCachedLocalWeekData(this).weekYear : NaN;
+    }
+
     /**
      * Get the ordinal (meaning the day of the year)
      * @example DateTime.local(2017, 5, 25).ordinal //=> 145
@@ -8139,6 +8548,41 @@
       }
     }
 
+    /**
+     * Get those DateTimes which have the same local time as this DateTime, but a different offset from UTC
+     * in this DateTime's zone. During DST changes local time can be ambiguous, for example
+     * `2023-10-29T02:30:00` in `Europe/Berlin` can have offset `+01:00` or `+02:00`.
+     * This method will return both possible DateTimes if this DateTime's local time is ambiguous.
+     * @returns {DateTime[]}
+     */
+    getPossibleOffsets() {
+      if (!this.isValid || this.isOffsetFixed) {
+        return [this];
+      }
+      const dayMs = 86400000;
+      const minuteMs = 60000;
+      const localTS = objToLocalTS(this.c);
+      const oEarlier = this.zone.offset(localTS - dayMs);
+      const oLater = this.zone.offset(localTS + dayMs);
+      const o1 = this.zone.offset(localTS - oEarlier * minuteMs);
+      const o2 = this.zone.offset(localTS - oLater * minuteMs);
+      if (o1 === o2) {
+        return [this];
+      }
+      const ts1 = localTS - o1 * minuteMs;
+      const ts2 = localTS - o2 * minuteMs;
+      const c1 = tsToObj(ts1, o1);
+      const c2 = tsToObj(ts2, o2);
+      if (c1.hour === c2.hour && c1.minute === c2.minute && c1.second === c2.second && c1.millisecond === c2.millisecond) {
+        return [clone$1(this, {
+          ts: ts1
+        }), clone$1(this, {
+          ts: ts2
+        })];
+      }
+      return [this];
+    }
+
     /**
      * Returns true if this DateTime is in a leap year, false otherwise
      * @example DateTime.local(2016).isInLeapYear //=> true
@@ -8180,6 +8624,16 @@
       return this.isValid ? weeksInWeekYear(this.weekYear) : NaN;
     }
 
+    /**
+     * Returns the number of weeks in this DateTime's local week year
+     * @example DateTime.local(2020, 6, {locale: 'en-US'}).weeksInLocalWeekYear //=> 52
+     * @example DateTime.local(2020, 6, {locale: 'de-DE'}).weeksInLocalWeekYear //=> 53
+     * @type {number}
+     */
+    get weeksInLocalWeekYear() {
+      return this.isValid ? weeksInWeekYear(this.localWeekYear, this.loc.getMinDaysInFirstWeek(), this.loc.getStartOfWeek()) : NaN;
+    }
+
     /**
      * Returns the resolved Intl options for this DateTime.
      * This is useful in understanding the behavior of formatting methods
@@ -8291,6 +8745,9 @@
     /**
      * "Set" the values of specified units. Returns a newly-constructed DateTime.
      * You can only set units with this method; for "setting" metadata, see {@link DateTime#reconfigure} and {@link DateTime#setZone}.
+     *
+     * This method also supports setting locale-based week units, i.e. `localWeekday`, `localWeekNumber` and `localWeekYear`.
+     * They cannot be mixed with ISO-week units like `weekday`.
      * @param {Object} values - a mapping of units to numbers
      * @example dt.set({ year: 2017 })
      * @example dt.set({ hour: 8, minute: 30 })
@@ -8300,8 +8757,12 @@
      */
     set(values) {
       if (!this.isValid) return this;
-      const normalized = normalizeObject(values, normalizeUnit),
-        settingWeekStuff = !isUndefined$1(normalized.weekYear) || !isUndefined$1(normalized.weekNumber) || !isUndefined$1(normalized.weekday),
+      const normalized = normalizeObject(values, normalizeUnitWithLocalWeeks);
+      const {
+        minDaysInFirstWeek,
+        startOfWeek
+      } = usesLocalWeekValues(normalized, this.loc);
+      const settingWeekStuff = !isUndefined$1(normalized.weekYear) || !isUndefined$1(normalized.weekNumber) || !isUndefined$1(normalized.weekday),
         containsOrdinal = !isUndefined$1(normalized.ordinal),
         containsGregorYear = !isUndefined$1(normalized.year),
         containsGregorMD = !isUndefined$1(normalized.month) || !isUndefined$1(normalized.day),
@@ -8316,9 +8777,9 @@
       let mixed;
       if (settingWeekStuff) {
         mixed = weekToGregorian({
-          ...gregorianToWeek(this.c),
+          ...gregorianToWeek(this.c, minDaysInFirstWeek, startOfWeek),
           ...normalized
-        });
+        }, minDaysInFirstWeek, startOfWeek);
       } else if (!isUndefined$1(normalized.ordinal)) {
         mixed = ordinalToGregorian({
           ...gregorianToOrdinal(this.c),
@@ -8377,6 +8838,8 @@
     /**
      * "Set" this DateTime to the beginning of a unit of time.
      * @param {string} unit - The unit to go to the beginning of. Can be 'year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second', or 'millisecond'.
+     * @param {Object} opts - options
+     * @param {boolean} [opts.useLocaleWeeks=false] - If true, use weeks based on the locale, i.e. use the locale-dependent start of the week
      * @example DateTime.local(2014, 3, 3).startOf('month').toISODate(); //=> '2014-03-01'
      * @example DateTime.local(2014, 3, 3).startOf('year').toISODate(); //=> '2014-01-01'
      * @example DateTime.local(2014, 3, 3).startOf('week').toISODate(); //=> '2014-03-03', weeks always start on Mondays
@@ -8384,7 +8847,9 @@
      * @example DateTime.local(2014, 3, 3, 5, 30).startOf('hour').toISOTime(); //=> '05:00:00.000-05:00'
      * @return {DateTime}
      */
-    startOf(unit) {
+    startOf(unit, {
+      useLocaleWeeks = false
+    } = {}) {
       if (!this.isValid) return this;
       const o = {},
         normalizedUnit = Duration.normalizeUnit(unit);
@@ -8413,7 +8878,18 @@
       }
 
       if (normalizedUnit === "weeks") {
-        o.weekday = 1;
+        if (useLocaleWeeks) {
+          const startOfWeek = this.loc.getStartOfWeek();
+          const {
+            weekday
+          } = this;
+          if (weekday < startOfWeek) {
+            o.weekNumber = this.weekNumber - 1;
+          }
+          o.weekday = startOfWeek;
+        } else {
+          o.weekday = 1;
+        }
       }
       if (normalizedUnit === "quarters") {
         const q = Math.ceil(this.month / 3);
@@ -8425,6 +8901,8 @@
     /**
      * "Set" this DateTime to the end (meaning the last millisecond) of a unit of time
      * @param {string} unit - The unit to go to the end of. Can be 'year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second', or 'millisecond'.
+     * @param {Object} opts - options
+     * @param {boolean} [opts.useLocaleWeeks=false] - If true, use weeks based on the locale, i.e. use the locale-dependent start of the week
      * @example DateTime.local(2014, 3, 3).endOf('month').toISO(); //=> '2014-03-31T23:59:59.999-05:00'
      * @example DateTime.local(2014, 3, 3).endOf('year').toISO(); //=> '2014-12-31T23:59:59.999-05:00'
      * @example DateTime.local(2014, 3, 3).endOf('week').toISO(); // => '2014-03-09T23:59:59.999-05:00', weeks start on Mondays
@@ -8432,10 +8910,10 @@
      * @example DateTime.local(2014, 3, 3, 5, 30).endOf('hour').toISO(); //=> '2014-03-03T05:59:59.999-05:00'
      * @return {DateTime}
      */
-    endOf(unit) {
+    endOf(unit, opts) {
       return this.isValid ? this.plus({
         [unit]: 1
-      }).startOf(unit).minus(1) : this;
+      }).startOf(unit, opts).minus(1) : this;
     }
 
     // OUTPUT
@@ -8675,6 +9153,18 @@
       return this.isValid ? this.toISO() : INVALID$1;
     }
 
+    /**
+     * Returns a string representation of this DateTime appropriate for the REPL.
+     * @return {string}
+     */
+    [Symbol.for("nodejs.util.inspect.custom")]() {
+      if (this.isValid) {
+        return `DateTime { ts: ${this.toISO()}, zone: ${this.zone.name}, locale: ${this.locale} }`;
+      } else {
+        return `DateTime { Invalid, reason: ${this.invalidReason} }`;
+      }
+    }
+
     /**
      * Returns the epoch milliseconds of this DateTime. Alias of {@link DateTime#toMillis}
      * @return {number}
@@ -8812,16 +9302,18 @@
      * Note that time zones are **ignored** in this comparison, which compares the **local** calendar time. Use {@link DateTime#setZone} to convert one of the dates if needed.
      * @param {DateTime} otherDateTime - the other DateTime
      * @param {string} unit - the unit of time to check sameness on
+     * @param {Object} opts - options
+     * @param {boolean} [opts.useLocaleWeeks=false] - If true, use weeks based on the locale, i.e. use the locale-dependent start of the week; only the locale of this DateTime is used
      * @example DateTime.now().hasSame(otherDT, 'day'); //~> true if otherDT is in the same current calendar day
      * @return {boolean}
      */
-    hasSame(otherDateTime, unit) {
+    hasSame(otherDateTime, unit, opts) {
       if (!this.isValid) return false;
       const inputMs = otherDateTime.valueOf();
       const adjustedToZone = this.setZone(otherDateTime.zone, {
         keepLocalTime: true
       });
-      return adjustedToZone.startOf(unit) <= inputMs && inputMs <= adjustedToZone.endOf(unit);
+      return adjustedToZone.startOf(unit, opts) <= inputMs && inputMs <= adjustedToZone.endOf(unit, opts);
     }
 
     /**
@@ -14929,7 +15421,7 @@
   function isString$1(obj) {
     return typeof obj === 'string';
   }
-  function equals(a, b) {
+  function equals(a, b, strict = false) {
     if (a === null && b !== null || a !== null && b === null) {
       return false;
     }
@@ -14941,6 +15433,23 @@
     }
     const aType = getType(a);
     const bType = getType(b);
+    const temporalTypes = ['date time', 'time', 'date'];
+    if (temporalTypes.includes(aType)) {
+      if (!temporalTypes.includes(bType)) {
+        return null;
+      }
+      if (aType === 'time' && bType !== 'time') {
+        return null;
+      }
+      if (bType === 'time' && aType !== 'time') {
+        return null;
+      }
+      if (strict || a.zone === SystemZone.instance || b.zone === SystemZone.instance) {
+        return a.equals(b);
+      } else {
+        return a.toUTC().valueOf() === b.toUTC().valueOf();
+      }
+    }
     if (aType !== bType) {
       return null;
     }
@@ -14953,9 +15462,6 @@
       }
       return a.every((element, idx) => equals(element, b[idx]));
     }
-    if (aType === 'date time' || aType === 'time' || aType === 'date') {
-      return a.toUTC().valueOf() === b.toUTC().valueOf();
-    }
     if (aType === 'duration') {
       // years and months duration -> months
       if (Math.abs(a.as('days')) > 180) {
@@ -14992,8 +15498,35 @@
       let params;
       if (isArray$2(contextOrArgs)) {
         params = contextOrArgs;
+        // reject
+        if (params.length > this.parameterNames.length) {
+          const lastParam = this.parameterNames[this.parameterNames.length - 1];
+          // strictly check for parameter count provided
+          // for non var-args functions
+          if (!lastParam || !lastParam.startsWith('...')) {
+            return null;
+          }
+        }
       } else {
-        params = this.parameterNames.map(n => contextOrArgs[n]);
+        // strictly check for required parameter names,
+        // and fail on wrong parameter name
+        if (Object.keys(contextOrArgs).some(key => !this.parameterNames.includes(key) && !this.parameterNames.includes(`...${key}`))) {
+          return null;
+        }
+        params = this.parameterNames.reduce((params, name) => {
+          if (name.startsWith('...')) {
+            name = name.slice(3);
+            const value = contextOrArgs[name];
+            if (!value) {
+              return params;
+            } else {
+              // ensure that single arg provided for var args named
+              // parameter is wrapped in a list
+              return [...params, ...(isArray$2(value) ? value : [value])];
+            }
+          }
+          return [...params, contextOrArgs[name]];
+        }, []);
       }
       return this.fn.call(null, ...params);
     }
@@ -15050,7 +15583,7 @@
       if (str) {
         throw new Error('<str> and <time> provided');
       }
-      return date(`1900-01-01T${time}`);
+      return date(`1900-01-01T${time}`, null);
     }
     if (typeof str === 'string') {
       if (str.startsWith('-')) {
@@ -15058,7 +15591,7 @@
       }
       if (!str.includes('T')) {
         // raw dates are in UTC time zone
-        return date(str + 'T00:00:00.000Z');
+        return date(str + 'T00:00:00', null, zone || FixedOffsetZone.utcInstance);
       }
       if (str.includes('@')) {
         if (zone) {
@@ -15078,11 +15611,25 @@
   // 10.3.4 Built-in functions
   const builtins$1 = {
     // 10.3.4.1 Conversion functions
-    'number': function () {
-      throw notImplemented('number');
-    },
+    'number': fn(function (from, groupingSeparator, decimalSeparator) {
+      // must always provide three arguments
+      if (arguments.length !== 3) {
+        return null;
+      }
+      if (groupingSeparator) {
+        from = from.split(groupingSeparator).join('');
+      }
+      if (decimalSeparator && decimalSeparator !== '.') {
+        from = from.split('.').join('#').split(decimalSeparator).join('.');
+      }
+      const number = +from;
+      if (isNaN(number)) {
+        return null;
+      }
+      return number;
+    }, ['string', 'string?', 'string?'], ['from', 'grouping separator', 'decimal separator']),
     'string': fn(function (from) {
-      if (arguments.length !== 1) {
+      if (from === null) {
         return null;
       }
       return toString$3(from);
@@ -15116,10 +15663,11 @@
     'date and time': fn(function (d, time, from) {
       let dt;
       if (isDateTime(d) && isDateTime(time)) {
+        const dLocal = d.toLocal();
         dt = time.set({
-          year: d.year,
-          month: d.month,
-          day: d.day
+          year: dLocal.year,
+          month: dLocal.month,
+          day: dLocal.day
         });
       }
       if (isString$1(d)) {
@@ -15127,7 +15675,7 @@
         d = null;
       }
       if (isString$1(from)) {
-        dt = date(from);
+        dt = date(from, null, from.includes('@') ? null : SystemZone.instance);
       }
       return dt && ifValid(dt) || null;
     }, ['any?', 'time?', 'string?'], ['date', 'time', 'from']),
@@ -15230,6 +15778,10 @@
     'contains': fn(function (string, match) {
       return string.includes(match);
     }, ['string', 'string']),
+    // eslint-disable-next-line
+    'matches': fn(function (input, pattern, flags) {
+      throw notImplemented('matches');
+    }, ['string', 'string', 'string?']),
     'starts with': fn(function (string, match) {
       return string.startsWith(match);
     }, ['string', 'string']),
@@ -15239,27 +15791,42 @@
     'split': fn(function (string, delimiter) {
       return string.split(new RegExp(delimiter, 'u'));
     }, ['string', 'string']),
+    'string join': fn(function (list, delimiter) {
+      if (list.some(e => !isString$1(e) && e !== null)) {
+        return null;
+      }
+      return list.filter(l => l !== null).join(delimiter || '');
+    }, ['list', 'string?']),
     // 10.3.4.4 List functions
     'list contains': fn(function (list, element) {
       return list.some(el => matches$2(el, element));
     }, ['list', 'any?']),
+    // list replace(list, position, newItem)
+    // list replace(list, match, newItem)
+    'list replace': fn(function (list, position, newItem, match) {
+      const matcher = position || match;
+      if (!['number', 'function'].includes(getType(matcher))) {
+        return null;
+      }
+      return listReplace(list, position || match, newItem);
+    }, ['list', 'any?', 'any', 'function?']),
     'count': fn(function (list) {
       return list.length;
     }, ['list']),
-    'min': listFn(function (list) {
+    'min': listFn(function (...list) {
       return list.reduce((min, el) => min === null ? el : Math.min(min, el), null);
     }, 'number'),
-    'max': listFn(function (list) {
+    'max': listFn(function (...list) {
       return list.reduce((max, el) => max === null ? el : Math.max(max, el), null);
     }, 'number'),
-    'sum': listFn(function (list) {
+    'sum': listFn(function (...list) {
       return sum(list);
     }, 'number'),
-    'mean': listFn(function (list) {
+    'mean': listFn(function (...list) {
       const s = sum(list);
       return s === null ? s : s / list.length;
     }, 'number'),
-    'all': listFn(function (list) {
+    'all': listFn(function (...list) {
       let nonBool = false;
       for (const o of list) {
         if (o === false) {
@@ -15271,7 +15838,7 @@
       }
       return nonBool ? null : true;
     }, 'any?'),
-    'any': listFn(function (list) {
+    'any': listFn(function (...list) {
       let nonBool = false;
       for (const o of list) {
         if (o === true) {
@@ -15312,7 +15879,7 @@
         return result;
       }, []);
     }, ['list', 'any']),
-    'union': listFn(function (lists) {
+    'union': listFn(function (...lists) {
       return lists.reduce((result, list) => {
         return list.reduce((result, e) => {
           if (!result.some(r => equals(e, r))) {
@@ -15333,7 +15900,7 @@
     'flatten': fn(function (list) {
       return flatten$1(list);
     }, ['list']),
-    'product': listFn(function (list) {
+    'product': listFn(function (...list) {
       if (list.length === 0) {
         return null;
       }
@@ -15341,19 +15908,19 @@
         return result * n;
       }, 1);
     }, 'number'),
-    'median': listFn(function (list) {
+    'median': listFn(function (...list) {
       if (list.length === 0) {
         return null;
       }
       return median(list);
     }, 'number'),
-    'stddev': listFn(function (list) {
+    'stddev': listFn(function (...list) {
       if (list.length < 2) {
         return null;
       }
       return stddev(list);
     }, 'number'),
-    'mode': listFn(function (list) {
+    'mode': listFn(function (...list) {
       return mode(list);
     }, 'number'),
     // 10.3.4.5 Numeric functions
@@ -15364,18 +15931,42 @@
       const offset = Math.pow(10, scale);
       return round$1(n * offset) / offset;
     }, ['number', 'number']),
-    'floor': fn(function (n) {
-      return Math.floor(n);
-    }, ['number']),
-    'ceiling': fn(function (n) {
-      return Math.ceil(n) + 0;
-    }, ['number']),
+    'floor': fn(function (n, scale = 0) {
+      if (scale === null) {
+        return null;
+      }
+      const adjust = Math.pow(10, scale);
+      return Math.floor(n * adjust) / adjust;
+    }, ['number', 'number?']),
+    'ceiling': fn(function (n, scale = 0) {
+      if (scale === null) {
+        return null;
+      }
+      const adjust = Math.pow(10, scale);
+      return Math.ceil(n * adjust) / adjust;
+    }, ['number', 'number?']),
     'abs': fn(function (n) {
       if (typeof n !== 'number') {
         return null;
       }
       return Math.abs(n);
     }, ['number']),
+    // eslint-disable-next-line
+    'round up': fn(function (n, scale) {
+      throw notImplemented('round up');
+    }, ['number', 'number']),
+    // eslint-disable-next-line
+    'round down': fn(function (n, scale) {
+      throw notImplemented('round down');
+    }, ['number', 'number']),
+    // eslint-disable-next-line
+    'round half up': fn(function (n, scale) {
+      throw notImplemented('round half up');
+    }, ['number', 'number']),
+    // eslint-disable-next-line
+    'round half down': fn(function (n, scale) {
+      throw notImplemented('round half down');
+    }, ['number', 'number']),
     'modulo': fn(function (dividend, divisor) {
       if (!divisor) {
         return null;
@@ -15413,7 +16004,7 @@
       if (typeof value1 === 'undefined' || typeof value2 === 'undefined') {
         return false;
       }
-      return equals(value1, value2);
+      return equals(value1, value2, true);
     }, ['any?', 'any?']),
     // 10.3.4.7 Range Functions
     'before': fn(function (a, b) {
@@ -15423,14 +16014,14 @@
       return before(b, a);
     }, ['any', 'any']),
     'meets': fn(function (a, b) {
-      return meets(a, b);
+      return meetsRange(a, b);
     }, ['range', 'range']),
     'met by': fn(function (a, b) {
-      return meets(b, a);
+      return meetsRange(b, a);
+    }, ['range', 'range']),
+    'overlaps': fn(function (range1, range2) {
+      return !before(range1, range2) && !before(range2, range1);
     }, ['range', 'range']),
-    'overlaps': fn(function () {
-      throw notImplemented('overlaps');
-    }, ['any?']),
     'overlaps before': fn(function () {
       throw notImplemented('overlaps before');
     }, ['any?']),
@@ -15459,22 +16050,22 @@
       throw notImplemented('coincides');
     }, ['any?']),
     // 10.3.4.8 Temporal built-in functions
-    'day of year': fn(function () {
-      throw notImplemented('day of year');
-    }, ['any?']),
-    'day of week': fn(function () {
-      throw notImplemented('day of week');
-    }, ['any?']),
-    'month of year': fn(function () {
-      throw notImplemented('month of year');
-    }, ['any?']),
-    'week of year': fn(function () {
-      throw notImplemented('week of year');
-    }, ['any?']),
+    'day of year': fn(function (date) {
+      return date.ordinal;
+    }, ['date time']),
+    'day of week': fn(function (date) {
+      return date.weekdayLong;
+    }, ['date time']),
+    'month of year': fn(function (date) {
+      return date.monthLong;
+    }, ['date time']),
+    'week of year': fn(function (date) {
+      return date.weekNumber;
+    }, ['date time']),
     // 10.3.4.9 Sort
-    'sort': function () {
-      throw notImplemented('sort');
-    },
+    'sort': fn(function (list, precedes) {
+      return Array.from(list).sort((a, b) => precedes.invoke([a, b]) ? -1 : 1);
+    }, ['list', 'function']),
     // 10.3.4.10 Context function
     'get value': fn(function (m, key) {
       return getFromContext(key, m);
@@ -15491,16 +16082,60 @@
         value
       }));
     }, ['context']),
-    'context': listFn(function (_contexts) {
-      throw notImplemented('context');
+    'context': listFn(function (...entries) {
+      const context = entries.reduce((context, entry) => {
+        if (context === FALSE || !['key', 'value'].every(e => e in entry)) {
+          return FALSE;
+        }
+        const key = entry.key;
+        if (key === null) {
+          return FALSE;
+        }
+        if (key in context) {
+          return FALSE;
+        }
+        return Object.assign(Object.assign({}, context), {
+          [entry.key]: entry.value
+        });
+      }, {});
+      if (context === FALSE) {
+        return null;
+      }
+      return context;
     }, 'context'),
-    'context merge': listFn(function (_contexts) {
-      throw notImplemented('context merge');
+    'context merge': listFn(function (...contexts) {
+      return Object.assign({}, ...contexts);
     }, 'context'),
-    'context put': fn(function (_context, _keys, _value) {
-      throw notImplemented('context put');
-    }, ['context', 'list', 'any'])
+    'context put': fn(function (context, keys, value, key) {
+      if (typeof keys === 'undefined' && typeof key === 'undefined') {
+        return null;
+      }
+      return contextPut(context, keys || [key], value);
+    }, ['context', 'list?', 'any', 'string?'], ['context', 'keys', 'value', 'key'])
   };
+  /**
+   * @param {Object} context
+   * @param {string[]} keys
+   * @param {any} value
+   */
+  function contextPut(context, keys, value) {
+    const [key, ...remainingKeys] = keys;
+    if (getType(key) !== 'string') {
+      return null;
+    }
+    if (getType(context) === 'nil') {
+      return null;
+    }
+    if (remainingKeys.length) {
+      value = contextPut(context[key], remainingKeys, value);
+      if (value === null) {
+        return null;
+      }
+    }
+    return Object.assign(Object.assign({}, context), {
+      [key]: value
+    });
+  }
   function matches$2(a, b) {
     return a === b;
   }
@@ -15515,23 +16150,20 @@
           return obj;
         } else {
           // implicit conversion obj => [ obj ]
-          return [obj];
+          return obj === null ? FALSE : [obj];
         }
       }
       if (type !== 'any' && arr && obj.length === 1) {
         // implicit conversion [ obj ] => obj
         obj = obj[0];
       }
-      if (type === 'range') {
-        return obj instanceof Range$1 ? obj : FALSE;
-      }
       const objType = getType(obj);
+      if (type === 'any' || type === objType) {
+        return optional ? obj : typeof obj !== 'undefined' ? obj : FALSE;
+      }
       if (objType === 'nil') {
         return optional ? obj : FALSE;
       }
-      if (type === 'any' || type === objType) {
-        return obj;
-      }
       return typeCast(obj, type) || FALSE;
     };
   }
@@ -15575,7 +16207,7 @@
       if (!args.every(arg => tester(arg) !== FALSE)) {
         return null;
       }
-      return fnDefinition(args);
+      return fnDefinition(...args);
     };
     wrappedFn.$args = parameterNames || parseParameterNames(fnDefinition);
     return wrappedFn;
@@ -15600,9 +16232,17 @@
     wrappedFn.$args = parameterNames;
     return wrappedFn;
   }
-  function meets(a, b) {
+  /**
+   * @param {Range} a
+   * @param {Range} b
+   */
+  function meetsRange(a, b) {
     return [a.end === b.start, a['end included'] === true, b['start included'] === true].every(v => v);
   }
+  /**
+   * @param {Range|number} a
+   * @param {Range|number} b
+   */
   function before(a, b) {
     if (a instanceof Range$1 && b instanceof Range$1) {
       return a.end < b.start || (!a['end included'] || !b['start included']) && a.end == b.start;
@@ -15657,6 +16297,12 @@
       return obj.shiftTo('years', 'months', 'days', 'hours', 'minutes', 'seconds').normalize().toISO();
     }
     if (type === 'date time') {
+      if (obj.zone === SystemZone.instance) {
+        return obj.toISO({
+          suppressMilliseconds: true,
+          includeOffset: false
+        });
+      }
       if ((_a = obj.zone) === null || _a === void 0 ? void 0 : _a.zoneName) {
         return obj.toISO({
           suppressMilliseconds: true,
@@ -15674,6 +16320,12 @@
       return '<range>';
     }
     if (type === 'time') {
+      if (obj.zone === SystemZone.instance) {
+        return obj.toISOTime({
+          suppressMilliseconds: true,
+          includeOffset: false
+        });
+      }
       if ((_c = obj.zone) === null || _c === void 0 ? void 0 : _c.zoneName) {
         return obj.toISOTime({
           suppressMilliseconds: true,
@@ -15707,6 +16359,18 @@
     const mean = array.reduce((a, b) => a + b) / n;
     return Math.sqrt(array.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / (n - 1));
   }
+  function listReplace(list, matcher, newItem) {
+    if (isNumber$1(matcher)) {
+      return [...list.slice(0, matcher - 1), newItem, ...list.slice(matcher)];
+    }
+    return list.map((item, _idx) => {
+      if (matcher.invoke([item, newItem])) {
+        return newItem;
+      } else {
+        return item;
+      }
+    });
+  }
   function median(array) {
     const n = array.length;
     const sorted = array.slice().sort();
@@ -15840,16 +16504,51 @@
             }
             const leftType = getType(left);
             const rightType = getType(right);
-            if (leftType !== rightType || !types.includes(leftType)) {
+            const temporal = ['date', 'time', 'date time', 'duration'];
+            if (temporal.includes(leftType)) {
+              if (!temporal.includes(rightType)) {
+                return null;
+              }
+            } else if (leftType !== rightType || !types.includes(leftType)) {
               return null;
             }
             return op(left, right);
           };
           switch (input) {
             case '+':
-              return nullable((a, b) => a + b, ['string', 'number']);
+              return nullable((a, b) => {
+                if (isType(a, 'time') && isDuration(b)) {
+                  return a.plus(b).set({
+                    year: 1900,
+                    month: 1,
+                    day: 1
+                  });
+                } else if (isDateTime(a) && isDateTime(b)) {
+                  return null;
+                } else if (isDateTime(a) && isDuration(b)) {
+                  return a.plus(b);
+                } else if (isDuration(a) && isDuration(b)) {
+                  return a.plus(b);
+                }
+                return a + b;
+              }, ['string', 'number', 'date', 'time', 'duration', 'date time']);
             case '-':
-              return nullable((a, b) => a - b);
+              return nullable((a, b) => {
+                if (isType(a, 'time') && isDuration(b)) {
+                  return a.minus(b).set({
+                    year: 1900,
+                    month: 1,
+                    day: 1
+                  });
+                } else if (isDateTime(a) && isDateTime(b)) {
+                  return a.diff(b);
+                } else if (isDateTime(a) && isDuration(b)) {
+                  return a.minus(b);
+                } else if (isDuration(a) && isDuration(b)) {
+                  return a.minus(b);
+                }
+                return a - b;
+              }, ['number', 'date', 'time', 'duration', 'date time']);
             case '*':
               return nullable((a, b) => a * b);
             case '/':
@@ -16330,7 +17029,7 @@
       return createNumberRange(start, end, startIncluded, endIncluded);
     }
     if (isTyped('duration', [start, end])) {
-      throw notImplemented('range<duration>');
+      return createDurationRange(start, end, startIncluded, endIncluded);
     }
     if (isTyped('time', [start, end])) {
       return createDateTimeRange(start, end, startIncluded, endIncluded);
@@ -16390,7 +17089,7 @@
       return value => n > value;
     }
   }
-  function anyIncludes(start, end, startIncluded, endIncluded) {
+  function anyIncludes(start, end, startIncluded, endIncluded, conversion = v => v) {
     let tests = [];
     if (start === null && end === null) {
       return () => null;
@@ -16406,7 +17105,7 @@
     } else if (start !== null) {
       tests = [includesStart(start, startIncluded)];
     }
-    return value => value === null ? null : tests.every(t => t(value));
+    return value => value === null ? null : tests.every(t => t(conversion(value)));
   }
   function createStringRange(start, end, startIncluded = true, endIncluded = true) {
     if (start !== null && !chars.includes(start)) {
@@ -16451,6 +17150,25 @@
       includes
     });
   }
+  /**
+   * @param {Duration} start
+   * @param {Duration} end
+   * @param {boolean} startIncluded
+   * @param {boolean} endIncluded
+   */
+  function createDurationRange(start, end, startIncluded, endIncluded) {
+    const toMillis = d => d ? Duration.fromDurationLike(d).toMillis() : null;
+    const map = noopMap();
+    const includes = anyIncludes(toMillis(start), toMillis(end), startIncluded, endIncluded, toMillis);
+    return new Range$1({
+      start,
+      end,
+      'start included': startIncluded,
+      'end included': endIncluded,
+      map,
+      includes
+    });
+  }
   function createDateTimeRange(start, end, startIncluded, endIncluded) {
     const map = noopMap();
     const includes = anyIncludes(start, end, startIncluded, endIncluded);
@@ -30129,7 +30847,7 @@
   /**
   Get the active tooltip view for a given tooltip, if available.
   */
-  function getTooltip(view, tooltip) {
+  function getTooltip$1(view, tooltip) {
     let plugin = view.plugin(tooltipPlugin);
     if (!plugin) return null;
     let found = plugin.manager.tooltips.indexOf(tooltip);
@@ -33597,7 +34315,7 @@
       if (!cState || !cState.open || cState.open.disabled || Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay) return false;
       let step = 1,
         tooltip;
-      if (by == "page" && (tooltip = getTooltip(view, cState.open.tooltip))) step = Math.max(2, Math.floor(tooltip.dom.offsetHeight / tooltip.dom.querySelector("li").offsetHeight) - 1);
+      if (by == "page" && (tooltip = getTooltip$1(view, cState.open.tooltip))) step = Math.max(2, Math.floor(tooltip.dom.offsetHeight / tooltip.dom.querySelector("li").offsetHeight) - 1);
       let {
         length
       } = cState.open.options;
@@ -33768,7 +34486,7 @@
       blur(event) {
         let state = this.view.state.field(completionState, false);
         if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
-          let dialog = state.open && getTooltip(this.view, state.open.tooltip);
+          let dialog = state.open && getTooltip$1(this.view, state.open.tooltip);
           if (!dialog || !dialog.dom.contains(event.relatedTarget)) this.view.dispatch({
             effects: closeCompletionEffect.of(null)
           });
@@ -39618,18 +40336,18 @@
     return stack[0].children[0];
   }
 
-  /**
-   * @typedef {object} EvaluationOptions
-   * @property {boolean} [debug=false] - whether to enable debug mode, which displays errors inline instead of throwing them
-   * @property {function} [buildDebugString=(e) => `{{ ${e.message.toLowerCase()} }}`] - function that takes an error and returns the string to display in debug mode
-   * @property {boolean} [strict=false] - whether to expect strict data types out of our FEEL expression, e.g. boolean for conditionals
+  /**
+   * @typedef {object} EvaluationOptions
+   * @property {boolean} [debug=false] - whether to enable debug mode, which displays errors inline instead of throwing them
+   * @property {function} [buildDebugString=(e) => `{{ ${e.message.toLowerCase()} }}`] - function that takes an error and returns the string to display in debug mode
+   * @property {boolean} [strict=false] - whether to expect strict data types out of our FEEL expression, e.g. boolean for conditionals
    */
 
-  /**
-   * @param {string} templateString - the template string to evaluate
-   * @param {object} [context={}] - the context object to evaluate the template string against
-   * @param {EvaluationOptions} [options={}] - options to configure the evaluation
-   * @return {string} the evaluated template string
+  /**
+   * @param {string} templateString - the template string to evaluate
+   * @param {object} [context={}] - the context object to evaluate the template string against
+   * @param {EvaluationOptions} [options={}] - options to configure the evaluation
+   * @return {string} the evaluated template string
    */
   const evaluate = (templateString, context = {}, options = {}) => {
     const {
@@ -39657,7 +40375,7 @@
           {
             const feel = node.children[0].content;
             try {
-              return evaluate$1(feel, context);
+              return evaluate$1(`string(${feel})`, context);
             } catch {
               return errorHandler(new Error(`FEEL expression ${feel} couldn't be evaluated`));
             }
@@ -39667,10 +40385,11 @@
         case 'Feel':
         case 'FeelBlock':
           {
+            const feel = node.content;
             try {
-              return evaluate$1(node.content, context);
-            } catch {
-              return errorHandler(new Error(`FEEL expression ${node.content} couldn't be evaluated`));
+              return evaluate$1(`string(${feel})`, context);
+            } catch (e) {
+              return errorHandler(new Error(`FEEL expression ${feel} couldn't be evaluated`));
             }
           }
         case 'Feelers':
@@ -39785,11 +40504,11 @@
   }
   const createFeelersLanguageSupport = hostLanguageParser => new LanguageSupport(createMixedLanguage(hostLanguageParser), []);
 
-  /**
-   * Create warnings for empty inserts in the given tree.
-   *
-   * @param {Tree} syntaxTree
-   * @returns {LintMessage[]} array of syntax errors
+  /**
+   * Create warnings for empty inserts in the given tree.
+   *
+   * @param {Tree} syntaxTree
+   * @returns {LintMessage[]} array of syntax errors
    */
   function lintEmptyInserts(syntaxTree) {
     const lintMessages = [];
@@ -39809,22 +40528,22 @@
     return lintMessages;
   }
 
-  /**
-   * Generates lint messages for the given syntax tree.
-   *
-   * @param {Tree} syntaxTree
-   * @returns {LintMessage[]} array of all lint messages
+  /**
+   * Generates lint messages for the given syntax tree.
+   *
+   * @param {Tree} syntaxTree
+   * @returns {LintMessage[]} array of all lint messages
    */
   function lintAll(syntaxTree) {
     const lintMessages = [...lintEmptyInserts(syntaxTree)];
     return lintMessages;
   }
 
-  /**
-   * CodeMirror extension that provides linting for FEEL expressions.
-   *
-   * @param {EditorView} editorView
-   * @returns {Source} CodeMirror linting source
+  /**
+   * CodeMirror extension that provides linting for FEEL expressions.
+   *
+   * @param {EditorView} editorView
+   * @returns {Source} CodeMirror linting source
    */
   function cmFeelersLinter() {
     const lintFeel = cmFeelLinter();
@@ -39845,24 +40564,24 @@
   }
   var lint = linter$1(cmFeelersLinter());
 
-  /**
-   * Creates a Feelers editor in the supplied container.
-   *
-   * @param {Object} config Configuration options for the Feelers editor.
-   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
-   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
-   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
-   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
-   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
-   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
-   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
-   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
-   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
-   * @param {String} [config.value] Initial value of the editor.
-   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
-   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
-   *
-   * @returns {Object} editor An instance of the FeelersEditor class.
+  /**
+   * Creates a Feelers editor in the supplied container.
+   *
+   * @param {Object} config Configuration options for the Feelers editor.
+   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
+   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
+   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
+   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
+   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
+   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
+   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
+   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
+   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
+   * @param {String} [config.value] Initial value of the editor.
+   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
+   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
+   *
+   * @returns {Object} editor An instance of the FeelersEditor class.
    */
   function FeelersEditor({
     container,
@@ -39933,10 +40652,10 @@
     return this;
   }
 
-  /**
-   * Replaces the content of the Editor
-   *
-   * @param {String} value
+  /**
+   * Replaces the content of the Editor
+   *
+   * @param {String} value
    */
   FeelersEditor.prototype.setValue = function (value) {
     this._cmEditor.dispatch({
@@ -39948,8 +40667,8 @@
     });
   };
 
-  /**
-   * Sets the focus in the editor.
+  /**
+   * Sets the focus in the editor.
    */
   FeelersEditor.prototype.focus = function (position) {
     const cmEditor = this._cmEditor;
@@ -39968,12 +40687,12 @@
     }
   };
 
-  /**
-   * Returns the current selection ranges. If no text is selected, a single
-   * range with the start and end index at the cursor position will be returned.
-   *
-   * @returns {Object} selection
-   * @returns {Array} selection.ranges
+  /**
+   * Returns the current selection ranges. If no text is selected, a single
+   * range with the start and end index at the cursor position will be returned.
+   *
+   * @returns {Object} selection
+   * @returns {Array} selection.ranges
    */
   FeelersEditor.prototype.getSelection = function () {
     return this._cmEditor.state.selection;
@@ -48040,7 +48759,7 @@
     }
     return `fjs-form-${id}`;
   }
-  const type$d = 'button';
+  const type$e = 'button';
   function Button(props) {
     const {
       disabled,
@@ -48052,7 +48771,7 @@
       action = 'submit'
     } = field;
     return e$1("div", {
-      class: formFieldClasses(type$d),
+      class: formFieldClasses(type$e),
       children: e$1("button", {
         class: "fjs-button",
         type: action,
@@ -48064,7 +48783,7 @@
     });
   }
   Button.config = {
-    type: type$d,
+    type: type$e,
     keyed: false,
     label: 'Button',
     group: 'action',
@@ -48354,7 +49073,7 @@
       })]
     });
   }
-  const type$c = 'checkbox';
+  const type$d = 'checkbox';
   function Checkbox$1(props) {
     const {
       disabled,
@@ -48387,7 +49106,7 @@
     } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
-      class: classNames(formFieldClasses(type$c, {
+      class: classNames(formFieldClasses(type$d, {
         errors,
         disabled,
         readonly
@@ -48419,7 +49138,7 @@
     });
   }
   Checkbox$1.config = {
-    type: type$c,
+    type: type$d,
     keyed: true,
     label: 'Checkbox',
     group: 'selection',
@@ -48433,54 +49152,54 @@
   };
 
   // parses the options data from the provided form field and form data
-  function getValuesData(formField, formData) {
+  function getOptionsData(formField, formData) {
     const {
-      valuesKey,
-      values
+      valuesKey: optionsKey,
+      values: staticOptions
     } = formField;
-    return valuesKey ? get$1(formData, [valuesKey]) : values;
+    return optionsKey ? get$1(formData, [optionsKey]) : staticOptions;
   }
 
   // transforms the provided options into a normalized format, trimming invalid options
-  function normalizeValuesData(valuesData) {
-    return valuesData.filter(_isValueSomething).map(v => _normalizeValueData(v)).filter(v => v);
+  function normalizeOptionsData(optionsData) {
+    return optionsData.filter(_isOptionSomething).map(v => _normalizeOptionsData(v)).filter(v => v);
   }
-  function _normalizeValueData(valueData) {
-    if (_isAllowedValue(valueData)) {
+  function _normalizeOptionsData(optionData) {
+    if (_isAllowedOption(optionData)) {
       // if a primitive is provided, use it as label and value
       return {
-        value: valueData,
-        label: `${valueData}`
+        value: optionData,
+        label: `${optionData}`
       };
     }
-    if (typeof valueData === 'object') {
-      if (!valueData.label && _isAllowedValue(valueData.value)) {
+    if (typeof optionData === 'object') {
+      if (!optionData.label && _isAllowedOption(optionData.value)) {
         // if no label is provided, use the value as label
         return {
-          value: valueData.value,
-          label: `${valueData.value}`
+          value: optionData.value,
+          label: `${optionData.value}`
         };
       }
-      if (_isValueSomething(valueData.value) && _isAllowedValue(valueData.label)) {
+      if (_isOptionSomething(optionData.value) && _isAllowedOption(optionData.label)) {
         // if both value and label are provided, use them as is, in this scenario, the value may also be an object
-        return valueData;
+        return optionData;
       }
     }
     return null;
   }
-  function _isAllowedValue(value) {
-    return _isReadableType(value) && _isValueSomething(value);
+  function _isAllowedOption(option) {
+    return _isReadableType(option) && _isOptionSomething(option);
   }
-  function _isReadableType(value) {
-    return ['number', 'string', 'boolean'].includes(typeof value);
+  function _isReadableType(option) {
+    return ['number', 'string', 'boolean'].includes(typeof option);
   }
-  function _isValueSomething(value) {
-    return value || value === 0 || value === false;
+  function _isOptionSomething(option) {
+    return option || option === 0 || option === false;
   }
   function createEmptyOptions(options = {}) {
     const defaults = {};
 
-    // provide default values if valuesKey and valuesExpression are not set
+    // provide default options if valuesKey and valuesExpression are not set
     if (!options.valuesKey && !options.valuesExpression) {
       defaults.values = [{
         label: 'Value',
@@ -48503,71 +49222,94 @@
   };
 
   /**
-   * @typedef {Object} ValuesGetter
-   * @property {Object[]} values - The values data
-   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+   * @typedef {Object} OptionsGetter
+   * @property {Object[]} options - The options data
+   * @property {(LOAD_STATES)} loadState - The options data's loading state, to use for conditional rendering
    */
 
   /**
-   * A hook to load values for single and multiselect components.
+   * A hook to load options for single and multiselect components.
    *
-   * @param {Object} field - The form field to handle values for
-   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+   * @param {Object} field - The form field to handle options for
+   * @return {OptionsGetter} optionsGetter - A options getter object providing loading state and options
    */
-  function useValuesAsync(field) {
+  function useOptionsAsync(field) {
     const {
-      valuesExpression,
-      valuesKey,
-      values: staticValues
+      valuesExpression: optionsExpression,
+      valuesKey: optionsKey,
+      values: staticOptions
     } = field;
-    const [valuesGetter, setValuesGetter] = l$2({
-      values: [],
+    const [optionsGetter, setOptionsGetter] = l$2({
+      options: [],
       error: undefined,
-      state: LOAD_STATES.LOADING
+      loadState: LOAD_STATES.LOADING
     });
     const initialData = useService$2('form')._getState().initialData;
-    const expressionEvaluation = useExpressionEvaluation(valuesExpression);
-    const evaluatedValues = useDeepCompareState(expressionEvaluation || [], []);
+    const expressionEvaluation = useExpressionEvaluation(optionsExpression);
+    const evaluatedOptions = useDeepCompareState(expressionEvaluation || [], []);
     y(() => {
-      let values = [];
+      let options = [];
 
-      // dynamic values
-      if (valuesKey !== undefined) {
-        const keyedValues = (initialData || {})[valuesKey];
-        if (keyedValues && Array.isArray(keyedValues)) {
-          values = keyedValues;
+      // dynamic options
+      if (optionsKey !== undefined) {
+        const keyedOptions = (initialData || {})[optionsKey];
+        if (keyedOptions && Array.isArray(keyedOptions)) {
+          options = keyedOptions;
         }
 
-        // static values
-      } else if (staticValues !== undefined) {
-        values = Array.isArray(staticValues) ? staticValues : [];
+        // static options
+      } else if (staticOptions !== undefined) {
+        options = Array.isArray(staticOptions) ? staticOptions : [];
 
         // expression
-      } else if (valuesExpression) {
-        if (evaluatedValues && Array.isArray(evaluatedValues)) {
-          values = evaluatedValues;
+      } else if (optionsExpression) {
+        if (evaluatedOptions && Array.isArray(evaluatedOptions)) {
+          options = evaluatedOptions;
         }
       } else {
-        setValuesGetter(buildErrorState('No values source defined in the form definition'));
+        setOptionsGetter(buildErrorState('No options source defined in the form definition'));
         return;
       }
 
       // normalize data to support primitives and partially defined objects
-      values = normalizeValuesData(values);
-      setValuesGetter(buildLoadedState(values));
-    }, [valuesKey, staticValues, initialData, valuesExpression, evaluatedValues]);
-    return valuesGetter;
+      options = normalizeOptionsData(options);
+      setOptionsGetter(buildLoadedState(options));
+    }, [optionsKey, staticOptions, initialData, optionsExpression, evaluatedOptions]);
+    return optionsGetter;
   }
   const buildErrorState = error => ({
-    values: [],
+    options: [],
     error,
-    state: LOAD_STATES.ERROR
+    loadState: LOAD_STATES.ERROR
   });
-  const buildLoadedState = values => ({
-    values,
+  const buildLoadedState = options => ({
+    options,
     error: undefined,
-    state: LOAD_STATES.LOADED
+    loadState: LOAD_STATES.LOADED
   });
+  function useCleanupMultiSelectValues(props) {
+    const {
+      field,
+      options,
+      loadState,
+      onChange,
+      values
+    } = props;
+
+    // Ensures that the values are always a subset of the possible options
+    y(() => {
+      if (loadState !== LOAD_STATES.LOADED) {
+        return;
+      }
+      const hasValuesNotInOptions = values.some(v => !options.map(o => o.value).includes(v));
+      if (hasValuesNotInOptions) {
+        onChange({
+          field,
+          value: values.filter(v => options.map(o => o.value).includes(v))
+        });
+      }
+    }, [field, options, onChange, JSON.stringify(values), loadState]);
+  }
 
   // config  ///////////////////
 
@@ -48780,7 +49522,7 @@
       value
     } = options;
     try {
-      const validValues = normalizeValuesData(getValuesData(formField, data)).map(v => v.value);
+      const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
       return validValues.includes(value) ? value : null;
     } catch (error) {
       // use default value in case of formatting error
@@ -48795,7 +49537,7 @@
       value
     } = options;
     try {
-      const validValues = normalizeValuesData(getValuesData(formField, data)).map(v => v.value);
+      const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
       return value.filter(v => validValues.includes(v));
     } catch (error) {
       // use default value in case of formatting error
@@ -48803,7 +49545,7 @@
       return [];
     }
   }
-  const type$b = 'checklist';
+  const type$c = 'checklist';
   function Checklist(props) {
     const {
       disabled,
@@ -48812,7 +49554,7 @@
       onFocus,
       field,
       readonly,
-      value = []
+      value: values = []
     } = props;
     const {
       description,
@@ -48825,7 +49567,7 @@
       required
     } = validate;
     const toggleCheckbox = v => {
-      let newValue = [...value];
+      let newValue = [...values];
       if (!newValue.includes(v)) {
         newValue.push(v);
       } else {
@@ -48849,15 +49591,22 @@
       onFocus && onFocus();
     };
     const {
-      state: loadState,
-      values: options
-    } = useValuesAsync(field);
+      loadState,
+      options
+    } = useOptionsAsync(field);
+    useCleanupMultiSelectValues({
+      field,
+      loadState,
+      options,
+      values,
+      onChange: props.onChange
+    });
     const {
       formId
     } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
-      class: classNames(formFieldClasses(type$b, {
+      class: classNames(formFieldClasses(type$c, {
         errors,
         disabled,
         readonly
@@ -48871,11 +49620,11 @@
           id: prefixId$2(`${id}-${index}`, formId),
           label: v.label,
           class: classNames({
-            'fjs-checked': value.includes(v.value)
+            'fjs-checked': values.includes(v.value)
           }),
           required: false,
           children: e$1("input", {
-            checked: value.includes(v.value),
+            checked: values.includes(v.value),
             class: "fjs-input",
             disabled: disabled,
             readOnly: readonly,
@@ -48896,9 +49645,9 @@
     });
   }
   Checklist.config = {
-    type: type$b,
+    type: type$c,
     keyed: true,
-    label: 'Checklist',
+    label: 'Checkbox group',
     group: 'selection',
     emptyValue: [],
     sanitizeValue: sanitizeMultiSelectValue,
@@ -49044,9 +49793,9 @@
       ...options
     })
   };
-  var _path$i;
-  function _extends$l() {
-    _extends$l = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$k;
+  function _extends$m() {
+    _extends$m = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -49057,16 +49806,16 @@
       }
       return target;
     };
-    return _extends$l.apply(this, arguments);
+    return _extends$m.apply(this, arguments);
   }
   var SvgCalendar = function SvgCalendar(props) {
-    return /*#__PURE__*/v$1("svg", _extends$l({
+    return /*#__PURE__*/v$1("svg", _extends$m({
       xmlns: "http://www.w3.org/2000/svg",
       width: 14,
       height: 15,
       fill: "none",
       viewBox: "0 0 28 30"
-    }, props), _path$i || (_path$i = /*#__PURE__*/v$1("path", {
+    }, props), _path$k || (_path$k = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       d: "M19 2H9V0H7v2H2a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5V0h-2v2ZM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7Zm-5 4v17h24V11H2Z",
@@ -49326,9 +50075,9 @@
       })]
     });
   }
-  var _path$h, _path2$3;
-  function _extends$k() {
-    _extends$k = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$j, _path2$4;
+  function _extends$l() {
+    _extends$l = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -49339,19 +50088,19 @@
       }
       return target;
     };
-    return _extends$k.apply(this, arguments);
+    return _extends$l.apply(this, arguments);
   }
   var SvgClock = function SvgClock(props) {
-    return /*#__PURE__*/v$1("svg", _extends$k({
+    return /*#__PURE__*/v$1("svg", _extends$l({
       xmlns: "http://www.w3.org/2000/svg",
       width: 16,
       height: 16,
       fill: "none",
       viewBox: "0 0 28 29"
-    }, props), _path$h || (_path$h = /*#__PURE__*/v$1("path", {
+    }, props), _path$j || (_path$j = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
       d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2v9.41Z"
-    })), _path2$3 || (_path2$3 = /*#__PURE__*/v$1("path", {
+    })), _path2$4 || (_path2$4 = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       d: "M6.222 25.64A14 14 0 1 0 21.778 2.36 14 14 0 0 0 6.222 25.64ZM7.333 4.023a12 12 0 1 1 13.334 19.955A12 12 0 0 1 7.333 4.022Z",
@@ -49620,7 +50369,7 @@
       })]
     });
   }
-  const type$a = 'datetime';
+  const type$b = 'datetime';
   function Datetime(props) {
     const {
       disabled,
@@ -49792,7 +50541,7 @@
       'aria-describedby': errorMessageId
     };
     return e$1("div", {
-      class: formFieldClasses(type$a, {
+      class: formFieldClasses(type$b, {
         errors: allErrors,
         disabled,
         readonly
@@ -49816,7 +50565,7 @@
     });
   }
   Datetime.config = {
-    type: type$a,
+    type: type$b,
     keyed: true,
     label: 'Date time',
     group: 'basic-input',
@@ -49994,7 +50743,7 @@
     type: 'group',
     pathed: true,
     label: 'Group',
-    group: 'presentation',
+    group: 'container',
     create: (options = {}) => ({
       components: [],
       showOutline: true,
@@ -50007,6 +50756,7 @@
   const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
   const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
   const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
+  const ALLOWED_IFRAME_SRC_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
   const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g; // eslint-disable-line no-control-regex
 
   const FORM_ELEMENT = document.createElement('form');
@@ -50047,6 +50797,18 @@
     return valid ? src : '';
   }
 
+  /**
+   * Sanitizes an iframe source to ensure we only allow for links
+   * that start with http(s).
+   *
+   * @param {string} src
+   * @returns {string}
+   */
+  function sanitizeIFrameSource(src) {
+    const valid = ALLOWED_IFRAME_SRC_PATTERN.test(src);
+    return valid ? src : '';
+  }
+
   /**
    * Recursively sanitize a HTML node, potentially
    * removing it, its children or attributes.
@@ -50127,8 +50889,75 @@
     }
     return true;
   }
-  function _extends$j() {
-    _extends$j = Object.assign ? Object.assign.bind() : function (target) {
+  const type$a = 'iframe';
+  const DEFAULT_HEIGHT = 300;
+  function IFrame(props) {
+    const {
+      field,
+      disabled,
+      readonly
+    } = props;
+    const {
+      height = DEFAULT_HEIGHT,
+      id,
+      label,
+      url
+    } = field;
+    const evaluatedUrl = useSingleLineTemplateEvaluation(url, {
+      debug: true
+    });
+    const safeUrl = d(() => sanitizeIFrameSource(evaluatedUrl), [evaluatedUrl]);
+    const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
+      debug: true
+    });
+    const {
+      formId
+    } = F$1(FormContext$1);
+    return e$1("div", {
+      class: formFieldClasses(type$a, {
+        disabled,
+        readonly
+      }),
+      children: [e$1(Label$2, {
+        id: prefixId$2(id, formId),
+        label: evaluatedLabel
+      }), !evaluatedUrl && e$1(IFramePlaceholder, {
+        text: "No content to show."
+      }), evaluatedUrl && safeUrl && e$1("iframe", {
+        src: safeUrl,
+        title: evaluatedLabel,
+        height: height,
+        class: "fjs-iframe",
+        id: prefixId$2(id, formId),
+        sandbox: ""
+      }), evaluatedUrl && !safeUrl && e$1(IFramePlaceholder, {
+        text: "External content couldn't be loaded."
+      })]
+    });
+  }
+  function IFramePlaceholder(props) {
+    const {
+      text = 'iFrame'
+    } = props;
+    return e$1("div", {
+      class: "fjs-iframe-placeholder",
+      children: e$1("p", {
+        class: "fjs-iframe-placeholder-text",
+        children: text
+      })
+    });
+  }
+  IFrame.config = {
+    type: type$a,
+    keyed: false,
+    label: 'iFrame',
+    group: 'container',
+    create: (options = {}) => ({
+      ...options
+    })
+  };
+  function _extends$k() {
+    _extends$k = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -50139,10 +50968,10 @@
       }
       return target;
     };
-    return _extends$j.apply(this, arguments);
+    return _extends$k.apply(this, arguments);
   }
   var SvgImagePlaceholder = function SvgImagePlaceholder(props) {
-    return /*#__PURE__*/v$1("svg", _extends$j({
+    return /*#__PURE__*/v$1("svg", _extends$k({
       xmlns: "http://www.w3.org/2000/svg",
       xmlSpace: "preserve",
       width: 64,
@@ -50244,9 +51073,9 @@
       post: evaluatedPost
     });
   }
-  var _path$g;
-  function _extends$i() {
-    _extends$i = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$i;
+  function _extends$j() {
+    _extends$j = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -50257,14 +51086,14 @@
       }
       return target;
     };
-    return _extends$i.apply(this, arguments);
+    return _extends$j.apply(this, arguments);
   }
   var SvgAngelDown = function SvgAngelDown(props) {
-    return /*#__PURE__*/v$1("svg", _extends$i({
+    return /*#__PURE__*/v$1("svg", _extends$j({
       xmlns: "http://www.w3.org/2000/svg",
       width: 8,
       height: 8
-    }, props), _path$g || (_path$g = /*#__PURE__*/v$1("path", {
+    }, props), _path$i || (_path$i = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       stroke: "currentColor",
@@ -50274,9 +51103,9 @@
     })));
   };
   var AngelDownIcon = SvgAngelDown;
-  var _path$f;
-  function _extends$h() {
-    _extends$h = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$h;
+  function _extends$i() {
+    _extends$i = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -50287,14 +51116,14 @@
       }
       return target;
     };
-    return _extends$h.apply(this, arguments);
+    return _extends$i.apply(this, arguments);
   }
   var SvgAngelUp = function SvgAngelUp(props) {
-    return /*#__PURE__*/v$1("svg", _extends$h({
+    return /*#__PURE__*/v$1("svg", _extends$i({
       xmlns: "http://www.w3.org/2000/svg",
       width: 8,
       height: 8
-    }, props), _path$f || (_path$f = /*#__PURE__*/v$1("path", {
+    }, props), _path$h || (_path$h = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       stroke: "currentColor",
@@ -50550,19 +51379,39 @@
       value,
       formField
     }) => {
-      // null state is allowed
-      if (isNullEquivalentValue(value)) return null;
-
-      // if data cannot be parsed as a valid number, go into invalid NaN state
-      if (!isValidNumber$1(value)) return 'NaN';
+      // invalid value types are sanitized to null
+      if (isNullEquivalentValue(value) || !isValidNumber$1(value)) return null;
 
-      // otherwise parse to formatting type
+      // otherwise, we return a string or a number depending on the form field configuration
       return formField.serializeToString ? value.toString() : Number(value);
     },
     create: (options = {}) => ({
       ...options
     })
   };
+  function useCleanupSingleSelectValue(props) {
+    const {
+      field,
+      options,
+      loadState,
+      onChange,
+      value
+    } = props;
+
+    // Ensures that the value is always one of the possible options
+    y(() => {
+      if (loadState !== LOAD_STATES.LOADED) {
+        return;
+      }
+      const hasValueNotInOptions = value && !options.map(o => o.value).includes(value);
+      if (hasValueNotInOptions) {
+        onChange({
+          field,
+          value: null
+        });
+      }
+    }, [field, options, onChange, value, loadState]);
+  }
   const type$7 = 'radio';
   function Radio(props) {
     const {
@@ -50603,9 +51452,16 @@
       onFocus && onFocus();
     };
     const {
-      state: loadState,
-      values: options
-    } = useValuesAsync(field);
+      loadState,
+      options
+    } = useOptionsAsync(field);
+    useCleanupSingleSelectValue({
+      field,
+      loadState,
+      options,
+      value,
+      onChange: props.onChange
+    });
     const {
       formId
     } = F$1(FormContext$1);
@@ -50652,15 +51508,15 @@
   Radio.config = {
     type: type$7,
     keyed: true,
-    label: 'Radio',
+    label: 'Radio group',
     group: 'selection',
     emptyValue: null,
     sanitizeValue: sanitizeSingleSelectValue,
     create: createEmptyOptions
   };
-  var _path$e;
-  function _extends$g() {
-    _extends$g = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$g;
+  function _extends$h() {
+    _extends$h = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -50671,14 +51527,14 @@
       }
       return target;
     };
-    return _extends$g.apply(this, arguments);
+    return _extends$h.apply(this, arguments);
   }
   var SvgXMark = function SvgXMark(props) {
-    return /*#__PURE__*/v$1("svg", _extends$g({
+    return /*#__PURE__*/v$1("svg", _extends$h({
       xmlns: "http://www.w3.org/2000/svg",
       width: 8,
       height: 8
-    }, props), _path$e || (_path$e = /*#__PURE__*/v$1("path", {
+    }, props), _path$g || (_path$g = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       stroke: "currentColor",
@@ -50709,9 +51565,16 @@
     const searchbarRef = s$1();
     const eventBus = useService$2('eventBus');
     const {
-      state: loadState,
-      values: options
-    } = useValuesAsync(field);
+      loadState,
+      options
+    } = useOptionsAsync(field);
+    useCleanupSingleSelectValue({
+      field,
+      loadState,
+      options,
+      value,
+      onChange: props.onChange
+    });
 
     // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
     const valueToOptionMap = d(() => Object.assign({}, ...options.map((o, x) => ({
@@ -50868,10 +51731,18 @@
     } = F$1(FormContext$1);
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
     const selectRef = s$1();
+    const inputRef = s$1();
     const {
-      state: loadState,
-      values: options
-    } = useValuesAsync(field);
+      loadState,
+      options
+    } = useOptionsAsync(field);
+    useCleanupSingleSelectValue({
+      field,
+      loadState,
+      options,
+      value,
+      onChange: props.onChange
+    });
 
     // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
     const valueToOptionMap = d(() => Object.assign({}, ...options.map((o, x) => ({
@@ -50892,12 +51763,12 @@
       return ds;
     }, [disabled, isDropdownExpanded, loadState, value]);
     const onMouseDown = A$1(e => {
-      const select = selectRef.current;
+      const input = inputRef.current;
       setIsDropdownExpanded(!isDropdownExpanded);
       if (isDropdownExpanded) {
-        select.blur();
+        input.blur();
       } else {
-        select.focus();
+        input.focus();
       }
       e.preventDefault();
     }, [isDropdownExpanded]);
@@ -50934,6 +51805,7 @@
           id: prefixId$2(`${id}-display`, formId),
           children: valueLabel || 'Select'
         }), !disabled && e$1("input", {
+          ref: inputRef,
           id: prefixId$2(`${id}-search`, formId),
           class: "fjs-select-hidden-input",
           value: valueLabel,
@@ -51127,34 +51999,36 @@
     } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const [filter, setFilter] = l$2('');
-    const [filteredOptions, setFilteredOptions] = l$2([]);
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
-    const [hasOptionsLeft, setHasOptionsLeft] = l$2(true);
     const [isEscapeClosed, setIsEscapeClose] = l$2(false);
     const focusScopeRef = s$1();
     const inputRef = s$1();
     const eventBus = useService$2('eventBus');
     const {
-      state: loadState,
-      values: options
-    } = useValuesAsync(field);
+      loadState,
+      options
+    } = useOptionsAsync(field);
+    useCleanupMultiSelectValues({
+      field,
+      loadState,
+      options,
+      values,
+      onChange: props.onChange
+    });
 
     // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
     const valueToOptionMap = d(() => Object.assign({}, ...options.map((o, x) => ({
       [o.value]: options[x]
     }))), [options]);
+    const hasOptionsLeft = d(() => options.length > values.length, [options.length, values.length]);
 
     // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
-    y(() => {
-      if (loadState === LOAD_STATES.LOADED) {
-        setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
-      } else {
-        setFilteredOptions([]);
+    const filteredOptions = d(() => {
+      if (loadState !== LOAD_STATES.LOADED) {
+        return [];
       }
-    }, [filter, JSON.stringify(values), options, loadState]);
-    y(() => {
-      setHasOptionsLeft(options.length > values.length);
-    }, [options.length, values.length]);
+      return options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value));
+    }, [filter, options, JSON.stringify(values), loadState]);
     const selectValue = value => {
       if (filter) {
         setFilter('');
@@ -51281,7 +52155,7 @@
               onMouseDown: e => e.preventDefault(),
               children: [e$1("span", {
                 class: "fjs-taglist-tag-label",
-                children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
+                children: valueToOptionMap[v] ? valueToOptionMap[v].label : undefined
               }), !disabled && !readonly && e$1("button", {
                 type: "button",
                 title: "Remove tag",
@@ -51500,7 +52374,7 @@
     sanitizeValue: ({
       value
     }) => {
-      if (isArray$3(value) || isObject$1(value)) {
+      if (isArray$3(value) || isObject$1(value) || isNil$1(value)) {
         return '';
       }
 
@@ -51590,7 +52464,7 @@
     emptyValue: '',
     sanitizeValue: ({
       value
-    }) => isArray$3(value) || isObject$1(value) ? '' : String(value),
+    }) => isArray$3(value) || isObject$1(value) || isNil$1(value) ? '' : String(value),
     create: (options = {}) => ({
       ...options
     })
@@ -51613,9 +52487,9 @@
     // Overflow is hidden by default to hide scrollbar flickering
     textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
   };
-  var _path$d;
-  function _extends$f() {
-    _extends$f = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$f;
+  function _extends$g() {
+    _extends$g = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -51626,23 +52500,23 @@
       }
       return target;
     };
-    return _extends$f.apply(this, arguments);
+    return _extends$g.apply(this, arguments);
   }
   var SvgButton = function SvgButton(props) {
-    return /*#__PURE__*/v$1("svg", _extends$f({
+    return /*#__PURE__*/v$1("svg", _extends$g({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$d || (_path$d = /*#__PURE__*/v$1("path", {
+    }, props), _path$f || (_path$f = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
       d: "M45 17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V20a3 3 0 0 1 3-3h36zm-9 8.889H18v2.222h18v-2.222z"
     })));
   };
   var ButtonIcon = SvgButton;
-  var _path$c;
-  function _extends$e() {
-    _extends$e = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$e;
+  function _extends$f() {
+    _extends$f = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -51653,22 +52527,22 @@
       }
       return target;
     };
-    return _extends$e.apply(this, arguments);
+    return _extends$f.apply(this, arguments);
   }
   var SvgCheckbox = function SvgCheckbox(props) {
-    return /*#__PURE__*/v$1("svg", _extends$e({
+    return /*#__PURE__*/v$1("svg", _extends$f({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$c || (_path$c = /*#__PURE__*/v$1("path", {
+    }, props), _path$e || (_path$e = /*#__PURE__*/v$1("path", {
       d: "M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2zm-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
     })));
   };
   var CheckboxIcon = SvgCheckbox;
-  var _g, _use, _use2, _use3, _defs;
-  function _extends$d() {
-    _extends$d = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$d;
+  function _extends$e() {
+    _extends$e = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -51679,45 +52553,25 @@
       }
       return target;
     };
-    return _extends$d.apply(this, arguments);
+    return _extends$e.apply(this, arguments);
   }
   var SvgChecklist = function SvgChecklist(props) {
-    return /*#__PURE__*/v$1("svg", _extends$d({
+    return /*#__PURE__*/v$1("svg", _extends$e({
       xmlns: "http://www.w3.org/2000/svg",
-      xmlnsXlink: "http://www.w3.org/1999/xlink",
       width: 54,
       height: 54,
-      fill: "currentcolor"
-    }, props), _g || (_g = /*#__PURE__*/v$1("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/v$1("use", {
-      xlinkHref: "#Checklist_svg__a"
-    }), /*#__PURE__*/v$1("use", {
-      xlinkHref: "#Checklist_svg__a",
-      y: 24
-    }), /*#__PURE__*/v$1("use", {
-      xlinkHref: "#Checklist_svg__a",
-      y: 12
-    }))), _use || (_use = /*#__PURE__*/v$1("use", {
-      xlinkHref: "#Checklist_svg__b"
-    })), _use2 || (_use2 = /*#__PURE__*/v$1("use", {
-      xlinkHref: "#Checklist_svg__b",
-      y: 12
-    })), _use3 || (_use3 = /*#__PURE__*/v$1("use", {
-      xlinkHref: "#Checklist_svg__b",
-      y: 24
-    })), _defs || (_defs = /*#__PURE__*/v$1("defs", null, /*#__PURE__*/v$1("path", {
-      id: "Checklist_svg__a",
-      d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-6z"
-    }), /*#__PURE__*/v$1("path", {
-      id: "Checklist_svg__b",
-      d: "M23 14.5a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H24a1 1 0 0 1-1-1v-1z"
-    }))));
+      fill: "none"
+    }, props), _path$d || (_path$d = /*#__PURE__*/v$1("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M14.35 24.75H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414ZM14.35 37.05H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414ZM14.35 12.45H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414Zm12.007 14.977a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Zm0 12.3a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Zm0-24.6a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Z",
+      clipRule: "evenodd"
+    })));
   };
   var ChecklistIcon = SvgChecklist;
-  var _path$b, _path2$2, _path3$1;
-  function _extends$c() {
-    _extends$c = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$c, _path2$3, _path3$1;
+  function _extends$d() {
+    _extends$d = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -51728,18 +52582,18 @@
       }
       return target;
     };
-    return _extends$c.apply(this, arguments);
+    return _extends$d.apply(this, arguments);
   }
   var SvgDatetime = function SvgDatetime(props) {
-    return /*#__PURE__*/v$1("svg", _extends$c({
+    return /*#__PURE__*/v$1("svg", _extends$d({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$b || (_path$b = /*#__PURE__*/v$1("path", {
+    }, props), _path$c || (_path$c = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
       d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
-    })), _path2$2 || (_path2$2 = /*#__PURE__*/v$1("path", {
+    })), _path2$3 || (_path2$3 = /*#__PURE__*/v$1("path", {
       d: "m35.13 37.603 1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984Z"
     })), _path3$1 || (_path3$1 = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
@@ -51747,9 +52601,9 @@
     })));
   };
   var DatetimeIcon = SvgDatetime;
-  var _path$a, _path2$1$1;
-  function _extends$b() {
-    _extends$b = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$b, _path2$2;
+  function _extends$c() {
+    _extends$c = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -51760,25 +52614,25 @@
       }
       return target;
     };
-    return _extends$b.apply(this, arguments);
+    return _extends$c.apply(this, arguments);
   }
   var SvgTaglist = function SvgTaglist(props) {
-    return /*#__PURE__*/v$1("svg", _extends$b({
+    return /*#__PURE__*/v$1("svg", _extends$c({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$a || (_path$a = /*#__PURE__*/v$1("path", {
+    }, props), _path$b || (_path$b = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
       d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36Zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1Z"
-    })), _path2$1$1 || (_path2$1$1 = /*#__PURE__*/v$1("path", {
+    })), _path2$2 || (_path2$2 = /*#__PURE__*/v$1("path", {
       d: "M11 22a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H12a1 1 0 0 1-1-1V22Z"
     })));
   };
   var TaglistIcon = SvgTaglist;
   var _rect$1, _rect2, _rect3;
-  function _extends$a() {
-    _extends$a = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends$b() {
+    _extends$b = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -51789,10 +52643,10 @@
       }
       return target;
     };
-    return _extends$a.apply(this, arguments);
+    return _extends$b.apply(this, arguments);
   }
   var SvgForm = function SvgForm(props) {
-    return /*#__PURE__*/v$1("svg", _extends$a({
+    return /*#__PURE__*/v$1("svg", _extends$b({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54
@@ -51817,6 +52671,33 @@
     })));
   };
   var FormIcon = SvgForm;
+  var _path$a;
+  function _extends$a() {
+    _extends$a = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$a.apply(this, arguments);
+  }
+  var SvgGroup = function SvgGroup(props) {
+    return /*#__PURE__*/v$1("svg", _extends$a({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 54,
+      height: 54,
+      fill: "currentcolor"
+    }, props), _path$a || (_path$a = /*#__PURE__*/v$1("path", {
+      fillRule: "evenodd",
+      d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
+    })));
+  };
+  var GroupIcon = SvgGroup;
   var _path$9;
   function _extends$9() {
     _extends$9 = Object.assign ? Object.assign.bind() : function (target) {
@@ -51832,7 +52713,7 @@
     };
     return _extends$9.apply(this, arguments);
   }
-  var SvgGroup = function SvgGroup(props) {
+  var SvgNumber = function SvgNumber(props) {
     return /*#__PURE__*/v$1("svg", _extends$9({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -51840,10 +52721,10 @@
       fill: "currentcolor"
     }, props), _path$9 || (_path$9 = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
-      d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
+      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
     })));
   };
-  var GroupIcon = SvgGroup;
+  var NumberIcon = SvgNumber;
   var _path$8;
   function _extends$8() {
     _extends$8 = Object.assign ? Object.assign.bind() : function (target) {
@@ -51859,18 +52740,17 @@
     };
     return _extends$8.apply(this, arguments);
   }
-  var SvgNumber = function SvgNumber(props) {
+  var SvgRadio = function SvgRadio(props) {
     return /*#__PURE__*/v$1("svg", _extends$8({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
     }, props), _path$8 || (_path$8 = /*#__PURE__*/v$1("path", {
-      fillRule: "evenodd",
-      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
+      d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
     })));
   };
-  var NumberIcon = SvgNumber;
+  var RadioIcon = SvgRadio;
   var _path$7;
   function _extends$7() {
     _extends$7 = Object.assign ? Object.assign.bind() : function (target) {
@@ -51886,17 +52766,18 @@
     };
     return _extends$7.apply(this, arguments);
   }
-  var SvgRadio = function SvgRadio(props) {
+  var SvgSelect = function SvgSelect(props) {
     return /*#__PURE__*/v$1("svg", _extends$7({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
     }, props), _path$7 || (_path$7 = /*#__PURE__*/v$1("path", {
-      d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
+      fillRule: "evenodd",
+      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
     })));
   };
-  var RadioIcon = SvgRadio;
+  var SelectIcon = SvgSelect;
   var _path$6;
   function _extends$6() {
     _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
@@ -51912,18 +52793,18 @@
     };
     return _extends$6.apply(this, arguments);
   }
-  var SvgSelect = function SvgSelect(props) {
+  var SvgSeparator = function SvgSeparator(props) {
     return /*#__PURE__*/v$1("svg", _extends$6({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$6 || (_path$6 = /*#__PURE__*/v$1("path", {
-      fillRule: "evenodd",
-      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
+      fill: "currentColor",
+      d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4ZM9 26h36v2H9v-2Zm13.293 7.707 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 35.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
     })));
   };
-  var SelectIcon = SvgSelect;
+  var SeparatorIcon = SvgSeparator;
   var _path$5;
   function _extends$5() {
     _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
@@ -51939,7 +52820,7 @@
     };
     return _extends$5.apply(this, arguments);
   }
-  var SvgSeparator = function SvgSeparator(props) {
+  var SvgSpacer = function SvgSpacer(props) {
     return /*#__PURE__*/v$1("svg", _extends$5({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -51947,10 +52828,10 @@
       fill: "none"
     }, props), _path$5 || (_path$5 = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
-      d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4ZM9 26h36v2H9v-2Zm13.293 7.707 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 35.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
+      d: "M9 15v2h36v-2H9Zm0 22v2h36v-2H9Zm17.293-17.707a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 21.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4Zm-4 11.414 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 32.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
     })));
   };
-  var SeparatorIcon = SvgSeparator;
+  var SpacerIcon = SvgSpacer;
   var _path$4$1;
   function _extends$4$1() {
     _extends$4$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -51966,18 +52847,17 @@
     };
     return _extends$4$1.apply(this, arguments);
   }
-  var SvgSpacer = function SvgSpacer(props) {
+  var SvgText = function SvgText(props) {
     return /*#__PURE__*/v$1("svg", _extends$4$1({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$4$1 || (_path$4$1 = /*#__PURE__*/v$1("path", {
-      fill: "currentColor",
-      d: "M9 15v2h36v-2H9Zm0 22v2h36v-2H9Zm17.293-17.707a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 21.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4Zm-4 11.414 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 32.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
+      d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 0 1 2.4.14 3.42 3.42 0 0 1 1.41.55 3.47 3.47 0 0 1 1 1.14 3 3 0 0 1 .42 1.58 3.26 3.26 0 0 1-1.91 2.94 3.63 3.63 0 0 1 1.91 1.22 3.28 3.28 0 0 1 .66 2 4 4 0 0 1-.43 1.8 3.63 3.63 0 0 1-1.09 1.4 3.89 3.89 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 0 0 1.1-.49 1.41 1.41 0 0 0 .41-1 1.49 1.49 0 0 0-.35-1 1.54 1.54 0 0 0-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 0 0 1.88-.09 1.65 1.65 0 0 0 1-.54 1.6 1.6 0 0 0 .38-1.14 1.75 1.75 0 0 0-.29-1 1.69 1.69 0 0 0-.86-.62 9.28 9.28 0 0 0-2.41-.23zm19.62.92 2.65.84a5.94 5.94 0 0 1-2 3.29A5.74 5.74 0 0 1 41.38 34a5.87 5.87 0 0 1-4.44-1.84 7.09 7.09 0 0 1-1.73-5A7.43 7.43 0 0 1 37 21.87 6 6 0 0 1 41.54 20a5.64 5.64 0 0 1 4 1.47A5.33 5.33 0 0 1 47 24l-2.7.65a2.8 2.8 0 0 0-2.86-2.27A3.09 3.09 0 0 0 39 23.42a5.31 5.31 0 0 0-.93 3.5 5.62 5.62 0 0 0 .93 3.65 3 3 0 0 0 2.4 1.09 2.72 2.72 0 0 0 1.82-.66 4 4 0 0 0 1.13-2.21z"
     })));
   };
-  var SpacerIcon = SvgSpacer;
+  var TextIcon = SvgText;
   var _path$3$1;
   function _extends$3$1() {
     _extends$3$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -51993,17 +52873,18 @@
     };
     return _extends$3$1.apply(this, arguments);
   }
-  var SvgText = function SvgText(props) {
+  var SvgTextfield = function SvgTextfield(props) {
     return /*#__PURE__*/v$1("svg", _extends$3$1({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
     }, props), _path$3$1 || (_path$3$1 = /*#__PURE__*/v$1("path", {
-      d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 0 1 2.4.14 3.42 3.42 0 0 1 1.41.55 3.47 3.47 0 0 1 1 1.14 3 3 0 0 1 .42 1.58 3.26 3.26 0 0 1-1.91 2.94 3.63 3.63 0 0 1 1.91 1.22 3.28 3.28 0 0 1 .66 2 4 4 0 0 1-.43 1.8 3.63 3.63 0 0 1-1.09 1.4 3.89 3.89 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 0 0 1.1-.49 1.41 1.41 0 0 0 .41-1 1.49 1.49 0 0 0-.35-1 1.54 1.54 0 0 0-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 0 0 1.88-.09 1.65 1.65 0 0 0 1-.54 1.6 1.6 0 0 0 .38-1.14 1.75 1.75 0 0 0-.29-1 1.69 1.69 0 0 0-.86-.62 9.28 9.28 0 0 0-2.41-.23zm19.62.92 2.65.84a5.94 5.94 0 0 1-2 3.29A5.74 5.74 0 0 1 41.38 34a5.87 5.87 0 0 1-4.44-1.84 7.09 7.09 0 0 1-1.73-5A7.43 7.43 0 0 1 37 21.87 6 6 0 0 1 41.54 20a5.64 5.64 0 0 1 4 1.47A5.33 5.33 0 0 1 47 24l-2.7.65a2.8 2.8 0 0 0-2.86-2.27A3.09 3.09 0 0 0 39 23.42a5.31 5.31 0 0 0-.93 3.5 5.62 5.62 0 0 0 .93 3.65 3 3 0 0 0 2.4 1.09 2.72 2.72 0 0 0 1.82-.66 4 4 0 0 0 1.13-2.21z"
+      fillRule: "evenodd",
+      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-32 4v10h-2V22h2z"
     })));
   };
-  var TextIcon = SvgText;
+  var TextfieldIcon = SvgTextfield;
   var _path$2$1;
   function _extends$2$1() {
     _extends$2$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -52019,7 +52900,7 @@
     };
     return _extends$2$1.apply(this, arguments);
   }
-  var SvgTextfield = function SvgTextfield(props) {
+  var SvgTextarea = function SvgTextarea(props) {
     return /*#__PURE__*/v$1("svg", _extends$2$1({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -52027,11 +52908,11 @@
       fill: "currentcolor"
     }, props), _path$2$1 || (_path$2$1 = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
-      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-32 4v10h-2V22h2z"
+      d: "M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1zm-1.136 15.5.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
     })));
   };
-  var TextfieldIcon = SvgTextfield;
-  var _path$1$1;
+  var TextareaIcon = SvgTextarea;
+  var _path$1$1, _path2$1$1;
   function _extends$1$1() {
     _extends$1$1 = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -52046,21 +52927,26 @@
     };
     return _extends$1$1.apply(this, arguments);
   }
-  var SvgTextarea = function SvgTextarea(props) {
+  var SvgIFrame = function SvgIFrame(props) {
     return /*#__PURE__*/v$1("svg", _extends$1$1({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$1$1 || (_path$1$1 = /*#__PURE__*/v$1("path", {
+      fill: "currentcolor",
+      d: "M34.467 37.3 41 31l-6.533-6.3-1.32 1.273L38.36 31l-5.213 5.027 1.32 1.273ZM19.533 24.7 13 31l6.533 6.3 1.32-1.273L15.64 31l5.214-5.027-1.32-1.273Zm4.127 14.832 1.805.468 4.875-17.532L28.535 22 23.66 39.532Z"
+    })), _path2$1$1 || (_path2$1$1 = /*#__PURE__*/v$1("path", {
+      fill: "currentcolor",
       fillRule: "evenodd",
-      d: "M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1zm-1.136 15.5.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
+      d: "M46 9a3 3 0 0 1 3 3v30a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V12a3 3 0 0 1 3-3h38Zm0 2H8a1 1 0 0 0-1 1v4h40v-4a1 1 0 0 0-1-1ZM7 42V18h40v24a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1Z",
+      clipRule: "evenodd"
     })));
   };
-  var TextareaIcon = SvgTextarea;
-  var _path$j, _path2$4;
-  function _extends$m() {
-    _extends$m = Object.assign ? Object.assign.bind() : function (target) {
+  var IFrameIcon = SvgIFrame;
+  var _path$l, _path2$5;
+  function _extends$n() {
+    _extends$n = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -52071,19 +52957,19 @@
       }
       return target;
     };
-    return _extends$m.apply(this, arguments);
+    return _extends$n.apply(this, arguments);
   }
   var SvgImage = function SvgImage(props) {
-    return /*#__PURE__*/v$1("svg", _extends$m({
+    return /*#__PURE__*/v$1("svg", _extends$n({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$j || (_path$j = /*#__PURE__*/v$1("path", {
+    }, props), _path$l || (_path$l = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
       d: "M34.636 21.91A3.818 3.818 0 1 1 27 21.908a3.818 3.818 0 0 1 7.636 0Zm-2 0A1.818 1.818 0 1 1 29 21.908a1.818 1.818 0 0 1 3.636 0Z",
       clipRule: "evenodd"
-    })), _path2$4 || (_path2$4 = /*#__PURE__*/v$1("path", {
+    })), _path2$5 || (_path2$5 = /*#__PURE__*/v$1("path", {
       fillRule: "evenodd",
       d: "M15 13a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V15a2 2 0 0 0-2-2H15Zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 0 1 2.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 0 1 2.411.239L39 32.73V15ZM15 39v-8.754a.975.975 0 0 0 .168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 0 0 2.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15Z",
       clipRule: "evenodd"
@@ -52098,6 +52984,7 @@
       columns: GroupIcon,
       datetime: DatetimeIcon,
       group: GroupIcon,
+      iframe: IFrameIcon,
       image: ImageIcon,
       number: NumberIcon,
       radio: RadioIcon,
@@ -52111,7 +52998,7 @@
       default: FormIcon
     }[type];
   };
-  const formFields = [Button, Checkbox$1, Checklist, FormComponent$1, Group$1, Image$1, Numberfield, Datetime, Radio, Select$1, Spacer, Separator, Taglist, Text$1, Textfield$1, Textarea];
+  const formFields = [Button, Checkbox$1, Checklist, FormComponent$1, Group$1, IFrame, Image$1, Numberfield, Datetime, Radio, Select$1, Spacer, Separator, Taglist, Text$1, Textfield$1, Textarea];
   class FormFields {
     constructor() {
       this._formFields = {};
@@ -52180,8 +53067,8 @@
     container.classList.add(`${prefix}-container`);
     return container;
   }
-  const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression'];
-  const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text'];
+  const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url'];
+  const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
 
   /**
    * @template T
@@ -54636,7 +55523,7 @@
       }, data);
     }
   }
-  const schemaVersion = 12;
+  const schemaVersion = 13;
 
   /**
    * Flatten array, one level deep.
@@ -59808,6 +60695,24 @@
   function calculateMaxColumnsWithAuto(autoCols) {
     return MAX_COLUMNS_PER_ROW - autoCols * 2;
   }
+  function EditorIFrame(props) {
+    const {
+      field
+    } = props;
+    const Icon = iconsByType(field.type);
+    return e$1("div", {
+      class: "fjs-iframe-placeholder",
+      children: e$1("p", {
+        class: "fjs-iframe-placeholder-text",
+        children: [e$1(Icon, {
+          width: "32",
+          height: "24",
+          viewBox: "0 0 56 56"
+        }), "iFrame"]
+      })
+    });
+  }
+  EditorIFrame.config = IFrame.config;
   const emptyImage = createEmptyImage();
   function editorFormFieldClasses(type, {
     disabled = false
@@ -60178,7 +61083,7 @@
     });
   }
   EditorText.config = Text$1.config;
-  const editorFormFields = [EditorText];
+  const editorFormFields = [EditorIFrame, EditorText];
   class EditorFormFields extends FormFields {
     constructor() {
       super();
@@ -60468,6 +61373,9 @@
   }, {
     label: 'Presentation',
     id: 'presentation'
+  }, {
+    label: 'Containers',
+    id: 'container'
   }, {
     label: 'Action',
     id: 'action'
@@ -62470,11 +63378,13 @@
      * @param { import('../../../FormEditor').default } formEditor
      * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+     * @param { import('@bpmn-io/form-js-viewer').FormLayouter } formLayouter
      */
-    constructor(formEditor, formFieldRegistry, pathRegistry) {
+    constructor(formEditor, formFieldRegistry, pathRegistry, formLayouter) {
       this._formEditor = formEditor;
       this._formFieldRegistry = formFieldRegistry;
       this._pathRegistry = pathRegistry;
+      this._formLayouter = formLayouter;
     }
     execute(context) {
       this.moveFormField(context);
@@ -62521,8 +63431,8 @@
         }
         const formField = get(schema, [...sourcePath, sourceIndex]);
 
-        // (1) Add to row
-        updateRow(formField, targetRow ? targetRow.id : null);
+        // (1) Add to row or create new one
+        updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
         // (2) Move form field
         mutate(get(schema, sourcePath), sourceIndex, targetIndex);
@@ -62547,8 +63457,8 @@
         get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
         const targetPath = [...targetFormField._path, 'components'];
 
-        // (4) Add to row
-        updateRow(formField, targetRow ? targetRow.id : null);
+        // (4) Add to row or create new one
+        updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
         // (5) Add form field
         arrayAdd$1(get(schema, targetPath), targetIndex, formField);
@@ -62571,7 +63481,7 @@
       });
     }
   }
-  MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
+  MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry', 'formLayouter'];
   class RemoveFormFieldHandler {
     /**
      * @constructor
@@ -63155,12 +64065,21 @@
       const {
         schema
       } = this._formEditor._getState();
+      const setRowIds = parent => {
+        if (!parent.components || !parent.components.length) {
+          return;
+        }
+        parent.components.forEach(formField => {
+          const row = this._formLayouter.getRowForField(formField);
+          updateRow(formField, row.id);
+
+          // handle children recursively
+          setRowIds(formField);
+        });
+      };
 
       // make sure rows are persisted in schema (e.g. for migration case)
-      schema.components.forEach(formField => {
-        const row = this._formLayouter.getRowForField(formField);
-        updateRow(formField, row.id);
-      });
+      setRowIds(schema);
     }
   }
   FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor'];
@@ -68676,6 +69595,8 @@
       description,
       path,
       props,
+      getValue,
+      setValue,
       isDefaultVisible
     } = options;
     const {
@@ -68690,8 +69611,10 @@
       editField,
       description,
       component: SimpleBoolComponent,
-      isEdited: isEdited$5,
-      isDefaultVisible
+      isEdited: isEdited$8,
+      isDefaultVisible,
+      getValue,
+      setValue
     };
   }
   const SimpleBoolComponent = props => {
@@ -68701,16 +69624,17 @@
       path,
       field,
       editField,
+      getValue = () => get(field, path, ''),
+      setValue = value => editField(field, path, value || false),
       description
     } = props;
-    const getValue = () => get(field, path, '');
-    const setValue = value => editField(field, path, value || false);
-    return CheckboxEntry({
+    return ToggleSwitchEntry({
       element: field,
       getValue,
       id,
       label,
       setValue,
+      inline: true,
       description
     });
   };
@@ -68764,7 +69688,7 @@
       editField,
       field,
       isEdited: isEdited$6,
-      isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group'
+      isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group' || field.type === 'iframe'
     });
     return entries;
   }
@@ -68785,7 +69709,7 @@
     const setValue = value => {
       return editField(field, path, value || '');
     };
-    const label = field.type === 'group' ? 'Group label' : 'Field label';
+    const label = getLabelText(field);
     return FeelTemplatingEntry({
       debounce,
       element: field,
@@ -68853,6 +69777,162 @@
       variables
     });
   }
+
+  // helpers //////////
+
+  function getLabelText(field) {
+    const {
+      type
+    } = field;
+    if (type === 'group') {
+      return 'Group label';
+    }
+    if (type === 'iframe') {
+      return 'Title';
+    }
+    return 'Field label';
+  }
+  function HeightEntry(props) {
+    const {
+      editField,
+      field,
+      id,
+      description,
+      isDefaultVisible,
+      defaultValue
+    } = props;
+    const entries = [];
+    entries.push({
+      id: id + '-height',
+      component: Height,
+      description,
+      isEdited: isEdited$7,
+      editField,
+      field,
+      defaultValue,
+      isDefaultVisible: field => {
+        if (isFunction(isDefaultVisible)) {
+          return isDefaultVisible(field);
+        }
+        return field.type === 'spacer';
+      }
+    });
+    return entries;
+  }
+  function Height(props) {
+    const {
+      description,
+      editField,
+      field,
+      id,
+      defaultValue = 60 // default value for spacer
+    } = props;
+    const debounce = useService('debounce');
+    const getValue = e => get(field, ['height'], defaultValue);
+    const setValue = (value, error) => {
+      if (error) {
+        return;
+      }
+      editField(field, ['height'], value);
+    };
+    return NumberFieldEntry({
+      debounce,
+      description,
+      label: 'Height',
+      element: field,
+      id,
+      getValue,
+      setValue,
+      validate: value => {
+        if (value === undefined || value === null) return;
+        if (value < 1) return 'Should be greater than zero.';
+        if (!Number.isInteger(value)) return 'Should be an integer.';
+      }
+    });
+  }
+  function IFrameHeightEntry(props) {
+    return [...HeightEntry({
+      ...props,
+      defaultValue: 300,
+      description: 'Height of the container in pixels.',
+      isDefaultVisible: field => field.type === 'iframe'
+    })];
+  }
+  const HTTPS_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
+
+  function IFrameUrlEntry(props) {
+    const {
+      editField,
+      field
+    } = props;
+    const entries = [];
+    entries.push({
+      id: 'url',
+      component: Url,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6,
+      isDefaultVisible: field => field.type === 'iframe'
+    });
+    return entries;
+  }
+  function Url(props) {
+    const {
+      editField,
+      field,
+      id
+    } = props;
+    const debounce = useService('debounce');
+    const variables = useVariables().map(name => ({
+      name
+    }));
+    const path = ['url'];
+    const getValue = () => {
+      return get(field, path, '');
+    };
+    const setValue = value => {
+      return editField(field, path, value);
+    };
+    const validate = value => {
+      if (!value) {
+        return;
+      }
+      if (!HTTPS_PATTERN.test(value)) {
+        return 'For security reasons the URL must start with "https".';
+      }
+    };
+    return FeelTemplatingEntry({
+      debounce,
+      element: field,
+      feel: 'optional',
+      getValue,
+      id,
+      label: 'URL',
+      setValue,
+      singleLine: true,
+      tooltip: getTooltip(),
+      validate,
+      variables
+    });
+  }
+
+  // helper //////////////////////
+
+  function getTooltip() {
+    return e$1(d$1, {
+      children: [e$1("p", {
+        children: "Enter a HTTPS URL to a source or populate it dynamically via a template or an expression (e.g., to pass a value from the variable)."
+      }), e$1("p", {
+        children: "Please make sure that the URL is safe as it might impose security risks."
+      }), e$1("p", {
+        children: ["Not all external sources can be displayed in the iFrame. Read more about it in the ", e$1("a", {
+          target: "_blank",
+          href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
+          children: "X-FRAME-OPTIONS documentation"
+        }), "."]
+      })]
+    });
+  }
   function SourceEntry(props) {
     const {
       editField,
@@ -68963,51 +70043,6 @@
       variables
     });
   }
-  function SpacerEntry(props) {
-    const {
-      editField,
-      field,
-      id
-    } = props;
-    const entries = [];
-    entries.push({
-      id: id + '-height',
-      component: SpacerHeight,
-      isEdited: isEdited$7,
-      editField,
-      field,
-      isDefaultVisible: field => field.type === 'spacer'
-    });
-    return entries;
-  }
-  function SpacerHeight(props) {
-    const {
-      editField,
-      field,
-      id
-    } = props;
-    const debounce = useService('debounce');
-    const getValue = e => get(field, ['height']);
-    const setValue = (value, error) => {
-      if (error) {
-        return;
-      }
-      editField(field, ['height'], value);
-    };
-    return NumberFieldEntry({
-      debounce,
-      label: 'Height',
-      element: field,
-      id,
-      getValue,
-      setValue,
-      validate: value => {
-        if (value === undefined || value === null) return;
-        if (value < 1) return 'Should be greater than zero.';
-        if (!Number.isInteger(value)) return 'Should be an integer.';
-      }
-    });
-  }
   function NumberEntries(props) {
     const {
       editField,
@@ -70062,7 +71097,13 @@
       field,
       editField,
       getService
-    }), ...SpacerEntry({
+    }), ...IFrameUrlEntry({
+      field,
+      editField
+    }), ...IFrameHeightEntry({
+      field,
+      editField
+    }), ...HeightEntry({
       field,
       editField
     }), ...NumberEntries({
@@ -72822,7 +73863,8 @@
       const dataEditor = dataEditorRef.current = new JSONEditor({
         value: toString(data),
         contentAttributes: {
-          'aria-label': 'Form Input'
+          'aria-label': 'Form Input',
+          tabIndex: 0
         },
         placeholder: createDataEditorPlaceholder()
       });
@@ -72830,7 +73872,8 @@
         readonly: true,
         value: toString(resultData),
         contentAttributes: {
-          'aria-label': 'Form Output'
+          'aria-label': 'Form Output',
+          tabIndex: 0
         }
       });
       const form = formRef.current = new Form({