reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/View/tests/View.stories.js

@@ -1,1249 +1,1216 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.itemClassName = exports.className = exports.asProp = exports.testComposition = exports.nestedGaps = exports.keys = exports.hiddenItem = exports.itemOrder = exports.itemColumns = exports.itemGrow = exports.itemGapBefore = exports.animated = exports.zIndex = exports.inset = exports.positioning = exports.overflow = exports.shadow = exports.radius = exports.border = exports.borderColor = exports.background = exports.minSize = exports.maxSize = exports.ratio = exports.size = exports.textAlign = exports.justify = exports.align = exports.wrap = exports.bleed = exports.divided = exports.gap = exports.direction = exports.padding = void 0;
-const react_1 = __importStar(require("react"));
-const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("../../../components/Avatar"));
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Hidden_1 = __importDefault(require("../../../components/Hidden"));
-const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
-const Tabs_1 = __importDefault(require("../../../components/Tabs"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const View_1 = __importDefault(require("../../../components/View"));
-const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React, { useEffect, useState } from "react";
+import { expect } from "storybook/test";
+import Avatar from "../../../components/Avatar/index.js";
+import Button from "../../../components/Button/index.js";
+import Hidden from "../../../components/Hidden/index.js";
+import MenuItem from "../../../components/MenuItem/index.js";
+import Tabs from "../../../components/Tabs/index.js";
+import Text from "../../../components/Text/index.js";
+import View from "../../../components/View/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/View",
-    component: View_1.default,
+    component: View,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/view",
         },
     },
 };
