@hanzogui/demos 2.0.0

package/dist/cjs/ThemeBuilderDemo.cjs

@@ -0,0 +1,178 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ThemeBuilderDemo_exports = {};
+__export(ThemeBuilderDemo_exports, {
+  ThemeBuilderDemo: () => ThemeBuilderDemo
+});
+module.exports = __toCommonJS(ThemeBuilderDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ThemeBuilderDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    fullscreen: !0,
+    overflow: "hidden",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      maxH: 200,
+      y: -100,
+      x: -50,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        y: 35,
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        y: 35,
+        bg: "$color9"
+      })]
+    })
+  });
+}
+function Col(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    p: "$2.5",
+    gap: "$3.5",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "blue" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "purple" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "pink" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "red" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    })]
+  });
+}

package/dist/cjs/ThemeBuilderDemo.native.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ThemeBuilderDemo_exports = {};
+__export(ThemeBuilderDemo_exports, {
+  ThemeBuilderDemo: () => ThemeBuilderDemo
+});
+module.exports = __toCommonJS(ThemeBuilderDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function ThemeBuilderDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    fullscreen: !0,
+    overflow: "hidden",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      maxH: 200,
+      y: -100,
+      x: -50,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        y: 35,
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        y: 35,
+        bg: "$color9"
+      })]
+    })
+  });
+}
+function Col(props) {
+  var subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    p: "$2.5",
+    gap: "$3.5",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "blue" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "purple" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "pink" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "red" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    })]
+  });
+}
+//# sourceMappingURL=ThemeBuilderDemo.native.js.map

package/dist/cjs/ThemeBuilderDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ThemeBuilderDemo_exports","__export","ThemeBuilderDemo","module","exports","import_jsx_runtime","require","import_gui","jsx","YStack","fullscreen","overflow","children","jsxs","XStack","maxH","y","x","rotate","Col","bg","size","props","subTheme","p","gap","Square","rounded","theme"],"sources":["../../src/ThemeBuilderDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/ThemeInverseDemo.cjs

@@ -0,0 +1,99 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ThemeInverseDemo_exports = {};
+__export(ThemeInverseDemo_exports, {
+  ThemeInverseDemo: () => ThemeInverseDemo
+});
+module.exports = __toCommonJS(ThemeInverseDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ThemeInverseDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    gap: "$4",
+    flexWrap: "wrap",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      elevation: "$4",
+      bg: "$background",
+      p: "$4",
+      rounded: "$4",
+      gap: "$3",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+        children: "Base Theme"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        children: "Normal"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        theme: "accent",
+        children: "Accent"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+      name: "red",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Red Theme"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Normal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+      name: "blue",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Blue Theme"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Normal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+      name: "green",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Green Theme"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Normal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    })]
+  });
+}

package/dist/cjs/ThemeInverseDemo.native.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ThemeInverseDemo_exports = {};
+__export(ThemeInverseDemo_exports, {
+  ThemeInverseDemo: () => ThemeInverseDemo
+});
+module.exports = __toCommonJS(ThemeInverseDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function ThemeInverseDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    gap: "$4",
+    flexWrap: "wrap",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      elevation: "$4",
+      bg: "$background",
+      p: "$4",
+      rounded: "$4",
+      gap: "$3",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+        children: "Base Theme"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        children: "Normal"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        theme: "accent",
+        children: "Accent"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+      name: "red",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Red Theme"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Normal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+      name: "blue",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Blue Theme"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Normal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+      name: "green",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Green Theme"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Normal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    })]
+  });
+}
+//# sourceMappingURL=ThemeInverseDemo.native.js.map

package/dist/cjs/ThemeInverseDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ThemeInverseDemo_exports","__export","ThemeInverseDemo","module","exports","import_jsx_runtime","require","import_gui","jsxs","XStack","gap","flexWrap","children","YStack","elevation","bg","p","rounded","jsx","H5","Button","theme"],"sources":["../../src/ThemeInverseDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,wBAAA;AAAAC,QAAA,CAAAD,wBAAA;EAAAE,gBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAkDT,YAAA,CAAAK,wBAK5C;AAHC,IAAAK,kBAAS,GAAAC,OAAmB;EAAAC,UAAA,GAAAD,OAAA;AACjC,SACEJ,iBAAA;EACE,0BAAAG,kBAAA,CAAAG,IAAC,EAAAD,UAAA,CAAAE,MAAO;IACNC,GAAA;IAAcC,QACd;IAAcC,QACd,GAA6B,eAC/B,IAAAP,kBAAA,CAAAG,IAAA,EAAAD,UAAA,CAAAM,MAAA;MAEAC,SAAA;MAEIC,EAAA;MACAC,CAAA;MACAC,OAAA;MACFP,GACF;MAEAE,QAAA,GAEI,mBAAAP,kBAAA,CAAAa,GAAC,EAAAX,UAAA,CAAAY,EAAG;QACJP,QAAA;MACA,IAEJ,mBAAAP,kBAAA,CAAAa,GAAA,EAAAX,UAAA,CAAAa,MAAA;QAEAR,QAAA;MAEI,IACA,mBAAAP,kBAAA,CAAAa,GAAC,EAAAX,UAAA,CAAAa,MAAO;QACRC,KAAA;QAEJT,QAAA;MACF","ignoreList":[]}