@datalayer/jupyter-react 0.8.1 → 0.8.3

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) Datalayer Inc. All rights reserved.
+Copyright (c) 2021-2023 Datalayer, Inc.
 
 MIT License
 

package/README.md

@@ -12,6 +12,8 @@ The below image shows a gallery of the available React.js components ready to be
   <img alt="Jupyter React Gallery" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif" />
 </div>
 
+We host a Storybook on ✨ https://jupyter-ui-storybook.datalayer.tech that showcases various low-level as high-level React.js components useful to build a Data Product.
+
 The Jupyter(Lab) notebook is a tool that allows data scientist to analyse dataset. However, it is not easy to create a custom user interface integrated in an existing application. [Jupyter React](https://jupyter-react.datalayer.tech), an open-source library, fills that gap and provides components that a developer can easily integrate in any React.js application.
 
 In terms of technical stack, the Jupyter(Lab) user interface is built on top of Lumino, which is an imperative way to build user interface and **can not** be consumed by industry standard declarative frameworks like React.js. As a user interface developer, if you want to create a custom data product on top of Jupyter, you have to stick to Lumino and carry-on the full notebook interface not tailored to your specific needs. This is not what you want. You just want to expose what you need, you want to develop with your favorite toolkit (like React.js) and you also want to integrate on a per-component basis the Jupyter functionality in your application.
@@ -32,7 +34,7 @@ As a React.js developer, you just write a few lines of code get a live notebook
   <img alt="Jupyter React Slate" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-snippet.png" />
 </div>
 
-The typedoc documentation is [available online](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.7.3/index.html).
+The typedoc documentation is [available online](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.8.1/index.html).
 
 Jupyter React can be used in any React.js application. Install the latest `@datalayer/jupyter-react` npm package and get inspired by the [examples](https://github.com/datalayer/jupyter-ui/tree/main/examples) in this repository.
 

package/lib/app/App.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */

package/lib/app/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../../src/app/App.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;AAE5B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../../src/app/App.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}

package/lib/app/JupyterReact.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
@@ -25,7 +25,13 @@ const JupyterReact = (props) => {
             console.error(`Error while accessing the jupyter server jupyter_react extension.\n${reason}`);
         });
     });
