@ersbeth/picokit 0.0.1

package/dist/components.jsx

@@ -0,0 +1,1051 @@
+import { Mail, Phone, MapPin, Menu, X, ChevronLeft, ChevronRight } from 'lucide-solid';
+import { Show, For, splitProps, Match, Switch, createSignal, onMount } from 'solid-js';
+import { Dialog } from '@kobalte/core/dialog';
+import { A } from '@solidjs/router';
+import * as ButtonPrimitive from '@kobalte/core/button';
+import AutoPlay from 'embla-carousel-autoplay';
+import createEmblaCarousel from 'embla-carousel-solid';
+
+var AlignMixin;
+(function (AlignMixin) {
+    /* CSS CLASSES */
+    const ALIGN = "align";
+    const MIXIN = "mixin";
+    const ALIGN_MIXIN = `${ALIGN}-${MIXIN}`;
+    const ALIGNS = {
+        start: `${ALIGN}-start`,
+        center: `${ALIGN}-center`,
+        end: `${ALIGN}-end`,
+        stretch: `${ALIGN}-stretch`,
+    };
+    /* CLASS GENERATOR */
+    function classes(props) {
+        const classes = [ALIGN_MIXIN];
+        if (props.align)
+            classes.push(ALIGNS[props.align]);
+        return classes.join(" ");
+    }
+    AlignMixin.classes = classes;
+})(AlignMixin || (AlignMixin = {}));
+
+var GapMixin;
+(function (GapMixin) {
+    /* CSS CLASSES */
+    const GAP = "gap";
+    const MIXIN = "mixin";
+    const GAP_MIXIN = `${GAP}-${MIXIN}`;
+    const GAPS = {
+        none: `${GAP}-none`,
+        "3xsmall": `${GAP}-3xsmall`,
+        "2xsmall": `${GAP}-2xsmall`,
+        xsmall: `${GAP}-xsmall`,
+        small: `${GAP}-small`,
+        medium: `${GAP}-medium`,
+        large: `${GAP}-large`,
+        xlarge: `${GAP}-xlarge`,
+        "2xlarge": `${GAP}-2xlarge`,
+        "3xlarge": `${GAP}-3xlarge`,
+        "4xlarge": `${GAP}-4xlarge`,
+    };
+    /* CLASS GENERATOR */
+    function classes(props) {
+        const classes = [GAP_MIXIN];
+        if (props.gap)
+            classes.push(GAPS[props.gap]);
+        return classes.join(" ");
+    }
+    GapMixin.classes = classes;
+})(GapMixin || (GapMixin = {}));
+
+var HeightMixin;
+(function (HeightMixin) {
+    /* CSS CLASSES */
+    const HEIGHT = "height";
+    const MIN_HEIGHT = "min-height";
+    const MIXIN = "mixin";
+    const HEIGHT_MIXIN = `${HEIGHT}-${MIXIN}`;
+    const HEIGHTS = {
+        full: `${HEIGHT}-full`,
+        large: `${HEIGHT}-large`,
+        medium: `${HEIGHT}-medium`,
+        small: `${HEIGHT}-small`,
+    };
+    const MIN_HEIGHTS = {
+        full: `${MIN_HEIGHT}-full`,
+        large: `${MIN_HEIGHT}-large`,
+        medium: `${MIN_HEIGHT}-medium`,
+        small: `${MIN_HEIGHT}-small`,
+    };
+    /* CLASS GENERATOR */
+    function classes(props) {
+        const classes = [HEIGHT_MIXIN];
+        if (props.height)
+            classes.push(HEIGHTS[props.height]);
+        if (props.minHeight)
+            classes.push(MIN_HEIGHTS[props.minHeight]);
+        return classes.join(" ");
+    }
+    HeightMixin.classes = classes;
+})(HeightMixin || (HeightMixin = {}));
+
+var PaddingMixin;
+(function (PaddingMixin) {
+    /* CSS CLASSES */
+    const PADDING = "padding";
+    const PADDING_BLOCK = "padding-block";
+    const PADDING_INLINE = "padding-inline";
+    const PADDING_TOP = "padding-top";
+    const PADDING_RIGHT = "padding-right";
+    const PADDING_BOTTOM = "padding-bottom";
+    const PADDING_LEFT = "padding-left";
+    const PADDINGS = {
+        "3xsmall": `${PADDING}-3xsmall`,
+        "2xsmall": `${PADDING}-2xsmall`,
+        xsmall: `${PADDING}-xsmall`,
+        small: `${PADDING}-small`,
+        medium: `${PADDING}-medium`,
+        large: `${PADDING}-large`,
+        xlarge: `${PADDING}-xlarge`,
+        "2xlarge": `${PADDING}-2xlarge`,
+        "3xlarge": `${PADDING}-3xlarge`,
+        "4xlarge": `${PADDING}-4xlarge`,
+    };
+    const PADDING_BLOCKS = {
+        "3xsmall": `${PADDING_BLOCK}-3xsmall`,
+        "2xsmall": `${PADDING_BLOCK}-2xsmall`,
+        xsmall: `${PADDING_BLOCK}-xsmall`,
+        small: `${PADDING_BLOCK}-small`,
+        medium: `${PADDING_BLOCK}-medium`,
+        large: `${PADDING_BLOCK}-large`,
+        xlarge: `${PADDING_BLOCK}-xlarge`,
+        "2xlarge": `${PADDING_BLOCK}-2xlarge`,
+        "3xlarge": `${PADDING_BLOCK}-3xlarge`,
+        "4xlarge": `${PADDING_BLOCK}-4xlarge`,
+    };
+    const PADDING_INLINES = {
+        "3xsmall": `${PADDING_INLINE}-3xsmall`,
+        "2xsmall": `${PADDING_INLINE}-2xsmall`,
+        xsmall: `${PADDING_INLINE}-xsmall`,
+        small: `${PADDING_INLINE}-small`,
+        medium: `${PADDING_INLINE}-medium`,
+        large: `${PADDING_INLINE}-large`,
+        xlarge: `${PADDING_INLINE}-xlarge`,
+        "2xlarge": `${PADDING_INLINE}-2xlarge`,
+        "3xlarge": `${PADDING_INLINE}-3xlarge`,
+        "4xlarge": `${PADDING_INLINE}-4xlarge`,
+    };
+    const PADDING_TOPS = {
+        "3xsmall": `${PADDING_TOP}-3xsmall`,
+        "2xsmall": `${PADDING_TOP}-2xsmall`,
+        xsmall: `${PADDING_TOP}-xsmall`,
+        small: `${PADDING_TOP}-small`,
+        medium: `${PADDING_TOP}-medium`,
+        large: `${PADDING_TOP}-large`,
+        xlarge: `${PADDING_TOP}-xlarge`,
+        "2xlarge": `${PADDING_TOP}-2xlarge`,
+        "3xlarge": `${PADDING_TOP}-3xlarge`,
+        "4xlarge": `${PADDING_TOP}-4xlarge`,
+    };
+    const PADDING_BOTTOMS = {
+        "3xsmall": `${PADDING_BOTTOM}-3xsmall`,
+        "2xsmall": `${PADDING_BOTTOM}-2xsmall`,
+        xsmall: `${PADDING_BOTTOM}-xsmall`,
+        small: `${PADDING_BOTTOM}-small`,
+        medium: `${PADDING_BOTTOM}-medium`,
+        large: `${PADDING_BOTTOM}-large`,
+        xlarge: `${PADDING_BOTTOM}-xlarge`,
+        "2xlarge": `${PADDING_BOTTOM}-2xlarge`,
+        "3xlarge": `${PADDING_BOTTOM}-3xlarge`,
+        "4xlarge": `${PADDING_BOTTOM}-4xlarge`,
+    };
+    const PADDING_LEFTS = {
+        "3xsmall": `${PADDING_LEFT}-3xsmall`,
+        "2xsmall": `${PADDING_LEFT}-2xsmall`,
+        xsmall: `${PADDING_LEFT}-xsmall`,
+        small: `${PADDING_LEFT}-small`,
+        medium: `${PADDING_LEFT}-medium`,
+        large: `${PADDING_LEFT}-large`,
+        xlarge: `${PADDING_LEFT}-xlarge`,
+        "2xlarge": `${PADDING_LEFT}-2xlarge`,
+        "3xlarge": `${PADDING_LEFT}-3xlarge`,
+        "4xlarge": `${PADDING_LEFT}-4xlarge`,
+    };
+    const PADDING_RIGHTS = {
+        "3xsmall": `${PADDING_RIGHT}-3xsmall`,
+        "2xsmall": `${PADDING_RIGHT}-2xsmall`,
+        xsmall: `${PADDING_RIGHT}-xsmall`,
+        small: `${PADDING_RIGHT}-small`,
+        medium: `${PADDING_RIGHT}-medium`,
+        large: `${PADDING_RIGHT}-large`,
+        xlarge: `${PADDING_RIGHT}-xlarge`,
+        "2xlarge": `${PADDING_RIGHT}-2xlarge`,
+        "3xlarge": `${PADDING_RIGHT}-3xlarge`,
+        "4xlarge": `${PADDING_RIGHT}-4xlarge`,
+    };
+    /* CLASS GENERATOR */
+    function classes(props) {
+        const paddings = [];
+        if (props.padding)
+            paddings.push(PADDINGS[props.padding]);
+        if (props.paddingBlock)
+            paddings.push(PADDING_BLOCKS[props.paddingBlock]);
+        if (props.paddingInline)
+            paddings.push(PADDING_INLINES[props.paddingInline]);
+        if (props.paddingTop)
+            paddings.push(PADDING_TOPS[props.paddingTop]);
+        if (props.paddingBottom)
+            paddings.push(PADDING_BOTTOMS[props.paddingBottom]);
+        if (props.paddingLeft)
+            paddings.push(PADDING_LEFTS[props.paddingLeft]);
+        if (props.paddingRight)
+            paddings.push(PADDING_RIGHTS[props.paddingRight]);
+        return paddings.join(" ");
+    }
+    PaddingMixin.classes = classes;
+})(PaddingMixin || (PaddingMixin = {}));
+
+var PanelMixin;
+(function (PanelMixin) {
+    /* CSS CLASSES */
+    const PANEL = "panel";
+    const COLOR = "color";
+    const INTENSITY = "intensity";
+    const BORDER = "border";
+    const RADIUS = "radius";
+    const COLORS = {
+        neutral: `${PANEL}-${COLOR}-neutral`,
+        brand: `${PANEL}-${COLOR}-brand`,
+        accent: `${PANEL}-${COLOR}-accent`,
+        danger: `${PANEL}-${COLOR}-danger`,
+    };
+    const INTENSITIES = {
+        transparent: `${PANEL}-${INTENSITY}-transparent`,
+        clear: `${PANEL}-${INTENSITY}-clear`,
+        subtle: `${PANEL}-${INTENSITY}-subtle`,
+        soft: `${PANEL}-${INTENSITY}-soft`,
+        muted: `${PANEL}-${INTENSITY}-muted`,
+        base: `${PANEL}-${INTENSITY}-base`,
+        strong: `${PANEL}-${INTENSITY}-strong`,
+        deep: `${PANEL}-${INTENSITY}-deep`,
+    };
+    const BORDERS = {
+        all: `${PANEL}-${BORDER}-all`,
+        block: `${PANEL}-${BORDER}-block`,
+        inline: `${PANEL}-${BORDER}-inline`,
+        top: `${PANEL}-${BORDER}-top`,
+        bottom: `${PANEL}-${BORDER}-bottom`,
+        left: `${PANEL}-${BORDER}-left`,
+        right: `${PANEL}-${BORDER}-right`,
+    };
+    const RADII = {
+        all: `${PANEL}-${RADIUS}-all`,
+        top: `${PANEL}-${RADIUS}-top`,
+        bottom: `${PANEL}-${RADIUS}-bottom`,
+        left: `${PANEL}-${RADIUS}-left`,
+        right: `${PANEL}-${RADIUS}-right`,
+        topLeft: `${PANEL}-${RADIUS}-top-left`,
+        topRight: `${PANEL}-${RADIUS}-top-right`,
+        bottomLeft: `${PANEL}-${RADIUS}-bottom-left`,
+        bottomRight: `${PANEL}-${RADIUS}-bottom-right`,
+    };
+    /* CLASS GENERATOR */
+    function color(color) {
+        return COLORS[color ?? "neutral"];
+    }
+    function intensity(intensity) {
+        return INTENSITIES[intensity ?? "transparent"];
+    }
+    function borders(border) {
+        const borders = border !== undefined ? (Array.isArray(border) ? border : [border]) : [];
+        return borders.map((border) => BORDERS[border]).join(" ");
+    }
+    function radii(radius) {
+        const radii = radius !== undefined ? (Array.isArray(radius) ? radius : [radius]) : [];
+        return radii.map((radius) => RADII[radius]).join(" ");
+    }
+    function classes(props) {
+        return `${PANEL} ${color(props.panelColor)} ${intensity(props.panelIntensity)} ${borders(props.panelBorder)} ${radii(props.panelRadius)}`;
+    }
+    PanelMixin.classes = classes;
+})(PanelMixin || (PanelMixin = {}));
+
+var StyleMixin;
+(function (StyleMixin) {
+    /* PROPS */
+    /* CLASS GENERATOR */
+    function classes(props) {
+        return `${props.class ?? ""}`;
+    }
+    StyleMixin.classes = classes;
+})(StyleMixin || (StyleMixin = {}));
+
+var TextMixin;
+(function (TextMixin) {
+    /* CSS CLASSES */
+    const TEXT = "text";
+    const ALIGN = "align";
+    const COLOR = "color";
+    const INTENSITY = "intensity";
+    const FAMILY = "family";
+    const WEIGHT = "weight";
+    const SIZE = "size";
+    const LINE = "line";
+    const MIXIN = "mixin";
+    const TEXT_MIXIN = `${TEXT}-${MIXIN}`;
+    const COLORS = {
+        neutral: `${TEXT}-${COLOR}-neutral`,
+        brand: `${TEXT}-${COLOR}-brand`,
+        accent: `${TEXT}-${COLOR}-accent`,
+        danger: `${TEXT}-${COLOR}-danger`,
+    };
+    const INTENSITIES = {
+        subtle: `${TEXT}-${INTENSITY}-subtle`,
+        soft: `${TEXT}-${INTENSITY}-soft`,
+        muted: `${TEXT}-${INTENSITY}-muted`,
+        base: `${TEXT}-${INTENSITY}-base`,
+        strong: `${TEXT}-${INTENSITY}-strong`,
+        deep: `${TEXT}-${INTENSITY}-deep`,
+        inverted: `${TEXT}-${INTENSITY}-inverted`,
+    };
+    const ALIGNS = {
+        left: `${TEXT}-${ALIGN}-left`,
+        center: `${TEXT}-${ALIGN}-center`,
+        right: `${TEXT}-${ALIGN}-right`,
+        stretch: `${TEXT}-${ALIGN}-stretch`,
+    };
+    const FAMILIES = {
+        body: `${TEXT}-${FAMILY}-body`,
+        heading: `${TEXT}-${FAMILY}-heading`,
+        code: `${TEXT}-${FAMILY}-code`,
+        longform: `${TEXT}-${FAMILY}-longform`,
+        tagline: `${TEXT}-${FAMILY}-tagline`,
+        action: `${TEXT}-${FAMILY}-action`,
+    };
+    const WEIGHTS = {
+        light: `${TEXT}-${WEIGHT}-light`,
+        normal: `${TEXT}-${WEIGHT}-normal`,
+        semibold: `${TEXT}-${WEIGHT}-semibold`,
+        bold: `${TEXT}-${WEIGHT}-bold`,
+    };
+    const SIZES = {
+        "2xsmall": `${TEXT}-${SIZE}-2xs`,
+        xsmall: `${TEXT}-${SIZE}-xs`,
+        small: `${TEXT}-${SIZE}-s`,
+        medium: `${TEXT}-${SIZE}-m`,
+        large: `${TEXT}-${SIZE}-l`,
+        xlarge: `${TEXT}-${SIZE}-xl`,
+        "2xlarge": `${TEXT}-${SIZE}-2xl`,
+        "3xlarge": `${TEXT}-${SIZE}-3xl`,
+        "4xlarge": `${TEXT}-${SIZE}-4xl`,
+    };
+    const LINES = {
+        condensed: `${TEXT}-${LINE}-condensed`,
+        normal: `${TEXT}-${LINE}-normal`,
+        expanded: `${TEXT}-${LINE}-expanded`,
+    };
+    /* CLASS GENERATOR */
+    function classes(props) {
+        const classes = [TEXT_MIXIN];
+        if (props.textColor)
+            classes.push(COLORS[props.textColor]);
+        if (props.textIntensity)
+            classes.push(INTENSITIES[props.textIntensity]);
+        if (props.textAlign)
+            classes.push(ALIGNS[props.textAlign]);
+        if (props.textFamily)
+            classes.push(FAMILIES[props.textFamily]);
+        if (props.textWeight)
+            classes.push(WEIGHTS[props.textWeight]);
+        if (props.textSize)
+            classes.push(SIZES[props.textSize]);
+        if (props.textLine)
+            classes.push(LINES[props.textLine]);
+        return classes.join(" ");
+    }
+    TextMixin.classes = classes;
+})(TextMixin || (TextMixin = {}));
+
+var WidthMixin;
+(function (WidthMixin) {
+    /* CSS CLASSES */
+    const WIDTH = "width";
+    const MAX_WIDTH = "max-width";
+    const MIXIN = "mixin";
+    const WIDTH_MIXIN = `${WIDTH}-${MIXIN}`;
+    const WIDTHS = {
+        xsmall: `${WIDTH}-xsmall`,
+        small: `${WIDTH}-small`,
+        medium: `${WIDTH}-medium`,
+        large: `${WIDTH}-large`,
+        xlarge: `${WIDTH}-xlarge`,
+        "2xlarge": `${WIDTH}-2xlarge`,
+    };
+    const MAX_WIDTHS = {
+        xsmall: `${MAX_WIDTH}-xsmall`,
+        small: `${MAX_WIDTH}-small`,
+        medium: `${MAX_WIDTH}-medium`,
+        large: `${MAX_WIDTH}-large`,
+        xlarge: `${MAX_WIDTH}-xlarge`,
+        "2xlarge": `${MAX_WIDTH}-2xlarge`,
+    };
+    /* CLASS GENERATOR */
+    function classes(props) {
+        const classes = [WIDTH_MIXIN];
+        if (props.width)
+            classes.push(WIDTHS[props.width]);
+        if (props.maxWidth)
+            classes.push(MAX_WIDTHS[props.maxWidth]);
+        return classes.join(" ");
+    }
+    WidthMixin.classes = classes;
+})(WidthMixin || (WidthMixin = {}));
+
+/* CSS CLASSES */
+const CLUSTER = "cluster";
+/* CLASS GENERATOR */
+/* LIST */
+const Cluster = (props) => {
+    const mixins = () => [
+        PanelMixin.classes(props),
+        WidthMixin.classes(props),
+        HeightMixin.classes(props),
+        PaddingMixin.classes(props),
+        GapMixin.classes(props),
+        TextMixin.classes(props),
+        AlignMixin.classes(props),
+        StyleMixin.classes(props),
+    ].join(" ");
+    return (<div class={`${CLUSTER} ${mixins()}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+
+/* CSS CLASSES */
+const CONTAINER = "container";
+/* CONTAINER */
+const Container = (props) => {
+    const mixins = () => [
+        PanelMixin.classes(props),
+        PaddingMixin.classes(props),
+        WidthMixin.classes(props),
+        HeightMixin.classes(props),
+        TextMixin.classes(props),
+        StyleMixin.classes(props),
+    ].join(" ");
+    return (<div class={`${CONTAINER} ${mixins()}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+
+/* CLASSES */
+const DUAL = "dual";
+const SPLIT = "split";
+const SPLITS = {
+    left: `${DUAL}-${SPLIT}-left`,
+    middle: `${DUAL}-${SPLIT}-middle`,
+    right: `${DUAL}-${SPLIT}-right`,
+};
+/* COMPONENT */
+const Dual = (props) => {
+    const mixins = () => [
+        PanelMixin.classes(props),
+        PaddingMixin.classes(props),
+        GapMixin.classes(props),
+        WidthMixin.classes(props),
+        HeightMixin.classes(props),
+        AlignMixin.classes(props),
+        TextMixin.classes(props),
+        StyleMixin.classes(props),
+    ].join(" ");
+    return (<div class={`${DUAL} ${SPLITS[props.split]} ${mixins()}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+
+/* CSS CLASSES */
+const STACK = "stack";
+/* STACK */
+const Stack = (props) => {
+    const mixins = () => [
+        PanelMixin.classes(props),
+        PaddingMixin.classes(props),
+        GapMixin.classes(props),
+        WidthMixin.classes(props),
+        HeightMixin.classes(props),
+        AlignMixin.classes(props),
+        TextMixin.classes(props),
+        StyleMixin.classes(props),
+    ].join(" ");
+    return (<div class={`${STACK} ${mixins()}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+
+/* CSS CLASSES */
+const SCOPE$3 = "footer";
+const PARTS$7 = {
+    blocks: "blocks",
+    contact: "contact",
+    networks: "networks",
+    legal: "legal",
+    map: "map",
+    copyright: "copyright",
+    title: "title",
+    description: "description",
+    items: "items",
+};
+const Footer = (props) => {
+    return (<footer class={`${SCOPE$3} ${props.class ?? ""}`} style={props.style}>
+            <Container panelColor={props.panelColor} panelIntensity={props.panelIntensity} padding="xlarge" panelBorder="bottom">
+                <div class={`${SCOPE$3}-${PARTS$7.blocks}`}>
+                    <Show when={props.map}>
+                        {(map) => (<div class={`${SCOPE$3}-${PARTS$7.map}`}>
+                                <h2 class={`${SCOPE$3}-${PARTS$7.title}`}>{map().title}</h2>
+                                <iframe src={map().url} title={map().title} allowfullscreen={true} loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                            </div>)}
+                    </Show>
+
+                    <div class={`${SCOPE$3}-${PARTS$7.contact}`}>
+                        <h2 class={`${SCOPE$3}-${PARTS$7.title}`}>{props.contact.title}</h2>
+                        <p class={`${SCOPE$3}-${PARTS$7.description}`}>{props.contact.description}</p>
+                        <div>
+                            <Show when={props.contact.email}>
+                                {(email) => (<>
+                                        <Mail />
+                                        <p>{email()}</p>
+                                    </>)}
+                            </Show>
+
+                            <Show when={props.contact.phone}>
+                                {(phone) => (<>
+                                        <Phone />
+                                        <p>{phone()}</p>
+                                    </>)}
+                            </Show>
+
+                            <Show when={props.contact.address}>
+                                {(address) => (<>
+                                        <MapPin />
+                                        <p>{address()}</p>
+                                    </>)}
+                            </Show>
+                        </div>
+                    </div>
+
+                    <Show when={props.networks}>
+                        {(networks) => (<div class={`${SCOPE$3}-${PARTS$7.networks}`}>
+                                <h2 class={`${SCOPE$3}-${PARTS$7.title}`}>{networks().title}</h2>
+                                <div class={`${SCOPE$3}-${PARTS$7.items}`}>
+                                    <For each={networks().items}>{(item) => <a href={item.url}>{item.name}</a>}</For>
+                                </div>
+                            </div>)}
+                    </Show>
+
+                    <div class={`${SCOPE$3}-${PARTS$7.legal}`}>
+                        <h2 class={`${SCOPE$3}-${PARTS$7.title}`}>{props.legal.title}</h2>
+                        <div class={`${SCOPE$3}-${PARTS$7.items}`}>
+                            <For each={props.legal.items}>{(item) => <a href={item.url}>{item.name}</a>}</For>
+                        </div>
+                    </div>
+                </div>
+            </Container>
+            <Container padding="large" panelColor={props.panelColor} panelIntensity={props.panelIntensity}>
+                <Stack align="center" maxWidth="large">
+                    <p class={`${SCOPE$3}-${PARTS$7.copyright}`}>{props.copyright}</p>
+                </Stack>
+            </Container>
+        </footer>);
+};
+
+/* CSS CLASSES */
+const BUTTON = "button";
+const VARIANT = "variant";
+const COLOR = "color";
+const SIZE = "size";
+const VARIANTS$1 = {
+    default: `${BUTTON}-${VARIANT}-default`,
+    solid: `${BUTTON}-${VARIANT}-solid`,
+    outline: `${BUTTON}-${VARIANT}-outline`,
+    ghost: `${BUTTON}-${VARIANT}-ghost`,
+};
+const COLORS = {
+    brand: `${BUTTON}-${COLOR}-brand`,
+    accent: `${BUTTON}-${COLOR}-accent`,
+    neutral: `${BUTTON}-${COLOR}-neutral`,
+    danger: `${BUTTON}-${COLOR}-danger`,
+};
+const SIZES = {
+    small: `${BUTTON}-${SIZE}-small`,
+    medium: `${BUTTON}-${SIZE}-medium`,
+    large: `${BUTTON}-${SIZE}-large`,
+};
+function Button(props) {
+    const [local, others] = splitProps(props, ["variant", "color", "size"]);
+    const color = () => local.color ?? "neutral";
+    const variant = () => local.variant ?? "default";
+    const size = () => local.size ?? "medium";
+    return (<ButtonPrimitive.Root class={`${BUTTON} ${COLORS[color()]} ${VARIANTS$1[variant()]} ${SIZES[size()]}`} {...others}/>);
+}
+
+/* CSS CLASSES */
+const SCOPE$2 = "navigation";
+const PARTS$6 = {
+    bar: "bar",
+    brand: "brand",
+    menu: "menu",
+    cta: "cta",
+    link: "link",
+    sheet: "sheet",
+    trigger: "trigger",
+    overlay: "overlay",
+    portal: "portal",
+    content: "content",
+    header: "header",
+    close: "close",
+};
+const STATES = {
+    current: "current",
+};
+/* NAVIGATION ROOT */
+const NavigationRoot = (props) => {
+    return (<nav class={`${SCOPE$2} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </nav>);
+};
+/* NAVIGATION BAR */
+const NavigationBar = (props) => {
+    return (<div class={`${SCOPE$2}-${PARTS$6.bar} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+/* ---- NAVIGATION BAR BRAND */
+const NavigationBarBrand = (props) => {
+    return (<A href="/" style={{ display: "contents" }}>
+            <div class={`${SCOPE$2}-${PARTS$6.bar}-${PARTS$6.brand} ${props.class ?? ""}`} style={props.style}>
+                {props.children}
+            </div>
+        </A>);
+};
+/* ---- NAVIGATION BAR MENU */
+const NavigationBarMenu = (props) => {
+    return (<div class={`${SCOPE$2}-${PARTS$6.bar}-${PARTS$6.menu} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+const NavigationBarMenuLink = (props) => {
+    const [_, anchorProps] = splitProps(props, ["class", "style", "children"]);
+    return (<A class={`${SCOPE$2}-${PARTS$6.bar}-${PARTS$6.menu}-${PARTS$6.link} ${props.class ?? ""}`} style={props.style} activeClass={STATES.current} end={true} {...anchorProps}>
+            {props.children}
+        </A>);
+};
+/* ---- NAVIGATION BAR CTA */
+const NavigationBarCTA = (props) => {
+    return (<div class={`${SCOPE$2}-${PARTS$6.bar}-${PARTS$6.cta} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+const NavigationBarCTALink = (props) => {
+    const [_, anchorProps] = splitProps(props, ["class", "style", "children", "variant"]);
+    return (<A end={true} {...anchorProps}>
+            <Button size="small" variant={props.variant === "primary" ? "solid" : "default"} color="neutral">
+                {props.children}
+            </Button>
+        </A>);
+};
+/* NAVIGATION SHEET */
+const NavigationSheet = (props) => {
+    return <Dialog {...props}/>;
+};
+/* ---- NAVIGATION SHEET TRIGGER */
+const NavigationSheetTrigger = (props) => {
+    const [_, dialogTriggerProps] = splitProps(props, ["class", "style", "children"]);
+    return (<Dialog.Trigger class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.trigger} ${props.class ?? ""}`} style={props.style} {...dialogTriggerProps}>
+            {props.children}
+        </Dialog.Trigger>);
+};
+/* ---- NAVIGATION SHEET PORTAL */
+const NavigationSheetPortal = (props) => {
+    const [_, dialogPortalProps] = splitProps(props, ["class", "style", "children"]);
+    return (<Dialog.Portal {...dialogPortalProps}>
+            <div class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.portal} ${props.class ?? ""}`} style={props.style}>
+                {props.children}
+            </div>
+        </Dialog.Portal>);
+};
+/* ---- NAVIGATION SHEET OVERLAY */
+const NavigationSheetOverlay = (props) => {
+    const [_, dialogOverlayProps] = splitProps(props, ["class", "style", "children"]);
+    return (<Dialog.Overlay class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.overlay} ${props.class ?? ""}`} style={props.style} {...dialogOverlayProps}>
+            {props.children}
+        </Dialog.Overlay>);
+};
+/* ---- NAVIGATION SHEET CONTENT */
+const NavigationSheetContent = (props) => {
+    const [_, dialogContentProps] = splitProps(props, ["class", "style", "children"]);
+    return (<Dialog.Content class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.content} ${props.class ?? ""}`} style={props.style} {...dialogContentProps}>
+            {props.children}
+        </Dialog.Content>);
+};
+/* ---- NAVIGATION SHEET HEADER */
+const NavigationSheetHeader = (props) => {
+    return (<div class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.header} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+/* ---- NAVIGATION SHEET BRAND */
+const NavigationSheetBrand = (props) => {
+    return (<div class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.brand} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+/* ---- NAVIGATION SHEET CLOSE */
+const NavigationSheetClose = (props) => {
+    const [_, dialogCloseButtonProps] = splitProps(props, ["class", "style", "children"]);
+    return (<Dialog.CloseButton class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.close} ${props.class ?? ""}`} style={props.style} {...dialogCloseButtonProps}>
+            {props.children}
+        </Dialog.CloseButton>);
+};
+/* ---- NAVIGATION SHEET MENU */
+const NavigationSheetMenu = (props) => {
+    return (<div class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.menu} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+const NavigationSheetMenuLink = (props) => {
+    const [_, anchorProps] = splitProps(props, ["class", "style", "children"]);
+    return (<Dialog.CloseButton style={{ display: "contents" }}>
+            <A class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.menu}-${PARTS$6.link} ${props.class ?? ""}`} style={props.style} activeClass={STATES.current} end={true} {...anchorProps}>
+                {props.children}
+            </A>
+        </Dialog.CloseButton>);
+};
+/* ---- NAVIGATION SHEET CTA */
+const NavigationSheetCTA = (props) => {
+    return (<div class={`${SCOPE$2}-${PARTS$6.sheet}-${PARTS$6.cta} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+const NavigationSheetCTALink = (props) => {
+    const [_, anchorProps] = splitProps(props, ["class", "style", "children", "variant"]);
+    return (<Dialog.CloseButton style={{ display: "contents" }}>
+            <A end={true} {...anchorProps} style={{ display: "contents" }}>
+                <Button variant={props.variant === "primary" ? "solid" : "default"} color="neutral">
+                    {props.children}
+                </Button>
+            </A>
+        </Dialog.CloseButton>);
+};
+/* NAVIGATION */
+const Navigation = (props) => {
+    return (<NavigationRoot>
+            <NavigationBar>
+                <NavigationBarBrand>{props.brand}</NavigationBarBrand>
+                <NavigationBarMenu>
+                    <For each={props.links}>
+                        {(link) => <NavigationBarMenuLink {...link}>{link.label}</NavigationBarMenuLink>}
+                    </For>
+                </NavigationBarMenu>
+
+                <Show when={props.cta}>
+                    {(cta) => (<NavigationBarCTA>
+                            <Show when={cta().secondary}>
+                                {(secondary) => (<NavigationBarCTALink variant="secondary" {...secondary()}>
+                                        {secondary().label}
+                                    </NavigationBarCTALink>)}
+                            </Show>
+                            <NavigationBarCTALink variant="primary" {...cta().primary}>
+                                {cta().primary.label}
+                            </NavigationBarCTALink>
+                        </NavigationBarCTA>)}
+                </Show>
+
+                <NavigationSheet>
+                    <NavigationSheetTrigger>
+                        <Menu />
+                    </NavigationSheetTrigger>
+
+                    <NavigationSheetPortal>
+                        <NavigationSheetOverlay />
+                        <NavigationSheetContent>
+                            <NavigationSheetHeader>
+                                <NavigationSheetBrand>{props.brand}</NavigationSheetBrand>
+                                <NavigationSheetClose>
+                                    <X />
+                                </NavigationSheetClose>
+                            </NavigationSheetHeader>
+
+                            <NavigationSheetMenu>
+                                <For each={props.links}>
+                                    {(link) => (<NavigationSheetMenuLink {...link}>{link.label}</NavigationSheetMenuLink>)}
+                                </For>
+                            </NavigationSheetMenu>
+
+                            <Show when={props.cta}>
+                                {(cta) => (<NavigationSheetCTA>
+                                        <Show when={cta().secondary}>
+                                            {(secondary) => (<NavigationSheetCTALink variant="secondary" {...secondary()}>
+                                                    {secondary().label}
+                                                </NavigationSheetCTALink>)}
+                                        </Show>
+                                        <NavigationSheetCTALink variant="primary" {...cta().primary}>
+                                            {cta().primary.label}
+                                        </NavigationSheetCTALink>
+                                    </NavigationSheetCTA>)}
+                            </Show>
+                        </NavigationSheetContent>
+                    </NavigationSheetPortal>
+                </NavigationSheet>
+            </NavigationBar>
+        </NavigationRoot>);
+};
+
+/* CLASSES */
+const SCOPE$1 = "page";
+const PARTS$5 = {
+    header: "header",
+    footer: "footer",
+    main: "main",
+};
+const Page = (props) => {
+    return (<div class={`${SCOPE$1} ${props.class ?? ""}`} style={props.style}>
+            <div class={`${SCOPE$1}-${PARTS$5.header}`}>{props.header}</div>
+
+            <main class={`${SCOPE$1}-${PARTS$5.main}`}>{props.children}</main>
+
+            <div class={`${SCOPE$1}-${PARTS$5.footer}`}>{props.footer}</div>
+        </div>);
+};
+
+const P = (props) => {
+    const mixins = () => `${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<p class={mixins()} style={props.style}>
+            {props.children}
+        </p>);
+};
+const H1 = (props) => {
+    const mixins = () => `${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<h1 class={mixins()} style={props.style}>
+            {props.children}
+        </h1>);
+};
+const H2 = (props) => {
+    const mixins = () => `${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<h2 class={mixins()} style={props.style}>
+            {props.children}
+        </h2>);
+};
+const H3 = (props) => {
+    const mixins = () => `${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<h3 class={mixins()} style={props.style}>
+            {props.children}
+        </h3>);
+};
+const H4 = (props) => {
+    const mixins = () => `${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<h4 class={mixins()} style={props.style}>
+            {props.children}
+        </h4>);
+};
+const H5 = (props) => {
+    const mixins = () => `${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<h5 class={mixins()} style={props.style}>
+            {props.children}
+        </h5>);
+};
+const H6 = (props) => {
+    const mixins = () => `${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<h6 class={mixins()} style={props.style}>
+            {props.children}
+        </h6>);
+};
+
+/* CLASSES */
+const SECTION = "section";
+const PARTS$4 = {
+    root: SECTION,
+    title: `${SECTION}-title`,
+    description: `${SECTION}-description`,
+    tagline: `${SECTION}-tagline`,
+};
+const VARIANTS = {
+    hero: "hero",
+};
+/* CLASS GENERATOR */
+function heroClass(props) {
+    return props.hero ? VARIANTS.hero : "";
+}
+/* SECTION TITLE */
+const SectionTitle = (props) => {
+    return (<Switch>
+            <Match when={props.hero}>
+                <H1 class={`${PARTS$4.title} ${heroClass(props)} ${StyleMixin.classes(props)}`} style={props.style} textColor={props.textColor} textIntensity={props.textIntensity} textFamily={props.textFamily} textWeight={props.textWeight} textSize={props.textSize} textLine={props.textLine} textAlign={props.textAlign}>
+                    {props.children}
+                </H1>
+            </Match>
+            <Match when={!props.hero}>
+                <H2 class={`${PARTS$4.title} ${heroClass(props)} ${StyleMixin.classes(props)}`} textColor={props.textColor} textIntensity={props.textIntensity} textFamily={props.textFamily} textWeight={props.textWeight} textSize={props.textSize} textLine={props.textLine} style={props.style} textAlign={props.textAlign}>
+                    {props.children}
+                </H2>
+            </Match>
+        </Switch>);
+};
+/* SECTION DESCRIPTION */
+const SectionDescription = (props) => {
+    return (<P class={`${PARTS$4.description} ${heroClass(props)} ${StyleMixin.classes(props)}`} textColor={props.textColor} textIntensity={props.textIntensity} textFamily={props.textFamily} textWeight={props.textWeight} textSize={props.textSize} textLine={props.textLine} style={props.style} textAlign={props.textAlign}>
+            {props.children}
+        </P>);
+};
+/* SECTION TAGLINE */
+const SectionTagline = (props) => {
+    return (<P class={`${PARTS$4.tagline} ${heroClass(props)} ${StyleMixin.classes(props)}`} textColor={props.textColor} textIntensity={props.textIntensity} textFamily={props.textFamily} textWeight={props.textWeight} textSize={props.textSize} textLine={props.textLine} style={props.style} textAlign={props.textAlign}>
+            {props.children}
+        </P>);
+};
+/* SECTION ROOT */
+const SectionRoot = (props) => {
+    const mixins = () => `${PanelMixin.classes(props)} ${PaddingMixin.classes(props)} ${HeightMixin.classes(props)} ${TextMixin.classes(props)} ${StyleMixin.classes(props)}`;
+    return (<section class={`${PARTS$4.root} ${mixins()}`} style={props.style}>
+            {props.children}
+        </section>);
+};
+/* SECTION */
+const Section = Object.assign(SectionRoot, {
+    Title: SectionTitle,
+    Description: SectionDescription,
+    Tagline: SectionTagline,
+});
+
+/* CLASSES */
+const CARD = "card";
+const PARTS$3 = {
+    root: CARD,
+    header: `${CARD}-header`,
+    content: `${CARD}-content`,
+    footer: `${CARD}-footer`,
+    media: `${CARD}-media`,
+};
+const Card = (props) => {
+    const options = () => ({
+        ...props,
+        padding: props.padding ?? "medium",
+        align: props.align ?? "start",
+        textAlign: props.textAlign ?? "left",
+        panelColor: props.panelColor ?? "neutral",
+        panelIntensity: props.panelIntensity ?? "subtle",
+        panelBorder: props.panelBorder ?? "all",
+        panelRadius: props.panelRadius ?? "all",
+    });
+    const mixins = () => `${PanelMixin.classes(options())} ${WidthMixin.classes(options())} ${StyleMixin.classes(options())}`;
+    return (<div class={`${PARTS$3.root} ${mixins()}`} style={props.style}>
+            {props.header && (<Stack class={`${PARTS$3.header}`} align={options().align} textAlign={options().textAlign} padding={options().padding}>
+                    {props.header}
+                </Stack>)}
+            {props.media && (<Stack class={`${PARTS$3.media}`} align={options().align} textAlign={options().textAlign} padding={options().padding}>
+                    {props.media}
+                </Stack>)}
+            {props.children && (<Stack class={`${PARTS$3.content}`} align={options().align} textAlign={options().textAlign} padding={options().padding} gap={options().gap}>
+                    {props.children}
+                </Stack>)}
+            {props.footer && (<Stack class={`${PARTS$3.footer}`} align={options().align} textAlign={options().textAlign} padding={options().padding}>
+                    {props.footer}
+                </Stack>)}
+        </div>);
+};
+
+/* CSS CLASSES */
+const SCOPE = "carousel";
+const PARTS$2 = {
+    base: "base",
+    container: "container",
+    slide: "slide",
+};
+const CarouselRoot = (props) => {
+    /* STATES */
+    const [canScrollPrev, setCanScrollPrev] = createSignal(false);
+    const [canScrollNext, setCanScrollNext] = createSignal(false);
+    /* EMBLA API*/
+    const plugins = props.autoplay ? [AutoPlay()] : [];
+    const [emblaRef, emblaApi] = createEmblaCarousel(() => ({ loop: props.loop ?? false }), () => plugins);
+    /* LIFE CYCLE */
+    onMount(() => {
+        const api = emblaApi();
+        if (api)
+            api.on("init", updateCanScroll);
+        if (api)
+            api.on("select", updateCanScroll);
+    });
+    /* METHODS */
+    function updateCanScroll(api) {
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }
+    function onKeyDown(event) {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            emblaApi()?.scrollPrev();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            emblaApi()?.scrollNext();
+        }
+    }
+    return (<div class={`${SCOPE} ${props.class ?? ""}`} style={props.style}>
+            <Button variant="default" color="neutral" classList={{ visible: canScrollPrev() }} onClick={() => emblaApi()?.scrollPrev()}>
+                <ChevronLeft />
+            </Button>
+            <button type="button" ref={emblaRef} class={`${SCOPE}-${PARTS$2.base}`} onKeyDown={onKeyDown} tabIndex={0}>
+                <div class={`${SCOPE}-${PARTS$2.container}`}>{props.children}</div>
+            </button>
+            <Button variant="default" color="neutral" classList={{ visible: canScrollNext() }} onClick={() => emblaApi()?.scrollNext()}>
+                <ChevronRight />
+            </Button>
+        </div>);
+};
+/* CAROUSEL SLIDE */
+const CarouselSlide = (props) => {
+    return (<div class={`${SCOPE}-${PARTS$2.slide} ${props.class ?? ""}`} style={props.style}>
+            {props.children}
+        </div>);
+};
+/* CAROUSEL */
+const Carousel = Object.assign(CarouselRoot, {
+    Slide: CarouselSlide,
+});
+
+/* CSS CLASSES */
+const AVATAR = "avatar";
+const PARTS$1 = {
+    root: AVATAR,
+    image: `${AVATAR}-image`,
+};
+const Avatar = (props) => {
+    return (<div class={`${PARTS$1.root} ${StyleMixin.classes(props)}`}>
+            <img class={`${PARTS$1.image}`} src={props.src} alt={props.alt}/>
+        </div>);
+};
+
+/* CSS CLASSES */
+const IMAGE = "image";
+const PARTS = {
+    root: IMAGE,
+    image: `${IMAGE}-img`,
+};
+const ASPECTS = {
+    square: `${IMAGE}-square`,
+    landscape: `${IMAGE}-landscape`,
+    portrait: `${IMAGE}-portrait`,
+    wide: `${IMAGE}-wide`,
+    ultrawide: `${IMAGE}-ultrawide`,
+    golden: `${IMAGE}-golden`,
+};
+const FITS = {
+    contain: `${IMAGE}-contain`,
+    cover: `${IMAGE}-cover`,
+};
+const Image = (props) => {
+    return (<div class={`${PARTS.root} ${ASPECTS[props.aspect]} ${FITS[props.fit]} ${StyleMixin.classes(props)}`} style={props.style}>
+            <img class={`${PARTS.image}`} src={props.src} alt={props.alt}/>
+        </div>);
+};
+
+export { Avatar, Button, Card, Carousel, Cluster, Container, Dual, Footer, H1, H2, H3, H4, H5, H6, Image, Navigation, NavigationRoot, P, Page, Section, Stack };