@umbra.ui/core 0.1.0

package/dist/components/inputs/Tags/tag-bar-styles.js

@@ -0,0 +1,313 @@
+import "./theme.css";
+// Base style templates for tag bar types
+const baseStyles = {
+    default: {
+        borderRadius: "0.471rem",
+        boxShadow: "none",
+        border: "none",
+        padding: "0",
+    },
+    outline: {
+        backgroundColor: "transparent",
+        borderRadius: "0.471rem",
+        boxShadow: "none",
+        padding: "0",
+    },
+    capsule: {
+        borderRadius: "999px",
+        boxShadow: "none",
+        border: "none",
+        padding: "0",
+    },
+    capline: {
+        backgroundColor: "transparent",
+        borderRadius: "999px",
+        boxShadow: "none",
+        padding: "0",
+    },
+    plain: {
+        backgroundColor: "transparent",
+        borderRadius: "0",
+        boxShadow: "none",
+        border: "none",
+        padding: "0",
+    },
+};
+// Predefined color schemes
+const colorSchemes = {
+    primary: {
+        default: { backgroundColor: "var(--tagbar-primary-default-bg)" },
+        outline: { color: "var(--tagbar-primary-outline-color)" },
+        capsule: { backgroundColor: "var(--tagbar-primary-capsule-bg)" },
+        capline: { color: "var(--tagbar-primary-capline-color)" },
+        plain: { backgroundColor: "var(--tagbar-primary-plain-bg)" },
+    },
+    secondary: {
+        default: { backgroundColor: "var(--tagbar-secondary-default-bg)" },
+        outline: { color: "var(--tagbar-secondary-outline-color)" },
+        capsule: { backgroundColor: "var(--tagbar-secondary-capsule-bg)" },
+        capline: { color: "var(--tagbar-secondary-capline-color)" },
+        plain: { backgroundColor: "var(--tagbar-secondary-plain-bg)" },
+    },
+    tertiary: {
+        default: { backgroundColor: "var(--tagbar-tertiary-default-bg)" },
+        outline: { color: "var(--tagbar-tertiary-outline-color)" },
+        capsule: { backgroundColor: "var(--tagbar-tertiary-capsule-bg)" },
+        capline: { color: "var(--tagbar-tertiary-capline-color)" },
+        plain: { backgroundColor: "var(--tagbar-tertiary-plain-bg)" },
+    },
+    quaternary: {
+        default: { backgroundColor: "var(--tagbar-quaternary-default-bg)" },
+        outline: { color: "var(--tagbar-quaternary-outline-color)" },
+        capsule: { backgroundColor: "var(--tagbar-quaternary-capsule-bg)" },
+        capline: { color: "var(--tagbar-quaternary-capline-color)" },
+        plain: { backgroundColor: "var(--tagbar-quaternary-plain-bg)" },
+    },
+};
+// Helper functions for color manipulation
+const hexToRgb = (hex) => {
+    hex = hex.replace(/^#/, "");
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    const result = /^([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+};
+const rgbToHsl = (r, g, b) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return { h: h * 360, s: s * 100, l: l * 100 };
+};
+const hslToRgb = (h, s, l) => {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l;
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255),
+    };
+};
+// Helper function to lighten colors (for tag bar we want lighter backgrounds)
+const lightenColor = (color, amount = 0.85) => {
+    // Handle CSS variables
+    if (color.startsWith("var(")) {
+        const match = color.match(/var\((--[^)]+)\)/);
+        if (!match)
+            return color;
+        const propertyName = match[1];
+        let computedValue = getComputedStyle(document.documentElement)
+            .getPropertyValue(propertyName)
+            .trim();
+        // Resolve nested variables
+        while (computedValue.startsWith("var(")) {
+            const nestedMatch = computedValue.match(/var\((--[^)]+)\)/);
+            if (!nestedMatch)
+                break;
+            computedValue = getComputedStyle(document.documentElement)
+                .getPropertyValue(nestedMatch[1])
+                .trim();
+        }
+        if (computedValue.startsWith("#")) {
+            color = computedValue;
+        }
+        else {
+            return color; // Can't process non-hex computed values
+        }
+    }
+    const rgb = hexToRgb(color);
+    if (!rgb)
+        return color;
+    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+    // Lighten by increasing the lightness
+    hsl.l = Math.min(100, hsl.l + (100 - hsl.l) * amount);
+    // Reduce saturation for very light colors
+    hsl.s = Math.max(0, hsl.s * (1 - amount * 0.5));
+    const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+    const toHex = (n) => {
+        const hex = Math.round(n).toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+    };
+    return `#${toHex(newRgb.r)}${toHex(newRgb.g)}${toHex(newRgb.b)}`;
+};
+// Helper function to darken colors
+const darkenColor = (color, amount = 0.25) => {
+    // Handle CSS variables
+    if (color.startsWith("var(")) {
+        const match = color.match(/var\((--[^)]+)\)/);
+        if (!match)
+            return color;
+        const propertyName = match[1];
+        let computedValue = getComputedStyle(document.documentElement)
+            .getPropertyValue(propertyName)
+            .trim();
+        // Resolve nested variables
+        while (computedValue.startsWith("var(")) {
+            const nestedMatch = computedValue.match(/var\((--[^)]+)\)/);
+            if (!nestedMatch)
+                break;
+            computedValue = getComputedStyle(document.documentElement)
+                .getPropertyValue(nestedMatch[1])
+                .trim();
+        }
+        if (computedValue.startsWith("#")) {
+            color = computedValue;
+        }
+        else {
+            return color; // Can't process non-hex computed values
+        }
+    }
+    const rgb = hexToRgb(color);
+    if (!rgb)
+        return color;
+    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+    hsl.l = Math.max(0, hsl.l - hsl.l * amount);
+    hsl.s = Math.max(0, hsl.s - hsl.s * 0.1);
+    const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+    const toHex = (n) => {
+        const hex = Math.round(n).toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+    };
+    return `#${toHex(newRgb.r)}${toHex(newRgb.g)}${toHex(newRgb.b)}`;
+};
+// Check if it's a custom color
+const isCustomColor = (barStyle) => {
+    if (!barStyle)
+        return false;
+    const predefinedStyles = ["primary", "secondary", "tertiary", "quaternary"];
+    return !predefinedStyles.includes(barStyle);
+};
+// Generate style for custom colors
+const generateCustomColorStyle = (barType, customColor) => {
+    const baseStyle = baseStyles[barType] || baseStyles.default;
+    switch (barType) {
+        case "outline":
+        case "capline":
+            return {
+                ...baseStyle,
+                backgroundColor: "transparent",
+                border: `1px solid ${customColor}`,
+                buttonColor: customColor,
+                textColor: customColor,
+            };
+        case "plain":
+            return {
+                ...baseStyle,
+                backgroundColor: "transparent",
+                buttonColor: customColor,
+                textColor: customColor,
+            };
+        case "capsule":
+        case "default":
+        default:
+            const lightenedColor = darkenColor(customColor, 0.8);
+            return {
+                ...baseStyle,
+                backgroundColor: lightenedColor,
+                buttonColor: "#eeeeee",
+                textColor: "#b4b4b4",
+            };
+    }
+};
+// Main function to get tag bar style
+const getTagBarStyle = (type = "default", style = "primary") => {
+    // Handle custom colors
+    if (isCustomColor(style)) {
+        return generateCustomColorStyle(type, style);
+    }
+    // Handle predefined styles
+    const colorScheme = colorSchemes[style];
+    const baseStyle = baseStyles[type];
+    if (!colorScheme || !baseStyle) {
+        // Fallback to default
+        return getTagBarStyle("default", "primary");
+    }
+    const typeColors = colorScheme[type];
+    // Build the complete style based on type
+    if (type === "outline" || type === "capline") {
+        const color = typeColors.color;
+        return {
+            ...baseStyle,
+            backgroundColor: "transparent",
+            border: `1px solid ${color}`,
+            buttonColor: color,
+            textColor: color,
+        };
+    }
+    else if (type === "plain") {
+        // For plain type, use the corresponding text color variable
+        let textColor = "#eeeeee";
+        if (style === "secondary")
+            textColor = "#eeeeee";
+        else if (style === "tertiary")
+            textColor = "#b4b4b4";
+        return {
+            ...baseStyle,
+            buttonColor: textColor,
+            textColor: textColor,
+        };
+    }
+    else {
+        // default or capsule
+        const { backgroundColor } = typeColors;
+        return {
+            ...baseStyle,
+            backgroundColor,
+            buttonColor: "#FFFFFF",
+            textColor: "#FFFFFF",
+        };
+    }
+};
+// Export for use in your component
+export { getTagBarStyle, isCustomColor };

package/dist/components/inputs/Tags/types.d.ts

@@ -0,0 +1,93 @@
+export interface TagItem {
+    id: string;
+    title: string;
+    style?: TagStyleConfig;
+}
+export interface TagStyleConfig {
+    backgroundColor?: string;
+    color?: string;
+    border?: string;
+    borderRadius?: string;
+    padding?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    boxShadow?: string;
+    hover?: {
+        backgroundColor?: string;
+        color?: string;
+        border?: string;
+        transform?: string;
+        boxShadow?: string;
+    };
+    size?: TagSize;
+    colorScheme?: ColorScheme;
+}
+export type TagSize = "sm" | "md" | "lg";
+export type ColorScheme = SolidColorName | string;
+export type SolidColorName = "gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "bronze" | "gold" | "brown" | "orange" | "amber" | "yellow" | "lime" | "mint" | "sky";
+export interface TagStyle {
+    container: {
+        backgroundColor: string;
+        color: string;
+        border: string;
+        borderRadius: string;
+        padding: string;
+        fontSize?: string;
+        fontWeight?: string;
+        boxShadow?: string;
+    };
+    hover?: {
+        backgroundColor?: string;
+        color?: string;
+        border?: string;
+        transform?: string;
+        boxShadow?: string;
+    };
+}
+export interface TagData {
+    query: string;
+    allTags: TagItem[];
+    selectedTags: TagItem[];
+    matchIndex: number;
+}
+export declare const getColorMode: () => "light" | "dark";
+export declare const generateTagStyle: (config?: TagStyleConfig) => TagStyle;
+export declare const createStyledTag: (id: string, title: string, styleConfig?: TagStyleConfig) => TagItem;
+export declare const COLOR_PRESETS: {
+    readonly primary: "blue";
+    readonly success: "green";
+    readonly warning: "amber";
+    readonly danger: "red";
+    readonly info: "cyan";
+    readonly neutral: "gray";
+};
+export declare const TAG_STYLE_PRESETS: {
+    readonly default: {
+        readonly borderRadius: "999px";
+        readonly padding: "0.235rem 0.588rem";
+    };
+    readonly rounded: {
+        readonly borderRadius: "0.375rem";
+        readonly padding: "0.235rem 0.588rem";
+    };
+    readonly square: {
+        readonly borderRadius: "0";
+        readonly padding: "0.235rem 0.588rem";
+    };
+    readonly pill: {
+        readonly borderRadius: "999px";
+        readonly padding: "0.25rem 0.75rem";
+    };
+    readonly minimal: {
+        readonly backgroundColor: "transparent";
+        readonly border: "none";
+        readonly padding: "0.125rem 0.375rem";
+    };
+};
+export declare class TagTheme {
+    private defaultStyle;
+    constructor(defaultStyle?: TagStyleConfig);
+    generateStyle(overrides?: TagStyleConfig): TagStyle;
+    createTag(id: string, title: string, overrides?: TagStyleConfig): TagItem;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/inputs/Tags/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Tags/types.ts"],"names":[],"mappings":"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"}

package/dist/components/inputs/Tags/types.js

@@ -0,0 +1,216 @@
+import tinycolor from "tinycolor2";
+import * as colors from "@umbra-ui/colors";
+import { getThemeConfig } from "../../../theme";
+// Color mode detection function that uses theme or falls back to system
+export const getColorMode = () => {
+    const config = getThemeConfig();
+    // If a theme is provided, use its color mode
+    if (config?.customThemeColorMode) {
+        return config.customThemeColorMode;
+    }
+    // Otherwise fall back to system preference
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+};
+// Size presets
+const SIZE_PRESETS = {
+    sm: { padding: "0.125rem 0.375rem", fontSize: "0.75rem" },
+    md: { padding: "0.235rem 0.588rem", fontSize: "0.875rem" },
+    lg: { padding: "0.375rem 0.75rem", fontSize: "1rem" },
+};
+// Helper to get Radix colors based on color mode
+const getRadixColor = (colorName, step, alpha = false) => {
+    const isDark = getColorMode() === "dark";
+    const colorKey = isDark ? `${colorName}Dark` : colorName;
+    const alphaKey = alpha ? "A" : "";
+    const colorScale = colors[`${colorKey}${alphaKey}`];
+    if (!colorScale) {
+        console.warn(`Color scale ${colorKey}${alphaKey} not found`);
+        return "#808080";
+    }
+    const stepKey = `${colorName}${alphaKey}${step}`;
+    return colorScale[stepKey] || "#808080";
+};
+// Check if a string is a valid Radix color name
+const isRadixColor = (color) => {
+    const radixColors = [
+        "gray",
+        "mauve",
+        "slate",
+        "sage",
+        "olive",
+        "sand",
+        "tomato",
+        "red",
+        "ruby",
+        "crimson",
+        "pink",
+        "plum",
+        "purple",
+        "violet",
+        "iris",
+        "indigo",
+        "blue",
+        "cyan",
+        "teal",
+        "jade",
+        "green",
+        "grass",
+        "bronze",
+        "gold",
+        "brown",
+        "orange",
+        "amber",
+        "yellow",
+        "lime",
+        "mint",
+        "sky",
+    ];
+    return radixColors.includes(color);
+};
+// Default style values
+const DEFAULT_STYLE = {
+    container: {
+        backgroundColor: "var(--default-tag-background-color)",
+        color: "var(--default-tag-color)",
+        border: "1px solid var(--default-tag-border)",
+        borderRadius: "var(--default-tag-border-radius)",
+        padding: "var(--default-tag-padding)",
+        fontSize: "var(--default-tag-font-size)",
+        fontWeight: "var(--default-tag-font-weight)",
+    },
+    hover: {
+        backgroundColor: "var(--default-tag-hover-background-color)",
+    },
+};
+// Generate default style from color scheme
+const generateDefaultStyleFromColor = (colorScheme) => {
+    if (isRadixColor(colorScheme)) {
+        // Use Radix color scale
+        return {
+            container: {
+                backgroundColor: getRadixColor(colorScheme, 5, true),
+                color: getRadixColor(colorScheme, 11),
+                border: `1px solid ${getRadixColor(colorScheme, 7)}`,
+                borderRadius: "0.375rem",
+                padding: SIZE_PRESETS.md.padding,
+                fontSize: SIZE_PRESETS.md.fontSize,
+            },
+            hover: {
+                backgroundColor: getRadixColor(colorScheme, 5, true),
+            },
+        };
+    }
+    else {
+        // Use custom hex color
+        const baseColor = tinycolor(colorScheme);
+        const isDark = getColorMode() === "dark";
+        return {
+            container: {
+                backgroundColor: isDark
+                    ? baseColor.setAlpha(0.2).toRgbString()
+                    : baseColor.setAlpha(0.15).toRgbString(),
+                color: isDark
+                    ? baseColor.lighten(20).toHexString()
+                    : baseColor.darken(20).toHexString(),
+                border: `1px solid ${baseColor.setAlpha(0.3).toRgbString()}`,
+                borderRadius: "0.375rem",
+                padding: SIZE_PRESETS.md.padding,
+                fontSize: SIZE_PRESETS.md.fontSize,
+            },
+            hover: {
+                backgroundColor: isDark
+                    ? baseColor.setAlpha(0.3).toRgbString()
+                    : baseColor.setAlpha(0.25).toRgbString(),
+            },
+        };
+    }
+};
+// Main style generation function - much simpler!
+export const generateTagStyle = (config = {}) => {
+    let baseStyle = { ...DEFAULT_STYLE };
+    // If a color scheme is provided, generate default colors from it
+    if (config.colorScheme) {
+        baseStyle = generateDefaultStyleFromColor(config.colorScheme);
+    }
+    // Apply size preset if provided
+    if (config.size) {
+        const sizeConfig = SIZE_PRESETS[config.size];
+        baseStyle.container.padding = sizeConfig.padding;
+        baseStyle.container.fontSize = sizeConfig.fontSize;
+    }
+    // Direct CSS property overrides - these take precedence
+    const style = {
+        container: {
+            ...baseStyle.container,
+            backgroundColor: config.backgroundColor ?? baseStyle.container.backgroundColor,
+            color: config.color ?? baseStyle.container.color,
+            border: config.border ?? baseStyle.container.border,
+            borderRadius: config.borderRadius ?? baseStyle.container.borderRadius,
+            padding: config.padding ?? baseStyle.container.padding,
+            fontSize: config.fontSize ?? baseStyle.container.fontSize,
+            fontWeight: config.fontWeight ?? baseStyle.container.fontWeight,
+            boxShadow: config.boxShadow ?? baseStyle.container.boxShadow,
+        },
+        hover: config.hover
+            ? {
+                ...baseStyle.hover,
+                ...config.hover,
+            }
+            : baseStyle.hover,
+    };
+    return style;
+};
+// Helper to create tag with style
+export const createStyledTag = (id, title, styleConfig) => ({
+    id,
+    title,
+    style: styleConfig,
+});
+// Preset color schemes using Radix colors
+export const COLOR_PRESETS = {
+    primary: "blue",
+    success: "green",
+    warning: "amber",
+    danger: "red",
+    info: "cyan",
+    neutral: "gray",
+};
+// Example preset styles that developers can use or override
+export const TAG_STYLE_PRESETS = {
+    default: {
+        borderRadius: "999px",
+        padding: "0.235rem 0.588rem",
+    },
+    rounded: {
+        borderRadius: "0.375rem",
+        padding: "0.235rem 0.588rem",
+    },
+    square: {
+        borderRadius: "0",
+        padding: "0.235rem 0.588rem",
+    },
+    pill: {
+        borderRadius: "999px",
+        padding: "0.25rem 0.75rem",
+    },
+    minimal: {
+        backgroundColor: "transparent",
+        border: "none",
+        padding: "0.125rem 0.375rem",
+    },
+};
+// Utility class for managing tag themes (simplified)
+export class TagTheme {
+    constructor(defaultStyle = {}) {
+        this.defaultStyle = defaultStyle;
+    }
+    generateStyle(overrides) {
+        return generateTagStyle({ ...this.defaultStyle, ...overrides });
+    }
+    // Create a tag with the theme's default style
+    createTag(id, title, overrides) {
+        return createStyledTag(id, title, { ...this.defaultStyle, ...overrides });
+    }
+}

package/dist/components/inputs/search/types.d.ts

@@ -0,0 +1,9 @@
+export interface SearchResult {
+    id: string;
+    icon?: string;
+    title: string;
+    description: string;
+    caption: string;
+    footnote: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/inputs/search/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB"}

package/dist/components/inputs/search/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation/adaptive/types.d.ts

@@ -0,0 +1,16 @@
+import { Component, markRaw } from "vue";
+export interface View {
+    id: string;
+    component: Component | ReturnType<typeof markRaw<Component>>;
+    props?: Record<string, unknown>;
+    minWidth?: number;
+    maxWidth?: number;
+    currentWidth?: number;
+    label?: string;
+}
+export type ViewLayout = "splitview" | "slideover" | "navstack" | "adaptive";
+export type ViewLocation = "leading" | "trailing" | "onscreen" | "overlay";
+export interface InternalView extends View {
+    location: ViewLocation;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/adaptive/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AAE7E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAE3E,MAAM,WAAW,YAAa,SAAQ,IAAI;IACxC,QAAQ,EAAE,YAAY,CAAC;CACxB"}

package/dist/components/navigation/adaptive/types.js

@@ -0,0 +1 @@
+export {};