-    return (_jsx(_Fragment, { children: _jsx(ThemeProvider, { children: _jsx(BaseStyles, { children: _jsxs(Box, { style: { maxWidth: 700 }, children: [_jsx(Box, { mb: 3, children: _jsxs(UnderlineNav, { "aria-label": "jupyter-react", children: [_jsx(UnderlineNav.Item, { "aria-current": "page", icon: RingedPlanetIcon, onSelect: e => { e.preventDefault(); setTab(1); }, children: "Components" }), _jsx(UnderlineNav.Item, { icon: ReactJsIcon, onSelect: e => { e.preventDefault(); setTab(2); }, children: "About" })] }) }), _jsxs(Box, { m: 3, children: [(tab === 1) && _jsx(ComponentsTab, { app: app }), (tab === 2) && _jsx(AboutTab, { version: version })] })] }) }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(ThemeProvider, { children: _jsx(BaseStyles, { children: _jsxs(Box, { style: { maxWidth: 700 }, children: [_jsx(Box, { mb: 3, children: _jsxs(UnderlineNav, { "aria-label": "jupyter-react", children: [_jsx(UnderlineNav.Item, { "aria-current": "page", icon: RingedPlanetIcon, onSelect: e => {
+                                            e.preventDefault();
+                                            setTab(1);
+                                        }, children: "Components" }), _jsx(UnderlineNav.Item, { icon: ReactJsIcon, onSelect: e => {
+                                            e.preventDefault();
+                                            setTab(2);
+                                        }, children: "About" })] }) }), _jsxs(Box, { m: 3, children: [tab === 1 && _jsx(ComponentsTab, { app: app }), tab === 2 && _jsx(AboutTab, { version: version })] })] }) }) }) }));
 };
 export default JupyterReact;
 //# sourceMappingURL=JupyterReact.js.map

package/lib/app/JupyterReact.js.map

@@ -1 +1 @@
-{"version":3,"file":"JupyterReact.js","sourceRoot":"","sources":["../../src/app/JupyterReact.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,YAAY,GAAG,CAAC,KAA2B,EAAe,EAAE;IAChE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IACtB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAM,gBAAgB,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC;aAC1E,IAAI,CAAC,IAAI,CAAC,EAAE;YACX,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,CAAC;aACD,KAAK,CAAC,MAAM,CAAC,EAAE;YACd,OAAO,CAAC,KAAK,CACX,sEAAsE,MAAM,EAAE,CAC/E,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,OAAO,CACL,4BACE,KAAC,aAAa,cACZ,KAAC,UAAU,cACT,MAAC,GAAG,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAC,aACzB,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,MAAC,YAAY,kBAAY,eAAe,aACtC,KAAC,YAAY,CAAC,IAAI,oBAAc,MAAM,EAAC,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,2BAE1F,EACpB,KAAC,YAAY,CAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,sBAEjE,IACP,GACX,EACN,MAAC,GAAG,IAAC,CAAC,EAAE,CAAC,aACN,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,GAAG,EACzC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,GAAG,IACzC,IACF,GACK,GACC,GACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"JupyterReact.js","sourceRoot":"","sources":["../../src/app/JupyterReact.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,YAAY,GAAG,CAAC,KAA2B,EAAe,EAAE;IAChE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IACtB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAM,gBAAgB,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC;aACxE,IAAI,CAAC,IAAI,CAAC,EAAE;YACX,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,CAAC;aACD,KAAK,CAAC,MAAM,CAAC,EAAE;YACd,OAAO,CAAC,KAAK,CACX,sEAAsE,MAAM,EAAE,CAC/E,CAAC;QACJ,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IACH,OAAO,CACL,4BACE,KAAC,aAAa,cACZ,KAAC,UAAU,cACT,MAAC,GAAG,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,aAC3B,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,MAAC,YAAY,kBAAY,eAAe,aACtC,KAAC,YAAY,CAAC,IAAI,oBACH,MAAM,EACnB,IAAI,EAAE,gBAAgB,EACtB,QAAQ,EAAE,CAAC,CAAC,EAAE;4CACZ,CAAC,CAAC,cAAc,EAAE,CAAC;4CACnB,MAAM,CAAC,CAAC,CAAC,CAAC;wCACZ,CAAC,2BAGiB,EACpB,KAAC,YAAY,CAAC,IAAI,IAChB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE;4CACZ,CAAC,CAAC,cAAc,EAAE,CAAC;4CACnB,MAAM,CAAC,CAAC,CAAC,CAAC;wCACZ,CAAC,sBAGiB,IACP,GACX,EACN,MAAC,GAAG,IAAC,CAAC,EAAE,CAAC,aACN,GAAG,KAAK,CAAC,IAAI,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,GAAI,EACxC,GAAG,KAAK,CAAC,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,GAAI,IACxC,IACF,GACK,GACC,GACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/app/tabs/AboutTab.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
@@ -10,10 +10,7 @@ import { ECharlesIcon } from '@datalayer/icons-react/eggs';
 const AboutTab = (props) => {
     const { version } = props;
     const [egg, setEgg] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Pagehead, { as: "h2", children: ["\uD83E\uDE90 \u269B\uFE0F Jupyter React", _jsx(Label, { sx: { marginLeft: 1 }, children: version })] }), _jsx(Box, { children: _jsx(Text, { children: "React.js components \uD83D\uDCAF% compatible with Jupyter." }) }), _jsx(Box, { mt: 3, style: { width: 350 }, children: !egg ?
-                    _jsx("img", { src: "https://assets.datalayer.tech/releases/datalayer-0.3.0-black-snake_1024.png", onClick: e => setEgg(true) })
-                    :
-                        _jsx(ECharlesIcon, { size: 300, onClick: e => setEgg(false) }) }), _jsx(Box, { children: _jsx(Link, { href: "https://datalayer.tech/docs/releases/0.3.0-black-snake", target: "_blank", children: _jsx(Text, { as: "h4", children: "Datalayer 0.3.0 Black Snake Release" }) }) }), _jsx(Box, { children: _jsx(Link, { href: "https://github.com/datalayer/jupyter-ui/tree/main/packages/react", target: "_blank", children: _jsx(Text, { as: "h4", children: "Source code" }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Pagehead, { as: "h2", children: ["\uD83E\uDE90 \u269B\uFE0F Jupyter React", _jsx(Label, { sx: { marginLeft: 1 }, children: version })] }), _jsx(Box, { children: _jsx(Text, { children: "React.js components \uD83D\uDCAF% compatible with \uD83E\uDE90 Jupyter." }) }), _jsx(Box, { mt: 3, style: { width: 350 }, children: !egg ? (_jsx("img", { src: "https://assets.datalayer.tech/releases/datalayer-0.3.0-black-snake_1024.png", onClick: e => setEgg(true) })) : (_jsx(ECharlesIcon, { size: 300, onClick: e => setEgg(false) })) }), _jsx(Box, { children: _jsx(Link, { href: "https://datalayer.tech/docs/releases/0.3.0-black-snake", target: "_blank", children: _jsx(Text, { as: "h4", children: "Datalayer 0.3.0 Black Snake Release" }) }) }), _jsx(Box, { children: _jsx(Link, { href: "https://github.com/datalayer/jupyter-ui/tree/main/packages/react", target: "_blank", children: _jsx(Text, { as: "h4", children: "Source code" }) }) })] }));
 };
 export default AboutTab;
 //# sourceMappingURL=AboutTab.js.map

package/lib/app/tabs/AboutTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"AboutTab.js","sourceRoot":"","sources":["../../../src/app/tabs/AboutTab.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAM3D,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAe,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,8BACE,MAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,wDAAoB,KAAC,KAAK,IAAC,EAAE,EAAE,EAAC,UAAU,EAAE,CAAC,EAAC,YAAG,OAAO,GAAS,IAAW,EAC7F,KAAC,GAAG,cACF,KAAC,IAAI,6EAAwD,GACzD,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,EAAC,YAC5B,CAAC,GAAG,CAAC,CAAC;oBACL,cAAK,GAAG,EAAC,6EAA6E,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG;oBAClH,CAAC;wBACH,KAAC,YAAY,IAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAErD,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IAAC,IAAI,EAAC,wDAAwD,EAAC,MAAM,EAAC,QAAQ,YACjF,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,oDAA2C,GACnD,GACH,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IAAC,IAAI,EAAC,kEAAkE,EAAC,MAAM,EAAC,QAAQ,YAC3F,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,4BAAmB,GAC3B,GACH,IACL,CACJ,CAAC;AACJ,CAAC,CAAA;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AboutTab.js","sourceRoot":"","sources":["../../../src/app/tabs/AboutTab.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAM3D,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAe,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,8BACE,MAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,wDACI,KAAC,KAAK,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,YAAG,OAAO,GAAS,IACzD,EACX,KAAC,GAAG,cACF,KAAC,IAAI,0FAA2D,GAC5D,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YAC9B,CAAC,GAAG,CAAC,CAAC,CAAC,CACN,cACE,GAAG,EAAC,6EAA6E,EACjF,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAC1B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,CACzD,GACG,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IACH,IAAI,EAAC,wDAAwD,EAC7D,MAAM,EAAC,QAAQ,YAEf,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,oDAA2C,GACnD,GACH,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IACH,IAAI,EAAC,kEAAkE,EACvE,MAAM,EAAC,QAAQ,YAEf,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,4BAAmB,GAC3B,GACH,IACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/app/tabs/ComponentsTab.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
@@ -16,9 +16,9 @@ const MainTab = (props) => {
     const [nav, setNav] = useState(1);
     return (_jsx(_Fragment, { children: _jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(Box, { children: _jsxs(NavList, { sx: {
                             '> *': {
-                                paddingTop: '0px'
-                            }
-                        }, children: [_jsx(NavList.Item, { "aria-current": nav === 1 ? 'page' : undefined, onClick: e => setNav(1), children: "File Browser" }), _jsx(NavList.Item, { "aria-current": nav === 2 ? 'page' : undefined, onClick: e => setNav(2), children: "Cell" }), _jsx(NavList.Item, { "aria-current": nav === 3 ? 'page' : undefined, onClick: e => setNav(3), children: "Notebook" }), _jsx(NavList.Item, { "aria-current": nav === 4 ? 'page' : undefined, onClick: e => setNav(4), children: "IPyWidgets" }), _jsx(NavList.Item, { "aria-current": nav === 5 ? 'page' : undefined, onClick: e => setNav(5), children: "Viewer" })] }) }), _jsx(Box, { ml: 3, sx: { width: '100%' }, children: _jsxs(Jupyter, { startDefaultKernel: false, children: [(nav === 1) && _jsx(FileBrowserComponent, {}), (nav === 2) && _jsx(CellComponent, {}), (nav === 3) && _jsx(NotebookComponent, {}), (nav === 4) && _jsx(IPyWidgetsComponent, {}), (nav === 5) && _jsx(ViewerComponent, {})] }) })] }) }));
+                                paddingTop: '0px',
+                            },
+                        }, children: [_jsx(NavList.Item, { "aria-current": nav === 1 ? 'page' : undefined, onClick: e => setNav(1), children: "File Browser" }), _jsx(NavList.Item, { "aria-current": nav === 2 ? 'page' : undefined, onClick: e => setNav(2), children: "Cell" }), _jsx(NavList.Item, { "aria-current": nav === 3 ? 'page' : undefined, onClick: e => setNav(3), children: "Notebook" }), _jsx(NavList.Item, { "aria-current": nav === 4 ? 'page' : undefined, onClick: e => setNav(4), children: "IPyWidgets" }), _jsx(NavList.Item, { "aria-current": nav === 5 ? 'page' : undefined, onClick: e => setNav(5), children: "Viewer" })] }) }), _jsx(Box, { ml: 3, sx: { width: '100%' }, children: _jsxs(Jupyter, { startDefaultKernel: false, children: [nav === 1 && _jsx(FileBrowserComponent, {}), nav === 2 && _jsx(CellComponent, {}), nav === 3 && _jsx(NotebookComponent, {}), nav === 4 && _jsx(IPyWidgetsComponent, {}), nav === 5 && _jsx(ViewerComponent, {})] }) })] }) }));
 };
 export default MainTab;
 //# sourceMappingURL=ComponentsTab.js.map

package/lib/app/tabs/ComponentsTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentsTab.js","sourceRoot":"","sources":["../../../src/app/tabs/ComponentsTab.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,OAAO,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC9C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,aACxB,KAAC,GAAG,cACF,MAAC,OAAO,IAAC,EAAE,EAAE;4BACX,KAAK,EAAE;gCACL,UAAU,EAAE,KAAK;6BAClB;yBACF,aACC,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,6BAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,qBAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,yBAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,2BAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,uBAEpE,IACP,GACN,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAC,YAC9B,MAAC,OAAO,IAAC,kBAAkB,EAAE,KAAK,aAC/B,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,oBAAoB,KAAE,EACtC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,aAAa,KAAE,EAC/B,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,iBAAiB,KAAE,EACnC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,mBAAmB,KAAE,EACrC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,eAAe,KAAE,IAC1B,GACN,IACF,GACL,CACJ,CAAC;AACJ,CAAC,CAAA;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"ComponentsTab.js","sourceRoot":"","sources":["../../../src/app/tabs/ComponentsTab.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,OAAO,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC9C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAC1B,KAAC,GAAG,cACF,MAAC,OAAO,IACN,EAAE,EAAE;4BACF,KAAK,EAAE;gCACL,UAAU,EAAE,KAAK;6BAClB;yBACF,aAED,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,6BAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,qBAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,yBAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,2BAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,uBAGV,IACP,GACN,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAC/B,MAAC,OAAO,IAAC,kBAAkB,EAAE,KAAK,aAC/B,GAAG,KAAK,CAAC,IAAI,KAAC,oBAAoB,KAAG,EACrC,GAAG,KAAK,CAAC,IAAI,KAAC,aAAa,KAAG,EAC9B,GAAG,KAAK,CAAC,IAAI,KAAC,iBAAiB,KAAG,EAClC,GAAG,KAAK,CAAC,IAAI,KAAC,mBAAmB,KAAG,EACpC,GAAG,KAAK,CAAC,IAAI,KAAC,eAAe,KAAG,IACzB,GACN,IACF,GACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/app/tabs/components/CellComponent.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */

package/lib/app/tabs/components/CellComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/CellComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,oDAAoD;AAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,OAAO,CACL,mBAIG,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CellComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/CellComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,oDAAoD;AAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,OAAO,CACL,mBAEQ,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/app/tabs/components/FileBrowserComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */

package/lib/app/tabs/components/FileBrowserComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileBrowserComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/FileBrowserComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE1E,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,OAAO,CACL,4BACE,KAAC,WAAW,KAAE,GACb,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"FileBrowserComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/FileBrowserComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE1E,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,OAAO,CACL,4BACE,KAAC,WAAW,KAAG,GACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/app/tabs/components/IPyWidgetsComponent.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
 import OutputIPyWidgets from '../../../components/output/OutputIPyWidgets';
-import { view, state } from './../../../examples/notebooks/OutputIPyWidgetsExample';
+import { view, state, } from './../../../examples/notebooks/OutputIPyWidgetsExample';
 const IPyWidgetsComponent = () => {
     return (_jsx(_Fragment, { children: _jsx(OutputIPyWidgets, { view: view, state: state }) }));
 };

package/lib/app/tabs/components/IPyWidgetsComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"IPyWidgetsComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/IPyWidgetsComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,uDAAuD,CAAC;AAEpF,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,4BACE,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,GAC5C,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"IPyWidgetsComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/IPyWidgetsComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EACL,IAAI,EACJ,KAAK,GACN,MAAM,uDAAuD,CAAC;AAE/D,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,4BACE,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,GAC7C,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/app/tabs/components/NotebookComponent.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */

package/lib/app/tabs/components/NotebookComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/NotebookComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,gEAAgE;AAChE,yFAAyF;AAEzF,qFAAqF;AAErF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,mBAeG,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NotebookComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/NotebookComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,gEAAgE;AAChE,yFAAyF;AAEzF,qFAAqF;AAErF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,mBAeG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/app/tabs/components/ViewerComponent.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
 import Viewer from '../../../components/viewer/Viewer';
-import nbformat from "../../..//examples/notebooks/IPyWidgetsExample1.ipynb.json";
+import nbformat from '../../..//examples/notebooks/IPyWidgetsExample.ipynb.json';
 const ViewerComponent = () => {
     return (_jsx(_Fragment, { children: _jsx(Viewer, { nbformat: nbformat, outputs: true }) }));
 };

package/lib/app/tabs/components/ViewerComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewerComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/ViewerComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,QAAQ,MAAM,4DAA4D,CAAC;AAElF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,4BACE,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAG,GAC3C,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ViewerComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/ViewerComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,QAAQ,MAAM,2DAA2D,CAAC;AAEjF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,4BACE,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAI,GAC5C,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/button/Button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from '@primer/react';
+import type { FC } from 'react';
+/**
+ * Primer button tuned to fit JupyterLab dialog button
+ */
+export declare const Button: FC<ButtonProps>;
+export default Button;

package/lib/components/button/Button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+import { Button as BaseButton } from '@primer/react';
+/**
+ * Primer button tuned to fit JupyterLab dialog button
+ */
+export const Button = props => {
+    const sx = {};
+    switch (props.variant) {
+        case 'danger':
+            sx.backgroundColor = 'var(--jp-error-color1)';
+            sx.color = 'btn.primary.text';
+            sx.borderWidth = 0;
+            break;
+        case 'primary':
+            sx.borderWidth = 0;
+            break;
+        case 'invisible':
+            break;
+        default:
+            sx.backgroundColor = 'var(--jp-reject-color-normal)';
+            sx.color = 'btn.primary.text';
+            sx.borderWidth = 0;
+            // @ts-expect-error unknow index
+            sx[':active:not([disabled]):not([data-inactive])'] = {
+                backgroundColor: 'var(--jp-reject-color-active)',
+                color: 'btn.primary.text',
+            };
+            // @ts-expect-error unknow index
+            sx[':hover:not([disabled]):not([data-inactive])'] = {
+                backgroundColor: 'var(--jp-reject-color-hover)',
+                color: 'btn.primary.text',
+            };
+            break;
+    }
+    return _jsx(BaseButton, { sx: sx, ...props });
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/lib/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,IAAI,UAAU,EAAe,MAAM,eAAe,CAAC;AAIlE;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,KAAK,CAAC,EAAE;IAC7C,MAAM,EAAE,GAAwB,EAAE,CAAC;IACnC,QAAQ,KAAK,CAAC,OAAO,EAAE;QACrB,KAAK,QAAQ;YACX,EAAE,CAAC,eAAe,GAAG,wBAAwB,CAAC;YAC9C,EAAE,CAAC,KAAK,GAAG,kBAAkB,CAAC;YAC9B,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;YACnB,MAAM;QACR,KAAK,SAAS;YACZ,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;YACnB,MAAM;QACR,KAAK,WAAW;YACd,MAAM;QACR;YACE,EAAE,CAAC,eAAe,GAAG,+BAA+B,CAAC;YACrD,EAAE,CAAC,KAAK,GAAG,kBAAkB,CAAC;YAC9B,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;YACnB,gCAAgC;YAChC,EAAE,CAAC,8CAA8C,CAAC,GAAG;gBACnD,eAAe,EAAE,+BAA+B;gBAChD,KAAK,EAAE,kBAAkB;aAC1B,CAAC;YACF,gCAAgC;YAChC,EAAE,CAAC,6CAA6C,CAAC,GAAG;gBAClD,eAAe,EAAE,8BAA8B;gBAC/C,KAAK,EAAE,kBAAkB;aAC1B,CAAC;YACF,MAAM;KACT;IACD,OAAO,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,KAAM,KAAK,GAAI,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/cell/Cell.js

@@ -1,21 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /*
- * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
 import { useState, useEffect, useMemo } from 'react';
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux';
 import { CodeCell } from '@jupyterlab/cells';
-import { Box } from "@primer/react";
+import { Box } from '@primer/react';
 import { cellActions, cellReducer } from './CellRedux';
 import CellAdapter from './CellAdapter';
 import Lumino from '../../jupyter/lumino/Lumino';
 import { useJupyter } from './../../jupyter/JupyterContext';
+/*
 const DEFAULT_SOURCE = `from IPython.display import display
 
 for i in range(10):
     display('String {} added to the DOM in separated DIV.'.format(i))`;
+
+const DEFAULT_SOURCE = `from ipywidgets import IntSlider
+IntSlider()`;
+*/
+const DEFAULT_SOURCE = `import ipyreact
+class ConfettiWidget(ipyreact.ReactWidget):
+  _esm = """
+    import confetti from "canvas-confetti";
+    import * as React from "react";
+    export default function({value, set_value, debug}) {
+        return (
+        <>
+          <h1>Happy New Year 2024 🎉 from Datalayer</h1>
+          <button onClick={() => confetti() && set_value(value + 1)}>
+            CLICK here for some CONFETTIS
+          </button>
+          <h2>You have {value || 0} wishe{ (value > 1) && 's' } so far...</h2>
+          <quote>Powered by 🪐 Jupyter UI</quote>
+        </>
+      )
+    };"""
+ConfettiWidget()`;
 export const Cell = (props) => {
     const { source, autoStart } = props;
     const { serverSettings, injectableStore, defaultKernel } = useJupyter();
@@ -54,36 +77,32 @@ export const Cell = (props) => {
             });
         }
     }, [source, defaultKernel]);
