@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/dist/stories/developer tools/components/UtilityIcon/UtilityIcon.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { ComponentSize } from '../../../../types/size.js';
-import type { Snippet } from 'svelte';
-export interface UtilityIconProps {
-    /** Button contents goes here*/
-    children?: Snippet;
-    /** Button ref */
-    ref?: HTMLSpanElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Button disabled state */
-    disabled?: boolean;
-    /** Id */
-    id?: string;
-    /** Custom css class*/
-    class?: string;
-}
-declare const UtilityIcon: import("svelte").Component<UtilityIconProps, {}, "ref">;
-type UtilityIcon = ReturnType<typeof UtilityIcon>;
-export default UtilityIcon;

package/dist/stories/developer tools/customize/AutoCustomize/AutoCustomize.mdx

@@ -1,4 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
-import * as ToolStories from './Tool/Tool.stories.svelte';
-
-<Story of={ToolStories.Main} />

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorButton.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">import Icon from '@iconify/svelte';
-const { color, selectedColor, onclick } = $props();
-function onClickMod() {
-    if (onclick) {
-        onclick(color);
-    }
-}
-</script>
-
-<button
-  class="ColorButton"
-  class:selectedColor={selectedColor === color}
-  onclick={onClickMod}
-  aria-label={`color button ${color}`}
-  style={`background-color: var(--dodo-color-base-${color}-400);`}
->
-  <Icon icon="material-symbols:check-small" width="24" height="24" />
-</button>
-
-<style>.ColorButton {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  margin: 4px;
-  cursor: pointer;
-  color: var(--dodo-color-constant-white);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border: 3px solid transparent;
-}
-.ColorButton :global(svg) {
-  position: absolute;
-  display: none;
-}
-.ColorButton.selectedColor {
-  border-color: var(--dodo-color-primary-600);
-}
-.ColorButton.selectedColor :global(svg) {
-  display: block;
-}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorButton.svelte.d.ts

