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

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

@@ -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;

package/lib/analysis/vitus-labs-coolgrid.native.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-coolgrid.native.js","children":[{"name":"src","children":[{"uid":"26df0fec-1","name":"constants.ts"},{"uid":"26df0fec-3","name":"utils.ts"},{"name":"context","children":[{"uid":"26df0fec-5","name":"ContainerContext.ts"},{"uid":"26df0fec-13","name":"RowContext.ts"}]},{"uid":"26df0fec-7","name":"useContext.tsx"},{"name":"Container","children":[{"uid":"26df0fec-9","name":"styled.ts"},{"uid":"26df0fec-11","name":"component.tsx"}]},{"name":"Row","children":[{"uid":"26df0fec-15","name":"styled.ts"},{"uid":"26df0fec-17","name":"component.tsx"}]},{"name":"Col","children":[{"uid":"26df0fec-19","name":"styled.ts"},{"uid":"26df0fec-21","name":"component.tsx"}]},{"uid":"26df0fec-23","name":"theme.ts"},{"uid":"26df0fec-25","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"26df0fec-1":{"renderedLength":313,"gzipLength":214,"brotliLength":0,"metaUid":"26df0fec-0"},"26df0fec-3":{"renderedLength":253,"gzipLength":165,"brotliLength":0,"metaUid":"26df0fec-2"},"26df0fec-5":{"renderedLength":41,"gzipLength":53,"brotliLength":0,"metaUid":"26df0fec-4"},"26df0fec-7":{"renderedLength":610,"gzipLength":266,"brotliLength":0,"metaUid":"26df0fec-6"},"26df0fec-9":{"renderedLength":470,"gzipLength":297,"brotliLength":0,"metaUid":"26df0fec-8"},"26df0fec-11":{"renderedLength":1072,"gzipLength":524,"brotliLength":0,"metaUid":"26df0fec-10"},"26df0fec-13":{"renderedLength":35,"gzipLength":49,"brotliLength":0,"metaUid":"26df0fec-12"},"26df0fec-15":{"renderedLength":1137,"gzipLength":547,"brotliLength":0,"metaUid":"26df0fec-14"},"26df0fec-17":{"renderedLength":1310,"gzipLength":560,"brotliLength":0,"metaUid":"26df0fec-16"},"26df0fec-19":{"renderedLength":1757,"gzipLength":719,"brotliLength":0,"metaUid":"26df0fec-18"},"26df0fec-21":{"renderedLength":1042,"gzipLength":484,"brotliLength":0,"metaUid":"26df0fec-20"},"26df0fec-23":{"renderedLength":325,"gzipLength":173,"brotliLength":0,"metaUid":"26df0fec-22"},"26df0fec-25":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"26df0fec-24"}},"nodeMetas":{"26df0fec-0":{"id":"/src/constants.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-1"},"imported":[],"importedBy":[{"uid":"26df0fec-10"},{"uid":"26df0fec-16"},{"uid":"26df0fec-20"},{"uid":"26df0fec-2"},{"uid":"26df0fec-6"}]},"26df0fec-2":{"id":"/src/utils.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-3"},"imported":[{"uid":"26df0fec-32"},{"uid":"26df0fec-0"}],"importedBy":[{"uid":"26df0fec-10"},{"uid":"26df0fec-16"},{"uid":"26df0fec-20"},{"uid":"26df0fec-14"},{"uid":"26df0fec-18"}]},"26df0fec-4":{"id":"/src/context/ContainerContext.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-5"},"imported":[{"uid":"26df0fec-30"}],"importedBy":[{"uid":"26df0fec-10"},{"uid":"26df0fec-31"}]},"26df0fec-6":{"id":"/src/useContext.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-7"},"imported":[{"uid":"26df0fec-30"},{"uid":"26df0fec-32"},{"uid":"26df0fec-26"},{"uid":"26df0fec-0"}],"importedBy":[{"uid":"26df0fec-10"},{"uid":"26df0fec-16"},{"uid":"26df0fec-20"}]},"26df0fec-8":{"id":"/src/Container/styled.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-9"},"imported":[{"uid":"26df0fec-32"},{"uid":"26df0fec-26"}],"importedBy":[{"uid":"26df0fec-10"}]},"26df0fec-10":{"id":"/src/Container/component.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-11"},"imported":[{"uid":"26df0fec-30"},{"uid":"26df0fec-0"},{"uid":"26df0fec-2"},{"uid":"26df0fec-4"},{"uid":"26df0fec-6"},{"uid":"26df0fec-8"}],"importedBy":[{"uid":"26df0fec-27"}]},"26df0fec-12":{"id":"/src/context/RowContext.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-13"},"imported":[{"uid":"26df0fec-30"}],"importedBy":[{"uid":"26df0fec-31"}]},"26df0fec-14":{"id":"/src/Row/styled.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-15"},"imported":[{"uid":"26df0fec-32"},{"uid":"26df0fec-26"},{"uid":"26df0fec-2"}],"importedBy":[{"uid":"26df0fec-16"}]},"26df0fec-16":{"id":"/src/Row/component.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-17"},"imported":[{"uid":"26df0fec-30"},{"uid":"26df0fec-0"},{"uid":"26df0fec-2"},{"uid":"26df0fec-6"},{"uid":"26df0fec-31"},{"uid":"26df0fec-14"}],"importedBy":[{"uid":"26df0fec-28"}]},"26df0fec-18":{"id":"/src/Col/styled.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-19"},"imported":[{"uid":"26df0fec-32"},{"uid":"26df0fec-26"},{"uid":"26df0fec-2"}],"importedBy":[{"uid":"26df0fec-20"}]},"26df0fec-20":{"id":"/src/Col/component.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-21"},"imported":[{"uid":"26df0fec-30"},{"uid":"26df0fec-0"},{"uid":"26df0fec-2"},{"uid":"26df0fec-6"},{"uid":"26df0fec-31"},{"uid":"26df0fec-18"}],"importedBy":[{"uid":"26df0fec-29"}]},"26df0fec-22":{"id":"/src/theme.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-23"},"imported":[],"importedBy":[{"uid":"26df0fec-24"}]},"26df0fec-24":{"id":"/src/index.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"26df0fec-25"},"imported":[{"uid":"26df0fec-26"},{"uid":"26df0fec-27"},{"uid":"26df0fec-28"},{"uid":"26df0fec-29"},{"uid":"26df0fec-22"}],"importedBy":[],"isEntry":true},"26df0fec-26":{"id":"@vitus-labs/unistyle","moduleParts":{},"imported":[],"importedBy":[{"uid":"26df0fec-24"},{"uid":"26df0fec-6"},{"uid":"26df0fec-8"},{"uid":"26df0fec-14"},{"uid":"26df0fec-18"}],"isExternal":true},"26df0fec-27":{"id":"/src/Container/index.ts","moduleParts":{},"imported":[{"uid":"26df0fec-10"}],"importedBy":[{"uid":"26df0fec-24"}]},"26df0fec-28":{"id":"/src/Row/index.ts","moduleParts":{},"imported":[{"uid":"26df0fec-16"}],"importedBy":[{"uid":"26df0fec-24"}]},"26df0fec-29":{"id":"/src/Col/index.ts","moduleParts":{},"imported":[{"uid":"26df0fec-20"}],"importedBy":[{"uid":"26df0fec-24"}]},"26df0fec-30":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"26df0fec-10"},{"uid":"26df0fec-16"},{"uid":"26df0fec-20"},{"uid":"26df0fec-4"},{"uid":"26df0fec-6"},{"uid":"26df0fec-12"}],"isExternal":true},"26df0fec-31":{"id":"/src/context/index.ts","moduleParts":{},"imported":[{"uid":"26df0fec-4"},{"uid":"26df0fec-12"}],"importedBy":[{"uid":"26df0fec-16"},{"uid":"26df0fec-20"}]},"26df0fec-32":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"26df0fec-2"},{"uid":"26df0fec-6"},{"uid":"26df0fec-8"},{"uid":"26df0fec-14"},{"uid":"26df0fec-18"}],"isExternal":true}},"env":{"rollup":"4.55.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-coolgrid.native.js","children":[{"name":"src","children":[{"uid":"b094f6ad-1","name":"constants.ts"},{"name":"context","children":[{"uid":"b094f6ad-3","name":"ContainerContext.ts"},{"uid":"b094f6ad-5","name":"RowContext.ts"},{"uid":"b094f6ad-7","name":"index.ts"}]},{"uid":"b094f6ad-9","name":"useContext.tsx"},{"uid":"b094f6ad-11","name":"utils.ts"},{"name":"Col","children":[{"uid":"b094f6ad-13","name":"styled.ts"},{"uid":"b094f6ad-15","name":"component.tsx"},{"uid":"b094f6ad-17","name":"index.ts"}]},{"name":"Container","children":[{"uid":"b094f6ad-19","name":"styled.ts"},{"uid":"b094f6ad-21","name":"component.tsx"},{"uid":"b094f6ad-23","name":"index.ts"}]},{"name":"Row","children":[{"uid":"b094f6ad-25","name":"styled.ts"},{"uid":"b094f6ad-27","name":"component.tsx"},{"uid":"b094f6ad-29","name":"index.ts"}]},{"uid":"b094f6ad-31","name":"theme.ts"},{"uid":"b094f6ad-33","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"b094f6ad-1":{"renderedLength":359,"gzipLength":261,"brotliLength":0,"metaUid":"b094f6ad-0"},"b094f6ad-3":{"renderedLength":295,"gzipLength":213,"brotliLength":0,"metaUid":"b094f6ad-2"},"b094f6ad-5":{"renderedLength":281,"gzipLength":216,"brotliLength":0,"metaUid":"b094f6ad-4"},"b094f6ad-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"b094f6ad-6"},"b094f6ad-9":{"renderedLength":569,"gzipLength":277,"brotliLength":0,"metaUid":"b094f6ad-8"},"b094f6ad-11":{"renderedLength":557,"gzipLength":309,"brotliLength":0,"metaUid":"b094f6ad-10"},"b094f6ad-13":{"renderedLength":2085,"gzipLength":965,"brotliLength":0,"metaUid":"b094f6ad-12"},"b094f6ad-15":{"renderedLength":1040,"gzipLength":591,"brotliLength":0,"metaUid":"b094f6ad-14"},"b094f6ad-17":{"renderedLength":71,"gzipLength":87,"brotliLength":0,"metaUid":"b094f6ad-16"},"b094f6ad-19":{"renderedLength":697,"gzipLength":414,"brotliLength":0,"metaUid":"b094f6ad-18"},"b094f6ad-21":{"renderedLength":1570,"gzipLength":748,"brotliLength":0,"metaUid":"b094f6ad-20"},"b094f6ad-23":{"renderedLength":83,"gzipLength":92,"brotliLength":0,"metaUid":"b094f6ad-22"},"b094f6ad-25":{"renderedLength":1144,"gzipLength":591,"brotliLength":0,"metaUid":"b094f6ad-24"},"b094f6ad-27":{"renderedLength":1551,"gzipLength":726,"brotliLength":0,"metaUid":"b094f6ad-26"},"b094f6ad-29":{"renderedLength":69,"gzipLength":85,"brotliLength":0,"metaUid":"b094f6ad-28"},"b094f6ad-31":{"renderedLength":420,"gzipLength":295,"brotliLength":0,"metaUid":"b094f6ad-30"},"b094f6ad-33":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"b094f6ad-32"}},"nodeMetas":{"b094f6ad-0":{"id":"/src/constants.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-1"},"imported":[],"importedBy":[{"uid":"b094f6ad-14"},{"uid":"b094f6ad-20"},{"uid":"b094f6ad-26"},{"uid":"b094f6ad-8"},{"uid":"b094f6ad-10"}]},"b094f6ad-2":{"id":"/src/context/ContainerContext.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-3"},"imported":[{"uid":"b094f6ad-35"}],"importedBy":[{"uid":"b094f6ad-20"},{"uid":"b094f6ad-6"}]},"b094f6ad-4":{"id":"/src/context/RowContext.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-5"},"imported":[{"uid":"b094f6ad-35"}],"importedBy":[{"uid":"b094f6ad-6"}]},"b094f6ad-6":{"id":"/src/context/index.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-7"},"imported":[{"uid":"b094f6ad-2"},{"uid":"b094f6ad-4"}],"importedBy":[{"uid":"b094f6ad-14"},{"uid":"b094f6ad-26"}]},"b094f6ad-8":{"id":"/src/useContext.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-9"},"imported":[{"uid":"b094f6ad-37"},{"uid":"b094f6ad-34"},{"uid":"b094f6ad-35"},{"uid":"b094f6ad-0"}],"importedBy":[{"uid":"b094f6ad-14"},{"uid":"b094f6ad-20"},{"uid":"b094f6ad-26"}]},"b094f6ad-10":{"id":"/src/utils.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-11"},"imported":[{"uid":"b094f6ad-37"},{"uid":"b094f6ad-0"}],"importedBy":[{"uid":"b094f6ad-14"},{"uid":"b094f6ad-20"},{"uid":"b094f6ad-26"},{"uid":"b094f6ad-12"},{"uid":"b094f6ad-24"}]},"b094f6ad-12":{"id":"/src/Col/styled.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-13"},"imported":[{"uid":"b094f6ad-37"},{"uid":"b094f6ad-34"},{"uid":"b094f6ad-10"}],"importedBy":[{"uid":"b094f6ad-14"}]},"b094f6ad-14":{"id":"/src/Col/component.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-15"},"imported":[{"uid":"b094f6ad-35"},{"uid":"b094f6ad-0"},{"uid":"b094f6ad-6"},{"uid":"b094f6ad-8"},{"uid":"b094f6ad-10"},{"uid":"b094f6ad-12"},{"uid":"b094f6ad-36"}],"importedBy":[{"uid":"b094f6ad-16"}]},"b094f6ad-16":{"id":"/src/Col/index.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-17"},"imported":[{"uid":"b094f6ad-14"}],"importedBy":[{"uid":"b094f6ad-32"}]},"b094f6ad-18":{"id":"/src/Container/styled.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-19"},"imported":[{"uid":"b094f6ad-37"},{"uid":"b094f6ad-34"}],"importedBy":[{"uid":"b094f6ad-20"}]},"b094f6ad-20":{"id":"/src/Container/component.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-21"},"imported":[{"uid":"b094f6ad-35"},{"uid":"b094f6ad-0"},{"uid":"b094f6ad-2"},{"uid":"b094f6ad-8"},{"uid":"b094f6ad-10"},{"uid":"b094f6ad-18"},{"uid":"b094f6ad-36"}],"importedBy":[{"uid":"b094f6ad-22"}]},"b094f6ad-22":{"id":"/src/Container/index.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-23"},"imported":[{"uid":"b094f6ad-20"}],"importedBy":[{"uid":"b094f6ad-32"}]},"b094f6ad-24":{"id":"/src/Row/styled.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-25"},"imported":[{"uid":"b094f6ad-37"},{"uid":"b094f6ad-34"},{"uid":"b094f6ad-10"}],"importedBy":[{"uid":"b094f6ad-26"}]},"b094f6ad-26":{"id":"/src/Row/component.tsx","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-27"},"imported":[{"uid":"b094f6ad-35"},{"uid":"b094f6ad-0"},{"uid":"b094f6ad-6"},{"uid":"b094f6ad-8"},{"uid":"b094f6ad-10"},{"uid":"b094f6ad-24"},{"uid":"b094f6ad-36"}],"importedBy":[{"uid":"b094f6ad-28"}]},"b094f6ad-28":{"id":"/src/Row/index.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-29"},"imported":[{"uid":"b094f6ad-26"}],"importedBy":[{"uid":"b094f6ad-32"}]},"b094f6ad-30":{"id":"/src/theme.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-31"},"imported":[],"importedBy":[{"uid":"b094f6ad-32"}]},"b094f6ad-32":{"id":"/src/index.ts","moduleParts":{"vitus-labs-coolgrid.native.js":"b094f6ad-33"},"imported":[{"uid":"b094f6ad-34"},{"uid":"b094f6ad-16"},{"uid":"b094f6ad-22"},{"uid":"b094f6ad-28"},{"uid":"b094f6ad-30"}],"importedBy":[],"isEntry":true},"b094f6ad-34":{"id":"@vitus-labs/unistyle","moduleParts":{},"imported":[],"importedBy":[{"uid":"b094f6ad-32"},{"uid":"b094f6ad-8"},{"uid":"b094f6ad-12"},{"uid":"b094f6ad-18"},{"uid":"b094f6ad-24"}]},"b094f6ad-35":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"b094f6ad-14"},{"uid":"b094f6ad-20"},{"uid":"b094f6ad-26"},{"uid":"b094f6ad-8"},{"uid":"b094f6ad-2"},{"uid":"b094f6ad-4"}]},"b094f6ad-36":{"id":"react/jsx-runtime","moduleParts":{},"imported":[],"importedBy":[{"uid":"b094f6ad-14"},{"uid":"b094f6ad-20"},{"uid":"b094f6ad-26"}]},"b094f6ad-37":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"b094f6ad-8"},{"uid":"b094f6ad-10"},{"uid":"b094f6ad-12"},{"uid":"b094f6ad-18"},{"uid":"b094f6ad-24"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;