@vitus-labs/coolgrid 1.2.2 → 1.2.3-alpha.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Vit Bokisch
+Copyright (c) 2023-present Vit Bokisch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,182 +1,227 @@
-<div align="center">
-  <a href="https://vitus-labs.com/docs/ui-system/coolgrid">
-    <img src="https://github.com/vitus-labs/ui-system/blob/master/packages/coolgrid/logo.png" alt="Coolgrid" height="150" />
-  </a>
-</div>
+# @vitus-labs/coolgrid
 
-Coolgrid is ultra flexible and extensible grid system for React based on styled-components and heavily inspired by Bootstrap Grid system.
+Responsive grid system for React and styled-components.
 
-## Documentation
+[![npm](https://img.shields.io/npm/v/@vitus-labs/coolgrid)](https://www.npmjs.com/package/@vitus-labs/coolgrid)
+[![license](https://img.shields.io/npm/l/@vitus-labs/coolgrid)](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)
 
-Documentation can be found [here](https://vitus-labs.github.io/coolgrid/).
+Bootstrap-inspired Container / Row / Col grid with context-cascading configuration. Define breakpoints, column count, gaps, and gutters at any level — children inherit automatically. Every value is responsive.
 
-# Getting Started
+## Features
 
-Coolgrid is ultra-flexible and extensible grid system for React
-based on styled-components and heavily inspired by
-Bootstrap Grid System.
+- **Familiar mental model** — Container, Row, Col just like Bootstrap
+- **Context cascading** — set columns, gaps, and gutters at Container level, inherited by all Rows and Cols
+- **Responsive values** — single value, mobile-first array, or breakpoint object on every prop
+- **Custom breakpoints** — name and size them however you want
+- **Custom column counts** — 12, 24, 5 — any number
+- **Custom components** — swap Container, Row, or Col underlying elements
+- **Default Bootstrap theme** — included and ready to use
 
-Coolgrid uses React and styled-components.
+## Installation
 
-## Motivation
+```bash
+npm install @vitus-labs/coolgrid @vitus-labs/core @vitus-labs/unistyle styled-components
+```
 
-There are several grid solutions but none of them have fit my
-needs so far. They were not enough extensible. With Coolgrid
-you can do basically whatever you want while writing less code
-and have fewer DOM elements in your application.
+## Quick Start
 
-### What are the advantages of using coolgrid?
+```tsx
+import { Container, Row, Col, Provider, theme } from '@vitus-labs/coolgrid'
 
-1. **fewer DOM elements** - each of the available components supports
-   the property component, which accepts any valid HTML tag. So
-   having a valid document structure might need fewer elements in
-   the DOM. Or you can pass any valid React component and do much
-   more!
+const App = () => (
+  <Provider theme={theme}>
+    <Container>
+      <Row>
+        <Col size={8}>Main content</Col>
+        <Col size={4}>Sidebar</Col>
+      </Row>
+    </Container>
+  </Provider>
+)
+```
 
-2. **Breakpoint keys** - there is no strict policy about it. Feel
-   free to define as many breakpoints as you like. And that's not
-   all. Feel free to name them the way you like. Do you prefer
-   Bootstrap like naming xs, sm, md, lg, and xl? Or do you rather
-   prefer more descriptive names like phone, tablet, desktop (or xsmall,
-   small, medium, large, xlarge)?
+## Components
 
-3. **Breakpoint values** - for defining the size of viewports,
-   you can use any value. Just a number, you can use pixels,
-   percentages, whatever you like. You should just know that
-   number automatically converts to em units calculated from
-   rootSize defined in theme (and fallbacks to the value of 16).
-   The same applies to pixels.
+### Container
 
-4. **Container width** - here applies the same rules as for
-   breakpoints. There is just one more requirement. The keys defined
-   for Container must be the same as the names of breakpoints.
+Outermost grid boundary. Sets max-width and provides configuration context to descendants.
 
-5. **Context** - Define behavior on Container or Row for all
-   Cols inside. Coolgrid uses context on the background so you can
-   change the whole grid by changing just one line property.
+```tsx
+<Container
+  columns={12}
+  gap={16}
+  gutter={24}
+  padding={16}
+>
+  <Row>...</Row>
+</Container>
+```
 
-6. **A configurable number of columns** - Bootstrap grid uses
-   by default 12 columns. Coolgrid is highly configurable, so
-   you can define as many columns as you like. Do you need 5 column
-   grid? No problem!
+| Prop | Type | Description |
+| ---- | ---- | ----------- |
+| columns | `number` | Number of grid columns (default: 12) |
+| gap | `number` | Space between columns |
+| gutter | `number` | Outer gutter (negative margin offset on Row) |
+| padding | `number` | Column inner padding |
+| width | `value \| function` | Override container max-width |
+| component | `ComponentType` | Custom root element |
+| css | `ExtendCss` | Extend container styling |
+| contentAlignX | `AlignX` | Horizontal alignment of columns |
 
-7. **Customizable gaps between columns** - Feel free to customize
-   the size of gaps for your grid. No gaps, normal gaps, whatever
-   your design needs.
+All configuration props cascade to Row and Col through context.
 
-8. **Customizable paddings inside Cols** - You can customize paddings as well.
+### Row
 
-## Installation
+Flex wrapper with column management. Inherits Container config and can override it.
 
-You can install ii with your preferred tool (`yarn` or `npm`).
+```tsx
+<Row
+  size={{ xs: 12, md: 6 }}
+  contentAlignX="center"
+>
+  <Col>Column 1</Col>
+  <Col>Column 2</Col>
+</Row>
+```
 
-```powershell
-# with yarn
-yarn add @vitus-labs/coolgrid
+Setting `size` on Row applies it to all Cols inside:
 
-# or with npm
-npm install @vitus-labs/coolgrid --save
+```tsx
+// All columns are 6 of 12
+<Row size={6}>
+  <Col>Half</Col>
+  <Col>Half</Col>
+</Row>
 ```
 
-## Dependencies
+| Prop | Type | Description |
+| ---- | ---- | ----------- |
+| size | `number` | Default column size for all Cols inside |
+| component | `ComponentType` | Custom row element |
+| css | `ExtendCss` | Extend row styling |
+| contentAlignX | `AlignX` | Override horizontal alignment |
 
-Coolgrid depends on the following packages which need to be installed as well.
+### Col
 
-| Package           | version |
-| ----------------- | ------- |
-| react             | >= 16.7 |
-| @vitus-labs/core  | >= 0.2  |
-| styled-components | >= 4.0  |
+Individual column. Width is calculated as a fraction of total columns.
 
-Styled-components are a peer dependency of `@vitus-labs/core`.
+```tsx
+// Fixed size
+<Col size={4}>1/3 width</Col>
 
-## ThemeProvider
+// Responsive size
+<Col size={{ xs: 12, sm: 6, lg: 4 }}>
+  Full on mobile, half on small, third on large
+</Col>
 
-Don't forget to add coolgrid theme config into your `ThemeProvider`.
+// Hidden on mobile
+<Col size={{ xs: 0, md: 6 }}>Hidden on xs</Col>
+```
 
-```jsx
-import { ThemeProvider } from 'styled-components'
-import { theme } from 'coolgrid'
-// you can import default bootstrap theme settings or create yours.
-;<ThemeProvider
-  theme={{
-    ...theme
-    /* ...your theme */
-  }}
->
-  {/* ...your components */}
-</ThemeProvider>
+| Prop | Type | Description |
+| ---- | ---- | ----------- |
+| size | `number` | Column span (e.g. 4 of 12) |
+| padding | `number` | Override column inner padding |
+| component | `ComponentType` | Custom column element |
+| css | `ExtendCss` | Extend column styling |
+
+## Configuration
+
+### Custom Breakpoints
+
+```tsx
+<Provider theme={{
+  rootSize: 16,
+  breakpoints: {
+    phone: 0,
+    tablet: 600,
+    desktop: 1024,
+    wide: 1440,
+  },
+}}>
 ```
 
-Alternatively you can put it directly to the root of theme object:
+### Custom Column Count
+
+```tsx
+<Container columns={24}>
+  <Row>
+    <Col size={16}>Two thirds</Col>
+    <Col size={8}>One third</Col>
+  </Row>
+</Container>
+```
 
-```jsx
-// you can import default bootstrap theme settings or create yours.
+### Custom Container Widths
 
-<ThemeProvider
-  theme={{
-    // default bootstrap configuration example
-    rootSize: 16, // is being used to convert viewport px to em units
+```tsx
+<Provider theme={{
+  rootSize: 16,
+  breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
+  grid: {
     columns: 12,
-    breakpoints: {
-      xs: 0,
-      sm: 576,
-      md: 768,
-      lg: 992,
-      xl: 1200
+    container: {
+      xs: '100%',
+      sm: 540,
+      md: 720,
+      lg: 960,
+      xl: 1140,
     },
-    grid: {
-      container: {
-        xs: '100%',
-        sm: 540,
-        md: 720,
-        lg: 960,
-        xl: 1140
-      }
-    }
-    /* ...your theme */
-  }}
->
-  {/* ...your components */}
-</ThemeProvider>
+  },
+}}>
 ```
 
-## Code examples
-
-```jsx
-import React from 'react'
-import { Container, Row, Col } from 'coolgrid'
-
-const Element = () => (
-  <Container>
-    <Row>
-      <Col size={3}>Column 1</Col>
-      <Col size={{ xs: 12, sm: 6, md: 3 }}>Column 2</Col>
-      <Col size={{ xs: 9, md: 3 }}>Column 3</Col>
-      <Col size={3}>Column 4</Col>
-    </Row>
-  </Container>
-)
+### Context Cascading
+
+Configuration flows from Container through Row to Col via React context:
+
+```text
+Container (columns: 12, gap: 16)
+  └─ Row (inherits columns, gap)
+       └─ Col (inherits columns, gap, calculates width)
 ```
 
-You can define Col properties in Container or Row component.
-It uses context in the background. It means you can even
-write less code.
-
-```jsx
-import React from 'react'
-import { Container, Row, Col } from 'coolgrid'
-
-const Element = () => (
-  <Container>
-    <Row size={{ xs: 12, sm: 6, md: 3 }}>
-      <Col>Column 1</Col>
-      <Col>Column 2</Col>
-      <Col>Column 3</Col>
-      <Col>Column 4</Col>
-    </Row>
-  </Container>
-)
+Props set on a child override the inherited value for that level and below.
+
+## Default Theme
+
+The included `theme` export provides Bootstrap 4 defaults:
+
+```tsx
+{
+  rootSize: 16,
+  breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
+  grid: {
+    columns: 12,
+    container: { xs: '100%', sm: 540, md: 720, lg: 960, xl: 1140 },
+  },
+}
 ```
 
-It's cool, right? So, check out more examples and happy coding!
+## Responsive Values
+
+All numeric props support three formats:
+
+```tsx
+// Single value
+<Col size={6} />
+
+// Array (mobile-first, by breakpoint position)
+<Col size={[12, 6, 4]} />
+
+// Object (explicit breakpoints)
+<Col size={{ xs: 12, md: 6, lg: 4 }} />
+```
+
+## Peer Dependencies
+
+| Package | Version |
+| ------- | ------- |
+| react | >= 19 |
+| @vitus-labs/core | * |
+| @vitus-labs/unistyle | * |
+| styled-components | >= 6 |
+
+## License
+
+MIT

package/lib/analysis/index.js.html

@@ -149,9 +149,9 @@ main {
 var drawChart = (function (exports) {
     'use strict';
 
-    var n,l$1,u$2,i$1,r$1,o$1,e$1,f$2,c$2,s$1,a$2,h$1,p$1={},v$1=[],y$3=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,d$1=Array.isArray;function w$1(n,l){for(var u in l)n[u]=l[u];return n}function _(n){n&&n.parentNode&&n.parentNode.removeChild(n);}function g(l,u,t){var i,r,o,e={};for(o in u)"key"==o?i=u[o]:"ref"==o?r=u[o]:e[o]=u[o];if(arguments.length>2&&(e.children=arguments.length>3?n.call(arguments,2):t),"function"==typeof l&&null!=l.defaultProps)for(o in l.defaultProps)void 0===e[o]&&(e[o]=l.defaultProps[o]);return m$2(l,e,i,r,null)}function m$2(n,t,i,r,o){var e={type:n,props:t,key:i,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:null==o?++u$2:o,__i:-1,__u:0};return null==o&&null!=l$1.vnode&&l$1.vnode(e),e}function k$1(n){return n.children}function x$3(n,l){this.props=n,this.context=l;}function C$1(n,l){if(null==l)return n.__?C$1(n.__,n.__i+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?C$1(n):null}function S(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return S(n)}}function M(n){(!n.__d&&(n.__d=!0)&&i$1.push(n)&&!P.__r++||r$1!==l$1.debounceRendering)&&((r$1=l$1.debounceRendering)||o$1)(P);}function P(){var n,u,t,r,o,f,c,s;for(i$1.sort(e$1);n=i$1.shift();)n.__d&&(u=i$1.length,r=void 0,f=(o=(t=n).__v).__e,c=[],s=[],t.__P&&((r=w$1({},o)).__v=o.__v+1,l$1.vnode&&l$1.vnode(r),j$1(t.__P,r,o,t.__n,t.__P.namespaceURI,32&o.__u?[f]:null,c,null==f?C$1(o):f,!!(32&o.__u),s),r.__v=o.__v,r.__.__k[r.__i]=r,z$1(c,r,s),r.__e!=f&&S(r)),i$1.length>u&&i$1.sort(e$1));P.__r=0;}function $(n,l,u,t,i,r,o,e,f,c,s){var a,h,y,d,w,_,g=t&&t.__k||v$1,m=l.length;for(f=I(u,l,g,f,m),a=0;a<m;a++)null!=(y=u.__k[a])&&(h=-1===y.__i?p$1:g[y.__i]||p$1,y.__i=a,_=j$1(n,y,h,i,r,o,e,f,c,s),d=y.__e,y.ref&&h.ref!=y.ref&&(h.ref&&V(h.ref,null,y),s.push(y.ref,y.__c||d,y)),null==w&&null!=d&&(w=d),4&y.__u||h.__k===y.__k?f=A$1(y,f,n):"function"==typeof y.type&&void 0!==_?f=_:d&&(f=d.nextSibling),y.__u&=-7);return u.__e=w,f}function I(n,l,u,t,i){var r,o,e,f,c,s=u.length,a=s,h=0;for(n.__k=new Array(i),r=0;r<i;r++)null!=(o=l[r])&&"boolean"!=typeof o&&"function"!=typeof o?(f=r+h,(o=n.__k[r]="string"==typeof o||"number"==typeof o||"bigint"==typeof o||o.constructor==String?m$2(null,o,null,null,null):d$1(o)?m$2(k$1,{children:o},null,null,null):void 0===o.constructor&&o.__b>0?m$2(o.type,o.props,o.key,o.ref?o.ref:null,o.__v):o).__=n,o.__b=n.__b+1,e=null,-1!==(c=o.__i=L(o,u,f,a))&&(a--,(e=u[c])&&(e.__u|=2)),null==e||null===e.__v?(-1==c&&h--,"function"!=typeof o.type&&(o.__u|=4)):c!=f&&(c==f-1?h--:c==f+1?h++:(c>f?h--:h++,o.__u|=4))):n.__k[r]=null;if(a)for(r=0;r<s;r++)null!=(e=u[r])&&0==(2&e.__u)&&(e.__e==t&&(t=C$1(e)),q$1(e,e));return t}function A$1(n,l,u){var t,i;if("function"==typeof n.type){for(t=n.__k,i=0;t&&i<t.length;i++)t[i]&&(t[i].__=n,l=A$1(t[i],l,u));return l}n.__e!=l&&(l&&n.type&&!u.contains(l)&&(l=C$1(n)),u.insertBefore(n.__e,l||null),l=n.__e);do{l=l&&l.nextSibling;}while(null!=l&&8==l.nodeType);return l}function L(n,l,u,t){var i,r,o=n.key,e=n.type,f=l[u];if(null===f||f&&o==f.key&&e===f.type&&0==(2&f.__u))return u;if(t>(null!=f&&0==(2&f.__u)?1:0))for(i=u-1,r=u+1;i>=0||r<l.length;){if(i>=0){if((f=l[i])&&0==(2&f.__u)&&o==f.key&&e===f.type)return i;i--;}if(r<l.length){if((f=l[r])&&0==(2&f.__u)&&o==f.key&&e===f.type)return r;r++;}}return -1}function T$1(n,l,u){"-"==l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||y$3.test(l)?u:u+"px";}function F(n,l,u,t,i){var r;n:if("style"==l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof t&&(n.style.cssText=t=""),t)for(l in t)u&&l in u||T$1(n.style,l,"");if(u)for(l in u)t&&u[l]===t[l]||T$1(n.style,l,u[l]);}else if("o"==l[0]&&"n"==l[1])r=l!=(l=l.replace(f$2,"$1")),l=l.toLowerCase()in n||"onFocusOut"==l||"onFocusIn"==l?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+r]=u,u?t?u.u=t.u:(u.u=c$2,n.addEventListener(l,r?a$2:s$1,r)):n.removeEventListener(l,r?a$2:s$1,r);else {if("http://www.w3.org/2000/svg"==i)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=l&&"height"!=l&&"href"!=l&&"list"!=l&&"form"!=l&&"tabIndex"!=l&&"download"!=l&&"rowSpan"!=l&&"colSpan"!=l&&"role"!=l&&"popover"!=l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&"-"!=l[4]?n.removeAttribute(l):n.setAttribute(l,"popover"==l&&1==u?"":u));}}function O(n){return function(u){if(this.l){var t=this.l[u.type+n];if(null==u.t)u.t=c$2++;else if(u.t<t.u)return;return t(l$1.event?l$1.event(u):u)}}}function j$1(n,u,t,i,r,o,e,f,c,s){var a,h,p,v,y,g,m,b,C,S,M,P,I,A,H,L,T,F=u.type;if(void 0!==u.constructor)return null;128&t.__u&&(c=!!(32&t.__u),o=[f=u.__e=t.__e]),(a=l$1.__b)&&a(u);n:if("function"==typeof F)try{if(b=u.props,C="prototype"in F&&F.prototype.render,S=(a=F.contextType)&&i[a.__c],M=a?S?S.props.value:a.__:i,t.__c?m=(h=u.__c=t.__c).__=h.__E:(C?u.__c=h=new F(b,M):(u.__c=h=new x$3(b,M),h.constructor=F,h.render=B$1),S&&S.sub(h),h.props=b,h.state||(h.state={}),h.context=M,h.__n=i,p=h.__d=!0,h.__h=[],h._sb=[]),C&&null==h.__s&&(h.__s=h.state),C&&null!=F.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=w$1({},h.__s)),w$1(h.__s,F.getDerivedStateFromProps(b,h.__s))),v=h.props,y=h.state,h.__v=u,p)C&&null==F.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),C&&null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(C&&null==F.getDerivedStateFromProps&&b!==v&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(b,M),!h.__e&&(null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(b,h.__s,M)||u.__v==t.__v)){for(u.__v!=t.__v&&(h.props=b,h.state=h.__s,h.__d=!1),u.__e=t.__e,u.__k=t.__k,u.__k.some(function(n){n&&(n.__=u);}),P=0;P<h._sb.length;P++)h.__h.push(h._sb[P]);h._sb=[],h.__h.length&&e.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(b,h.__s,M),C&&null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(v,y,g);});}if(h.context=M,h.props=b,h.__P=n,h.__e=!1,I=l$1.__r,A=0,C){for(h.state=h.__s,h.__d=!1,I&&I(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,I&&I(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++A<25);h.state=h.__s,null!=h.getChildContext&&(i=w$1(w$1({},i),h.getChildContext())),C&&!p&&null!=h.getSnapshotBeforeUpdate&&(g=h.getSnapshotBeforeUpdate(v,y)),f=$(n,d$1(L=null!=a&&a.type===k$1&&null==a.key?a.props.children:a)?L:[L],u,t,i,r,o,e,f,c,s),h.base=u.__e,u.__u&=-161,h.__h.length&&e.push(h),m&&(h.__E=h.__=null);}catch(n){if(u.__v=null,c||null!=o)if(n.then){for(u.__u|=c?160:128;f&&8==f.nodeType&&f.nextSibling;)f=f.nextSibling;o[o.indexOf(f)]=null,u.__e=f;}else for(T=o.length;T--;)_(o[T]);else u.__e=t.__e,u.__k=t.__k;l$1.__e(n,u,t);}else null==o&&u.__v==t.__v?(u.__k=t.__k,u.__e=t.__e):f=u.__e=N(t.__e,u,t,i,r,o,e,c,s);return (a=l$1.diffed)&&a(u),128&u.__u?void 0:f}function z$1(n,u,t){for(var i=0;i<t.length;i++)V(t[i],t[++i],t[++i]);l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function N(u,t,i,r,o,e,f,c,s){var a,h,v,y,w,g,m,b=i.props,k=t.props,x=t.type;if("svg"==x?o="http://www.w3.org/2000/svg":"math"==x?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),null!=e)for(a=0;a<e.length;a++)if((w=e[a])&&"setAttribute"in w==!!x&&(x?w.localName==x:3==w.nodeType)){u=w,e[a]=null;break}if(null==u){if(null==x)return document.createTextNode(k);u=document.createElementNS(o,x,k.is&&k),c&&(l$1.__m&&l$1.__m(t,e),c=!1),e=null;}if(null===x)b===k||c&&u.data===k||(u.data=k);else {if(e=e&&n.call(u.childNodes),b=i.props||p$1,!c&&null!=e)for(b={},a=0;a<u.attributes.length;a++)b[(w=u.attributes[a]).name]=w.value;for(a in b)if(w=b[a],"children"==a);else if("dangerouslySetInnerHTML"==a)v=w;else if(!(a in k)){if("value"==a&&"defaultValue"in k||"checked"==a&&"defaultChecked"in k)continue;F(u,a,null,w,o);}for(a in k)w=k[a],"children"==a?y=w:"dangerouslySetInnerHTML"==a?h=w:"value"==a?g=w:"checked"==a?m=w:c&&"function"!=typeof w||b[a]===w||F(u,a,w,b[a],o);if(h)c||v&&(h.__html===v.__html||h.__html===u.innerHTML)||(u.innerHTML=h.__html),t.__k=[];else if(v&&(u.innerHTML=""),$(u,d$1(y)?y:[y],t,i,r,"foreignObject"==x?"http://www.w3.org/1999/xhtml":o,e,f,e?e[0]:i.__k&&C$1(i,0),c,s),null!=e)for(a=e.length;a--;)_(e[a]);c||(a="value","progress"==x&&null==g?u.removeAttribute("value"):void 0!==g&&(g!==u[a]||"progress"==x&&!g||"option"==x&&g!==b[a])&&F(u,a,g,b[a],o),a="checked",void 0!==m&&m!==u[a]&&F(u,a,m,b[a],o));}return u}function V(n,u,t){try{if("function"==typeof n){var i="function"==typeof n.__u;i&&n.__u(),i&&null==u||(n.__u=n(u));}else n.current=u;}catch(n){l$1.__e(n,t);}}function q$1(n,u,t){var i,r;if(l$1.unmount&&l$1.unmount(n),(i=n.ref)&&(i.current&&i.current!==n.__e||V(i,null,u)),null!=(i=n.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount();}catch(n){l$1.__e(n,u);}i.base=i.__P=null;}if(i=n.__k)for(r=0;r<i.length;r++)i[r]&&q$1(i[r],u,t||"function"!=typeof n.type);t||_(n.__e),n.__c=n.__=n.__e=void 0;}function B$1(n,l,u){return this.constructor(n,u)}function D$1(u,t,i){var r,o,e,f;t==document&&(t=document.documentElement),l$1.__&&l$1.__(u,t),o=(r="function"==typeof i)?null:t.__k,e=[],f=[],j$1(t,u=(t).__k=g(k$1,null,[u]),o||p$1,p$1,t.namespaceURI,o?null:t.firstChild?n.call(t.childNodes):null,e,o?o.__e:t.firstChild,r,f),z$1(e,u,f);}function J(n,l){var u={__c:l="__cC"+h$1++,__:n,Consumer:function(n,l){return n.children(l)},Provider:function(n){var u,t;return this.getChildContext||(u=new Set,(t={})[l]=this,this.getChildContext=function(){return t},this.componentWillUnmount=function(){u=null;},this.shouldComponentUpdate=function(n){this.props.value!==n.value&&u.forEach(function(n){n.__e=!0,M(n);});},this.sub=function(n){u.add(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){u&&u.delete(n),l&&l.call(n);};}),n.children}};return u.Provider.__=u.Consumer.contextType=u}n=v$1.slice,l$1={__e:function(n,l,u,t){for(var i,r,o;l=l.__;)if((i=l.__c)&&!i.__)try{if((r=i.constructor)&&null!=r.getDerivedStateFromError&&(i.setState(r.getDerivedStateFromError(n)),o=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(n,t||{}),o=i.__d),o)return i.__E=i}catch(l){n=l;}throw n}},u$2=0,x$3.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=w$1({},this.state),"function"==typeof n&&(n=n(w$1({},u),this.props)),n&&w$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),M(this));},x$3.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),M(this));},x$3.prototype.render=k$1,i$1=[],o$1="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,e$1=function(n,l){return n.__v.__b-l.__v.__b},P.__r=0,f$2=/(PointerCapture)$|Capture$/i,c$2=0,s$1=O(!1),a$2=O(!0),h$1=0;
+    var n,l$1,u$2,i$1,r$1,o$1,e$1,f$2,c$2,s$1,a$2,h$1,p$1={},v$1=[],y$3=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,w$1=Array.isArray;function d$1(n,l){for(var u in l)n[u]=l[u];return n}function g(n){n&&n.parentNode&&n.parentNode.removeChild(n);}function _(l,u,t){var i,r,o,e={};for(o in u)"key"==o?i=u[o]:"ref"==o?r=u[o]:e[o]=u[o];if(arguments.length>2&&(e.children=arguments.length>3?n.call(arguments,2):t),"function"==typeof l&&null!=l.defaultProps)for(o in l.defaultProps) void 0===e[o]&&(e[o]=l.defaultProps[o]);return m$2(l,e,i,r,null)}function m$2(n,t,i,r,o){var e={type:n,props:t,key:i,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:null==o?++u$2:o,__i:-1,__u:0};return null==o&&null!=l$1.vnode&&l$1.vnode(e),e}function k$1(n){return n.children}function x$3(n,l){this.props=n,this.context=l;}function S(n,l){if(null==l)return n.__?S(n.__,n.__i+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?S(n):null}function C$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return C$1(n)}}function M(n){(!n.__d&&(n.__d=true)&&i$1.push(n)&&!$.__r++||r$1!=l$1.debounceRendering)&&((r$1=l$1.debounceRendering)||o$1)($);}function $(){for(var n,u,t,r,o,f,c,s=1;i$1.length;)i$1.length>s&&i$1.sort(e$1),n=i$1.shift(),s=i$1.length,n.__d&&(t=void 0,o=(r=(u=n).__v).__e,f=[],c=[],u.__P&&((t=d$1({},r)).__v=r.__v+1,l$1.vnode&&l$1.vnode(t),O(u.__P,t,r,u.__n,u.__P.namespaceURI,32&r.__u?[o]:null,f,null==o?S(r):o,!!(32&r.__u),c),t.__v=r.__v,t.__.__k[t.__i]=t,z$1(f,t,c),t.__e!=o&&C$1(t)));$.__r=0;}function I(n,l,u,t,i,r,o,e,f,c,s){var a,h,y,w,d,g,_=t&&t.__k||v$1,m=l.length;for(f=P(u,l,_,f,m),a=0;a<m;a++)null!=(y=u.__k[a])&&(h=-1==y.__i?p$1:_[y.__i]||p$1,y.__i=a,g=O(n,y,h,i,r,o,e,f,c,s),w=y.__e,y.ref&&h.ref!=y.ref&&(h.ref&&q$1(h.ref,null,y),s.push(y.ref,y.__c||w,y)),null==d&&null!=w&&(d=w),4&y.__u||h.__k===y.__k?f=A$1(y,f,n):"function"==typeof y.type&&void 0!==g?f=g:w&&(f=w.nextSibling),y.__u&=-7);return u.__e=d,f}function P(n,l,u,t,i){var r,o,e,f,c,s=u.length,a=s,h=0;for(n.__k=new Array(i),r=0;r<i;r++)null!=(o=l[r])&&"boolean"!=typeof o&&"function"!=typeof o?(f=r+h,(o=n.__k[r]="string"==typeof o||"number"==typeof o||"bigint"==typeof o||o.constructor==String?m$2(null,o,null,null,null):w$1(o)?m$2(k$1,{children:o},null,null,null):null==o.constructor&&o.__b>0?m$2(o.type,o.props,o.key,o.ref?o.ref:null,o.__v):o).__=n,o.__b=n.__b+1,e=null,-1!=(c=o.__i=L(o,u,f,a))&&(a--,(e=u[c])&&(e.__u|=2)),null==e||null==e.__v?(-1==c&&(i>s?h--:i<s&&h++),"function"!=typeof o.type&&(o.__u|=4)):c!=f&&(c==f-1?h--:c==f+1?h++:(c>f?h--:h++,o.__u|=4))):n.__k[r]=null;if(a)for(r=0;r<s;r++)null!=(e=u[r])&&0==(2&e.__u)&&(e.__e==t&&(t=S(e)),B$1(e,e));return t}function A$1(n,l,u){var t,i;if("function"==typeof n.type){for(t=n.__k,i=0;t&&i<t.length;i++)t[i]&&(t[i].__=n,l=A$1(t[i],l,u));return l}n.__e!=l&&(l&&n.type&&!u.contains(l)&&(l=S(n)),u.insertBefore(n.__e,l||null),l=n.__e);do{l=l&&l.nextSibling;}while(null!=l&&8==l.nodeType);return l}function L(n,l,u,t){var i,r,o=n.key,e=n.type,f=l[u];if(null===f&&null==n.key||f&&o==f.key&&e==f.type&&0==(2&f.__u))return u;if(t>(null!=f&&0==(2&f.__u)?1:0))for(i=u-1,r=u+1;i>=0||r<l.length;){if(i>=0){if((f=l[i])&&0==(2&f.__u)&&o==f.key&&e==f.type)return i;i--;}if(r<l.length){if((f=l[r])&&0==(2&f.__u)&&o==f.key&&e==f.type)return r;r++;}}return  -1}function T$1(n,l,u){"-"==l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||y$3.test(l)?u:u+"px";}function j$1(n,l,u,t,i){var r,o;n:if("style"==l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof t&&(n.style.cssText=t=""),t)for(l in t)u&&l in u||T$1(n.style,l,"");if(u)for(l in u)t&&u[l]==t[l]||T$1(n.style,l,u[l]);}else if("o"==l[0]&&"n"==l[1])r=l!=(l=l.replace(f$2,"$1")),o=l.toLowerCase(),l=o in n||"onFocusOut"==l||"onFocusIn"==l?o.slice(2):l.slice(2),n.l||(n.l={}),n.l[l+r]=u,u?t?u.u=t.u:(u.u=c$2,n.addEventListener(l,r?a$2:s$1,r)):n.removeEventListener(l,r?a$2:s$1,r);else {if("http://www.w3.org/2000/svg"==i)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=l&&"height"!=l&&"href"!=l&&"list"!=l&&"form"!=l&&"tabIndex"!=l&&"download"!=l&&"rowSpan"!=l&&"colSpan"!=l&&"role"!=l&&"popover"!=l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||false===u&&"-"!=l[4]?n.removeAttribute(l):n.setAttribute(l,"popover"==l&&1==u?"":u));}}function F(n){return function(u){if(this.l){var t=this.l[u.type+n];if(null==u.t)u.t=c$2++;else if(u.t<t.u)return;return t(l$1.event?l$1.event(u):u)}}}function O(n,u,t,i,r,o,e,f,c,s){var a,h,p,v,y,_,m,b,S,C,M,$,P,A,H,L,T,j=u.type;if(null!=u.constructor)return null;128&t.__u&&(c=!!(32&t.__u),o=[f=u.__e=t.__e]),(a=l$1.__b)&&a(u);n:if("function"==typeof j)try{if(b=u.props,S="prototype"in j&&j.prototype.render,C=(a=j.contextType)&&i[a.__c],M=a?C?C.props.value:a.__:i,t.__c?m=(h=u.__c=t.__c).__=h.__E:(S?u.__c=h=new j(b,M):(u.__c=h=new x$3(b,M),h.constructor=j,h.render=D$1),C&&C.sub(h),h.props=b,h.state||(h.state={}),h.context=M,h.__n=i,p=h.__d=!0,h.__h=[],h._sb=[]),S&&null==h.__s&&(h.__s=h.state),S&&null!=j.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=d$1({},h.__s)),d$1(h.__s,j.getDerivedStateFromProps(b,h.__s))),v=h.props,y=h.state,h.__v=u,p)S&&null==j.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),S&&null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(S&&null==j.getDerivedStateFromProps&&b!==v&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(b,M),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(b,h.__s,M)||u.__v==t.__v){for(u.__v!=t.__v&&(h.props=b,h.state=h.__s,h.__d=!1),u.__e=t.__e,u.__k=t.__k,u.__k.some(function(n){n&&(n.__=u);}),$=0;$<h._sb.length;$++)h.__h.push(h._sb[$]);h._sb=[],h.__h.length&&e.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(b,h.__s,M),S&&null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(v,y,_);});}if(h.context=M,h.props=b,h.__P=n,h.__e=!1,P=l$1.__r,A=0,S){for(h.state=h.__s,h.__d=!1,P&&P(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,P&&P(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++A<25);h.state=h.__s,null!=h.getChildContext&&(i=d$1(d$1({},i),h.getChildContext())),S&&!p&&null!=h.getSnapshotBeforeUpdate&&(_=h.getSnapshotBeforeUpdate(v,y)),L=a,null!=a&&a.type===k$1&&null==a.key&&(L=N(a.props.children)),f=I(n,w$1(L)?L:[L],u,t,i,r,o,e,f,c,s),h.base=u.__e,u.__u&=-161,h.__h.length&&e.push(h),m&&(h.__E=h.__=null);}catch(n){if(u.__v=null,c||null!=o)if(n.then){for(u.__u|=c?160:128;f&&8==f.nodeType&&f.nextSibling;)f=f.nextSibling;o[o.indexOf(f)]=null,u.__e=f;}else for(T=o.length;T--;)g(o[T]);else u.__e=t.__e,u.__k=t.__k;l$1.__e(n,u,t);}else null==o&&u.__v==t.__v?(u.__k=t.__k,u.__e=t.__e):f=u.__e=V(t.__e,u,t,i,r,o,e,c,s);return (a=l$1.diffed)&&a(u),128&u.__u?void 0:f}function z$1(n,u,t){for(var i=0;i<t.length;i++)q$1(t[i],t[++i],t[++i]);l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function N(n){return "object"!=typeof n||null==n||n.__b&&n.__b>0?n:w$1(n)?n.map(N):d$1({},n)}function V(u,t,i,r,o,e,f,c,s){var a,h,v,y,d,_,m,b=i.props,k=t.props,x=t.type;if("svg"==x?o="http://www.w3.org/2000/svg":"math"==x?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),null!=e)for(a=0;a<e.length;a++)if((d=e[a])&&"setAttribute"in d==!!x&&(x?d.localName==x:3==d.nodeType)){u=d,e[a]=null;break}if(null==u){if(null==x)return document.createTextNode(k);u=document.createElementNS(o,x,k.is&&k),c&&(l$1.__m&&l$1.__m(t,e),c=false),e=null;}if(null==x)b===k||c&&u.data==k||(u.data=k);else {if(e=e&&n.call(u.childNodes),b=i.props||p$1,!c&&null!=e)for(b={},a=0;a<u.attributes.length;a++)b[(d=u.attributes[a]).name]=d.value;for(a in b)if(d=b[a],"children"==a);else if("dangerouslySetInnerHTML"==a)v=d;else if(!(a in k)){if("value"==a&&"defaultValue"in k||"checked"==a&&"defaultChecked"in k)continue;j$1(u,a,null,d,o);}for(a in k)d=k[a],"children"==a?y=d:"dangerouslySetInnerHTML"==a?h=d:"value"==a?_=d:"checked"==a?m=d:c&&"function"!=typeof d||b[a]===d||j$1(u,a,d,b[a],o);if(h)c||v&&(h.__html==v.__html||h.__html==u.innerHTML)||(u.innerHTML=h.__html),t.__k=[];else if(v&&(u.innerHTML=""),I("template"==t.type?u.content:u,w$1(y)?y:[y],t,i,r,"foreignObject"==x?"http://www.w3.org/1999/xhtml":o,e,f,e?e[0]:i.__k&&S(i,0),c,s),null!=e)for(a=e.length;a--;)g(e[a]);c||(a="value","progress"==x&&null==_?u.removeAttribute("value"):null!=_&&(_!==u[a]||"progress"==x&&!_||"option"==x&&_!=b[a])&&j$1(u,a,_,b[a],o),a="checked",null!=m&&m!=u[a]&&j$1(u,a,m,b[a],o));}return u}function q$1(n,u,t){try{if("function"==typeof n){var i="function"==typeof n.__u;i&&n.__u(),i&&null==u||(n.__u=n(u));}else n.current=u;}catch(n){l$1.__e(n,t);}}function B$1(n,u,t){var i,r;if(l$1.unmount&&l$1.unmount(n),(i=n.ref)&&(i.current&&i.current!=n.__e||q$1(i,null,u)),null!=(i=n.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount();}catch(n){l$1.__e(n,u);}i.base=i.__P=null;}if(i=n.__k)for(r=0;r<i.length;r++)i[r]&&B$1(i[r],u,t||"function"!=typeof n.type);t||g(n.__e),n.__c=n.__=n.__e=void 0;}function D$1(n,l,u){return this.constructor(n,u)}function E(u,t,i){var r,o,e,f;t==document&&(t=document.documentElement),l$1.__&&l$1.__(u,t),o=(r="function"=="undefined")?null:t.__k,e=[],f=[],O(t,u=(t).__k=_(k$1,null,[u]),o||p$1,p$1,t.namespaceURI,o?null:t.firstChild?n.call(t.childNodes):null,e,o?o.__e:t.firstChild,r,f),z$1(e,u,f);}function K(n){function l(n){var u,t;return this.getChildContext||(u=new Set,(t={})[l.__c]=this,this.getChildContext=function(){return t},this.componentWillUnmount=function(){u=null;},this.shouldComponentUpdate=function(n){this.props.value!=n.value&&u.forEach(function(n){n.__e=true,M(n);});},this.sub=function(n){u.add(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){u&&u.delete(n),l&&l.call(n);};}),n.children}return l.__c="__cC"+h$1++,l.__=n,l.Provider=l.__l=(l.Consumer=function(n,l){return n.children(l)}).contextType=l,l}n=v$1.slice,l$1={__e:function(n,l,u,t){for(var i,r,o;l=l.__;)if((i=l.__c)&&!i.__)try{if((r=i.constructor)&&null!=r.getDerivedStateFromError&&(i.setState(r.getDerivedStateFromError(n)),o=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(n,t||{}),o=i.__d),o)return i.__E=i}catch(l){n=l;}throw n}},u$2=0,x$3.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!=this.state?this.__s:this.__s=d$1({},this.state),"function"==typeof n&&(n=n(d$1({},u),this.props)),n&&d$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),M(this));},x$3.prototype.forceUpdate=function(n){this.__v&&(this.__e=true,n&&this.__h.push(n),M(this));},x$3.prototype.render=k$1,i$1=[],o$1="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,e$1=function(n,l){return n.__v.__b-l.__v.__b},$.__r=0,f$2=/(PointerCapture)$|Capture$/i,c$2=0,s$1=F(false),a$2=F(true),h$1=0;
 
-    var f$1=0;function u$1(e,t,n,o,i,u){t||(t={});var a,c,p=t;if("ref"in p)for(c in p={},t)"ref"==c?a=t[c]:p[c]=t[c];var l={type:e,props:p,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--f$1,__i:-1,__u:0,__source:i,__self:u};if("function"==typeof e&&(a=e.defaultProps))for(c in a)void 0===p[c]&&(p[c]=a[c]);return l$1.vnode&&l$1.vnode(l),l}
+    var f$1=0;function u$1(e,t,n,o,i,u){t||(t={});var a,c,p=t;if("ref"in p)for(c in p={},t)"ref"==c?a=t[c]:p[c]=t[c];var l={type:e,props:p,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--f$1,__i:-1,__u:0,__source:i,__self:u};if("function"==typeof e&&(a=e.defaultProps))for(c in a) void 0===p[c]&&(p[c]=a[c]);return l$1.vnode&&l$1.vnode(l),l}
 
     const LABELS = {
         renderedLength: "Rendered",
@@ -169,7 +169,7 @@ var drawChart = (function (exports) {
         return availableSizeProperties;
     };
 
-    var t,r,u,i,o=0,f=[],c$1=l$1,e=c$1.__b,a$1=c$1.__r,v=c$1.diffed,l=c$1.__c,m$1=c$1.unmount,s=c$1.__;function d(n,t){c$1.__h&&c$1.__h(r,n,o||t),o=0;var u=r.__H||(r.__H={__:[],__h:[]});return n>=u.__.length&&u.__.push({}),u.__[n]}function h(n){return o=1,p(D,n)}function p(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[D(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r,!r.u)){var f=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return !!n.__c});if(u.every(function(n){return !n.__N}))return !c||c.call(this,n,t,r);var i=o.__c.props!==n;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),c&&c.call(this,n,t,r)||i};r.u=!0;var c=r.shouldComponentUpdate,e=r.componentWillUpdate;r.componentWillUpdate=function(n,t,r){if(this.__e){var u=c;c=void 0,f(n,t,r),c=u;}e&&e.call(this,n,t,r);},r.shouldComponentUpdate=f;}return o.__N||o.__}function y$2(n,u){var i=d(t++,3);!c$1.__s&&C(i.__H,u)&&(i.__=n,i.i=u,r.__H.__h.push(i));}function A(n){return o=5,T(function(){return {current:n}},[])}function T(n,r){var u=d(t++,7);return C(u.__H,r)&&(u.__=n(),u.__H=r,u.__h=n),u.__}function q(n,t){return o=8,T(function(){return n},t)}function x$2(n){var u=r.context[n.__c],i=d(t++,9);return i.c=n,u?(null==i.__&&(i.__=!0,u.sub(r)),u.props.value):n.__}function j(){for(var n;n=f.shift();)if(n.__P&&n.__H)try{n.__H.__h.forEach(z),n.__H.__h.forEach(B),n.__H.__h=[];}catch(t){n.__H.__h=[],c$1.__e(t,n.__v);}}c$1.__b=function(n){r=null,e&&e(n);},c$1.__=function(n,t){n&&t.__k&&t.__k.__m&&(n.__m=t.__k.__m),s&&s(n,t);},c$1.__r=function(n){a$1&&a$1(n),t=0;var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.i=n.__N=void 0;})):(i.__h.forEach(z),i.__h.forEach(B),i.__h=[],t=0)),u=r;},c$1.diffed=function(n){v&&v(n);var t=n.__c;t&&t.__H&&(t.__H.__h.length&&(1!==f.push(t)&&i===c$1.requestAnimationFrame||((i=c$1.requestAnimationFrame)||w)(j)),t.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.i=void 0;})),u=r=null;},c$1.__c=function(n,t){t.some(function(n){try{n.__h.forEach(z),n.__h=n.__h.filter(function(n){return !n.__||B(n)});}catch(r){t.some(function(n){n.__h&&(n.__h=[]);}),t=[],c$1.__e(r,n.__v);}}),l&&l(n,t);},c$1.unmount=function(n){m$1&&m$1(n);var t,r=n.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{z(n);}catch(n){t=n;}}),r.__H=void 0,t&&c$1.__e(t,r.__v));};var k="function"==typeof requestAnimationFrame;function w(n){var t,r=function(){clearTimeout(u),k&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);k&&(t=requestAnimationFrame(r));}function z(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function B(n){var t=r;n.__c=n.__(),r=t;}function C(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function D(n,t){return "function"==typeof t?t(n):t}
+    var t,r,u,i,o=0,f=[],c$1=l$1,e=c$1.__b,a$1=c$1.__r,v=c$1.diffed,l=c$1.__c,m$1=c$1.unmount,s=c$1.__;function p(n,t){c$1.__h&&c$1.__h(r,n,o||t),o=0;var u=r.__H||(r.__H={__:[],__h:[]});return n>=u.__.length&&u.__.push({}),u.__[n]}function d(n){return o=1,h(D,n)}function h(n,u,i){var o=p(t++,2);if(o.t=n,!o.__c&&(o.__=[D(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r,!r.__f)){var f=function(n,t,r){if(!o.__c.__H)return  true;var u=o.__c.__H.__.filter(function(n){return !!n.__c});if(u.every(function(n){return !n.__N}))return !c||c.call(this,n,t,r);var i=o.__c.props!==n;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=true);}}),c&&c.call(this,n,t,r)||i};r.__f=true;var c=r.shouldComponentUpdate,e=r.componentWillUpdate;r.componentWillUpdate=function(n,t,r){if(this.__e){var u=c;c=void 0,f(n,t,r),c=u;}e&&e.call(this,n,t,r);},r.shouldComponentUpdate=f;}return o.__N||o.__}function y$2(n,u){var i=p(t++,3);!c$1.__s&&C(i.__H,u)&&(i.__=n,i.u=u,r.__H.__h.push(i));}function A(n){return o=5,T(function(){return {current:n}},[])}function T(n,r){var u=p(t++,7);return C(u.__H,r)&&(u.__=n(),u.__H=r,u.__h=n),u.__}function q(n,t){return o=8,T(function(){return n},t)}function x$2(n){var u=r.context[n.__c],i=p(t++,9);return i.c=n,u?(null==i.__&&(i.__=true,u.sub(r)),u.props.value):n.__}function j(){for(var n;n=f.shift();)if(n.__P&&n.__H)try{n.__H.__h.forEach(z),n.__H.__h.forEach(B),n.__H.__h=[];}catch(t){n.__H.__h=[],c$1.__e(t,n.__v);}}c$1.__b=function(n){r=null,e&&e(n);},c$1.__=function(n,t){n&&t.__k&&t.__k.__m&&(n.__m=t.__k.__m),s&&s(n,t);},c$1.__r=function(n){a$1&&a$1(n),t=0;var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0;})):(i.__h.forEach(z),i.__h.forEach(B),i.__h=[],t=0)),u=r;},c$1.diffed=function(n){v&&v(n);var t=n.__c;t&&t.__H&&(t.__H.__h.length&&(1!==f.push(t)&&i===c$1.requestAnimationFrame||((i=c$1.requestAnimationFrame)||w)(j)),t.__H.__.forEach(function(n){n.u&&(n.__H=n.u),n.u=void 0;})),u=r=null;},c$1.__c=function(n,t){t.some(function(n){try{n.__h.forEach(z),n.__h=n.__h.filter(function(n){return !n.__||B(n)});}catch(r){t.some(function(n){n.__h&&(n.__h=[]);}),t=[],c$1.__e(r,n.__v);}}),l&&l(n,t);},c$1.unmount=function(n){m$1&&m$1(n);var t,r=n.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{z(n);}catch(n){t=n;}}),r.__H=void 0,t&&c$1.__e(t,r.__v));};var k="function"==typeof requestAnimationFrame;function w(n){var t,r=function(){clearTimeout(u),k&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,35);k&&(t=requestAnimationFrame(r));}function z(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function B(n){var t=r;n.__c=n.__(),r=t;}function C(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function D(n,t){return "function"==typeof t?t(n):t}
 
     function ascending(a, b) {
       return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
@@ -5011,8 +5011,8 @@ var drawChart = (function (exports) {
         }));
     };
     const useFilter = () => {
-        const [includeFilter, setIncludeFilter] = h("");
-        const [excludeFilter, setExcludeFilter] = h("");
+        const [includeFilter, setIncludeFilter] = d("");
+        const [excludeFilter, setExcludeFilter] = d("");
         const setIncludeFilterTrottled = T(() => throttleFilter(setIncludeFilter, 200), []);
         const setExcludeFilterTrottled = T(() => throttleFilter(setExcludeFilter, 200), []);
         const isIncluded = T(() => createFilter(prepareFilter(includeFilter), prepareFilter(excludeFilter)), [includeFilter, excludeFilter]);
@@ -5030,8 +5030,8 @@ var drawChart = (function (exports) {
 
     const PLACEHOLDER = "*/**/file.js";
     const SideBar = ({ availableSizeProperties, sizeProperty, setSizeProperty, onExcludeChange, onIncludeChange, }) => {
-        const [includeValue, setIncludeValue] = h("");
-        const [excludeValue, setExcludeValue] = h("");
+        const [includeValue, setIncludeValue] = d("");
+        const [excludeValue, setExcludeValue] = d("");
         const handleSizePropertyChange = (sizeProp) => () => {
             if (sizeProp !== sizeProperty) {
                 setSizeProperty(sizeProp);
@@ -5059,7 +5059,7 @@ var drawChart = (function (exports) {
     const Tooltip = ({ node, visible }) => {
         const { data } = x$2(StaticContext);
         const ref = A(null);
-        const [style, setStyle] = h({});
+        const [style, setStyle] = d({});
         const content = T(() => {
             if (!node)
                 return null;
@@ -5134,9 +5134,9 @@ var drawChart = (function (exports) {
     };
     const Network = ({ links, nodes, onNodeHover, onNodeDblClick, getColor, onCanvasClick, onNodeClick, }) => {
         const { width, height } = x$2(StaticContext);
-        const [transform, setTransform] = h(identityTransform);
+        const [transform, setTransform] = d(identityTransform);
         const startPosRef = A();
-        const [dragging, setDragging] = h(false);
+        const [dragging, setDragging] = d(false);
         const handleMouseDown = (event) => {
             if (event.ctrlKey || event.button) {
                 // context menu
@@ -5175,8 +5175,8 @@ var drawChart = (function (exports) {
     };
 
     const Chart = ({ links, nodes, onNodeExclude, getColor, onNodeSelect, }) => {
-        const [showTooltip, setShowTooltip] = h(false);
-        const [tooltipNode, setTooltipNode] = h(undefined);
+        const [showTooltip, setShowTooltip] = d(false);
+        const [tooltipNode, setTooltipNode] = d(undefined);
         y$2(() => {
             const handleMouseOut = () => {
                 setShowTooltip(false);
@@ -5223,8 +5223,8 @@ var drawChart = (function (exports) {
         const getModuleColor = T(() => {
             return createRainbowColor(groups);
         }, [groups]);
-        const [excludedNodes, setExcludedNodes] = h([]);
-        const [selectedNode, setSelectedNode] = h();
+        const [excludedNodes, setExcludedNodes] = d([]);
+        const [selectedNode, setSelectedNode] = d();
         const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
         const getColor = (node) => {
             if (selectedNode != null) {
@@ -5274,7 +5274,7 @@ var drawChart = (function (exports) {
                 return source && target;
             });
         }, [data.nodeMetas, processedNodes]);
-        const [animatedNodes, setAnimatedNodes] = h([]);
+        const [animatedNodes, setAnimatedNodes] = d([]);
         y$2(() => {
             const simulation = forceSimulation()
                 .force("collision", forceCollide().radius((node) => node.radius))
@@ -5304,7 +5304,7 @@ var drawChart = (function (exports) {
 
     const NODE_MODULES = /.*(?:\/|\\\\)?node_modules(?:\/|\\\\)([^/\\]+)(?:\/|\\\\).+/;
 
-    const StaticContext = J({});
+    const StaticContext = K({});
     const createNodeInfo = (data, availableSizeProperties, uid) => {
         var _a, _b;
         const meta = data.nodeMetas[uid];
@@ -5362,7 +5362,7 @@ var drawChart = (function (exports) {
             }
             groupLayers.push([...newLayer]);
         }
-        D$1(u$1(StaticContext.Provider, { value: {
+        E(u$1(StaticContext.Provider, { value: {
                 data,
                 width,
                 height,
@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"3f0882cb-1","name":"constants.ts"},{"uid":"3f0882cb-3","name":"utils.ts"},{"name":"context","children":[{"uid":"3f0882cb-5","name":"ContainerContext.ts"},{"uid":"3f0882cb-13","name":"RowContext.ts"}]},{"uid":"3f0882cb-7","name":"useContext.tsx"},{"name":"Container","children":[{"uid":"3f0882cb-9","name":"styled.ts"},{"uid":"3f0882cb-11","name":"component.tsx"}]},{"name":"Row","children":[{"uid":"3f0882cb-15","name":"styled.ts"},{"uid":"3f0882cb-17","name":"component.tsx"}]},{"name":"Col","children":[{"uid":"3f0882cb-19","name":"styled.ts"},{"uid":"3f0882cb-21","name":"component.tsx"}]},{"uid":"3f0882cb-23","name":"theme.ts"},{"uid":"3f0882cb-25","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"3f0882cb-1":{"renderedLength":313,"gzipLength":214,"brotliLength":0,"metaUid":"3f0882cb-0"},"3f0882cb-3":{"renderedLength":253,"gzipLength":165,"brotliLength":0,"metaUid":"3f0882cb-2"},"3f0882cb-5":{"renderedLength":41,"gzipLength":53,"brotliLength":0,"metaUid":"3f0882cb-4"},"3f0882cb-7":{"renderedLength":610,"gzipLength":266,"brotliLength":0,"metaUid":"3f0882cb-6"},"3f0882cb-9":{"renderedLength":504,"gzipLength":315,"brotliLength":0,"metaUid":"3f0882cb-8"},"3f0882cb-11":{"renderedLength":1072,"gzipLength":524,"brotliLength":0,"metaUid":"3f0882cb-10"},"3f0882cb-13":{"renderedLength":35,"gzipLength":49,"brotliLength":0,"metaUid":"3f0882cb-12"},"3f0882cb-15":{"renderedLength":1171,"gzipLength":563,"brotliLength":0,"metaUid":"3f0882cb-14"},"3f0882cb-17":{"renderedLength":1310,"gzipLength":560,"brotliLength":0,"metaUid":"3f0882cb-16"},"3f0882cb-19":{"renderedLength":1820,"gzipLength":752,"brotliLength":0,"metaUid":"3f0882cb-18"},"3f0882cb-21":{"renderedLength":1042,"gzipLength":484,"brotliLength":0,"metaUid":"3f0882cb-20"},"3f0882cb-23":{"renderedLength":325,"gzipLength":173,"brotliLength":0,"metaUid":"3f0882cb-22"},"3f0882cb-25":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"3f0882cb-24"}},"nodeMetas":{"3f0882cb-0":{"id":"/src/constants.ts","moduleParts":{"index.js":"3f0882cb-1"},"imported":[],"importedBy":[{"uid":"3f0882cb-10"},{"uid":"3f0882cb-16"},{"uid":"3f0882cb-20"},{"uid":"3f0882cb-2"},{"uid":"3f0882cb-6"}]},"3f0882cb-2":{"id":"/src/utils.ts","moduleParts":{"index.js":"3f0882cb-3"},"imported":[{"uid":"3f0882cb-32"},{"uid":"3f0882cb-0"}],"importedBy":[{"uid":"3f0882cb-10"},{"uid":"3f0882cb-16"},{"uid":"3f0882cb-20"},{"uid":"3f0882cb-14"},{"uid":"3f0882cb-18"}]},"3f0882cb-4":{"id":"/src/context/ContainerContext.ts","moduleParts":{"index.js":"3f0882cb-5"},"imported":[{"uid":"3f0882cb-30"}],"importedBy":[{"uid":"3f0882cb-10"},{"uid":"3f0882cb-31"}]},"3f0882cb-6":{"id":"/src/useContext.tsx","moduleParts":{"index.js":"3f0882cb-7"},"imported":[{"uid":"3f0882cb-30"},{"uid":"3f0882cb-32"},{"uid":"3f0882cb-26"},{"uid":"3f0882cb-0"}],"importedBy":[{"uid":"3f0882cb-10"},{"uid":"3f0882cb-16"},{"uid":"3f0882cb-20"}]},"3f0882cb-8":{"id":"/src/Container/styled.ts","moduleParts":{"index.js":"3f0882cb-9"},"imported":[{"uid":"3f0882cb-32"},{"uid":"3f0882cb-26"}],"importedBy":[{"uid":"3f0882cb-10"}]},"3f0882cb-10":{"id":"/src/Container/component.tsx","moduleParts":{"index.js":"3f0882cb-11"},"imported":[{"uid":"3f0882cb-30"},{"uid":"3f0882cb-0"},{"uid":"3f0882cb-2"},{"uid":"3f0882cb-4"},{"uid":"3f0882cb-6"},{"uid":"3f0882cb-8"}],"importedBy":[{"uid":"3f0882cb-27"}]},"3f0882cb-12":{"id":"/src/context/RowContext.ts","moduleParts":{"index.js":"3f0882cb-13"},"imported":[{"uid":"3f0882cb-30"}],"importedBy":[{"uid":"3f0882cb-31"}]},"3f0882cb-14":{"id":"/src/Row/styled.ts","moduleParts":{"index.js":"3f0882cb-15"},"imported":[{"uid":"3f0882cb-32"},{"uid":"3f0882cb-26"},{"uid":"3f0882cb-2"}],"importedBy":[{"uid":"3f0882cb-16"}]},"3f0882cb-16":{"id":"/src/Row/component.tsx","moduleParts":{"index.js":"3f0882cb-17"},"imported":[{"uid":"3f0882cb-30"},{"uid":"3f0882cb-0"},{"uid":"3f0882cb-2"},{"uid":"3f0882cb-6"},{"uid":"3f0882cb-31"},{"uid":"3f0882cb-14"}],"importedBy":[{"uid":"3f0882cb-28"}]},"3f0882cb-18":{"id":"/src/Col/styled.ts","moduleParts":{"index.js":"3f0882cb-19"},"imported":[{"uid":"3f0882cb-32"},{"uid":"3f0882cb-26"},{"uid":"3f0882cb-2"}],"importedBy":[{"uid":"3f0882cb-20"}]},"3f0882cb-20":{"id":"/src/Col/component.tsx","moduleParts":{"index.js":"3f0882cb-21"},"imported":[{"uid":"3f0882cb-30"},{"uid":"3f0882cb-0"},{"uid":"3f0882cb-2"},{"uid":"3f0882cb-6"},{"uid":"3f0882cb-31"},{"uid":"3f0882cb-18"}],"importedBy":[{"uid":"3f0882cb-29"}]},"3f0882cb-22":{"id":"/src/theme.ts","moduleParts":{"index.js":"3f0882cb-23"},"imported":[],"importedBy":[{"uid":"3f0882cb-24"}]},"3f0882cb-24":{"id":"/src/index.ts","moduleParts":{"index.js":"3f0882cb-25"},"imported":[{"uid":"3f0882cb-26"},{"uid":"3f0882cb-27"},{"uid":"3f0882cb-28"},{"uid":"3f0882cb-29"},{"uid":"3f0882cb-22"}],"importedBy":[],"isEntry":true},"3f0882cb-26":{"id":"@vitus-labs/unistyle","moduleParts":{},"imported":[],"importedBy":[{"uid":"3f0882cb-24"},{"uid":"3f0882cb-6"},{"uid":"3f0882cb-8"},{"uid":"3f0882cb-14"},{"uid":"3f0882cb-18"}],"isExternal":true},"3f0882cb-27":{"id":"/src/Container/index.ts","moduleParts":{},"imported":[{"uid":"3f0882cb-10"}],"importedBy":[{"uid":"3f0882cb-24"}]},"3f0882cb-28":{"id":"/src/Row/index.ts","moduleParts":{},"imported":[{"uid":"3f0882cb-16"}],"importedBy":[{"uid":"3f0882cb-24"}]},"3f0882cb-29":{"id":"/src/Col/index.ts","moduleParts":{},"imported":[{"uid":"3f0882cb-20"}],"importedBy":[{"uid":"3f0882cb-24"}]},"3f0882cb-30":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"3f0882cb-10"},{"uid":"3f0882cb-16"},{"uid":"3f0882cb-20"},{"uid":"3f0882cb-4"},{"uid":"3f0882cb-6"},{"uid":"3f0882cb-12"}],"isExternal":true},"3f0882cb-31":{"id":"/src/context/index.ts","moduleParts":{},"imported":[{"uid":"3f0882cb-4"},{"uid":"3f0882cb-12"}],"importedBy":[{"uid":"3f0882cb-16"},{"uid":"3f0882cb-20"}]},"3f0882cb-32":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"3f0882cb-2"},{"uid":"3f0882cb-6"},{"uid":"3f0882cb-8"},{"uid":"3f0882cb-14"},{"uid":"3f0882cb-18"}],"isExternal":true}},"env":{"rollup":"4.55.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"d3ff3e47-1","name":"constants.ts"},{"name":"context","children":[{"uid":"d3ff3e47-3","name":"ContainerContext.ts"},{"uid":"d3ff3e47-5","name":"RowContext.ts"},{"uid":"d3ff3e47-7","name":"index.ts"}]},{"uid":"d3ff3e47-9","name":"useContext.tsx"},{"uid":"d3ff3e47-11","name":"utils.ts"},{"name":"Col","children":[{"uid":"d3ff3e47-13","name":"styled.ts"},{"uid":"d3ff3e47-15","name":"component.tsx"},{"uid":"d3ff3e47-17","name":"index.ts"}]},{"name":"Container","children":[{"uid":"d3ff3e47-19","name":"styled.ts"},{"uid":"d3ff3e47-21","name":"component.tsx"},{"uid":"d3ff3e47-23","name":"index.ts"}]},{"name":"Row","children":[{"uid":"d3ff3e47-25","name":"styled.ts"},{"uid":"d3ff3e47-27","name":"component.tsx"},{"uid":"d3ff3e47-29","name":"index.ts"}]},{"uid":"d3ff3e47-31","name":"theme.ts"},{"uid":"d3ff3e47-33","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"d3ff3e47-1":{"renderedLength":359,"gzipLength":261,"brotliLength":0,"metaUid":"d3ff3e47-0"},"d3ff3e47-3":{"renderedLength":295,"gzipLength":213,"brotliLength":0,"metaUid":"d3ff3e47-2"},"d3ff3e47-5":{"renderedLength":281,"gzipLength":216,"brotliLength":0,"metaUid":"d3ff3e47-4"},"d3ff3e47-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"d3ff3e47-6"},"d3ff3e47-9":{"renderedLength":569,"gzipLength":277,"brotliLength":0,"metaUid":"d3ff3e47-8"},"d3ff3e47-11":{"renderedLength":557,"gzipLength":309,"brotliLength":0,"metaUid":"d3ff3e47-10"},"d3ff3e47-13":{"renderedLength":2131,"gzipLength":995,"brotliLength":0,"metaUid":"d3ff3e47-12"},"d3ff3e47-15":{"renderedLength":1040,"gzipLength":591,"brotliLength":0,"metaUid":"d3ff3e47-14"},"d3ff3e47-17":{"renderedLength":71,"gzipLength":87,"brotliLength":0,"metaUid":"d3ff3e47-16"},"d3ff3e47-19":{"renderedLength":730,"gzipLength":432,"brotliLength":0,"metaUid":"d3ff3e47-18"},"d3ff3e47-21":{"renderedLength":1570,"gzipLength":748,"brotliLength":0,"metaUid":"d3ff3e47-20"},"d3ff3e47-23":{"renderedLength":83,"gzipLength":92,"brotliLength":0,"metaUid":"d3ff3e47-22"},"d3ff3e47-25":{"renderedLength":1175,"gzipLength":607,"brotliLength":0,"metaUid":"d3ff3e47-24"},"d3ff3e47-27":{"renderedLength":1551,"gzipLength":726,"brotliLength":0,"metaUid":"d3ff3e47-26"},"d3ff3e47-29":{"renderedLength":69,"gzipLength":85,"brotliLength":0,"metaUid":"d3ff3e47-28"},"d3ff3e47-31":{"renderedLength":420,"gzipLength":295,"brotliLength":0,"metaUid":"d3ff3e47-30"},"d3ff3e47-33":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"d3ff3e47-32"}},"nodeMetas":{"d3ff3e47-0":{"id":"/src/constants.ts","moduleParts":{"index.js":"d3ff3e47-1"},"imported":[],"importedBy":[{"uid":"d3ff3e47-14"},{"uid":"d3ff3e47-20"},{"uid":"d3ff3e47-26"},{"uid":"d3ff3e47-8"},{"uid":"d3ff3e47-10"}]},"d3ff3e47-2":{"id":"/src/context/ContainerContext.ts","moduleParts":{"index.js":"d3ff3e47-3"},"imported":[{"uid":"d3ff3e47-35"}],"importedBy":[{"uid":"d3ff3e47-20"},{"uid":"d3ff3e47-6"}]},"d3ff3e47-4":{"id":"/src/context/RowContext.ts","moduleParts":{"index.js":"d3ff3e47-5"},"imported":[{"uid":"d3ff3e47-35"}],"importedBy":[{"uid":"d3ff3e47-6"}]},"d3ff3e47-6":{"id":"/src/context/index.ts","moduleParts":{"index.js":"d3ff3e47-7"},"imported":[{"uid":"d3ff3e47-2"},{"uid":"d3ff3e47-4"}],"importedBy":[{"uid":"d3ff3e47-14"},{"uid":"d3ff3e47-26"}]},"d3ff3e47-8":{"id":"/src/useContext.tsx","moduleParts":{"index.js":"d3ff3e47-9"},"imported":[{"uid":"d3ff3e47-37"},{"uid":"d3ff3e47-34"},{"uid":"d3ff3e47-35"},{"uid":"d3ff3e47-0"}],"importedBy":[{"uid":"d3ff3e47-14"},{"uid":"d3ff3e47-20"},{"uid":"d3ff3e47-26"}]},"d3ff3e47-10":{"id":"/src/utils.ts","moduleParts":{"index.js":"d3ff3e47-11"},"imported":[{"uid":"d3ff3e47-37"},{"uid":"d3ff3e47-0"}],"importedBy":[{"uid":"d3ff3e47-14"},{"uid":"d3ff3e47-20"},{"uid":"d3ff3e47-26"},{"uid":"d3ff3e47-12"},{"uid":"d3ff3e47-24"}]},"d3ff3e47-12":{"id":"/src/Col/styled.ts","moduleParts":{"index.js":"d3ff3e47-13"},"imported":[{"uid":"d3ff3e47-37"},{"uid":"d3ff3e47-34"},{"uid":"d3ff3e47-10"}],"importedBy":[{"uid":"d3ff3e47-14"}]},"d3ff3e47-14":{"id":"/src/Col/component.tsx","moduleParts":{"index.js":"d3ff3e47-15"},"imported":[{"uid":"d3ff3e47-35"},{"uid":"d3ff3e47-0"},{"uid":"d3ff3e47-6"},{"uid":"d3ff3e47-8"},{"uid":"d3ff3e47-10"},{"uid":"d3ff3e47-12"},{"uid":"d3ff3e47-36"}],"importedBy":[{"uid":"d3ff3e47-16"}]},"d3ff3e47-16":{"id":"/src/Col/index.ts","moduleParts":{"index.js":"d3ff3e47-17"},"imported":[{"uid":"d3ff3e47-14"}],"importedBy":[{"uid":"d3ff3e47-32"}]},"d3ff3e47-18":{"id":"/src/Container/styled.ts","moduleParts":{"index.js":"d3ff3e47-19"},"imported":[{"uid":"d3ff3e47-37"},{"uid":"d3ff3e47-34"}],"importedBy":[{"uid":"d3ff3e47-20"}]},"d3ff3e47-20":{"id":"/src/Container/component.tsx","moduleParts":{"index.js":"d3ff3e47-21"},"imported":[{"uid":"d3ff3e47-35"},{"uid":"d3ff3e47-0"},{"uid":"d3ff3e47-2"},{"uid":"d3ff3e47-8"},{"uid":"d3ff3e47-10"},{"uid":"d3ff3e47-18"},{"uid":"d3ff3e47-36"}],"importedBy":[{"uid":"d3ff3e47-22"}]},"d3ff3e47-22":{"id":"/src/Container/index.ts","moduleParts":{"index.js":"d3ff3e47-23"},"imported":[{"uid":"d3ff3e47-20"}],"importedBy":[{"uid":"d3ff3e47-32"}]},"d3ff3e47-24":{"id":"/src/Row/styled.ts","moduleParts":{"index.js":"d3ff3e47-25"},"imported":[{"uid":"d3ff3e47-37"},{"uid":"d3ff3e47-34"},{"uid":"d3ff3e47-10"}],"importedBy":[{"uid":"d3ff3e47-26"}]},"d3ff3e47-26":{"id":"/src/Row/component.tsx","moduleParts":{"index.js":"d3ff3e47-27"},"imported":[{"uid":"d3ff3e47-35"},{"uid":"d3ff3e47-0"},{"uid":"d3ff3e47-6"},{"uid":"d3ff3e47-8"},{"uid":"d3ff3e47-10"},{"uid":"d3ff3e47-24"},{"uid":"d3ff3e47-36"}],"importedBy":[{"uid":"d3ff3e47-28"}]},"d3ff3e47-28":{"id":"/src/Row/index.ts","moduleParts":{"index.js":"d3ff3e47-29"},"imported":[{"uid":"d3ff3e47-26"}],"importedBy":[{"uid":"d3ff3e47-32"}]},"d3ff3e47-30":{"id":"/src/theme.ts","moduleParts":{"index.js":"d3ff3e47-31"},"imported":[],"importedBy":[{"uid":"d3ff3e47-32"}]},"d3ff3e47-32":{"id":"/src/index.ts","moduleParts":{"index.js":"d3ff3e47-33"},"imported":[{"uid":"d3ff3e47-34"},{"uid":"d3ff3e47-16"},{"uid":"d3ff3e47-22"},{"uid":"d3ff3e47-28"},{"uid":"d3ff3e47-30"}],"importedBy":[],"isEntry":true},"d3ff3e47-34":{"id":"@vitus-labs/unistyle","moduleParts":{},"imported":[],"importedBy":[{"uid":"d3ff3e47-32"},{"uid":"d3ff3e47-8"},{"uid":"d3ff3e47-12"},{"uid":"d3ff3e47-18"},{"uid":"d3ff3e47-24"}]},"d3ff3e47-35":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"d3ff3e47-14"},{"uid":"d3ff3e47-20"},{"uid":"d3ff3e47-26"},{"uid":"d3ff3e47-8"},{"uid":"d3ff3e47-2"},{"uid":"d3ff3e47-4"}]},"d3ff3e47-36":{"id":"react/jsx-runtime","moduleParts":{},"imported":[],"importedBy":[{"uid":"d3ff3e47-14"},{"uid":"d3ff3e47-20"},{"uid":"d3ff3e47-26"}]},"d3ff3e47-37":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"d3ff3e47-8"},{"uid":"d3ff3e47-10"},{"uid":"d3ff3e47-12"},{"uid":"d3ff3e47-18"},{"uid":"d3ff3e47-24"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;