-    return adapter
-        ?
-            _jsx(Box, { sx: {
-                    '& .dla-Jupyter-Cell': {
-                        position: 'relative !important',
-                        contain: 'content !important',
-                    },
-                    '& .jp-Toolbar': {
-                        height: 'auto !important',
-                        position: 'relative',
-                    },
-                    '& .lm-BoxPanel': {
-                        position: 'relative',
-                    },
-                    '& .jp-Cell': {
-                        position: 'relative',
-                    },
-                    '& .jp-CodeCell': {
-                        height: 'auto !important',
-                        position: 'relative',
-                    },
-                    '& .jp-Cell-outputArea': {
-                        paddingBottom: '30px',
-                    },
-                    '& .jp-CodeMirrorEditor': {
-                        cursor: 'text !important',
-                    },
-                }, children: _jsx(Lumino, { children: adapter.panel }) })
-        :
-            _jsx(Box, { children: "Loading Jupyter Cell..." });
+    return adapter ? (_jsx(Box, { sx: {
+            '& .dla-Jupyter-Cell': {
+                position: 'relative !important',
+                contain: 'content !important',
+            },
+            '& .jp-Toolbar': {
+                height: 'auto !important',
+                position: 'relative',
+            },
+            '& .lm-BoxPanel': {
+                position: 'relative',
+            },
+            '& .jp-Cell': {
+                position: 'relative',
+            },
+            '& .jp-CodeCell': {
+                height: 'auto !important',
+                position: 'relative',
+            },
+            '& .jp-Cell-outputArea': {
+                paddingBottom: '30px',
+            },
+            '& .jp-CodeMirrorEditor': {
+                cursor: 'text !important',
+            },
+        }, children: _jsx(Lumino, { children: adapter.panel }) })) : (_jsx(Box, { children: "Loading Jupyter Cell..." }));
 };
 Cell.defaultProps = {
     source: DEFAULT_SOURCE,

package/lib/components/cell/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/cell/Cell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/cell/Cell.tsx"],"names":[],"mappings":"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"}

package/lib/components/cell/CellAdapter.d.ts

@@ -9,6 +9,7 @@ export declare class CellAdapter {
     private _panel;
     private _sessionContext;
     constructor(options: CellAdapter.ICellAdapterOptions);
+    private setupCell;
     get panel(): BoxPanel;
     get codeCell(): CodeCell;
     get sessionContext(): SessionContext;