-exports.padding = {
+export const padding = {
     name: "padding",
-    render: () => (<storybook_1.Example title="Border is used to highlight the padding value">
-			<storybook_1.Example.Item title="padding: 4">
-				<View_1.default padding={4} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="padding: 6">
-				<View_1.default padding={6} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="padding: 0">
-				<View_1.default padding={0} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="padding: vertical 2, horizontal 4">
-				<View_1.default paddingInline={4} paddingBlock={2} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="paddingTop: 4">
-				<View_1.default paddingTop={4} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="paddingBottom: 4">
-				<View_1.default paddingBottom={4} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="paddingStart: 4">
-				<View_1.default paddingStart={4} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="paddingEnd: 4">
-				<View_1.default paddingEnd={4} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example title="Border is used to highlight the padding value">
+			<Example.Item title="padding: 4">
+				<View padding={4} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="padding: 6">
+				<View padding={6} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="padding: 0">
+				<View padding={0} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="padding: vertical 2, horizontal 4">
+				<View paddingInline={4} paddingBlock={2} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="paddingTop: 4">
+				<View paddingTop={4} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="paddingBottom: 4">
+				<View paddingBottom={4} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="paddingStart: 4">
+				<View paddingStart={4} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="paddingEnd: 4">
+				<View paddingEnd={4} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title={[
             "responsive padding:",
             "[s] vertical 2, horizontal 4",
             "[m+] vertical 4, horizontal 8",
         ]}>
-				<View_1.default paddingInline={{ s: 4, m: 8 }} paddingBlock={{ s: 2, m: 4 }} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive padding:", "[s] top 2, bottom 4", "[m+] top 4, bottom 0, start: 8"]}>
-				<View_1.default paddingTop={{ s: 2, m: 4 }} paddingBottom={{ s: 4, m: 0 }} paddingStart={{ s: 0, m: 8 }} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="nested padding, child view should have no horizontal padding">
-				<View_1.default paddingStart={4} borderColor="neutral">
-					<View_1.default borderColor="primary" paddingBlock={4}>
-						<storybook_1.Placeholder />
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View paddingInline={{ s: 4, m: 8 }} paddingBlock={{ s: 2, m: 4 }} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title={["responsive padding:", "[s] top 2, bottom 4", "[m+] top 4, bottom 0, start: 8"]}>
+				<View paddingTop={{ s: 2, m: 4 }} paddingBottom={{ s: 4, m: 0 }} paddingStart={{ s: 0, m: 8 }} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="nested padding, child view should have no horizontal padding">
+				<View paddingStart={4} borderColor="neutral">
+					<View borderColor="primary" paddingBlock={4}>
+						<Placeholder />
+					</View>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.direction = {
+export const direction = {
     name: "direction",
-    render: () => (<storybook_1.Example title="Item 1 is another component, Item 2 is View.Item, Item 3 is text">
-			<storybook_1.Example.Item title="direction: column as default">
-				<View_1.default gap={3}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<View_1.default.Item>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
+    render: () => (<Example title="Item 1 is another component, Item 2 is View.Item, Item 3 is text">
+			<Example.Item title="direction: column as default">
+				<View gap={3}>
+					<Placeholder>Item 1</Placeholder>
+					<View.Item>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
 					Text item 3
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: column">
-				<View_1.default gap={3} direction="column">
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<View_1.default.Item>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: column">
+				<View gap={3} direction="column">
+					<Placeholder>Item 1</Placeholder>
+					<View.Item>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
 					Text item 3
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: column-reverse">
-				<View_1.default gap={3} direction="column-reverse">
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<View_1.default.Item>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: column-reverse">
+				<View gap={3} direction="column-reverse">
+					<Placeholder>Item 1</Placeholder>
+					<View.Item>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
 					Text item 3
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: row">
-				<View_1.default gap={3} direction="row">
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<View_1.default.Item>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: row">
+				<View gap={3} direction="row">
+					<Placeholder>Item 1</Placeholder>
+					<View.Item>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
 					Text item 3
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: row-reverse">
-				<View_1.default gap={3} direction="row-reverse">
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<View_1.default.Item>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: row-reverse">
+				<View gap={3} direction="row-reverse">
+					<Placeholder>Item 1</Placeholder>
+					<View.Item>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
 					Text item 3
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive direction", "[s] column-reverse", "[m] row-reverse", "[l+] row"]}>
-				<View_1.default direction={{ s: "column-reverse", m: "row-reverse", l: "row" }} gap={3}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</View>
+			</Example.Item>
+			<Example.Item title={["responsive direction", "[s] column-reverse", "[m] row-reverse", "[l+] row"]}>
+				<View direction={{ s: "column-reverse", m: "row-reverse", l: "row" }} gap={3}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.gap = {
+export const gap = {
     name: "gap",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="gap: 4, direction: row">
-				<View_1.default direction="row" gap={4} divided>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="gap: 0, direction: row">
-				<View_1.default direction="row" gap={0}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive gap, direction: row", "[s] 4", "[m+] 8"]}>
-				<View_1.default direction="row" gap={{ s: 4, m: 8 }}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="gap: 4, direction: column">
-				<View_1.default gap={4}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="gap: 0, direction: column">
-				<View_1.default gap={0}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive gap, direction: column", "[s] 4", "[m+] 8"]}>
-				<View_1.default gap={{ s: 4, m: 8 }}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="gap: 4, direction: row">
+				<View direction="row" gap={4} divided>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+					<Placeholder>Item 3</Placeholder>
+				</View>
+			</Example.Item>
+			<Example.Item title="gap: 0, direction: row">
+				<View direction="row" gap={0}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+			<Example.Item title={["responsive gap, direction: row", "[s] 4", "[m+] 8"]}>
+				<View direction="row" gap={{ s: 4, m: 8 }}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+			<Example.Item title="gap: 4, direction: column">
+				<View gap={4}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+			<Example.Item title="gap: 0, direction: column">
+				<View gap={0}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+			<Example.Item title={["responsive gap, direction: column", "[s] 4", "[m+] 8"]}>
+				<View gap={{ s: 4, m: 8 }}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.divided = {
+export const divided = {
     name: "divided",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="direction: row">
-				<View_1.default divided direction="row" gap={3}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: column">
-				<View_1.default divided gap={3}>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive divided", "[s] direction: row", "[m+] direction: column"]}>
-				<View_1.default divided direction={{ s: "row", m: "column" }} gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: row, columns">
-				<View_1.default divided gap={3} direction="row">
-					<View_1.default.Item columns={2}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={8}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={2}>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="with React.Fragment">
-				<View_1.default direction="row" gap={4} divided>
-					<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
+    render: () => (<Example>
+			<Example.Item title="direction: row">
+				<View divided direction="row" gap={3}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: column">
+				<View divided gap={3}>
+					<Placeholder>Item 1</Placeholder>
+					<Placeholder>Item 2</Placeholder>
+				</View>
+			</Example.Item>
+			<Example.Item title={["responsive divided", "[s] direction: row", "[m+] direction: column"]}>
+				<View divided direction={{ s: "row", m: "column" }} gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: row, columns">
+				<View divided gap={3} direction="row">
+					<View.Item columns={2}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={8}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+					<View.Item columns={2}>
+						<Placeholder>Item 3</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="with React.Fragment">
+				<View direction="row" gap={4} divided>
+					<Placeholder>Item 1</Placeholder>
 					<>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
+						<Placeholder>Item 2</Placeholder>
+						<Placeholder>Item 3</Placeholder>
 					</>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.bleed = {
+export const bleed = {
     name: "bleed",
-    render: () => (<storybook_1.Example title="Removes side borders and border radius when applied">
-			<storybook_1.Example.Item title="bleed: 4">
-				<View_1.default bleed={4} padding={4} borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
-				<View_1.default bleed={{ s: 4, m: 0 }} padding={4} borderRadius="small" borderColor="neutral">
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example title="Removes side borders and border radius when applied">
+			<Example.Item title="bleed: 4">
+				<View bleed={4} padding={4} borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
+				<View bleed={{ s: 4, m: 0 }} padding={4} borderRadius="small" borderColor="neutral">
+					<Placeholder />
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.wrap = {
+export const wrap = {
     name: "wrap",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="wrap: false">
-				<View_1.default direction="row" wrap={false} gap={3}>
-					<storybook_1.Placeholder w={600} h={100}/>
-					<storybook_1.Placeholder w={600} h={100}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="wrap: false">
+				<View direction="row" wrap={false} gap={3}>
+					<Placeholder w={600} h={100}/>
+					<Placeholder w={600} h={100}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.align = {
+export const align = {
     name: "align",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="align: start, direction: row">
-				<View_1.default align="start" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder h={100}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: center, direction: row">
-				<View_1.default align="center" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder h={100}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: end, direction: row">
-				<View_1.default align="end" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder h={100}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title="align: start, direction: row">
+				<View align="start" direction="row" gap={3}>
+					<Placeholder />
+					<Placeholder h={100}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="align: center, direction: row">
+				<View align="center" direction="row" gap={3}>
+					<Placeholder />
+					<Placeholder h={100}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="align: end, direction: row">
+				<View align="end" direction="row" gap={3}>
+					<Placeholder />
+					<Placeholder h={100}/>
+				</View>
+			</Example.Item>
+			<Example.Item title={[
             "align: stretch, direction: row",
             "2nd item is stretched based on the 1st item height",
         ]}>
-				<View_1.default align="stretch" direction="row" gap={3}>
-					<storybook_1.Placeholder h={100}/>
-					<storybook_1.Placeholder h="auto"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: baseline, direction: row">
-				<View_1.default align="baseline" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<Text_1.default variant="featured-6">Content</Text_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+				<View align="stretch" direction="row" gap={3}>
+					<Placeholder h={100}/>
+					<Placeholder h="auto"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="align: baseline, direction: row">
+				<View align="baseline" direction="row" gap={3}>
+					<Placeholder />
+					<Text variant="featured-6">Content</Text>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="align: start, direction: column">
-				<View_1.default align="start" direction="column" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder w={100}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: center, direction: column">
-				<View_1.default align="center" direction="column" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder w={100}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: end, direction: row">
-				<View_1.default align="end" direction="column" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder w={100}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+			<Example.Item title="align: start, direction: column">
+				<View align="start" direction="column" gap={3}>
+					<Placeholder />
+					<Placeholder w={100}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="align: center, direction: column">
+				<View align="center" direction="column" gap={3}>
+					<Placeholder />
+					<Placeholder w={100}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="align: end, direction: row">
+				<View align="end" direction="column" gap={3}>
+					<Placeholder />
+					<Placeholder w={100}/>
+				</View>
+			</Example.Item>
+			<Example.Item title={[
             "align: stretch, direction: column",
             "1st item uses its own width, 2nd item is stretched to full width",
         ]}>
-				<View_1.default align="stretch" direction="column" gap={3}>
-					<storybook_1.Placeholder w={100}/>
-					<storybook_1.Placeholder w="auto"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View align="stretch" direction="column" gap={3}>
+					<Placeholder w={100}/>
+					<Placeholder w="auto"/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.justify = {
+export const justify = {
     name: "justify",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="justify: start, direction: row">
-				<View_1.default justify="start" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="justify: center, direction: row">
-				<View_1.default justify="center" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="justify: end, direction: row">
-				<View_1.default justify="end" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="justify: space-between, direction: row">
-				<View_1.default justify="space-between" direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="justify: start, direction: row">
+				<View justify="start" direction="row" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="justify: center, direction: row">
+				<View justify="center" direction="row" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="justify: end, direction: row">
+				<View justify="end" direction="row" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="justify: space-between, direction: row">
+				<View justify="space-between" direction="row" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="justify: start, direction: column, height: 200px">
-				<View_1.default height="200px" justify="start" direction="column" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="justify: center, direction: column, height: 200px">
-				<View_1.default height="200px" justify="center" direction="column" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="justify: end, direction: column, height: 200px">
-				<View_1.default justify="end" height="200px" direction="column" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="justify: space-between, direction: column, height: 200px">
-				<View_1.default justify="space-between" height="200px" direction="column" gap={3}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="justify: start, direction: column, height: 200px">
+				<View height="200px" justify="start" direction="column" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="justify: center, direction: column, height: 200px">
+				<View height="200px" justify="center" direction="column" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="justify: end, direction: column, height: 200px">
+				<View justify="end" height="200px" direction="column" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="justify: space-between, direction: column, height: 200px">
+				<View justify="space-between" height="200px" direction="column" gap={3}>
+					<Placeholder />
+					<Placeholder />
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.textAlign = {
+export const textAlign = {
     name: "textAlign",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="textAlign: start">
-				<View_1.default textAlign="start">Content</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="textAlign: start">
+				<View textAlign="start">Content</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="textAlign: center">
-				<View_1.default textAlign="center">Content</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="textAlign: center">
+				<View textAlign="center">Content</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="textAlign: end">
-				<View_1.default textAlign="end">Content</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="textAlign: end">
+				<View textAlign="end">Content</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="textAlign: [s] start, [m+] end">
-				<View_1.default textAlign={{ s: "start", m: "end" }}>Content</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="textAlign: [s] start, [m+] end">
+				<View textAlign={{ s: "start", m: "end" }}>Content</View>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="height: 100px, width: 100px">
-				<View_1.default backgroundColor="neutral-faded" height="100px" width="100px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="height: 25, width: 25">
-				<View_1.default backgroundColor="neutral-faded" height={25} width={25}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title="height: 100px, width: 100px">
+				<View backgroundColor="neutral-faded" height="100px" width="100px"/>
+			</Example.Item>
+			<Example.Item title="height: 25, width: 25">
+				<View backgroundColor="neutral-faded" height={25} width={25}/>
+			</Example.Item>
+			<Example.Item title={[
             "responsive height and width",
             "[s] height: 25, width: 25",
             "[m+] height: 200px, width: 200px",
         ]}>
-				<View_1.default backgroundColor="neutral-faded" height={{ s: 25, m: "200px" }} width={{ s: 25, m: "200px" }}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View backgroundColor="neutral-faded" height={{ s: 25, m: "200px" }} width={{ s: 25, m: "200px" }}/>
+			</Example.Item>
+		</Example>),
 };
-exports.ratio = {
+export const ratio = {
     name: "aspectRatio",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="ratio: 16 / 9">
-				<View_1.default backgroundColor="neutral-faded" aspectRatio={16 / 9} width="200px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive ratio", "[s] 1/1", "[m+] 16/9"]}>
-				<View_1.default backgroundColor="neutral-faded" aspectRatio={{ s: 1, m: 16 / 9 }} width="200px"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="ratio: 16 / 9">
+				<View backgroundColor="neutral-faded" aspectRatio={16 / 9} width="200px"/>
+			</Example.Item>
+			<Example.Item title={["responsive ratio", "[s] 1/1", "[m+] 16/9"]}>
+				<View backgroundColor="neutral-faded" aspectRatio={{ s: 1, m: 16 / 9 }} width="200px"/>
+			</Example.Item>
+		</Example>),
 };
-exports.maxSize = {
+export const maxSize = {
     name: "width, height, maxWidth, maxHeight",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="maxHeight: 150px, maxWidth: 150px, height: 300px">
-				<View_1.default backgroundColor="neutral-faded" maxHeight="150px" maxWidth="150px" height="300px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="maxHeight: 25, maxWidth: 25, height: 50">
-				<View_1.default backgroundColor="neutral-faded" maxHeight={25} maxWidth={25} height={50}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title="maxHeight: 150px, maxWidth: 150px, height: 300px">
+				<View backgroundColor="neutral-faded" maxHeight="150px" maxWidth="150px" height="300px"/>
+			</Example.Item>
+			<Example.Item title="maxHeight: 25, maxWidth: 25, height: 50">
+				<View backgroundColor="neutral-faded" maxHeight={25} maxWidth={25} height={50}/>
+			</Example.Item>
+			<Example.Item title={[
             "responsive maxHeight and maxWidth, height: 300",
             "[s] maxHeight: 25, maxWidth: 25",
             "[m+] maxHeight: 200px, maxWidth: 200px",
         ]}>
-				<View_1.default backgroundColor="neutral-faded" maxHeight={{ s: 25, m: "200px" }} maxWidth={{ s: 25, m: "200px" }} height="300px"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View backgroundColor="neutral-faded" maxHeight={{ s: 25, m: "200px" }} maxWidth={{ s: 25, m: "200px" }} height="300px"/>
+			</Example.Item>
+		</Example>),
 };
-exports.minSize = {
+export const minSize = {
     name: "width, height, minWidth, minHeight",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="minHeight: 150px, minWidth: 150px, height: 50px, width: 50px">
-				<View_1.default backgroundColor="neutral-faded" minHeight="150px" minWidth="150px" height="50px" width="50px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="minHeight: 25, minWidth: 25, height: 5, width: 5">
-				<View_1.default backgroundColor="neutral-faded" minHeight={25} minWidth={25} height={5} width={5}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title="minHeight: 150px, minWidth: 150px, height: 50px, width: 50px">
+				<View backgroundColor="neutral-faded" minHeight="150px" minWidth="150px" height="50px" width="50px"/>
+			</Example.Item>
+			<Example.Item title="minHeight: 25, minWidth: 25, height: 5, width: 5">
+				<View backgroundColor="neutral-faded" minHeight={25} minWidth={25} height={5} width={5}/>
+			</Example.Item>
+			<Example.Item title={[
             "responsive minHeight and minWidth, height: 50px, width: 50px",
             "[s] minHeight: 25, minWidth: 25",
             "[m+] minHeight: 200px, minWidth: 200px",
         ]}>
-				<View_1.default backgroundColor="neutral-faded" minHeight={{ s: 25, m: "200px" }} minWidth={{ s: 25, m: "200px" }} height="50px" width="50px"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View backgroundColor="neutral-faded" minHeight={{ s: 25, m: "200px" }} minWidth={{ s: 25, m: "200px" }} height="50px" width="50px"/>
+			</Example.Item>
+		</Example>),
 };
-exports.background = {
+export const background = {
     name: "backgroundColor",
-    render: () => (<storybook_1.Example title="border is used to highlight the backround value when it's similar to the page background, text color changes based on the background">
-			<storybook_1.Example.Item title="bg: page">
-				<View_1.default backgroundColor="page" borderColor="neutral" padding={4}>
+    render: () => (<Example title="border is used to highlight the backround value when it's similar to the page background, text color changes based on the background">
+			<Example.Item title="bg: page">
+				<View backgroundColor="page" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: page-faded">
-				<View_1.default backgroundColor="page-faded" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: page-faded">
+				<View backgroundColor="page-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: disabled">
-				<View_1.default backgroundColor="disabled" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: disabled">
+				<View backgroundColor="disabled" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: disabled-faded">
-				<View_1.default backgroundColor="disabled-faded" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: disabled-faded">
+				<View backgroundColor="disabled-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: elevation-base">
-				<View_1.default backgroundColor="elevation-base" borderColor="neutral" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: elevation-base">
+				<View backgroundColor="elevation-base" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: elevation-raised">
-				<View_1.default backgroundColor="elevation-raised" borderColor="neutral" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: elevation-raised">
+				<View backgroundColor="elevation-raised" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: elevation-overlay">
-				<View_1.default backgroundColor="elevation-overlay" borderColor="neutral" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: elevation-overlay">
+				<View backgroundColor="elevation-overlay" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: neutral">
-				<View_1.default backgroundColor="neutral" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: neutral">
+				<View backgroundColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: neutral-faded">
-				<View_1.default backgroundColor="neutral-faded" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: neutral-faded">
+				<View backgroundColor="neutral-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: primary">
-				<View_1.default backgroundColor="primary" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: primary">
+				<View backgroundColor="primary" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: primary-faded">
-				<View_1.default backgroundColor="primary-faded" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: primary-faded">
+				<View backgroundColor="primary-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: critical">
-				<View_1.default backgroundColor="critical" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: critical">
+				<View backgroundColor="critical" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: critical-faded">
-				<View_1.default backgroundColor="critical-faded" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: critical-faded">
+				<View backgroundColor="critical-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: warning">
-				<View_1.default backgroundColor="warning" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: warning">
+				<View backgroundColor="warning" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: warning-faded">
-				<View_1.default backgroundColor="warning-faded" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: warning-faded">
+				<View backgroundColor="warning-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: positive">
-				<View_1.default backgroundColor="positive" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: positive">
+				<View backgroundColor="positive" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bg: positive-faded">
-				<View_1.default backgroundColor="positive-faded" padding={4}>
+				</View>
+			</Example.Item>
+			<Example.Item title="bg: positive-faded">
+				<View backgroundColor="positive-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.borderColor = {
+export const borderColor = {
     name: "borderColor",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="border: neutral">
-				<View_1.default borderColor="neutral" padding={4}>
+    render: () => (<Example>
+			<Example.Item title="border: neutral">
+				<View borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: neutral-faded">
-				<View_1.default borderColor="neutral-faded" padding={4}>
+			<Example.Item title="border: neutral-faded">
+				<View borderColor="neutral-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: primary">
-				<View_1.default borderColor="primary" padding={4}>
+			<Example.Item title="border: primary">
+				<View borderColor="primary" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: primary-faded">
-				<View_1.default borderColor="primary-faded" padding={4}>
+			<Example.Item title="border: primary-faded">
+				<View borderColor="primary-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: critical">
-				<View_1.default borderColor="critical" padding={4}>
+			<Example.Item title="border: critical">
+				<View borderColor="critical" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: critical-faded">
-				<View_1.default borderColor="critical-faded" padding={4}>
+			<Example.Item title="border: critical-faded">
+				<View borderColor="critical-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: warning">
-				<View_1.default borderColor="warning" padding={4}>
+			<Example.Item title="border: warning">
+				<View borderColor="warning" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: warning-faded">
-				<View_1.default borderColor="warning-faded" padding={4}>
+			<Example.Item title="border: warning-faded">
+				<View borderColor="warning-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: positive">
-				<View_1.default borderColor="positive" padding={4}>
+			<Example.Item title="border: positive">
+				<View borderColor="positive" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: positive-faded">
-				<View_1.default borderColor="positive-faded" padding={4}>
+			<Example.Item title="border: positive-faded">
+				<View borderColor="positive-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="border: transparent, background: primary-faded">
-				<View_1.default borderColor="transparent" backgroundColor="primary-faded" padding={4}>
+			<Example.Item title="border: transparent, background: primary-faded">
+				<View borderColor="transparent" backgroundColor="primary-faded" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive", "[s] primary", "[m+] neutral"]}>
-				<View_1.default borderColor={{ s: "primary", m: "neutral" }} padding={4}>
+			<Example.Item title={["responsive", "[s] primary", "[m+] neutral"]}>
+				<View borderColor={{ s: "primary", m: "neutral" }} padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.border = {
+export const border = {
     name: "border",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="border: true">
-				<View_1.default border borderColor="neutral" padding={4}>
+    render: () => (<Example>
+			<Example.Item title="border: true">
+				<View border borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="borderTop: true">
-				<View_1.default borderTop borderColor="neutral" padding={4}>
+			<Example.Item title="borderTop: true">
+				<View borderTop borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="borderBottom: true">
-				<View_1.default borderBottom borderColor="neutral" padding={4}>
+			<Example.Item title="borderBottom: true">
+				<View borderBottom borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="borderStart: true">
-				<View_1.default borderStart borderColor="neutral" padding={4}>
+			<Example.Item title="borderStart: true">
+				<View borderStart borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="borderEnd: true">
-				<View_1.default borderEnd borderColor="neutral" padding={4}>
+			<Example.Item title="borderEnd: true">
+				<View borderEnd borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="borderInline: true">
-				<View_1.default borderInline borderColor="neutral" padding={4}>
+			<Example.Item title="borderInline: true">
+				<View borderInline borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="borderBlock: true">
-				<View_1.default borderBlock borderColor="neutral" padding={4}>
+			<Example.Item title="borderBlock: true">
+				<View borderBlock borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="borderTop: true, borderStart: true, ">
-				<View_1.default borderColor="neutral" borderTop borderStart padding={4}>
+			<Example.Item title="borderTop: true, borderStart: true, ">
+				<View borderColor="neutral" borderTop borderStart padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={[
+			<Example.Item title={[
             "responsive",
             "[s] borderTop: true, borderStart: true",
             "[m+] borderBottom: true, borderEnd: true",
         ]}>
-				<View_1.default borderColor="neutral" borderTop={{ s: true, m: false }} borderStart={{ s: true, m: false }} borderBottom={{ s: false, m: true }} borderEnd={{ s: false, m: true }} padding={4}>
+				<View borderColor="neutral" borderTop={{ s: true, m: false }} borderStart={{ s: true, m: false }} borderBottom={{ s: false, m: true }} borderEnd={{ s: false, m: true }} padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
 			<div style={{ height: 100 }}/>
-		</storybook_1.Example>),
+		</Example>),
 };
-exports.radius = {
+export const radius = {
     name: "borderRadius",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="radius: small">
-				<View_1.default borderRadius="small" borderColor="neutral" padding={4}>
+    render: () => (<Example>
+			<Example.Item title="radius: small">
+				<View borderRadius="small" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="radius: medium">
-				<View_1.default borderRadius="medium" borderColor="neutral" padding={4}>
+			<Example.Item title="radius: medium">
+				<View borderRadius="medium" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="radius: large">
-				<View_1.default borderRadius="large" borderColor="neutral" padding={4}>
+			<Example.Item title="radius: large">
+				<View borderRadius="large" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="radius: circular">
-				<View_1.default borderRadius="circular" borderColor="neutral" padding={4}>
+			<Example.Item title="radius: circular">
+				<View borderRadius="circular" borderColor="neutral" padding={4}>
 					Content
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.shadow = {
+export const shadow = {
     name: "shadow",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="shadow: outline, radius: medium">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default height="100px" width="100px" shadow="outline" borderColor="neutral-faded" borderRadius="medium" backgroundColor="elevation-base"/>
-					<View_1.default height="100px" width="100px" shadow="outline-intense" borderColor="neutral-faded" borderRadius="medium" backgroundColor="primary"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="shadow: raised, radius: medium">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default height="100px" width="100px" shadow="raised" borderColor="neutral-faded" borderRadius="medium" backgroundColor="elevation-raised"/>
-					<View_1.default height="100px" width="100px" shadow="raised-intense" borderColor="neutral-faded" borderRadius="medium" backgroundColor="primary"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="shadow: overlay, radius: medium">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default height="100px" width="100px" shadow="overlay" borderRadius="medium" borderColor="neutral-faded" backgroundColor="elevation-overlay"/>
-					<View_1.default height="100px" width="100px" shadow="overlay-intense" borderRadius="medium" borderColor="neutral-faded" backgroundColor="primary"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="shadow: outline, radius: medium">
+				<View direction="row" gap={4}>
+					<View height="100px" width="100px" shadow="outline" borderColor="neutral-faded" borderRadius="medium" backgroundColor="elevation-base"/>
+					<View height="100px" width="100px" shadow="outline-intense" borderColor="neutral-faded" borderRadius="medium" backgroundColor="primary"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="shadow: raised, radius: medium">
+				<View direction="row" gap={4}>
+					<View height="100px" width="100px" shadow="raised" borderColor="neutral-faded" borderRadius="medium" backgroundColor="elevation-raised"/>
+					<View height="100px" width="100px" shadow="raised-intense" borderColor="neutral-faded" borderRadius="medium" backgroundColor="primary"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="shadow: overlay, radius: medium">
+				<View direction="row" gap={4}>
+					<View height="100px" width="100px" shadow="overlay" borderRadius="medium" borderColor="neutral-faded" backgroundColor="elevation-overlay"/>
+					<View height="100px" width="100px" shadow="overlay-intense" borderRadius="medium" borderColor="neutral-faded" backgroundColor="primary"/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.overflow = {
+export const overflow = {
     name: "overflow",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title={["overflow: hidden, radius: medium", "child background should have radius"]}>
-				<View_1.default height="100px" width="100px" shadow="raised" borderRadius="medium" overflow="hidden">
-					<View_1.default backgroundColor="primary" height="100%" width="100%"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title={["overflow: hidden, radius: medium", "child background should have radius"]}>
+				<View height="100px" width="100px" shadow="raised" borderRadius="medium" overflow="hidden">
+					<View backgroundColor="primary" height="100%" width="100%"/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.positioning = {
+export const positioning = {
     name: "position",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="position: relative + absolute">
-				<View_1.default borderColor="neutral" position="relative">
-					<storybook_1.Placeholder />
-					<View_1.default position="absolute" insetTop={0} insetEnd={0} backgroundColor="critical" zIndex={5} height={10} width={10}/>
-					<View_1.default position="absolute" insetTop={0} insetEnd={0} backgroundColor="primary" height={15} width={15}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="position: relative + absolute">
+				<View borderColor="neutral" position="relative">
+					<Placeholder />
+					<View position="absolute" insetTop={0} insetEnd={0} backgroundColor="critical" zIndex={5} height={10} width={10}/>
+					<View position="absolute" insetTop={0} insetEnd={0} backgroundColor="primary" height={15} width={15}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="position: sticky">
+			<Example.Item title="position: sticky">
 				{/* oxlint-disable-next-line jsx_a11y/prefer-tag-over-role */}
 				<div style={{ overflow: "auto", height: 100 }} tabIndex={0} role="button">
-					<View_1.default position="sticky" borderColor="primary" insetTop={0}>
+					<View position="sticky" borderColor="primary" insetTop={0}>
 						Content
-					</View_1.default>
-					<storybook_1.Placeholder h={1000}/>
+					</View>
+					<Placeholder h={1000}/>
 				</div>
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive", "[s] position: absolute", "[m+]: position: relative"]}>
+			<Example.Item title={["responsive", "[s] position: absolute", "[m+]: position: relative"]}>
 				<div style={{ overflow: "auto", height: 100, position: "relative" }} tabIndex={0} 
     // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
     role="button">
-					<View_1.default position={{ s: "absolute", m: "relative" }} borderColor="primary" insetTop={0}>
+					<View position={{ s: "absolute", m: "relative" }} borderColor="primary" insetTop={0}>
 						Content
-					</View_1.default>
-					<storybook_1.Placeholder h={1000}/>
+					</View>
+					<Placeholder h={1000}/>
 				</div>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.inset = {
+export const inset = {
     name: "inset",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="inset: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" inset={4}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="inset: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" inset={4}/>
+				</View>
+			</Example.Item>
+
+			<Example.Item title="insetTop: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetTop={4} height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetTop: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetTop={4} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetStart: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetStart={4} height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetStart: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetStart={4} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetEnd: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetEnd={4} height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetEnd: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetEnd={4} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetBottom: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetBottom={4} height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetBottom: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetBottom={4} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetInline: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetInline={4} height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetInline: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetInline={4} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetBlock: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetBlock={4} height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetBlock: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetBlock={4} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetInline: center">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetInline="center" height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetInline: center">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetInline="center" height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetBlock: center">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetBlock="center" height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetBlock: center">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetBlock="center" height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="insetInline: center, insetBlock: center">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetInline="center" insetBlock="center" height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="insetInline: center, insetBlock: center">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetInline="center" insetBlock="center" height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="inset: center">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" inset="center" height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="responsive, [s] insetBottom: 4 [m+] insetEnd: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetBottom={{ s: 4, m: "auto" }} insetEnd={{ s: "auto", m: 4 }} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="responsive, [s] insetBottom: 4 [m+] insetEnd: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetBottom={{ s: 4, m: "auto" }} insetEnd={{ s: "auto", m: 4 }} height={10} width={10}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="responsive, [s] insetInline: center [m+] insetInline: 4">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="neutral" position="absolute" insetInline={{ s: "center", m: 4 }} height={10} width={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="responsive, [s] insetInline: center [m+] insetInline: 4">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="neutral" position="absolute" insetInline={{ s: "center", m: 4 }} height={10} width={10}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.zIndex = {
+export const zIndex = {
     name: "zIndex",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="zIndex: number, higher value stacks on top">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="critical" position="absolute" insetTop={2} insetStart={2} zIndex={1} height={12} width={12}/>
-					<View_1.default backgroundColor="primary" position="absolute" insetTop={6} insetStart={6} zIndex={2} height={12} width={12}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="zIndex: number, higher value stacks on top">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="critical" position="absolute" insetTop={2} insetStart={2} zIndex={1} height={12} width={12}/>
+					<View backgroundColor="primary" position="absolute" insetTop={6} insetStart={6} zIndex={2} height={12} width={12}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="zIndex: token, fixed stacks above absolute above relative">
-				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
-					<View_1.default backgroundColor="critical" position="absolute" insetTop={2} insetStart={2} zIndex="relative" height={12} width={12}/>
-					<View_1.default backgroundColor="primary" position="absolute" insetTop={6} insetStart={6} zIndex="absolute" height={12} width={12}/>
-					<View_1.default backgroundColor="positive" position="absolute" insetTop={10} insetStart={10} zIndex="fixed" height={12} width={12}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="zIndex: token, fixed stacks above absolute above relative">
+				<View backgroundColor="neutral-faded" width={25} height={25}>
+					<View backgroundColor="critical" position="absolute" insetTop={2} insetStart={2} zIndex="relative" height={12} width={12}/>
+					<View backgroundColor="primary" position="absolute" insetTop={6} insetStart={6} zIndex="absolute" height={12} width={12}/>
+					<View backgroundColor="positive" position="absolute" insetTop={10} insetStart={10} zIndex="fixed" height={12} width={12}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.animated = {
+export const animated = {
     name: "animated",
     render: () => {
-        const [background, setBackground] = react_1.default.useState("neutral");
-        return (<View_1.default gap={3} align="start">
-				<Button_1.default onClick={() => setBackground((prev) => (prev === "neutral" ? "primary" : "neutral"))}>
+        const [background, setBackground] = React.useState("neutral");
+        return (<View gap={3} align="start">
+				<Button onClick={() => setBackground((prev) => (prev === "neutral" ? "primary" : "neutral"))}>
 					Change background
-				</Button_1.default>
-				<View_1.default height="100px" width="100px" backgroundColor={background} align="center" justify="center" animated>
+				</Button>
+				<View height="100px" width="100px" backgroundColor={background} align="center" justify="center" animated>
 					Content
-				</View_1.default>
-			</View_1.default>);
+				</View>
+			</View>);
     },
 };
-exports.itemGapBefore = {
+export const itemGapBefore = {
     name: "item, gapBefore",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title={["gap: 4, 3rd item gapBefore: 10, direction: row", "increased gap"]}>
-				<View_1.default direction="row" gap={4}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore={10}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["gap: 10, 3rd item gapBefore: 4, direction: row", "reduced gap"]}>
-				<View_1.default direction="row" gap={10}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore={4}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["gap: 10, 3rd item gapBefore: 0, direction: row", "removed gap"]}>
-				<View_1.default direction="row" gap={10}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore={0}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title={["gap: 4, 3rd item gapBefore: 10, direction: row", "increased gap"]}>
+				<View direction="row" gap={4}>
+					<Placeholder />
+					<Placeholder />
+					<View.Item gapBefore={10}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={["gap: 10, 3rd item gapBefore: 4, direction: row", "reduced gap"]}>
+				<View direction="row" gap={10}>
+					<Placeholder />
+					<Placeholder />
+					<View.Item gapBefore={4}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={["gap: 10, 3rd item gapBefore: 0, direction: row", "removed gap"]}>
+				<View direction="row" gap={10}>
+					<Placeholder />
+					<Placeholder />
+					<View.Item gapBefore={0}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="gap: 4, direction: row, 2nd item gap: auto">
-				<View_1.default direction="row" gap={4}>
-					<storybook_1.Placeholder w={200}/>
-					<View_1.default.Item gapBefore="auto">
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="gap: 4, direction: row, 2nd item gap: auto">
+				<View direction="row" gap={4}>
+					<Placeholder w={200}/>
+					<View.Item gapBefore="auto">
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["gap: 4, 3rd item gapBefore: 10, direction: column", "increased gap"]}>
-				<View_1.default direction="column" gap={4}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore={10}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["gap: 10, 3rd item gapBefore: 4, direction: column", "reduced gap"]}>
-				<View_1.default direction="column" gap={10}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore={4}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["gap: 10, 3rd item gapBefore: 0, direction: column", "removed gap"]}>
-				<View_1.default direction="column" gap={10}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore={0}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title={["gap: 4, 3rd item gapBefore: 10, direction: column", "increased gap"]}>
+				<View direction="column" gap={4}>
+					<Placeholder />
+					<Placeholder />
+					<View.Item gapBefore={10}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={["gap: 10, 3rd item gapBefore: 4, direction: column", "reduced gap"]}>
+				<View direction="column" gap={10}>
+					<Placeholder />
+					<Placeholder />
+					<View.Item gapBefore={4}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={["gap: 10, 3rd item gapBefore: 0, direction: column", "removed gap"]}>
+				<View direction="column" gap={10}>
+					<Placeholder />
+					<Placeholder />
+					<View.Item gapBefore={0}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="gap: 4, direction: column, height: 200px, 2nd item gap: auto">
-				<View_1.default height="200px" gap={4}>
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore="auto">
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="gap: 4, direction: column, height: 200px, 2nd item gap: auto">
+				<View height="200px" gap={4}>
+					<Placeholder />
+					<View.Item gapBefore="auto">
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={[
+			<Example.Item title={[
             "responsive item gap",
             "gap: 4, direction: row",
             "[s] 3rd item gapBefore: 10",
             "[m+] 3rd item gapBefore: 0",
         ]}>
-				<View_1.default direction="row" gap={4}>
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder />
-					<View_1.default.Item gapBefore={{ s: 10, m: 0 }}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View direction="row" gap={4}>
+					<Placeholder />
+					<Placeholder />
+					<View.Item gapBefore={{ s: 10, m: 0 }}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.itemGrow = {
+export const itemGrow = {
     name: "item, grow",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="direction: row, 2nd item grow">
-				<View_1.default direction="row" gap={3}>
-					<storybook_1.Placeholder w={200}/>
-					<View_1.default.Item grow>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: column, height: 200px, 2nd item grow">
-				<View_1.default direction="column" gap={3} height="200px">
-					<storybook_1.Placeholder />
-					<View_1.default.Item grow>
-						<storybook_1.Placeholder h="100%"/>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="direction: row, 2nd item grow, applied to View">
-				<View_1.default direction="row" gap={3}>
-					<storybook_1.Placeholder w={200}/>
-					<View_1.default grow>
-						<storybook_1.Placeholder />
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title="direction: row, 2nd item grow">
+				<View direction="row" gap={3}>
+					<Placeholder w={200}/>
+					<View.Item grow>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: column, height: 200px, 2nd item grow">
+				<View direction="column" gap={3} height="200px">
+					<Placeholder />
+					<View.Item grow>
+						<Placeholder h="100%"/>
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="direction: row, 2nd item grow, applied to View">
+				<View direction="row" gap={3}>
+					<Placeholder w={200}/>
+					<View grow>
+						<Placeholder />
+					</View>
+				</View>
+			</Example.Item>
+			<Example.Item title={[
             "responsive item grow, direction: row",
             "[s] 2nd item grow",
             "[m+] 2nd item doesn't grow",
         ]}>
-				<View_1.default direction="row" gap={3}>
-					<storybook_1.Placeholder w={200}/>
-					<View_1.default.Item grow={{ s: true, m: false }}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+				<View direction="row" gap={3}>
+					<Placeholder w={200}/>
+					<View.Item grow={{ s: true, m: false }}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={[
             "responsive item grow, direction: column, height: 200px",
             "[s] 2nd item grow",
             "[m+] 2nd item doesn't grow",
         ]}>
-				<View_1.default direction="column" gap={3} height="200px">
-					<storybook_1.Placeholder />
-					<View_1.default.Item grow={{ s: true, m: false }}>
-						<storybook_1.Placeholder h="100%"/>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View direction="column" gap={3} height="200px">
+					<Placeholder />
+					<View.Item grow={{ s: true, m: false }}>
+						<Placeholder h="100%"/>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.itemColumns = {
+export const itemColumns = {
     name: "item, columns",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="columns 6, 6, gap: 0">
-				<View_1.default direction="row">
-					<View_1.default.Item columns={6}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={6}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="columns 6, 6, gap: 0">
+				<View direction="row">
+					<View.Item columns={6}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={6}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="columns 6, 6, gap: 4">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default.Item columns={6}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={6}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="columns 6, 6, gap: 4">
+				<View direction="row" gap={4}>
+					<View.Item columns={6}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={6}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="columns 3, 9, gap: 4">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default.Item columns={3}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={9}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="columns 3, 9, gap: 4">
+				<View direction="row" gap={4}>
+					<View.Item columns={3}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={9}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="columns 6, 6, 9, gap: 4">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default.Item columns={6}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={6}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={9}>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="columns 6, 6, 9, gap: 4">
+				<View direction="row" gap={4}>
+					<View.Item columns={6}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={6}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+					<View.Item columns={9}>
+						<Placeholder>Item 3</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive columns", "[s] columns 6, 6, 12, gap: 4", "[m+]: 4, 4, 4"]}>
-				<View_1.default direction="row" gap={4}>
-					<View_1.default.Item columns={{ s: 6, m: 4 }}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={{ s: 6, m: 4 }}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={{ s: 12, m: 4 }}>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title={["responsive columns", "[s] columns 6, 6, 12, gap: 4", "[m+]: 4, 4, 4"]}>
+				<View direction="row" gap={4}>
+					<View.Item columns={{ s: 6, m: 4 }}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={{ s: 6, m: 4 }}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+					<View.Item columns={{ s: 12, m: 4 }}>
+						<Placeholder>Item 3</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="columns 6, 6, 9, gap: 4, 2nd item gapBefore: 20">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default.Item columns={6}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={6} gapBefore={20}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={9}>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="columns 6, 6, 9, gap: 4, 2nd item gapBefore: 20">
+				<View direction="row" gap={4}>
+					<View.Item columns={6}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={6} gapBefore={20}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+					<View.Item columns={9}>
+						<Placeholder>Item 3</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.itemOrder = {
+export const itemOrder = {
     name: "item, order",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="order: 1 3 2">
-				<View_1.default direction="row" gap={4}>
-					<View_1.default.Item columns={4}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={4} order={1}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={4}>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive order", "[s] 1 2 3", "[m+] 1 3 2"]}>
-				<View_1.default direction="row" gap={4}>
-					<View_1.default.Item columns={4}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={4} order={{ s: 0, m: 1 }}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={4}>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title="order: 1 3 2">
+				<View direction="row" gap={4}>
+					<View.Item columns={4}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={4} order={1}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+					<View.Item columns={4}>
+						<Placeholder>Item 3</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={["responsive order", "[s] 1 2 3", "[m+] 1 3 2"]}>
+				<View direction="row" gap={4}>
+					<View.Item columns={4}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item columns={4} order={{ s: 0, m: 1 }}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+					<View.Item columns={4}>
+						<Placeholder>Item 3</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={[
             "responsive order",
             "[s]: 1 3 2, 2 is full width on second row",
             "[m+]: 1 2 3, 2 has grow in the center of the first row",
         ]}>
-				<View_1.default direction="row" gap={3}>
-					<View_1.default.Item columns={{ s: 6, m: "auto" }}>
-						<storybook_1.Placeholder>Item 1</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item grow={{ s: false, m: true }} order={{ s: 1, m: 0 }} columns={{ s: 12, m: "auto" }}>
-						<storybook_1.Placeholder>Item 2</storybook_1.Placeholder>
-					</View_1.default.Item>
-					<View_1.default.Item columns={{ s: 6, m: "auto" }}>
-						<storybook_1.Placeholder>Item 3</storybook_1.Placeholder>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View direction="row" gap={3}>
+					<View.Item columns={{ s: 6, m: "auto" }}>
+						<Placeholder>Item 1</Placeholder>
+					</View.Item>
+					<View.Item grow={{ s: false, m: true }} order={{ s: 1, m: 0 }} columns={{ s: 12, m: "auto" }}>
+						<Placeholder>Item 2</Placeholder>
+					</View.Item>
+					<View.Item columns={{ s: 6, m: "auto" }}>
+						<Placeholder>Item 3</Placeholder>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.hiddenItem = {
+export const hiddenItem = {
     name: "composition, Hidden item",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title={[
             "[s] 2nd item: visible, grow, 3rd item: !grow",
             "[m+] 2nd item: hidden, 2nd item divider: hidden, 3rd item: grow",
         ]}>
-				<View_1.default direction="row" divided gap={3}>
-					<storybook_1.Placeholder />
-					<Hidden_1.default hide={{ s: false, m: true }}>
-						<View_1.default.Item grow key="3">
-							<storybook_1.Placeholder />
-						</View_1.default.Item>
-					</Hidden_1.default>
-					<View_1.default.Item grow={{ s: false, m: true }}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
+				<View direction="row" divided gap={3}>
+					<Placeholder />
+					<Hidden hide={{ s: false, m: true }}>
+						<View.Item grow key="3">
+							<Placeholder />
+						</View.Item>
+					</Hidden>
+					<View.Item grow={{ s: false, m: true }}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={[
+			<Example.Item title={[
             "[s] 2nd item: visible, grow, 3rd item: !grow",
             "[m+] 2nd item: hidden, 2nd item: grow doesn't push 3rd item, 3rd item: grow",
         ]}>
-				<View_1.default direction="row" gap={3}>
-					<storybook_1.Placeholder />
-					<Hidden_1.default hide={{ s: false, m: true }}>
-						<View_1.default.Item grow>
-							<storybook_1.Placeholder />
-						</View_1.default.Item>
-					</Hidden_1.default>
-					<View_1.default.Item grow={{ s: false, m: true }}>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<View direction="row" gap={3}>
+					<Placeholder />
+					<Hidden hide={{ s: false, m: true }}>
+						<View.Item grow>
+							<Placeholder />
+						</View.Item>
+					</Hidden>
+					<View.Item grow={{ s: false, m: true }}>
+						<Placeholder />
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
 };
 const KeyItem = (props) => {
-    const [timer, setTimer] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
+    const [timer, setTimer] = useState(0);
+    useEffect(() => {
         const t = setInterval(() => setTimer((t) => t + 1), 500);
         return () => clearInterval(t);
     }, []);
@@ -1251,168 +1218,168 @@ const KeyItem = (props) => {
 			{props.children}, timer: {timer}
 		</div>);
 };
-exports.keys = {
+export const keys = {
     name: "item, key",
     render: () => {
-        const toggle = (0, useToggle_1.default)();
-        return (<View_1.default gap={2}>
-				<Button_1.default onClick={() => toggle.toggle()}>Toggle</Button_1.default>
-				<View_1.default.Item>Item 1</View_1.default.Item>
+        const toggle = useToggle();
+        return (<View gap={2}>
+				<Button onClick={() => toggle.toggle()}>Toggle</Button>
+				<View.Item>Item 1</View.Item>
 				{toggle.active && <KeyItem>Item 2</KeyItem>}
 				<KeyItem>Item 3</KeyItem>
-			</View_1.default>);
+			</View>);
     },
 };
-exports.nestedGaps = {
+export const nestedGaps = {
     name: "composition, nested gap",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title={[
             "direction: column, gap: 10",
             "Child 1: direction: column, gap: 2",
             "Child 2: direction column, gap: 6",
             "Child 3: gapBefore: 0",
             "Child 3 view: direction: row, gap: 2",
         ]}>
-				<View_1.default gap={10}>
-					<View_1.default gap={2}>
-						<storybook_1.Placeholder>Child 1</storybook_1.Placeholder>
-						<storybook_1.Placeholder>Child 1</storybook_1.Placeholder>
-					</View_1.default>
+				<View gap={10}>
+					<View gap={2}>
+						<Placeholder>Child 1</Placeholder>
+						<Placeholder>Child 1</Placeholder>
+					</View>
 
-					<View_1.default gap={6}>
-						<storybook_1.Placeholder>Child 2</storybook_1.Placeholder>
-						<storybook_1.Placeholder>Child 2</storybook_1.Placeholder>
-					</View_1.default>
+					<View gap={6}>
+						<Placeholder>Child 2</Placeholder>
+						<Placeholder>Child 2</Placeholder>
+					</View>
 
-					<View_1.default.Item gapBefore={0}>
-						<View_1.default direction="row" gap={2}>
-							<storybook_1.Placeholder>Child 3, very long text</storybook_1.Placeholder>
-							<storybook_1.Placeholder>Child 3, very long text</storybook_1.Placeholder>
-							<storybook_1.Placeholder>Child 3, very long text</storybook_1.Placeholder>
-							<storybook_1.Placeholder>Child 3, very long text</storybook_1.Placeholder>
-							<storybook_1.Placeholder>Child 3, very long text</storybook_1.Placeholder>
-							<storybook_1.Placeholder>Child 3, very long text</storybook_1.Placeholder>
-						</View_1.default>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					<View.Item gapBefore={0}>
+						<View direction="row" gap={2}>
+							<Placeholder>Child 3, very long text</Placeholder>
+							<Placeholder>Child 3, very long text</Placeholder>
+							<Placeholder>Child 3, very long text</Placeholder>
+							<Placeholder>Child 3, very long text</Placeholder>
+							<Placeholder>Child 3, very long text</Placeholder>
+							<Placeholder>Child 3, very long text</Placeholder>
+						</View>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.testComposition = {
+export const testComposition = {
     name: "composition, edge cases",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title={[
+    render: () => (<Example>
+			<Example.Item title={[
             "View.Item, MenuItem, Aspect ratio",
             "ratio should increase height on viewport change",
         ]}>
-				<View_1.default direction="row" gap={3}>
-					<View_1.default.Item>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-					<MenuItem_1.default selected roundedCorners>
+				<View direction="row" gap={3}>
+					<View.Item>
+						<Placeholder />
+					</View.Item>
+					<MenuItem selected roundedCorners>
 						Menu
-					</MenuItem_1.default>
-					<View_1.default.Item grow>
-						<View_1.default aspectRatio={16 / 9}>
-							<storybook_1.Placeholder h="100%"/>
-						</View_1.default>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="Scrollable tabs inside View.Item with grow">
-				<View_1.default direction="row" align="center" gap={3}>
-					<storybook_1.Placeholder />
-					<View_1.default.Item grow>
-						<View_1.default padding={0} align="center">
-							<Tabs_1.default variant="pills" defaultValue="1">
-								<Tabs_1.default.List>
-									<Tabs_1.default.Item value="1">Very long item</Tabs_1.default.Item>
-									<Tabs_1.default.Item value="2">Very long item</Tabs_1.default.Item>
-									<Tabs_1.default.Item value="3">Very long item</Tabs_1.default.Item>
-									<Tabs_1.default.Item value="4">Very long item</Tabs_1.default.Item>
-									<Tabs_1.default.Item value="5">Very long item</Tabs_1.default.Item>
-									<Tabs_1.default.Item value="6">Very long item</Tabs_1.default.Item>
-								</Tabs_1.default.List>
-								{[1, 2, 3, 5, 6].map((i) => (<Tabs_1.default.Panel key={i} value={i.toString()}/>))}
-							</Tabs_1.default>
-						</View_1.default>
-					</View_1.default.Item>
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="2nd item has grow, Avatar stays circle">
-				<View_1.default direction="row" gap={3}>
-					<Avatar_1.default initials="DB"/>
-					<View_1.default.Item grow>
+					</MenuItem>
+					<View.Item grow>
+						<View aspectRatio={16 / 9}>
+							<Placeholder h="100%"/>
+						</View>
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="Scrollable tabs inside View.Item with grow">
+				<View direction="row" align="center" gap={3}>
+					<Placeholder />
+					<View.Item grow>
+						<View padding={0} align="center">
+							<Tabs variant="pills" defaultValue="1">
+								<Tabs.List>
+									<Tabs.Item value="1">Very long item</Tabs.Item>
+									<Tabs.Item value="2">Very long item</Tabs.Item>
+									<Tabs.Item value="3">Very long item</Tabs.Item>
+									<Tabs.Item value="4">Very long item</Tabs.Item>
+									<Tabs.Item value="5">Very long item</Tabs.Item>
+									<Tabs.Item value="6">Very long item</Tabs.Item>
+								</Tabs.List>
+								{[1, 2, 3, 5, 6].map((i) => (<Tabs.Panel key={i} value={i.toString()}/>))}
+							</Tabs>
+						</View>
+					</View.Item>
+					<Placeholder />
+				</View>
+			</Example.Item>
+			<Example.Item title="2nd item has grow, Avatar stays circle">
+				<View direction="row" gap={3}>
+					<Avatar initials="DB"/>
+					<View.Item grow>
 						Veggies sunt bona vobis, proinde vos postulo esse magis grape pea sprouts horseradish
 						courgette maize spinach prairie turnip jícama coriander quandong gourd broccoli seakale
 						gumbo. Parsley corn lentil zucchini radicchio maize burdock avocado sea lettuce.
 						Garbanzo tigernut earthnut pea fennel.
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={[
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title={[
             "item gapBefore from parent doesn't affect the child view",
             "columns should take full width",
         ]}>
-				<View_1.default>
-					<View_1.default.Item gapBefore={20}>
-						<View_1.default direction="row" gap={4}>
-							<View_1.default.Item columns={6}>
-								<storybook_1.Placeholder />
-							</View_1.default.Item>
-							<View_1.default.Item columns={6}>
-								<storybook_1.Placeholder />
-							</View_1.default.Item>
-						</View_1.default>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="View becomes flexbox if there is a child with grow">
-				<View_1.default height="300px" borderColor="neutral-faded">
-					<View_1.default height="50px"/>
-					<View_1.default grow backgroundColor="neutral-faded" padding={4}>
+				<View>
+					<View.Item gapBefore={20}>
+						<View direction="row" gap={4}>
+							<View.Item columns={6}>
+								<Placeholder />
+							</View.Item>
+							<View.Item columns={6}>
+								<Placeholder />
+							</View.Item>
+						</View>
+					</View.Item>
+				</View>
+			</Example.Item>
+			<Example.Item title="View becomes flexbox if there is a child with grow">
+				<View height="300px" borderColor="neutral-faded">
+					<View height="50px"/>
+					<View grow backgroundColor="neutral-faded" padding={4}>
 						Grow
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.asProp = {
+export const asProp = {
     name: "as",
-    render: () => (<View_1.default as="ul">
-			<View_1.default.Item as="li">Content</View_1.default.Item>
-		</View_1.default>),
+    render: () => (<View as="ul">
+			<View.Item as="li">Content</View.Item>
+		</View>),
     play: async ({ canvas }) => {
         const list = canvas.getByRole("list");
         const item = canvas.getByRole("listitem");
-        (0, test_1.expect)(list).toBeInTheDocument();
-        (0, test_1.expect)(item).toBeInTheDocument();
+        expect(list).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<View_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<View className="test-classname" attributes={{ id: "test-id" }}>
 				Content
-			</View_1.default>
+			</View>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };
-exports.itemClassName = {
+export const itemClassName = {
     name: "item className, attributes",
     render: () => (<div data-testid="root">
-			<View_1.default.Item className="test-classname" attributes={{ id: "test-id" }}>
+			<View.Item className="test-classname" attributes={{ id: "test-id" }}>
 				Content
-			</View_1.default.Item>
+			</View.Item>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };