@multiplatform.one/storybook 6.0.0

package/dist/cjs/CreatePreview.native.js

@@ -0,0 +1,781 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var CreatePreview_exports = {};
+__export(CreatePreview_exports, {
+  accentColorsChannelEvent: () => accentColorsChannelEvent,
+  accentOppositeChannelEvent: () => accentOppositeChannelEvent,
+  animationNamesChannelEvent: () => animationNamesChannelEvent,
+  baseOppositeChannelEvent: () => baseOppositeChannelEvent,
+  baseThemeColorsChannelEvent: () => baseThemeColorsChannelEvent,
+  createPreview: () => createPreview,
+  frappeDebugChannelEvent: () => frappeDebugChannelEvent,
+  themeColorsChannelEvent: () => themeColorsChannelEvent,
+  themeColorsOppositeChannelEvent: () => themeColorsOppositeChannelEvent
+});
+module.exports = __toCommonJS(CreatePreview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_platform = require("@multiplatform.one/platform");
+var import_react_cookie = require("react-cookie");
+var import_tamagui = require("tamagui");
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var themeColorsChannelEvent = "theme-addon/theme-colors";
+var themeColorsOppositeChannelEvent = "theme-addon/theme-colors-opposite";
+var baseThemeColorsChannelEvent = "theme-addon/base-theme-colors";
+var baseOppositeChannelEvent = "theme-addon/base-colors-opposite";
+var accentColorsChannelEvent = "theme-addon/accent-colors";
+var accentOppositeChannelEvent = "theme-addon/accent-colors-opposite";
+var animationNamesChannelEvent = "theme-addon/animation-names";
+var frappeDebugChannelEvent = "frappe-addon/debug-state";
+var knobOptions = {
+  fillStyle: Object.values(import_theme.FillStyle),
+  borderRadius: Object.values(import_theme.BorderRadius),
+  borderWidth: Object.values(import_theme.BorderWidth),
+  elevation: Object.values(import_theme.Elevation),
+  space: Object.values(import_theme.Space),
+  size: Object.values(import_theme.Size),
+  textAccent: Object.values(import_theme.TextAccent),
+  headingFont: Object.values(import_theme.HeadingFont),
+  bodyFont: Object.values(import_theme.BodyFont),
+  fontWeight: Object.values(import_theme.FontWeight),
+  animation: ["none", ...import_theme.animationNames]
+};
+var stateKnobFields = ["fillStyle", "borderRadius", "borderWidth", "elevation", "space", "size", "textAccent", "headingFont", "bodyFont", "fontWeight"];
+function parseValue(value) {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch (unused) {
+    return value;
+  }
+}
+var toTitleCase = function toTitleCase2(str) {
+  return str.replace(/([A-Z])/g, " $1").replace(/^./, function (s) {
+    return s.toUpperCase();
+  });
+};
+function createControl(key) {
+  var _knobOptions_key;
+  var name = toTitleCase(key);
+  var values = (_knobOptions_key = knobOptions[key]) !== null && _knobOptions_key !== void 0 ? _knobOptions_key : [];
+  var serialized = values.map(function (value) {
+    return value;
+  });
+  var labels = Object.fromEntries(serialized.map(function (v) {
+    return [v, v.replace("$", "")];
+  }));
+  var fallback = import_theme.defaultKnobs[key];
+  return {
+    name,
+    description: name.toLowerCase(),
+    options: serialized,
+    control: {
+      type: "select",
+      labels
+    },
+    ...(fallback !== void 0 && {
+      defaultValue: fallback
+    })
+  };
+}
+function CanvasBackground(param) {
+  var {
+    children
+  } = param;
+  var _tamaguiTheme_background;
+  var tamaguiTheme = (0, import_tamagui.useTheme)();
+  var bg = (_tamaguiTheme_background = tamaguiTheme.background) === null || _tamaguiTheme_background === void 0 ? void 0 : _tamaguiTheme_background.val;
+  (0, import_react.useLayoutEffect)(function () {
+    if (bg) {
+      document.body.style.backgroundColor = bg;
+      document.documentElement.style.backgroundColor = bg;
+    }
+  }, [bg]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    flex: 1,
+    minHeight: "100vh",
+    backgroundColor: "$background",
+    children
+  });
+}
+var _channelEmit = null;
+function getChannelEmit() {
+  if (_channelEmit) return _channelEmit;
+  try {
+    var mod = require("storybook/preview-api");
+    var channel = mod.addons.getChannel();
+    _channelEmit = function _channelEmit2(event, data) {
+      return channel.emit(event, data);
+    };
+    return _channelEmit;
+  } catch (unused) {
+    return null;
+  }
+}
+function AnimationNamesEmitter() {
+  var emittedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(function () {
+    var _getChannelEmit;
+    if (emittedRef.current) return;
+    emittedRef.current = true;
+    (_getChannelEmit = getChannelEmit()) === null || _getChannelEmit === void 0 ? void 0 : _getChannelEmit(animationNamesChannelEvent, import_theme.animationNames);
+  }, []);
+  return null;
+}
+function FrappeDebugEmitter() {
+  var prevRef = (0, import_react.useRef)("");
+  var syncRef = (0, import_react.useRef)(null);
+  var [tick, setTick] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(function () {
+    var cancelled = false;
+    async function resolve() {
+      try {
+        var {
+          __getActiveSyncModule
+        } = await import("@multiplatform.one/frappe");
+        var sync = __getActiveSyncModule();
+        if (sync && !cancelled) {
+          syncRef.current = sync;
+          setTick(function (t) {
+            return t + 1;
+          });
+          return sync.subscribeStore(function () {
+            if (!cancelled) setTick(function (t) {
+              return t + 1;
+            });
+          });
+        }
+      } catch (unused) {}
+    }
+    var cleanupPromise = resolve();
+    var attempts = 0;
+    var interval = setInterval(async function () {
+      attempts++;
+      if (syncRef.current || cancelled || attempts >= 10) {
+        clearInterval(interval);
+        return;
+      }
+      await resolve();
+    }, 2e3);
+    return function () {
+      cancelled = true;
+      clearInterval(interval);
+      cleanupPromise.then(function (unsub) {
+        return unsub === null || unsub === void 0 ? void 0 : unsub();
+      });
+    };
+  }, []);
+  (0, import_react.useEffect)(function () {
+    if (!syncRef.current) return;
+    var emit = getChannelEmit();
+    if (!emit) return;
+    try {
+      var state = syncRef.current.__debug();
+      var key = JSON.stringify(state);
+      if (key === prevRef.current) return;
+      prevRef.current = key;
+      emit(frappeDebugChannelEvent, state);
+    } catch (unused) {}
+  },
+  // debug not available
+  [tick]);
+  return null;
+}
+function ThemeColorEmitter() {
+  var tamaguiTheme = (0, import_tamagui.useTheme)();
+  var prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(function () {
+    var _getChannelEmit;
+    var colors = [];
+    for (var i = 1; i <= 12; i++) {
+      var _ref;
+      var token = tamaguiTheme[`color${i}`];
+      colors.push((_ref = token === null || token === void 0 ? void 0 : token.val) !== null && _ref !== void 0 ? _ref : "");
+    }
+    var key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    (_getChannelEmit = getChannelEmit()) === null || _getChannelEmit === void 0 ? void 0 : _getChannelEmit(themeColorsChannelEvent, colors);
+  }, [tamaguiTheme]);
+  return null;
+}
+function BaseThemeColorEmitter() {
+  var tamaguiTheme = (0, import_tamagui.useTheme)();
+  var prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(function () {
+    var _getChannelEmit;
+    var colors = [];
+    for (var i = 1; i <= 12; i++) {
+      var _ref;
+      var token = tamaguiTheme[`color${i}`];
+      colors.push((_ref = token === null || token === void 0 ? void 0 : token.val) !== null && _ref !== void 0 ? _ref : "");
+    }
+    var key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    (_getChannelEmit = getChannelEmit()) === null || _getChannelEmit === void 0 ? void 0 : _getChannelEmit(baseThemeColorsChannelEvent, colors);
+  }, [tamaguiTheme]);
+  return null;
+}
+function OppositeThemeColorEmitter() {
+  var tamaguiTheme = (0, import_tamagui.useTheme)();
+  var prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(function () {
+    var _getChannelEmit;
+    var colors = [];
+    for (var i = 1; i <= 12; i++) {
+      var _ref;
+      var token = tamaguiTheme[`color${i}`];
+      colors.push((_ref = token === null || token === void 0 ? void 0 : token.val) !== null && _ref !== void 0 ? _ref : "");
+    }
+    var key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    (_getChannelEmit = getChannelEmit()) === null || _getChannelEmit === void 0 ? void 0 : _getChannelEmit(themeColorsOppositeChannelEvent, colors);
+  }, [tamaguiTheme]);
+  return null;
+}
+function ColorChannelEmitter(param) {
+  var {
+    event,
+    prefix = "color"
+  } = param;
+  var tamaguiTheme = (0, import_tamagui.useTheme)();
+  var prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(function () {
+    var _getChannelEmit;
+    var colors = [];
+    var found = false;
+    for (var i = 1; i <= 12; i++) {
+      var _ref;
+      var token = tamaguiTheme[`${prefix}${i}`];
+      var val = (_ref = token === null || token === void 0 ? void 0 : token.val) !== null && _ref !== void 0 ? _ref : "";
+      colors.push(val);
+      if (val) found = true;
+    }
+    if (!found) return;
+    var key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    (_getChannelEmit = getChannelEmit()) === null || _getChannelEmit === void 0 ? void 0 : _getChannelEmit(event, colors);
+  }, [tamaguiTheme, event, prefix]);
+  return null;
+}
+var tamaguiPropLeakPatterns = ["pressTheme", "scaleIcon", "borderTopRightRadius", "borderBottomRightRadius", "borderTopLeftRadius", "borderBottomLeftRadius"];
+function suppressTamaguiDomWarnings() {
+  if (typeof window === "undefined") return;
+  var origError = console.error;
+  console.error = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var msg = args.map(function (a) {
+      return typeof a === "string" ? a : "";
+    }).join(" ");
+    if (msg.includes("React does not recognize the") && tamaguiPropLeakPatterns.some(function (p) {
+      return msg.includes(p);
+    })) {
+      return;
+    }
+    origError(...args);
+  };
+}
+suppressTamaguiDomWarnings();
+function createPreview(options) {
+  var _themeConfig_defaultPreset;
+  var {
+    themeConfig,
+    i18n,
+    AppProvider,
+    decorators: extraDecorators = [],
+    parameters: extraParameters = {},
+    globalTypes: extraGlobalTypes = {}
+  } = options;
+  var enumKeys = Object.keys(knobOptions);
+  var generatedGlobalTypes = {};
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = enumKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var key = _step.value;
+      generatedGlobalTypes[key] = createControl(key);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  for (var _i = 0, _iter = ["hover", "press", "focus", "focusVisible"]; _i < _iter.length; _i++) {
+    var state = _iter[_i];
+    var _iteratorNormalCompletion1 = true,
+      _didIteratorError1 = false,
+      _iteratorError1 = void 0;
+    try {
+      for (var _iterator1 = stateKnobFields[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+        var field = _step1.value;
+        var _knobOptions_field;
+        var stateKey = `${state}.${field}`;
+        var values = (_knobOptions_field = knobOptions[field]) !== null && _knobOptions_field !== void 0 ? _knobOptions_field : [];
+        var serialized = values.map(function (value) {
+          return value;
+        });
+        var labels = Object.fromEntries(serialized.map(function (v) {
+          return [v, v.replace("$", "")];
+        }));
+        generatedGlobalTypes[stateKey] = {
+          name: `${toTitleCase(state)} ${toTitleCase(field)}`,
+          description: `${state} override for ${field}`,
+          options: serialized,
+          control: {
+            type: "select",
+            labels
+          },
+          defaultValue: ""
+        };
+      }
+    } catch (err) {
+      _didIteratorError1 = true;
+      _iteratorError1 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+          _iterator1.return();
+        }
+      } finally {
+        if (_didIteratorError1) {
+          throw _iteratorError1;
+        }
+      }
+    }
+  }
+  var themeColorNames = ["", ...themeConfig.themeColors];
+  var themeSwatches = {};
+  var allThemes = themeConfig.tamagui.themes;
+  if (allThemes) {
+    var _iteratorNormalCompletion2 = true,
+      _didIteratorError2 = false,
+      _iteratorError2 = void 0;
+    try {
+      for (var _iterator2 = themeConfig.themeColors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+        var name = _step2.value;
+        var _allThemes_;
+        var theme = (_allThemes_ = allThemes[`light_${name}`]) !== null && _allThemes_ !== void 0 ? _allThemes_ : allThemes[name];
+        if (!theme) continue;
+        var token = theme.color7;
+        if (typeof token === "string") {
+          themeSwatches[name] = token;
+        } else if (token && (typeof token === "undefined" ? "undefined" : _type_of(token)) === "object" && "val" in token) {
+          themeSwatches[name] = String(token.val);
+        }
+      }
+    } catch (err) {
+      _didIteratorError2 = true;
+      _iteratorError2 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+          _iterator2.return();
+        }
+      } finally {
+        if (_didIteratorError2) {
+          throw _iteratorError2;
+        }
+      }
+    }
+  }
+  generatedGlobalTypes.color = {
+    name: "Theme",
+    description: "Theme color palette",
+    options: themeColorNames,
+    control: {
+      type: "select",
+      labels: Object.fromEntries(themeColorNames.map(function (v) {
+        return [v, v || "(none)"];
+      }))
+    }
+  };
+  generatedGlobalTypes.scheme = {
+    name: "Scheme",
+    description: "Color scheme (light/dark/system)",
+    options: ["system", "light", "dark"],
+    control: {
+      type: "select"
+    }
+  };
+  generatedGlobalTypes.locale = {
+    name: "Locale",
+    description: "Controls internationalization language",
+    options: [...i18n.languages],
+    control: {
+      type: "select"
+    },
+    toolbar: {
+      title: "Locale",
+      items: [...i18n.languages],
+      dynamicTitle: true
+    }
+  };
+  var globalTypes = {
+    ...generatedGlobalTypes,
+    ...extraGlobalTypes
+  };
+  var initialGlobals = {
+    locale: import_platform.config.get("I18N_DEFAULT_LANGUAGE", i18n.defaultLanguage),
+    color: "",
+    scheme: "system",
+    // Publish registered preset names so the manager-side ThemePanel can
+    // render a preset selector without importing the theme package.
+    __presetNames: (0, import_theme.getPresetNames)(),
+    // Publish available theme color names so the ThemePanel can show only
+    // colors that actually have registered Tamagui sub-themes.
+    __themeColors: themeColorNames,
+    __themeSwatches: themeSwatches,
+    preset: (_themeConfig_defaultPreset = themeConfig.defaultPreset) !== null && _themeConfig_defaultPreset !== void 0 ? _themeConfig_defaultPreset : ""
+  };
+  var _iteratorNormalCompletion3 = true,
+    _didIteratorError3 = false,
+    _iteratorError3 = void 0;
+  try {
+    for (var _iterator3 = enumKeys[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+      var key1 = _step3.value;
+      if (!(key1 in initialGlobals)) {
+        initialGlobals[key1] = "";
+      }
+    }
+  } catch (err) {
+    _didIteratorError3 = true;
+    _iteratorError3 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+        _iterator3.return();
+      }
+    } finally {
+      if (_didIteratorError3) {
+        throw _iteratorError3;
+      }
+    }
+  }
+  for (var _i1 = 0, _iter1 = ["hover", "press", "focus", "focusVisible"]; _i1 < _iter1.length; _i1++) {
+    var state1 = _iter1[_i1];
+    var _iteratorNormalCompletion4 = true,
+      _didIteratorError4 = false,
+      _iteratorError4 = void 0;
+    try {
+      for (var _iterator4 = stateKnobFields[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+        var field1 = _step4.value;
+        initialGlobals[`${state1}.${field1}`] = "";
+      }
+    } catch (err) {
+      _didIteratorError4 = true;
+      _iteratorError4 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+          _iterator4.return();
+        }
+      } finally {
+        if (_didIteratorError4) {
+          throw _iteratorError4;
+        }
+      }
+    }
+  }
+  var defaultParameters = {
+    actions: {
+      argTypesRegex: "^on[A-Z].*"
+    },
+    layout: "padded",
+    viewMode: "story",
+    controls: {
+      expanded: true,
+      hideNoControlsWarning: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    // Disable the built-in backgrounds addon — the CanvasBackground component
+    // manages the preview background via the Tamagui $background token so it
+    // stays in sync with the active color scheme.
+    backgrounds: {
+      disable: true
+    },
+    previewTabs: {
+      "storybook/docs/panel": {
+        hidden: true
+      }
+    },
+    a11y: {
+      test: false
+    },
+    docs: {
+      codePanel: true
+    },
+    darkMode: {
+      stylePreview: true
+    }
+  };
+  function FrameworkDecoratorInner(param) {
+    var {
+      Story,
+      context
+    } = param;
+    var _context_parameters;
+    var [knobs, setKnobs] = (0, import_theme.useTheme)();
+    var schemeGlobal = context.globals.scheme || "system";
+    var [resolvedScheme, setResolvedScheme] = (0, import_react.useState)(function () {
+      if (schemeGlobal === "light" || schemeGlobal === "dark") return schemeGlobal;
+      if (typeof window !== "undefined" && window.matchMedia) {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      return "light";
+    });
+    (0, import_react.useEffect)(function () {
+      if (schemeGlobal === "light" || schemeGlobal === "dark") {
+        setResolvedScheme(schemeGlobal);
+        return;
+      }
+      if (typeof window === "undefined" || !window.matchMedia) {
+        setResolvedScheme("light");
+        return;
+      }
+      var mq = window.matchMedia("(prefers-color-scheme: dark)");
+      var handler = function handler2() {
+        return setResolvedScheme(mq.matches ? "dark" : "light");
+      };
+      handler();
+      mq.addEventListener("change", handler);
+      return function () {
+        return mq.removeEventListener("change", handler);
+      };
+    }, [schemeGlobal]);
+    var colorGlobal = context.globals.color || "";
+    var storyThemeParams = (_context_parameters = context.parameters) === null || _context_parameters === void 0 ? void 0 : _context_parameters.theme;
+    var activePresetName = context.globals.preset;
+    var activePreset = activePresetName ? (0, import_theme.getPreset)(activePresetName) : void 0;
+    var knobUpdate = (0, import_react.useMemo)(function () {
+      var result = {};
+      var stateKeys = /* @__PURE__ */new Set(["hover", "press", "focus", "focusVisible"]);
+      var _iteratorNormalCompletion5 = true,
+        _didIteratorError5 = false,
+        _iteratorError5 = void 0;
+      try {
+        for (var _iterator5 = Object.keys(knobs)[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
+          var key2 = _step5.value;
+          if (stateKeys.has(key2)) continue;
+          if (storyThemeParams && key2 in storyThemeParams) {
+            result[key2] = storyThemeParams[key2];
+          } else if (key2 in context.globals && context.globals[key2] !== void 0 && context.globals[key2] !== "") {
+            result[key2] = parseValue(context.globals[key2]);
+          } else if (activePreset && key2 in activePreset.knobs) {
+            result[key2] = activePreset.knobs[key2];
+          } else {
+            result[key2] = import_theme.defaultKnobs[key2];
+          }
+        }
+      } catch (err) {
+        _didIteratorError5 = true;
+        _iteratorError5 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion5 && _iterator5.return != null) {
+            _iterator5.return();
+          }
+        } finally {
+          if (_didIteratorError5) {
+            throw _iteratorError5;
+          }
+        }
+      }
+      var _iteratorNormalCompletion12 = true,
+        _didIteratorError12 = false,
+        _iteratorError12 = void 0;
+      try {
+        for (var _iterator12 = stateKeys[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = true) {
+          var state2 = _step12.value;
+          var stateObj = {};
+          var hasValues = false;
+          var _iteratorNormalCompletion22 = true,
+            _didIteratorError22 = false,
+            _iteratorError22 = void 0;
+          try {
+            for (var _iterator22 = stateKnobFields[Symbol.iterator](), _step22; !(_iteratorNormalCompletion22 = (_step22 = _iterator22.next()).done); _iteratorNormalCompletion22 = true) {
+              var field2 = _step22.value;
+              var globalKey = `${state2}.${field2}`;
+              var val = context.globals[globalKey];
+              if (val) {
+                stateObj[field2] = val;
+                hasValues = true;
+              }
+            }
+          } catch (err) {
+            _didIteratorError22 = true;
+            _iteratorError22 = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion22 && _iterator22.return != null) {
+                _iterator22.return();
+              }
+            } finally {
+              if (_didIteratorError22) {
+                throw _iteratorError22;
+              }
+            }
+          }
+          if (hasValues) {
+            result[state2] = stateObj;
+          }
+        }
+      } catch (err) {
+        _didIteratorError12 = true;
+        _iteratorError12 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion12 && _iterator12.return != null) {
+            _iterator12.return();
+          }
+        } finally {
+          if (_didIteratorError12) {
+            throw _iteratorError12;
+          }
+        }
+      }
+      return result;
+    }, [knobs, context.globals, storyThemeParams, activePreset]);
+    (0, import_react.useEffect)(function () {
+      setKnobs(knobUpdate);
+    }, [knobUpdate, setKnobs]);
+    (0, import_react.useEffect)(function () {
+      i18n.instance.changeLanguage(context.globals.locale);
+    }, [context.globals.locale]);
+    var presetCtxValue = (0, import_react.useMemo)(function () {
+      return {
+        preset: {
+          ...import_theme.defaultPreset,
+          theme: colorGlobal || import_theme.defaultPreset.theme,
+          knobs: {
+            ...import_theme.defaultKnobs,
+            ...knobUpdate
+          }
+        },
+        overrides: void 0
+      };
+    }, [knobUpdate, colorGlobal]);
+    var animationValue = presetCtxValue.preset.knobs.animation;
+    (0, import_react.useEffect)(function () {
+      var ms = animationValue === "none" ? "0ms" : animationValue === "quick" ? "100ms" : animationValue === "medium" ? "200ms" : animationValue === "slow" || animationValue === "lazy" ? "350ms" : animationValue === "bouncy" ? "300ms" : "200ms";
+      document.documentElement.style.setProperty("--mp-transition", ms);
+    }, [animationValue]);
+    var storyContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(CanvasBackground, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Story, {
+        ...context
+      })
+    });
+    var oppositeScheme = resolvedScheme === "dark" ? "light" : "dark";
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.PresetContext.Provider, {
+      value: presetCtxValue,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(AppProvider, {
+        themeConfig,
+        systemTheme: resolvedScheme,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimationNamesEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FrappeDebugEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(BaseThemeColorEmitter, {}), colorGlobal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+          name: colorGlobal,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemeColorEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+            event: accentColorsChannelEvent,
+            prefix: "accent"
+          }), storyContent]
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemeColorEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+            event: accentColorsChannelEvent,
+            prefix: "accent"
+          }), storyContent]
+        }), /* Opposite scheme emitters */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+          name: oppositeScheme,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(OppositeThemeColorEmitter, {}), colorGlobal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+            name: colorGlobal,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: baseOppositeChannelEvent
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: accentOppositeChannelEvent,
+              prefix: "accent"
+            })]
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: baseOppositeChannelEvent
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: accentOppositeChannelEvent,
+              prefix: "accent"
+            })]
+          })]
+        })]
+      })
+    });
+  }
+  var frameworkDecorator = function frameworkDecorator2(Story, context) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_cookie.CookiesProvider, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FrameworkDecoratorInner, {
+        Story,
+        context
+      })
+    });
+  };
+  return {
+    globalTypes,
+    initialGlobals,
+    parameters: {
+      ...defaultParameters,
+      ...extraParameters
+    },
+    decorators: [frameworkDecorator, ...extraDecorators]
+  };
+}
+//# sourceMappingURL=CreatePreview.native.js.map