@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.2

package/dist/components/p-550aa089.js

@@ -0,0 +1,1172 @@
+import { d as defaultConfig, i as isLiveStreamHost } from './p-53b020e2.js';
+import { e as eq, b as baseAssignValue, i as isArrayLike, g as getPrototype, c as copyObject, k as keysIn, a as isArray, d as isBuffer, f as isTypedArray, h as copyArray, j as cloneBuffer, l as cloneTypedArray, m as isArguments, n as isFunction, o as initCloneObject, S as Stack, p as defineProperty, q as isIndex } from './p-46923b34.js';
+import { i as isObjectLike, b as baseGetTag, a as isObject } from './p-2c3cda13.js';
+
+const spacingScale = [
+	0,
+	0.5,
+	1,
+	1.5,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	12,
+	14,
+	16,
+	20,
+	24,
+	28,
+	32,
+	36,
+	40,
+	44,
+	48,
+	52,
+	56,
+	60,
+	64,
+	72,
+	80,
+	96
+];
+
+const THEMES = {
+    darkest: {
+        background: {
+            1000: '#080808',
+            900: '#1A1A1A',
+            800: '#1E1E1E',
+            700: '#2C2C2C',
+            600: '#393939',
+        },
+        text: '#FFFFFF',
+    },
+    dark: {
+        background: {
+            1000: '#252525',
+            900: '#2F2F2F',
+            800: '#323232',
+            700: '#3E3E3E',
+            600: '#4A4A4A',
+        },
+        text: '#F5F5F5',
+        'video-bg': '#1C1C1C',
+    },
+    light: {
+        background: {
+            1000: '#FFFFFF',
+            900: '#F5F5F5',
+            800: '#EBEBEB',
+            700: '#E0E0E0',
+            600: '#D6D6D6',
+        },
+        text: '#111111',
+        'text-on-brand': '#ffffff',
+        'video-bg': '#DADADA',
+    },
+};
+
+const BORDER_WIDTHS = {
+    none: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    thin: {
+        none: 0,
+        sm: 1,
+        md: 2,
+        lg: 4,
+    },
+    fat: {
+        none: 0,
+        sm: 2,
+        md: 4,
+        lg: 8,
+    },
+};
+const BORDER_RADII = {
+    sharp: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    rounded: {
+        none: 0,
+        sm: 4,
+        md: 8,
+        lg: 12,
+    },
+    'extra-rounded': {
+        none: 0,
+        sm: 8,
+        md: 16,
+        lg: 24,
+    },
+    circular: {
+        none: 9999,
+        sm: 9999,
+        md: 9999,
+        lg: 9999,
+    },
+};
+
+function hexToRGB(h) {
+    h = h.trim();
+    let r = '0', g = '0', b = '0';
+    if (h.length == 4) {
+        r = '0x' + h[1] + h[1];
+        g = '0x' + h[2] + h[2];
+        b = '0x' + h[3] + h[3];
+    }
+    else if (h.length > 6) {
+        r = '0x' + h[1] + h[2];
+        g = '0x' + h[3] + h[4];
+        b = '0x' + h[5] + h[6];
+    }
+    return [+r, +g, +b];
+}
+const isValidHexColor = (color) => {
+    return typeof color === 'string' && color.length === 7 && color.startsWith('#');
+};
+
+const DEFAULT_CSS_TOKEN_PREFIX = '--rtk-';
+function getToken(token, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) {
+    return tokenPrefix + token;
+}
+const provideGoogleFont = (fontFamily) => {
+    const weights = [400, 500, 700];
+    const links = [];
+    if (document.querySelector('link[data-rtk-font]') == null) {
+        /**
+         * Adds the following preconnect link tags for faster google font loading
+         * <link rel="preconnect" href="https://fonts.googleapis.com">
+         * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+         */
+        const p1 = document.createElement('link');
+        p1.rel = 'preconnect';
+        p1.setAttribute('data-rtk-font', 'true');
+        p1.href = 'https://fonts.googleapis.com';
+        const p2 = p1.cloneNode(true);
+        p2.href = 'https://fonts.gstatic.com';
+        p2.crossOrigin = '';
+        links.push(p1, p2);
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('data-rtk-font', fontFamily);
+    link.href = encodeURI(`https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${weights.join(';')}&display=swap`);
+    links.push(link);
+    document.head.append(...links);
+};
+const provideSpacing = (el, spacingBase, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    spacingScale.forEach((space) => {
+        el.style.setProperty(getToken(`space-${space}`, tokenPrefix), `${space * spacingBase}px`);
+    });
+};
+const provideBorderWidth = (el, borderWidth, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderWidth in BORDER_WIDTHS) {
+        const widths = BORDER_WIDTHS[borderWidth];
+        Object.keys(widths).forEach((type) => {
+            el.style.setProperty(getToken(`border-width-${type}`, tokenPrefix), `${widths[type]}px`);
+        });
+    }
+};
+const provideBorderRadius = (el, borderRadius, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderRadius in BORDER_RADII) {
+        const radii = BORDER_RADII[borderRadius];
+        Object.keys(radii).forEach((type) => {
+            el.style.setProperty(getToken(`border-radius-${type}`, tokenPrefix), `${radii[type]}px`);
+        });
+    }
+};
+const provideColors = (el, colors, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    Object.keys(colors).forEach((color) => {
+        const colorValue = colors[color];
+        if (typeof colorValue === 'string') {
+            if (color === 'text' || color === 'text-on-brand') {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-1000`, tokenPrefix), `${rgb}`);
+                el.style.setProperty(getToken(`colors-${color}-900`, tokenPrefix), `${rgb} / 0.88`);
+                el.style.setProperty(getToken(`colors-${color}-800`, tokenPrefix), `${rgb} / 0.76`);
+                el.style.setProperty(getToken(`colors-${color}-700`, tokenPrefix), `${rgb} / 0.64`);
+                el.style.setProperty(getToken(`colors-${color}-600`, tokenPrefix), `${rgb} / 0.52`);
+            }
+            else {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}`, tokenPrefix), rgb);
+            }
+        }
+        else if (typeof colorValue === 'object') {
+            Object.keys(colorValue).forEach((shade) => {
+                const shadeValue = colorValue[shade];
+                const rgb = hexToRGB(shadeValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-${shade}`, tokenPrefix), rgb);
+            });
+        }
+    });
+};
+/**
+ * Provides the design system new tokens to consume values from for styling the RealtimeKit UI components.
+ * @param el The element/node you want to _provide_ RTK Design system.
+ * @param tokens The design tokens you want to updated.
+ */
+const provideRtkDesignSystem = (el, { spacingBase, borderRadius, borderWidth, colors, fontFamily, googleFont, theme, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX, }) => {
+    if (typeof el !== 'object') {
+        throw new Error('[rtk-ui-kit] (provideRtkDesignSystem): Passed element is not a valid HTML Element');
+    }
+    if (typeof googleFont === 'string') {
+        provideGoogleFont(googleFont);
+        el.style.setProperty(getToken('font-family', tokenPrefix), googleFont);
+    }
+    if (typeof fontFamily === 'string') {
+        el.style.setProperty(getToken('font-family', tokenPrefix), fontFamily);
+    }
+    if (typeof spacingBase === 'number') {
+        provideSpacing(el, spacingBase, tokenPrefix);
+    }
+    if (typeof borderWidth === 'string') {
+        provideBorderWidth(el, borderWidth, tokenPrefix);
+    }
+    if (typeof borderRadius === 'string') {
+        provideBorderRadius(el, borderRadius, tokenPrefix);
+    }
+    if (typeof theme === 'string') {
+        const colors = THEMES[theme];
+        if (colors != null)
+            provideColors(el, colors, tokenPrefix);
+    }
+    if (typeof colors === 'object') {
+        provideColors(el, colors, tokenPrefix);
+    }
+};
+
+/**
+ * This function is like `assignValue` except that it doesn't assign
+ * `undefined` values.
+ *
+ * @private
+ * @param {Object} object The object to modify.
+ * @param {string} key The key of the property to assign.
+ * @param {*} value The value to assign.
+ */
+function assignMergeValue(object, key, value) {
+  if ((value !== undefined && !eq(object[key], value)) ||
+      (value === undefined && !(key in object))) {
+    baseAssignValue(object, key, value);
+  }
+}
+
+/**
+ * Creates a base function for methods like `_.forIn` and `_.forOwn`.
+ *
+ * @private
+ * @param {boolean} [fromRight] Specify iterating from right to left.
+ * @returns {Function} Returns the new base function.
+ */
+function createBaseFor(fromRight) {
+  return function(object, iteratee, keysFunc) {
+    var index = -1,
+        iterable = Object(object),
+        props = keysFunc(object),
+        length = props.length;
+
+    while (length--) {
+      var key = props[fromRight ? length : ++index];
+      if (iteratee(iterable[key], key, iterable) === false) {
+        break;
+      }
+    }
+    return object;
+  };
+}
+
+/**
+ * The base implementation of `baseForOwn` which iterates over `object`
+ * properties returned by `keysFunc` and invokes `iteratee` for each property.
+ * Iteratee functions may exit iteration early by explicitly returning `false`.
+ *
+ * @private
+ * @param {Object} object The object to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @param {Function} keysFunc The function to get the keys of `object`.
+ * @returns {Object} Returns `object`.
+ */
+var baseFor = createBaseFor();
+
+const baseFor$1 = baseFor;
+
+/**
+ * This method is like `_.isArrayLike` except that it also checks if `value`
+ * is an object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array-like object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArrayLikeObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLikeObject(document.body.children);
+ * // => true
+ *
+ * _.isArrayLikeObject('abc');
+ * // => false
+ *
+ * _.isArrayLikeObject(_.noop);
+ * // => false
+ */
+function isArrayLikeObject(value) {
+  return isObjectLike(value) && isArrayLike(value);
+}
+
+/** `Object#toString` result references. */
+var objectTag = '[object Object]';
+
+/** Used for built-in method references. */
+var funcProto = Function.prototype,
+    objectProto = Object.prototype;
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString = funcProto.toString;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/** Used to infer the `Object` constructor. */
+var objectCtorString = funcToString.call(Object);
+
+/**
+ * Checks if `value` is a plain object, that is, an object created by the
+ * `Object` constructor or one with a `[[Prototype]]` of `null`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.8.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a plain object, else `false`.
+ * @example
+ *
+ * function Foo() {
+ *   this.a = 1;
+ * }
+ *
+ * _.isPlainObject(new Foo);
+ * // => false
+ *
+ * _.isPlainObject([1, 2, 3]);
+ * // => false
+ *
+ * _.isPlainObject({ 'x': 0, 'y': 0 });
+ * // => true
+ *
+ * _.isPlainObject(Object.create(null));
+ * // => true
+ */
+function isPlainObject(value) {
+  if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
+    return false;
+  }
+  var proto = getPrototype(value);
+  if (proto === null) {
+    return true;
+  }
+  var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+  return typeof Ctor == 'function' && Ctor instanceof Ctor &&
+    funcToString.call(Ctor) == objectCtorString;
+}
+
+/**
+ * Gets the value at `key`, unless `key` is "__proto__" or "constructor".
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {string} key The key of the property to get.
+ * @returns {*} Returns the property value.
+ */
+function safeGet(object, key) {
+  if (key === 'constructor' && typeof object[key] === 'function') {
+    return;
+  }
+
+  if (key == '__proto__') {
+    return;
+  }
+
+  return object[key];
+}
+
+/**
+ * Converts `value` to a plain object flattening inherited enumerable string
+ * keyed properties of `value` to own properties of the plain object.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category Lang
+ * @param {*} value The value to convert.
+ * @returns {Object} Returns the converted plain object.
+ * @example
+ *
+ * function Foo() {
+ *   this.b = 2;
+ * }
+ *
+ * Foo.prototype.c = 3;
+ *
+ * _.assign({ 'a': 1 }, new Foo);
+ * // => { 'a': 1, 'b': 2 }
+ *
+ * _.assign({ 'a': 1 }, _.toPlainObject(new Foo));
+ * // => { 'a': 1, 'b': 2, 'c': 3 }
+ */
+function toPlainObject(value) {
+  return copyObject(value, keysIn(value));
+}
+
+/**
+ * A specialized version of `baseMerge` for arrays and objects which performs
+ * deep merges and tracks traversed objects enabling objects with circular
+ * references to be merged.
+ *
+ * @private
+ * @param {Object} object The destination object.
+ * @param {Object} source The source object.
+ * @param {string} key The key of the value to merge.
+ * @param {number} srcIndex The index of `source`.
+ * @param {Function} mergeFunc The function to merge values.
+ * @param {Function} [customizer] The function to customize assigned values.
+ * @param {Object} [stack] Tracks traversed source values and their merged
+ *  counterparts.
+ */
+function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
+  var objValue = safeGet(object, key),
+      srcValue = safeGet(source, key),
+      stacked = stack.get(srcValue);
+
+  if (stacked) {
+    assignMergeValue(object, key, stacked);
+    return;
+  }
+  var newValue = customizer
+    ? customizer(objValue, srcValue, (key + ''), object, source, stack)
+    : undefined;
+
+  var isCommon = newValue === undefined;
+
+  if (isCommon) {
+    var isArr = isArray(srcValue),
+        isBuff = !isArr && isBuffer(srcValue),
+        isTyped = !isArr && !isBuff && isTypedArray(srcValue);
+
+    newValue = srcValue;
+    if (isArr || isBuff || isTyped) {
+      if (isArray(objValue)) {
+        newValue = objValue;
+      }
+      else if (isArrayLikeObject(objValue)) {
+        newValue = copyArray(objValue);
+      }
+      else if (isBuff) {
+        isCommon = false;
+        newValue = cloneBuffer(srcValue, true);
+      }
+      else if (isTyped) {
+        isCommon = false;
+        newValue = cloneTypedArray(srcValue, true);
+      }
+      else {
+        newValue = [];
+      }
+    }
+    else if (isPlainObject(srcValue) || isArguments(srcValue)) {
+      newValue = objValue;
+      if (isArguments(objValue)) {
+        newValue = toPlainObject(objValue);
+      }
+      else if (!isObject(objValue) || isFunction(objValue)) {
+        newValue = initCloneObject(srcValue);
+      }
+    }
+    else {
+      isCommon = false;
+    }
+  }
+  if (isCommon) {
+    // Recursively merge objects and arrays (susceptible to call stack limits).
+    stack.set(srcValue, newValue);
+    mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
+    stack['delete'](srcValue);
+  }
+  assignMergeValue(object, key, newValue);
+}
+
+/**
+ * The base implementation of `_.merge` without support for multiple sources.
+ *
+ * @private
+ * @param {Object} object The destination object.
+ * @param {Object} source The source object.
+ * @param {number} srcIndex The index of `source`.
+ * @param {Function} [customizer] The function to customize merged values.
+ * @param {Object} [stack] Tracks traversed source values and their merged
+ *  counterparts.
+ */
+function baseMerge(object, source, srcIndex, customizer, stack) {
+  if (object === source) {
+    return;
+  }
+  baseFor$1(source, function(srcValue, key) {
+    stack || (stack = new Stack);
+    if (isObject(srcValue)) {
+      baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
+    }
+    else {
+      var newValue = customizer
+        ? customizer(safeGet(object, key), srcValue, (key + ''), object, source, stack)
+        : undefined;
+
+      if (newValue === undefined) {
+        newValue = srcValue;
+      }
+      assignMergeValue(object, key, newValue);
+    }
+  }, keysIn);
+}
+
+/**
+ * This method returns the first argument it receives.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Util
+ * @param {*} value Any value.
+ * @returns {*} Returns `value`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ *
+ * console.log(_.identity(object) === object);
+ * // => true
+ */
+function identity(value) {
+  return value;
+}
+
+/**
+ * A faster alternative to `Function#apply`, this function invokes `func`
+ * with the `this` binding of `thisArg` and the arguments of `args`.
+ *
+ * @private
+ * @param {Function} func The function to invoke.
+ * @param {*} thisArg The `this` binding of `func`.
+ * @param {Array} args The arguments to invoke `func` with.
+ * @returns {*} Returns the result of `func`.
+ */
+function apply(func, thisArg, args) {
+  switch (args.length) {
+    case 0: return func.call(thisArg);
+    case 1: return func.call(thisArg, args[0]);
+    case 2: return func.call(thisArg, args[0], args[1]);
+    case 3: return func.call(thisArg, args[0], args[1], args[2]);
+  }
+  return func.apply(thisArg, args);
+}
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max;
+
+/**
+ * A specialized version of `baseRest` which transforms the rest array.
+ *
+ * @private
+ * @param {Function} func The function to apply a rest parameter to.
+ * @param {number} [start=func.length-1] The start position of the rest parameter.
+ * @param {Function} transform The rest array transform.
+ * @returns {Function} Returns the new function.
+ */
+function overRest(func, start, transform) {
+  start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
+  return function() {
+    var args = arguments,
+        index = -1,
+        length = nativeMax(args.length - start, 0),
+        array = Array(length);
+
+    while (++index < length) {
+      array[index] = args[start + index];
+    }
+    index = -1;
+    var otherArgs = Array(start + 1);
+    while (++index < start) {
+      otherArgs[index] = args[index];
+    }
+    otherArgs[start] = transform(array);
+    return apply(func, this, otherArgs);
+  };
+}
+
+/**
+ * Creates a function that returns `value`.
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Util
+ * @param {*} value The value to return from the new function.
+ * @returns {Function} Returns the new constant function.
+ * @example
+ *
+ * var objects = _.times(2, _.constant({ 'a': 1 }));
+ *
+ * console.log(objects);
+ * // => [{ 'a': 1 }, { 'a': 1 }]
+ *
+ * console.log(objects[0] === objects[1]);
+ * // => true
+ */
+function constant(value) {
+  return function() {
+    return value;
+  };
+}
+
+/**
+ * The base implementation of `setToString` without support for hot loop shorting.
+ *
+ * @private
+ * @param {Function} func The function to modify.
+ * @param {Function} string The `toString` result.
+ * @returns {Function} Returns `func`.
+ */
+var baseSetToString = !defineProperty ? identity : function(func, string) {
+  return defineProperty(func, 'toString', {
+    'configurable': true,
+    'enumerable': false,
+    'value': constant(string),
+    'writable': true
+  });
+};
+
+const baseSetToString$1 = baseSetToString;
+
+/** Used to detect hot functions by number of calls within a span of milliseconds. */
+var HOT_COUNT = 800,
+    HOT_SPAN = 16;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeNow = Date.now;
+
+/**
+ * Creates a function that'll short out and invoke `identity` instead
+ * of `func` when it's called `HOT_COUNT` or more times in `HOT_SPAN`
+ * milliseconds.
+ *
+ * @private
+ * @param {Function} func The function to restrict.
+ * @returns {Function} Returns the new shortable function.
+ */
+function shortOut(func) {
+  var count = 0,
+      lastCalled = 0;
+
+  return function() {
+    var stamp = nativeNow(),
+        remaining = HOT_SPAN - (stamp - lastCalled);
+
+    lastCalled = stamp;
+    if (remaining > 0) {
+      if (++count >= HOT_COUNT) {
+        return arguments[0];
+      }
+    } else {
+      count = 0;
+    }
+    return func.apply(undefined, arguments);
+  };
+}
+
+/**
+ * Sets the `toString` method of `func` to return `string`.
+ *
+ * @private
+ * @param {Function} func The function to modify.
+ * @param {Function} string The `toString` result.
+ * @returns {Function} Returns `func`.
+ */
+var setToString = shortOut(baseSetToString$1);
+
+const setToString$1 = setToString;
+
+/**
+ * The base implementation of `_.rest` which doesn't validate or coerce arguments.
+ *
+ * @private
+ * @param {Function} func The function to apply a rest parameter to.
+ * @param {number} [start=func.length-1] The start position of the rest parameter.
+ * @returns {Function} Returns the new function.
+ */
+function baseRest(func, start) {
+  return setToString$1(overRest(func, start, identity), func + '');
+}
+
+/**
+ * Checks if the given arguments are from an iteratee call.
+ *
+ * @private
+ * @param {*} value The potential iteratee value argument.
+ * @param {*} index The potential iteratee index or key argument.
+ * @param {*} object The potential iteratee object argument.
+ * @returns {boolean} Returns `true` if the arguments are from an iteratee call,
+ *  else `false`.
+ */
+function isIterateeCall(value, index, object) {
+  if (!isObject(object)) {
+    return false;
+  }
+  var type = typeof index;
+  if (type == 'number'
+        ? (isArrayLike(object) && isIndex(index, object.length))
+        : (type == 'string' && index in object)
+      ) {
+    return eq(object[index], value);
+  }
+  return false;
+}
+
+/**
+ * Creates a function like `_.assign`.
+ *
+ * @private
+ * @param {Function} assigner The function to assign values.
+ * @returns {Function} Returns the new assigner function.
+ */
+function createAssigner(assigner) {
+  return baseRest(function(object, sources) {
+    var index = -1,
+        length = sources.length,
+        customizer = length > 1 ? sources[length - 1] : undefined,
+        guard = length > 2 ? sources[2] : undefined;
+
+    customizer = (assigner.length > 3 && typeof customizer == 'function')
+      ? (length--, customizer)
+      : undefined;
+
+    if (guard && isIterateeCall(sources[0], sources[1], guard)) {
+      customizer = length < 3 ? undefined : customizer;
+      length = 1;
+    }
+    object = Object(object);
+    while (++index < length) {
+      var source = sources[index];
+      if (source) {
+        assigner(object, source, index, customizer);
+      }
+    }
+    return object;
+  });
+}
+
+/**
+ * This method is like `_.assign` except that it recursively merges own and
+ * inherited enumerable string keyed properties of source objects into the
+ * destination object. Source properties that resolve to `undefined` are
+ * skipped if a destination value exists. Array and plain object properties
+ * are merged recursively. Other objects and value types are overridden by
+ * assignment. Source objects are applied from left to right. Subsequent
+ * sources overwrite property assignments of previous sources.
+ *
+ * **Note:** This method mutates `object`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.5.0
+ * @category Object
+ * @param {Object} object The destination object.
+ * @param {...Object} [sources] The source objects.
+ * @returns {Object} Returns `object`.
+ * @example
+ *
+ * var object = {
+ *   'a': [{ 'b': 2 }, { 'd': 4 }]
+ * };
+ *
+ * var other = {
+ *   'a': [{ 'c': 3 }, { 'e': 5 }]
+ * };
+ *
+ * _.merge(object, other);
+ * // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
+ */
+var merge = createAssigner(function(object, source, srcIndex) {
+  baseMerge(object, source, srcIndex);
+});
+
+const deepMerge = merge;
+
+/**
+ * Extend the default UI Config with your own
+ * @param config Your extended UI Config
+ * @returns New extended UI Config object
+ */
+const extendConfig = (config, baseConfig = defaultConfig) => {
+    let newConfig = Object.assign({}, baseConfig);
+    deepMerge(newConfig, config);
+    return newConfig;
+};
+/**
+ * Generates a config with older theme value.
+ * @param oldConfig Theme object
+ * @param toExtend UI Config object to extend the generated config
+ * @param options Options for toggling components
+ * @returns
+ */
+const generateConfig = (oldConfig, meeting, toExtend = {}, options = { grid_pagination: true, settings_toggle: true }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const data = { showSetupScreen: true };
+    let logo;
+    let meetingElements = ['rtk-stage'];
+    let headerChildren = {}, controlBarChildren = {};
+    const showSettingsToggle = (options === null || options === void 0 ? void 0 : options.settings_toggle) !== false;
+    const showGridPagination = (options === null || options === void 0 ? void 0 : options.grid_pagination) !== false;
+    if ((_a = oldConfig.controlBar) === null || _a === void 0 ? void 0 : _a.isEnabled) {
+        meetingElements.push('rtk-controlbar');
+        const { elements } = oldConfig.controlBar;
+        const leftElements = [
+            ...(elements.fullscreen ? ['rtk-fullscreen-toggle'] : []),
+            ...(showSettingsToggle ? ['rtk-settings-toggle'] : []),
+        ];
+        const rightElements = [];
+        const moreElements = [];
+        if (((_b = meeting.participants.pip) === null || _b === void 0 ? void 0 : _b.isSupported()) &&
+            ((_d = (_c = meeting.self) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.pipMode) &&
+            ((_e = meeting.self.config) === null || _e === void 0 ? void 0 : _e.viewType) !== 'LIVESTREAM') {
+            moreElements.push('rtk-pip-toggle');
+        }
+        if (meeting === null || meeting === void 0 ? void 0 : meeting.self.permissions.canDisableParticipantAudio) {
+            moreElements.push('rtk-mute-all-button');
+        }
+        moreElements.push('rtk-breakout-rooms-toggle');
+        if ((_f = meeting.self) === null || _f === void 0 ? void 0 : _f.permissions.canRecord) {
+            moreElements.push('rtk-recording-toggle');
+        }
+        if ((_g = meeting.self.permissions.transcriptionEnabled) !== null && _g !== void 0 ? _g : false) {
+            moreElements.push('rtk-caption-toggle');
+        }
+        if (navigator.product !== 'ReactNative')
+            moreElements.push('rtk-debugger-toggle');
+        if (isLiveStreamHost(meeting)) {
+            leftElements.push('rtk-livestream-toggle');
+        }
+        if (elements.screenshare) {
+            leftElements.push('rtk-screen-share-toggle');
+        }
+        if (elements.chat) {
+            rightElements.push('rtk-chat-toggle');
+        }
+        if (elements.polls) {
+            rightElements.push('rtk-polls-toggle');
+        }
+        if (elements.participants) {
+            rightElements.push('rtk-participants-toggle');
+        }
+        if (elements.plugins) {
+            rightElements.push('rtk-plugins-toggle');
+        }
+        rightElements.push('rtk-ai-toggle');
+        // NOTE(ishita1805): No condition as permission check happens within component
+        const centerElements = [
+            'rtk-mic-toggle',
+            'rtk-camera-toggle',
+            'rtk-stage-toggle',
+            'rtk-leave-button',
+        ];
+        if (moreElements.length > 0)
+            centerElements.push('rtk-more-toggle');
+        const allSideElements = leftElements.concat(rightElements).concat(moreElements);
+        let hasMobileDrawer = false;
+        if (allSideElements.length > 0) {
+            hasMobileDrawer = true;
+        }
+        controlBarChildren = {
+            'rtk-controlbar': {
+                states: ['activeMoreMenu'],
+                children: ['div#controlbar-left', 'div#controlbar-center', 'div#controlbar-right'],
+            },
+            'div#controlbar-left': leftElements,
+            'div#controlbar-center': centerElements,
+            'div#controlbar-right': rightElements,
+            'rtk-more-toggle': {
+                states: ['activeMoreMenu'],
+                children: [],
+            },
+            'rtk-more-toggle.activeMoreMenu': moreElements.map((el) => [
+                el,
+                { variant: 'horizontal', slot: 'more-elements' },
+            ]),
+            'rtk-controlbar.sm': ['div#controlbar-mobile'],
+            'rtk-controlbar.md': ['div#controlbar-mobile'],
+            'rtk-more-toggle.activeMoreMenu.md': allSideElements.map((el) => [
+                el,
+                { variant: 'horizontal', slot: 'more-elements' },
+            ]),
+            'rtk-more-toggle.activeMoreMenu.sm': allSideElements.map((el) => [
+                el,
+                { variant: 'horizontal', slot: 'more-elements' },
+            ]),
+            'div#controlbar-mobile': [
+                'rtk-mic-toggle',
+                'rtk-camera-toggle',
+                'rtk-stage-toggle',
+                ...[hasMobileDrawer && 'rtk-more-toggle'],
+                'rtk-leave-button',
+            ],
+        };
+    }
+    if ((_h = oldConfig.header) === null || _h === void 0 ? void 0 : _h.isEnabled) {
+        meetingElements.unshift('rtk-header');
+        const { elements } = oldConfig.header;
+        let leftElements = ['rtk-recording-indicator', 'rtk-livestream-indicator'], centerElements = [], rightElements = [];
+        if (showGridPagination) {
+            rightElements.push('rtk-grid-pagination');
+        }
+        if (elements.title) {
+            centerElements.push('rtk-meeting-title');
+        }
+        if (typeof elements.logo === 'string' && elements.logo.length > 0) {
+            logo = elements.logo;
+            leftElements.unshift('rtk-logo');
+        }
+        if (elements.participantCount) {
+            rightElements.push('rtk-participant-count', 'rtk-viewer-count');
+        }
+        if (elements.timer) {
+            rightElements.push('rtk-clock');
+        }
+        headerChildren = {
+            'rtk-header': ['div#header-left', 'div#header-center', 'div#header-right'],
+            'rtk-header.sm': { remove: ['div#header-center'] },
+            'div#header-left': leftElements,
+            'div#header-center': centerElements,
+            'div#header-right': rightElements,
+            'div#header-left.sm': {
+                remove: ['rtk-logo'],
+                prepend: ['rtk-meeting-title'],
+            },
+        };
+    }
+    meetingElements.push('rtk-participants-audio', 'rtk-dialog-manager');
+    let designTokens = {
+        logo,
+    };
+    designTokens = oldConfig.designTokens;
+    if (isValidHexColor((_k = (_j = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _j === void 0 ? void 0 : _j.colors) === null || _k === void 0 ? void 0 : _k.textOnBrand)) {
+        designTokens.colors['text-on-brand'] = (_m = (_l = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _l === void 0 ? void 0 : _l.colors) === null || _m === void 0 ? void 0 : _m.textOnBrand;
+    }
+    if (isValidHexColor((_p = (_o = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _o === void 0 ? void 0 : _o.colors) === null || _p === void 0 ? void 0 : _p.videoBg)) {
+        designTokens.colors['video-bg'] = (_r = (_q = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _q === void 0 ? void 0 : _q.colors) === null || _r === void 0 ? void 0 : _r.videoBg;
+    }
+    let config = {
+        designTokens,
+        styles: {
+            'rtk-header': {
+                display: 'grid',
+                height: '48px',
+                gridTemplateColumns: 'repeat(3, 1fr)',
+                gridTemplateRows: '1fr',
+                alignItems: 'center',
+            },
+            'rtk-header.sm': {
+                display: 'grid',
+                gridArea: 'header',
+                gridTemplateColumns: 'repeat(2, 1fr)',
+                gridTemplateRows: '1fr',
+                alignItems: 'center',
+            },
+            'div#header-left': {
+                display: 'flex',
+                alignItems: 'center',
+                height: '48px',
+                wordBreak: 'break-all',
+            },
+            'rtk-logo': {
+                height: '26px',
+            },
+            'div#header-center': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                wordBreak: 'break-all',
+            },
+            'div#header-right': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+            },
+            'rtk-stage': {
+                display: 'flex',
+                flex: '1',
+            },
+            'rtk-grid': {
+                flex: '1',
+                height: 'auto',
+            },
+            'rtk-controlbar': {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(3,1fr)',
+                gridTemplateRows: '1fr',
+                alignItems: 'center',
+                padding: '8px',
+            },
+            'rtk-controlbar.sm': {
+                display: 'flex',
+                position: 'relative',
+                backgroundColor: 'var(--rtk-colors-background-1000, #000)',
+            },
+            'rtk-controlbar.md': {
+                display: 'flex',
+                position: 'relative',
+                backgroundColor: 'var(--rtk-colors-background-1000, #000)',
+            },
+            'div#controlbar-left': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--rtk-space-1, 4px)',
+            },
+            'div#controlbar-center': {
+                display: 'flex',
+                alignItems: 'center',
+                position: 'relative',
+                overflow: 'visible',
+                justifyContent: 'center',
+                gap: 'var(--rtk-space-1, 4px)',
+            },
+            'div#controlbar-mobile': {
+                display: 'flex',
+                flex: '1',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: '10000',
+                gap: 'var(--rtk-space-1, 4px)',
+            },
+            'div#controlbar-right': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                gap: 'var(--rtk-space-1, 4px)',
+            },
+            'rtk-settings': {
+                width: '720px',
+                height: '480px',
+            },
+            'rtk-debugger': {
+                width: '720px',
+                height: '480px',
+            },
+            'div#setupcontrols-indicator': {
+                position: 'absolute',
+                bottom: '12px',
+                left: '12px',
+                display: 'flex',
+                gap: '6px',
+                background: 'rgb(var(--rtk-colors-background-800, 0 0 0))',
+                borderRadius: '100%',
+            },
+            'div#setupcontrols-media': {
+                position: 'absolute',
+                bottom: '8px',
+                right: '8px',
+                display: 'flex',
+                gap: '6px',
+            },
+            'div#setupcontrols-settings': {
+                position: 'absolute',
+                top: '8px',
+                right: '8px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '6px',
+            },
+            'rtk-meeting-title.sm': {
+                marginLeft: '0',
+            },
+            'rtk-clock': {
+                marginRight: '0',
+            },
+        },
+        root: Object.assign(Object.assign(Object.assign({ 'rtk-meeting': {
+                // if using key value pair, provide the key in `state`
+                // else provide array of states in `states`
+                state: 'meeting',
+                states: ['activeSidebar', 'activeAI'],
+            }, 'rtk-meeting[meeting=idle]': ['rtk-idle-screen'], 'rtk-meeting[meeting=waiting]': ['rtk-waiting-screen'], 'rtk-meeting[meeting=setup]': ['rtk-setup-screen', 'rtk-dialog-manager'], 'rtk-meeting[meeting=joined]': meetingElements, 'rtk-meeting[meeting=joined].activeSidebar.sm': {
+                add: [['rtk-sidebar', { view: 'full-screen' }]],
+            }, 'rtk-meeting[meeting=joined].activeSidebar.md': {
+                add: [['rtk-sidebar', { view: 'full-screen' }]],
+            }, 'rtk-meeting[meeting=joined].activeAI.sm': {
+                add: [['rtk-ai', { view: 'full-screen' }]],
+            }, 'rtk-meeting[meeting=joined].activeAI.md': {
+                add: [['rtk-ai', { view: 'full-screen' }]],
+            }, 'rtk-meeting[meeting=ended]': ['rtk-ended-screen'] }, headerChildren), controlBarChildren), { 'rtk-stage': {
+                states: ['activeSidebar', 'activeAI'],
+                children: ['rtk-grid', 'rtk-notifications', 'rtk-transcripts'],
+            }, 'rtk-stage.activeSidebar': {
+                add: [['rtk-sidebar', { view: 'sidebar' }]],
+            }, 
+            // hide sidebar for smaller screens
+            'rtk-stage.activeSidebar.sm': { remove: ['rtk-sidebar'] }, 'rtk-stage.activeAI': {
+                add: [['rtk-ai', { view: 'sidebar' }]],
+            }, 
+            // hide sidebar for smaller screens
+            'rtk-stage.activeAI.sm': { remove: ['rtk-ai'] }, 'rtk-grid': {
+                states: ['activeScreenShare', 'activePlugin', 'activeSpotlight'],
+                state: 'viewType',
+                children: ['rtk-simple-grid'],
+            }, 'rtk-grid[viewType=AUDIO_ROOM]': ['rtk-audio-grid'], 'rtk-grid[viewType=AUDIO_ROOM].activePlugin': ['rtk-mixed-grid'], 'rtk-grid[viewType=AUDIO_ROOM].activeScreenshare': ['rtk-mixed-grid'], 'rtk-grid[viewType=AUDIO_ROOM].activeScreenShare.activeSpotlight': ['rtk-mixed-grid'], 'rtk-grid[viewType=AUDIO_ROOM].activePlugin.activeSpotlight': ['rtk-mixed-grid'], 'rtk-grid[viewType=AUDIO_ROOM].activePlugin.activeScreenShare.activeSpotlight': [
+                'rtk-mixed-grid',
+            ], 'rtk-grid.activeSpotlight': ['rtk-spotlight-grid'], 'rtk-grid.activeScreenShare': ['rtk-mixed-grid'], 'rtk-grid.activePlugin': ['rtk-mixed-grid'], 'rtk-grid.activeScreenShare.activeSpotlight': ['rtk-mixed-grid'], 'rtk-grid.activePlugin.activeSpotlight': ['rtk-mixed-grid'], 'rtk-grid.activePlugin.activeScreenShare.activeSpotlight': ['rtk-mixed-grid'], 'rtk-mixed-grid': {
+                states: ['activeSpotlight'],
+                state: 'viewType',
+                children: ['rtk-simple-grid'],
+            }, 'rtk-mixed-grid[viewType=AUDIO_ROOM]': ['rtk-audio-grid'], 'rtk-mixed-grid.activeSpotlight': ['rtk-spotlight-grid'], 'rtk-participant-tile': {
+                state: 'meeting',
+                children: ['rtk-name-tag', 'rtk-avatar', 'rtk-network-indicator'],
+            }, 'rtk-participant-setup': ['rtk-avatar', 'div#setupcontrols-media'], 'rtk-participant-tile[meeting=setup]': [
+                'rtk-avatar',
+                'div#setupcontrols-indicator',
+                'div#setupcontrols-media',
+                ...(showSettingsToggle ? ['div#setupcontrols-settings'] : []),
+            ], 'div#setupcontrols-indicator': [['rtk-audio-visualizer', { slot: 'start', hideMuted: true }]], 'div#setupcontrols-media': [
+                ['rtk-mic-toggle', { size: 'sm' }],
+                ['rtk-camera-toggle', { size: 'sm' }],
+            ], 'div#setupcontrols-settings': [['rtk-settings-toggle', { size: 'sm' }]], 'rtk-screenshare-view': ['rtk-name-tag', 'rtk-network-indicator'], 'rtk-name-tag': [['rtk-audio-visualizer', { slot: 'start' }]] }),
+        config: {
+            notification_sounds: {
+                participant_left: false,
+            },
+            participant_joined_sound_notification_limit: 3,
+            participant_chat_message_sound_notification_limit: 10,
+            videoFit: 'cover',
+        },
+    };
+    config = extendConfig(toExtend, config);
+    data.showSetupScreen = (_t = (_s = oldConfig.setupScreen) === null || _s === void 0 ? void 0 : _s.isEnabled) !== null && _t !== void 0 ? _t : true;
+    return { config, data };
+};
+
+export { deepMerge as d, extendConfig as e, generateConfig as g, provideRtkDesignSystem as p };