@@ -1,8 +0,0 @@
-interface ColorButtonProps {
-    color: string;
-    selectedColor?: string;
-    onclick?: (color: string) => void;
-}
-declare const ColorButton: import("svelte").Component<ColorButtonProps, {}, "">;
-type ColorButton = ReturnType<typeof ColorButton>;
-export default ColorButton;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorTool.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">import FormControl from '../../../../../../components/Form/FormControl/FormControl.svelte';
-import { colorPaletteBase } from '../../../../../philosophy/Colors/utils/color.js';
-import ColorButton from './ColorButton.svelte';
-const { colors = colorPaletteBase, selectedColor, onclick, label } = $props();
-</script>
-
-<div class="ColorTool">
-  <FormControl {label}>
-    {#each colors as color (color)}
-      <ColorButton {color} {onclick} {selectedColor} />
-    {/each}
-  </FormControl>
-</div>
-
-<style>.ColorTool {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: calc(var(--dodo-ui-space) * 2.5);
-  margin-left: -4px;
-  margin-right: -4px;
-}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorTool.svelte.d.ts

@@ -1,9 +0,0 @@
-interface ColorToolProps {
-    label?: string;
-    colors?: string[];
-    selectedColor?: string;
-    onclick?: (color: string) => void;
-}
-declare const ColorTool: import("svelte").Component<ColorToolProps, {}, "">;
-type ColorTool = ReturnType<typeof ColorTool>;
-export default ColorTool;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte

@@ -1,144 +0,0 @@
-<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
-import { useAutoCustomizeConfigStore } from '../stores/config.svelte.js';
-import ColorTool from './ColorTool/ColorTool.svelte';
-import Export from './Export.svelte';
-import ValueSilder from './ValueSilder/ValueSilder.svelte';
-</script>
-
-<div class="Config">
-  <h3>Auto Customize</h3>
-  <ColorTool
-    label="Primary Color:"
-    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ primary: color })}
-    selectedColor={useAutoCustomizeConfigStore.data.colors?.primary}
-    colors={[
-      'violet',
-      'red',
-      'orange',
-      'amber',
-      'yellow',
-      'lime',
-      'green',
-      'emerald',
-      'teal',
-      'cyan',
-      'blue',
-      'indigo',
-      'purple',
-      'fuchsia',
-      'pink',
-      'rose',
-    ]}
-  />
-
-  <ColorTool
-    label="Secondary Color:"
-    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ secondary: color })}
-    selectedColor={useAutoCustomizeConfigStore.data.colors?.secondary}
-    colors={[
-      'blue',
-      'red',
-      'orange',
-      'amber',
-      'yellow',
-      'lime',
-      'green',
-      'emerald',
-      'teal',
-      'cyan',
-      'indigo',
-      'violet',
-      'purple',
-      'fuchsia',
-      'pink',
-      'rose',
-    ]}
-  />
-
-  <ColorTool
-    label="Neutral Color:"
-    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ neutral: color })}
-    selectedColor={useAutoCustomizeConfigStore.data.colors?.neutral}
-    colors={['gray', 'slate', 'zinc', 'neutral', 'stone']}
-  />
-
-  <ColorTool
-    label="Safe Color:"
-    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ safe: color })}
-    selectedColor={useAutoCustomizeConfigStore.data.colors?.safe}
-    colors={['emerald', 'lime', 'green', 'teal']}
-  />
-
-  <ColorTool
-    label="Warning Color:"
-    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ warning: color })}
-    selectedColor={useAutoCustomizeConfigStore.data.colors?.warning}
-    colors={['amber', 'red', 'rose', 'orange', 'yellow']}
-  />
-
-  <ColorTool
-    label="Danger Color:"
-    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ danger: color })}
-    selectedColor={useAutoCustomizeConfigStore.data.colors?.danger}
-    colors={['red', 'orange', 'amber', 'yellow', 'pink', 'rose']}
-  />
-
-  <ValueSilder
-    label="Roundness:"
-    value={useAutoCustomizeConfigStore.data.components?.roundness || 0}
-    min={-5}
-    max={7}
-    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ roundness: value })}
-  />
-
-  <ValueSilder
-    label="Size:"
-    value={useAutoCustomizeConfigStore.data.components?.elementHeight || 0}
-    min={-5}
-    max={7}
-    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ elementHeight: value })}
-  />
-
-  <ValueSilder
-    label="Border:"
-    value={useAutoCustomizeConfigStore.data.components?.borderWidth || 0}
-    min={0}
-    max={7}
-    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ borderWidth: value })}
-  />
-
-  <ValueSilder
-    label="Space:"
-    value={useAutoCustomizeConfigStore.data.space || 0}
-    min={-5}
-    max={15}
-    oninput={(value) => useAutoCustomizeConfigStore.updateData({ space: value })}
-  />
-
-  <div class="Export">
-    <Export />
-  </div>
-
-  <div class="Reset">
-    <Button onclick={() => useAutoCustomizeConfigStore.reset()} variant="text" color="danger">
-      Reset
-    </Button>
-  </div>
-</div>
-
-<style>.Config {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: calc(var(--dodo-ui-space) * 2);
-}
-@media (min-width: 64rem) {
-  .Config {
-    max-width: 300px;
-    height: calc(100vh - 130px);
-    overflow: auto;
-  }
-}
-.Config .Reset {
-  margin-top: calc(var(--dodo-ui-space) * 4);
-}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Config: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Config = InstanceType<typeof Config>;
-export default Config;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Export.svelte

@@ -1,123 +0,0 @@
-<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
-import { colorPalette, colorPaletteValues, } from '../../../../philosophy/Colors/utils/color.js';
-import { downloadFile } from '../helpers/download-file.js';
-import { autoCustomizeConfigdefaultData, useAutoCustomizeConfigStore, } from '../stores/config.svelte.js';
-async function onclick() {
-    try {
-        let rawText = `/* dodo-ui-custom.css */
-:root {`;
-        for (let index = 0; index < colorPalette.length; index++) {
-            const colorName = colorPalette[index];
-            const fieldName = `${colorName}`;
-            const dataPoint = useAutoCustomizeConfigStore.data.colors &&
-                useAutoCustomizeConfigStore.data.colors[fieldName]
-                ? useAutoCustomizeConfigStore.data.colors[fieldName]
-                : undefined;
-            const defaultValue = autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
-                ? autoCustomizeConfigdefaultData.colors[fieldName]
-                : undefined;
-            const pass = dataPoint && dataPoint !== defaultValue ? true : false;
-            if (!pass) {
-                continue;
-            }
-            rawText += `
-  /* ${colorName} color */`;
-            for (let index = 0; index < colorPaletteValues.length; index++) {
-                const weight = colorPaletteValues[index];
-                rawText += `
-  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight});`;
-                if (colorPaletteValues[index] === colorPaletteValues[colorPaletteValues.length - 1]) {
-                    rawText += `
-`;
-                }
-            }
-        }
-        if (useAutoCustomizeConfigStore.data.components?.roundness) {
-            const roundness = useAutoCustomizeConfigStore.data.components?.roundness / 8;
-            rawText += `
-
-  /* Component: Roundness */
-  --dodo-ui-element-roundness-1: ${0.4375 + roundness}em;
-  --dodo-ui-element-roundness-2: ${0.8125 + roundness}em;
-  --dodo-ui-element-roundness-3: ${1.9375 + roundness}em;`;
-        }
-        if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
-            const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
-            const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
-            rawText += `
-
-  /* Component: Size */
-  --dodo-ui-element-height-small: ${34 + elementHeight}px;
-  --dodo-ui-element-height-normal: ${40 + elementHeight}px;
-  --dodo-ui-element-height-large: ${50 + elementHeight}px;
-  --dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px;
-  --dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px;
-  --dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px;`;
-        }
-        if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
-            const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
-            rawText += `
-
-  /* Component: Border */
-  --dodo-ui-element-border-width: ${2 + borderWidth}px;`;
-        }
-        if (useAutoCustomizeConfigStore.data.space) {
-            const space = useAutoCustomizeConfigStore.data.space;
-            rawText += `
-
-  /* Space */
-  --dodo-ui-space-small: ${6 + space}px;
-  --dodo-ui-space: ${8 + space}px;
-  --dodo-ui-space-large: ${10 + space}px;`;
-        }
-        // end
-        rawText += `
-}`;
-        rawText += `
-
-.dodo-theme--dark {`;
-        for (let index = 0; index < colorPalette.length; index++) {
-            const colorName = colorPalette[index];
-            const fieldName = `${colorName}`;
-            const dataPoint = useAutoCustomizeConfigStore.data.colors &&
-                useAutoCustomizeConfigStore.data.colors[fieldName]
-                ? useAutoCustomizeConfigStore.data.colors[fieldName]
-                : undefined;
-            const defaultValue = autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
-                ? autoCustomizeConfigdefaultData.colors[fieldName]
-                : undefined;
-            const pass = dataPoint && dataPoint !== defaultValue ? true : false;
-            if (!pass) {
-                continue;
-            }
-            rawText += `
-
-  /* Dark: ${colorName} color */`;
-            const colorPaletteValuesReversed = [...colorPaletteValues].reverse();
-            for (let index = 0; index < colorPaletteValues.length; index++) {
-                const weight = colorPaletteValues[index];
-                const weightReversed = colorPaletteValuesReversed[index];
-                rawText += `
-  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weightReversed});`;
-            }
-            if (colorPaletteValuesReversed[index] ===
-                colorPaletteValuesReversed[colorPaletteValuesReversed.length - 1]) {
-                rawText += `
-`;
-            }
-        }
-        // end
-        rawText += `
-}`;
-        const data = new Blob([rawText], { type: 'text/plain' });
-        await downloadFile(`dodo-ui-custom.css`, data);
-    }
-    catch (e) {
-        console.error(e);
-    }
-}
-</script>
-
-<Button {onclick}>Export CSS</Button>
-
-<style></style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Export.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Export: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Export = InstanceType<typeof Export>;
-export default Export;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ValueSilder/ValueSilder.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">import FormControl from '../../../../../../components/Form/FormControl/FormControl.svelte';
-import RangeSlider from '../../../../../../components/Form/RangeSlider/RangeSlider.svelte';
-const { label, value, min, max, oninput } = $props();
-let displayValue = $state(0);
-function oninputMod(e) {
-    const target = e.target;
-    if (oninput) {
-        oninput(Number(target.value));
-    }
-}
-$effect(() => {
-    if (value === 0) {
-        displayValue = 1;
-    }
-    else if (value < 0) {
-        displayValue = value;
-    }
-    else {
-        displayValue = value + 1;
-    }
-});
-</script>
-
-<div class="ValueSilder">
-  <FormControl label={`${label} ${displayValue}x`}>
-    <RangeSlider {value} {min} {max} oninput={oninputMod} size="small" />
-  </FormControl>
-</div>
-
-<style>.ValueSilder {
-  margin-bottom: calc(var(--dodo-ui-space) * 2.5);
-}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ValueSilder/ValueSilder.svelte.d.ts

@@ -1,11 +0,0 @@
-interface ValueSilderProps {
-    label?: string;
-    value: number;
-    min: number;
-    max: number;
-    /** oninput event handler */
-    oninput?: (value: number) => void;
-}
-declare const ValueSilder: import("svelte").Component<ValueSilderProps, {}, "">;
-type ValueSilder = ReturnType<typeof ValueSilder>;
-export default ValueSilder;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte

@@ -1,192 +0,0 @@
-<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
-import RangeSlider from '../../../../../components/Form/RangeSlider/RangeSlider.svelte';
-import Column from '../../../../../components/Layout/Grid/Column/Column.svelte';
-import Grid from '../../../../../components/Layout/Grid/Grid.svelte';
-import Paper from '../../../../../components/Layout/Paper/Paper.svelte';
-import { colorPalette, colorPaletteValues, } from '../../../../philosophy/Colors/utils/color.js';
-import { useAutoCustomizeConfigStore, } from '../stores/config.svelte.js';
-let cssVariables = $state([]);
-$effect(() => {
-    const newCssvariables = [];
-    for (let index = 0; index < colorPalette.length; index++) {
-        const colorName = colorPalette[index];
-        const fieldName = `${colorName}`;
-        const dataPoint = useAutoCustomizeConfigStore.data.colors &&
-            useAutoCustomizeConfigStore.data.colors[fieldName]
-            ? useAutoCustomizeConfigStore.data.colors[fieldName]
-            : undefined;
-        if (dataPoint) {
-            for (let index = 0; index < colorPaletteValues.length; index++) {
-                const weight = colorPaletteValues[index];
-                newCssvariables.push(`--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight})`);
-            }
-            newCssvariables.push(...[
-                `--dodo-ui-Button-outline-${colorName}: var(--dodo-color-base-${dataPoint}-400)`,
-                `--dodo-ui-Button-text-${colorName}-bg: var(--dodo-color-base-${dataPoint}-100)`,
-                `--dodo-ui-Button-text-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-200)`,
-                `--dodo-ui-Button-text-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-300)`,
-                `--dodo-ui-Button-solid-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
-                `--dodo-ui-Button-solid-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
-                `--dodo-ui-Button-solid-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
-                `--dodo-ui-RangeSlider-thumb-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
-                `--dodo-ui-RangeSlider-thumb-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
-                `--dodo-ui-RangeSlider-thumb-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
-                `--dodo-ui-RangeSlider-track-filled-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
-            ]);
-        }
-    }
-    if (useAutoCustomizeConfigStore.data.components?.roundness) {
-        const roundness = useAutoCustomizeConfigStore.data.components.roundness / 8;
-        newCssvariables.push(`--dodo-ui-element-roundness-1: ${0.4375 + roundness}em`);
-        newCssvariables.push(`--dodo-ui-element-roundness-2: ${0.8125 + roundness}em`);
-        newCssvariables.push(`--dodo-ui-element-roundness-3: ${1.9375 + roundness}em`);
-    }
-    if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
-        const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
-        const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
-        newCssvariables.push(`--dodo-ui-element-height-small: ${34 + elementHeight}px`);
-        newCssvariables.push(`--dodo-ui-element-height-normal: ${40 + elementHeight}px`);
-        newCssvariables.push(`--dodo-ui-element-height-large: ${50 + elementHeight}px`);
-        newCssvariables.push(`--dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px`);
-        newCssvariables.push(`--dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px`);
-        newCssvariables.push(`--dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px`);
-    }
-    if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
-        const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
-        newCssvariables.push(`--dodo-ui-element-border-width: ${1 + borderWidth}px`);
-    }
-    if (useAutoCustomizeConfigStore.data.space) {
-        const space = useAutoCustomizeConfigStore.data.space;
-        newCssvariables.push(`--dodo-ui-space-small: ${6 + space}px`);
-        newCssvariables.push(`--dodo-ui-space: ${8 + space}px`);
-        newCssvariables.push(`--dodo-ui-space-large: ${10 + space}px`);
-    }
-    cssVariables = [...newCssvariables];
-});
-</script>
-
-<div class="Preview" style={cssVariables.join(';')}>
-  <div class="section">
-    <div class="column">
-      <Button>Primary</Button>
-    </div>
-    <div class="column">
-      <Button color="secondary">Secondary</Button>
-    </div>
-    <div class="column">
-      <Button color="neutral">Neutral</Button>
-    </div>
-    <div class="column">
-      <Button color="safe">Safe</Button>
-    </div>
-    <div class="column">
-      <Button color="warning">Warning</Button>
-    </div>
-    <div class="column">
-      <Button color="danger">Danger</Button>
-    </div>
-  </div>
-
-  <div class="section">
-    <div class="column">
-      <Button variant="text" outline>Primary</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="secondary">Secondary</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="neutral">Neutral</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="safe">Safe</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="warning">Warning</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="danger">Danger</Button>
-    </div>
-  </div>
-
-  <div class="section">
-    <div class="column">
-      <Paper shadow={1} width="150px" height="180px">
-        <div style="padding: var(--dodo-ui-space)">Hola!</div>
-      </Paper>
-    </div>
-    <div class="column">
-      <RangeSlider value={50} min={20} max={70} />
-    </div>
-  </div>
-
-  <div class="section">
-    <Grid class="GridSection">
-      <Column md={6}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={6}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={4}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={3}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={2}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={3}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-    </Grid>
-  </div>
-</div>
-
-<style>:global(:root) {
-  --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-100);
-}
-
-:global(.dodo-theme--dark) {
-  --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-800);
-}
-
-.Preview {
-  background-color: var(--AutoCustomize-Preview-bgColor);
-  padding: calc(var(--dodo-ui-space) * 2);
-  border-radius: var(--dodo-ui-element-roundness-2);
-  width: 100%;
-}
-@media (min-width: 64rem) {
-  .Preview {
-    flex: 1;
-    width: initial;
-    height: calc(100vh - 130px);
-    overflow: auto;
-  }
-}
-.Preview .section {
-  width: 100%;
-  margin: var(--dodo-ui-space) 0;
-  display: flex;
-  flex-wrap: wrap;
-}
-.Preview .column {
-  margin: 4px;
-  display: inline-flex;
-}
-.Preview :global(.GridSection) {
-  width: 100%;
-}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Preview: import("svelte").Component<Record<string, never>, {}, "">;
-type Preview = ReturnType<typeof Preview>;
-export default Preview;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.stories.svelte

@@ -1,9 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Tool from './Tool.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Tool,
-});
-</script>
-
-<Story name="Main" />