aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
660 lines • 24.9 kB
TypeScript
export declare const DESIGN_SYSTEM: {
readonly name: "AuraGlass";
readonly version: "1.0.0";
readonly author: "AuraGlass Team";
readonly description: "Modern glassmorphism design system for React";
};
export declare const ANIMATION: {
readonly DURATION: {
readonly instant: 0;
readonly fast: 150;
readonly normal: 300;
readonly slow: 500;
readonly slower: 700;
};
readonly EASING: {
readonly linear: "linear";
readonly ease: "ease";
readonly easeIn: "ease-in";
readonly easeOut: "ease-out";
readonly easeInOut: "ease-in-out";
readonly bounceIn: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
readonly bounceOut: "cubic-bezier(0.34, 1.56, 0.64, 1)";
readonly elasticIn: "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
readonly elasticOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
};
readonly SPRING: {
readonly gentle: {
readonly stiffness: 120;
readonly damping: 14;
readonly mass: 1;
};
readonly wobbly: {
readonly stiffness: 180;
readonly damping: 12;
readonly mass: 1;
};
readonly stiff: {
readonly stiffness: 210;
readonly damping: 20;
readonly mass: 1;
};
readonly slow: {
readonly stiffness: 280;
readonly damping: 60;
readonly mass: 1;
};
readonly bouncy: {
readonly stiffness: 170;
readonly damping: 8;
readonly mass: 1;
};
};
};
export declare const COLORS: {
readonly glass: {
readonly frosted: "rgba(255, 255, 255, 0.1)";
readonly dynamic: "rgba(255, 255, 255, 0.15)";
readonly clear: "transparent";
readonly tinted: "rgba(255, 255, 255, 0.08)";
readonly luminous: "rgba(255, 255, 255, 0.2)";
};
readonly semantic: {
readonly primary: "var(--glass-color-primary)";
readonly secondary: "var(--glass-gray-500)";
readonly success: "var(--glass-color-success)";
readonly warning: "var(--glass-color-warning)";
readonly error: "var(--glass-color-danger)";
readonly info: "var(--glass-color-primary)";
};
readonly neutral: {
readonly white: "var(--glass-white)";
readonly black: "var(--glass-black)";
readonly gray: {
readonly 50: "var(--glass-gray-50)";
readonly 100: "var(--glass-gray-100)";
readonly 200: "var(--glass-gray-200)";
readonly 300: "var(--glass-gray-300)";
readonly 400: "var(--glass-gray-400)";
readonly 500: "var(--glass-gray-500)";
readonly 600: "var(--glass-gray-600)";
readonly 700: "var(--glass-gray-700)";
readonly 800: "var(--glass-gray-800)";
readonly 900: "var(--glass-gray-900)";
};
};
readonly glassColors: {
readonly surface: "rgba(255, 255, 255, 0.1)";
readonly surfaceHover: "rgba(255, 255, 255, 0.15)";
readonly surfaceActive: "rgba(255, 255, 255, 0.08)";
readonly border: "rgba(255, 255, 255, 0.2)";
readonly borderHover: "rgba(255, 255, 255, 0.3)";
readonly text: "var(--glass-text-primary)";
readonly textSecondary: "var(--glass-text-secondary)";
readonly shadow: "rgba(0, 0, 0, 0.15)";
};
};
export declare const TYPOGRAPHY: {
readonly fontFamily: {
readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
readonly mono: "\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace";
};
readonly fontSize: {
readonly xs: "0.75rem";
readonly sm: "0.875rem";
readonly base: "1rem";
readonly lg: "1.125rem";
readonly xl: "1.25rem";
readonly "2xl": "1.5rem";
readonly "3xl": "1.875rem";
readonly "4xl": "2.25rem";
readonly "5xl": "3rem";
};
readonly fontWeight: {
readonly thin: 100;
readonly light: 300;
readonly normal: 400;
readonly medium: 500;
readonly semibold: 600;
readonly bold: 700;
readonly extrabold: 800;
readonly black: 900;
};
readonly lineHeight: {
readonly none: 1;
readonly tight: 1.25;
readonly snug: 1.375;
readonly normal: 1.5;
readonly relaxed: 1.625;
readonly loose: 2;
};
readonly letterSpacing: {
readonly tighter: "-0.05em";
readonly tight: "-0.025em";
readonly normal: "0em";
readonly wide: "0.025em";
readonly wider: "0.05em";
readonly widest: "0.1em";
};
};
export declare const SPACING: {
readonly space: {
readonly 0: "0";
readonly 1: "0.25rem";
readonly 2: "0.5rem";
readonly 3: "0.75rem";
readonly 4: "1rem";
readonly 5: "1.25rem";
readonly 6: "1.5rem";
readonly 8: "2rem";
readonly 10: "2.5rem";
readonly 12: "3rem";
readonly 16: "4rem";
readonly 20: "5rem";
readonly 24: "6rem";
readonly 32: "8rem";
readonly 40: "10rem";
readonly 48: "12rem";
readonly 56: "14rem";
readonly 64: "16rem";
};
readonly container: {
readonly sm: "640px";
readonly md: "768px";
readonly lg: "1024px";
readonly xl: "1280px";
readonly "2xl": "1536px";
};
};
export declare const BORDER_RADIUS: {
readonly none: "0";
readonly sm: "0.125rem";
readonly md: "0.375rem";
readonly lg: "0.5rem";
readonly xl: "0.75rem";
readonly "2xl": "1rem";
readonly "3xl": "1.5rem";
readonly full: "9999px";
};
export declare const BOX_SHADOW: {
readonly none: "none";
readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
readonly outline: "0 0 0 3px rgba(66, 153, 225, 0.5)";
};
export declare const Z_INDEX: {
readonly auto: "auto";
readonly 0: 0;
readonly 10: 10;
readonly 20: 20;
readonly 30: 30;
readonly 40: 40;
readonly 50: 50;
readonly 60: 60;
readonly 70: 70;
readonly 80: 80;
readonly 90: 90;
readonly 100: 100;
};
export declare const BREAKPOINTS: {
readonly xs: "0px";
readonly sm: "640px";
readonly md: "768px";
readonly lg: "1024px";
readonly xl: "1280px";
readonly "2xl": "1536px";
};
export declare const PERFORMANCE: {
readonly fps: {
readonly target: 60;
readonly minimum: 30;
readonly critical: 15;
};
readonly memory: {
readonly warning: number;
readonly critical: number;
readonly maximum: number;
};
readonly quality: {
readonly ultra: {
readonly particleLimit: 1000;
readonly textureSize: 2048;
};
readonly high: {
readonly particleLimit: 500;
readonly textureSize: 1024;
};
readonly medium: {
readonly particleLimit: 200;
readonly textureSize: 512;
};
readonly low: {
readonly particleLimit: 50;
readonly textureSize: 256;
};
};
};
export declare const ACCESSIBILITY: {
readonly focusRing: {
readonly width: "2px";
readonly style: "solid";
readonly color: "var(--glass-color-primary, 0.5)";
readonly offset: "2px";
};
readonly motion: {
readonly reduced: "(prefers-reduced-motion: reduce)";
readonly enabled: "(prefers-reduced-motion: no-preference)";
};
readonly contrast: {
readonly minimum: 4.5;
readonly enhanced: 7;
};
readonly touch: {
readonly minimum: "44px";
readonly recommended: "48px";
};
};
export declare const GLASS: {
readonly opacity: {
readonly subtle: 0.05;
readonly light: 0.1;
readonly standard: 0.15;
readonly strong: 0.2;
readonly intense: 0.3;
};
readonly blur: {
readonly none: "none";
readonly subtle: "blur(2px)";
readonly light: "blur(4px)";
readonly standard: "blur(8px)";
readonly strong: "blur(12px)";
readonly heavy: "blur(16px)";
};
readonly variants: {
readonly frosted: {};
readonly dynamic: {};
readonly clear: import("react").CSSProperties;
};
};
export declare const constants: {
getColor: (key: string) => {
readonly frosted: "rgba(255, 255, 255, 0.1)";
readonly dynamic: "rgba(255, 255, 255, 0.15)";
readonly clear: "transparent";
readonly tinted: "rgba(255, 255, 255, 0.08)";
readonly luminous: "rgba(255, 255, 255, 0.2)";
} | {
readonly primary: "var(--glass-color-primary)";
readonly secondary: "var(--glass-gray-500)";
readonly success: "var(--glass-color-success)";
readonly warning: "var(--glass-color-warning)";
readonly error: "var(--glass-color-danger)";
readonly info: "var(--glass-color-primary)";
} | {
readonly white: "var(--glass-white)";
readonly black: "var(--glass-black)";
readonly gray: {
readonly 50: "var(--glass-gray-50)";
readonly 100: "var(--glass-gray-100)";
readonly 200: "var(--glass-gray-200)";
readonly 300: "var(--glass-gray-300)";
readonly 400: "var(--glass-gray-400)";
readonly 500: "var(--glass-gray-500)";
readonly 600: "var(--glass-gray-600)";
readonly 700: "var(--glass-gray-700)";
readonly 800: "var(--glass-gray-800)";
readonly 900: "var(--glass-gray-900)";
};
} | {
readonly surface: "rgba(255, 255, 255, 0.1)";
readonly surfaceHover: "rgba(255, 255, 255, 0.15)";
readonly surfaceActive: "rgba(255, 255, 255, 0.08)";
readonly border: "rgba(255, 255, 255, 0.2)";
readonly borderHover: "rgba(255, 255, 255, 0.3)";
readonly text: "var(--glass-text-primary)";
readonly textSecondary: "var(--glass-text-secondary)";
readonly shadow: "rgba(0, 0, 0, 0.15)";
};
getSpacing: (key: string | number) => "0" | "0.75rem" | "2rem" | "1rem" | "0.25rem" | "0.5rem" | "1.5rem" | "3rem" | "1.25rem" | "2.5rem" | "4rem" | "5rem" | "6rem" | "8rem" | "10rem" | "12rem" | "14rem" | "16rem";
getFontSize: (key: string) => "0.75rem" | "1rem" | "1.5rem" | "3rem" | "0.875rem" | "1.125rem" | "1.25rem" | "2.25rem" | "1.875rem";
getBorderRadius: (key: string) => "0" | "0.75rem" | "1rem" | "0.5rem" | "1.5rem" | "0.375rem" | "0.125rem" | "9999px";
getBoxShadow: (key: string) => "none" | "0 1px 2px 0 rgba(0, 0, 0, 0.05)" | "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" | "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" | "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" | "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" | "0 25px 50px -12px rgba(0, 0, 0, 0.25)" | "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" | "0 0 0 3px rgba(66, 153, 225, 0.5)";
getBreakpoint: (key: string) => "0px" | "768px" | "640px" | "1024px" | "1280px" | "1536px";
};
declare const _default: {
DESIGN_SYSTEM: {
readonly name: "AuraGlass";
readonly version: "1.0.0";
readonly author: "AuraGlass Team";
readonly description: "Modern glassmorphism design system for React";
};
ANIMATION: {
readonly DURATION: {
readonly instant: 0;
readonly fast: 150;
readonly normal: 300;
readonly slow: 500;
readonly slower: 700;
};
readonly EASING: {
readonly linear: "linear";
readonly ease: "ease";
readonly easeIn: "ease-in";
readonly easeOut: "ease-out";
readonly easeInOut: "ease-in-out";
readonly bounceIn: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
readonly bounceOut: "cubic-bezier(0.34, 1.56, 0.64, 1)";
readonly elasticIn: "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
readonly elasticOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
};
readonly SPRING: {
readonly gentle: {
readonly stiffness: 120;
readonly damping: 14;
readonly mass: 1;
};
readonly wobbly: {
readonly stiffness: 180;
readonly damping: 12;
readonly mass: 1;
};
readonly stiff: {
readonly stiffness: 210;
readonly damping: 20;
readonly mass: 1;
};
readonly slow: {
readonly stiffness: 280;
readonly damping: 60;
readonly mass: 1;
};
readonly bouncy: {
readonly stiffness: 170;
readonly damping: 8;
readonly mass: 1;
};
};
};
COLORS: {
readonly glass: {
readonly frosted: "rgba(255, 255, 255, 0.1)";
readonly dynamic: "rgba(255, 255, 255, 0.15)";
readonly clear: "transparent";
readonly tinted: "rgba(255, 255, 255, 0.08)";
readonly luminous: "rgba(255, 255, 255, 0.2)";
};
readonly semantic: {
readonly primary: "var(--glass-color-primary)";
readonly secondary: "var(--glass-gray-500)";
readonly success: "var(--glass-color-success)";
readonly warning: "var(--glass-color-warning)";
readonly error: "var(--glass-color-danger)";
readonly info: "var(--glass-color-primary)";
};
readonly neutral: {
readonly white: "var(--glass-white)";
readonly black: "var(--glass-black)";
readonly gray: {
readonly 50: "var(--glass-gray-50)";
readonly 100: "var(--glass-gray-100)";
readonly 200: "var(--glass-gray-200)";
readonly 300: "var(--glass-gray-300)";
readonly 400: "var(--glass-gray-400)";
readonly 500: "var(--glass-gray-500)";
readonly 600: "var(--glass-gray-600)";
readonly 700: "var(--glass-gray-700)";
readonly 800: "var(--glass-gray-800)";
readonly 900: "var(--glass-gray-900)";
};
};
readonly glassColors: {
readonly surface: "rgba(255, 255, 255, 0.1)";
readonly surfaceHover: "rgba(255, 255, 255, 0.15)";
readonly surfaceActive: "rgba(255, 255, 255, 0.08)";
readonly border: "rgba(255, 255, 255, 0.2)";
readonly borderHover: "rgba(255, 255, 255, 0.3)";
readonly text: "var(--glass-text-primary)";
readonly textSecondary: "var(--glass-text-secondary)";
readonly shadow: "rgba(0, 0, 0, 0.15)";
};
};
TYPOGRAPHY: {
readonly fontFamily: {
readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
readonly mono: "\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace";
};
readonly fontSize: {
readonly xs: "0.75rem";
readonly sm: "0.875rem";
readonly base: "1rem";
readonly lg: "1.125rem";
readonly xl: "1.25rem";
readonly "2xl": "1.5rem";
readonly "3xl": "1.875rem";
readonly "4xl": "2.25rem";
readonly "5xl": "3rem";
};
readonly fontWeight: {
readonly thin: 100;
readonly light: 300;
readonly normal: 400;
readonly medium: 500;
readonly semibold: 600;
readonly bold: 700;
readonly extrabold: 800;
readonly black: 900;
};
readonly lineHeight: {
readonly none: 1;
readonly tight: 1.25;
readonly snug: 1.375;
readonly normal: 1.5;
readonly relaxed: 1.625;
readonly loose: 2;
};
readonly letterSpacing: {
readonly tighter: "-0.05em";
readonly tight: "-0.025em";
readonly normal: "0em";
readonly wide: "0.025em";
readonly wider: "0.05em";
readonly widest: "0.1em";
};
};
SPACING: {
readonly space: {
readonly 0: "0";
readonly 1: "0.25rem";
readonly 2: "0.5rem";
readonly 3: "0.75rem";
readonly 4: "1rem";
readonly 5: "1.25rem";
readonly 6: "1.5rem";
readonly 8: "2rem";
readonly 10: "2.5rem";
readonly 12: "3rem";
readonly 16: "4rem";
readonly 20: "5rem";
readonly 24: "6rem";
readonly 32: "8rem";
readonly 40: "10rem";
readonly 48: "12rem";
readonly 56: "14rem";
readonly 64: "16rem";
};
readonly container: {
readonly sm: "640px";
readonly md: "768px";
readonly lg: "1024px";
readonly xl: "1280px";
readonly "2xl": "1536px";
};
};
BORDER_RADIUS: {
readonly none: "0";
readonly sm: "0.125rem";
readonly md: "0.375rem";
readonly lg: "0.5rem";
readonly xl: "0.75rem";
readonly "2xl": "1rem";
readonly "3xl": "1.5rem";
readonly full: "9999px";
};
BOX_SHADOW: {
readonly none: "none";
readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
readonly outline: "0 0 0 3px rgba(66, 153, 225, 0.5)";
};
Z_INDEX: {
readonly auto: "auto";
readonly 0: 0;
readonly 10: 10;
readonly 20: 20;
readonly 30: 30;
readonly 40: 40;
readonly 50: 50;
readonly 60: 60;
readonly 70: 70;
readonly 80: 80;
readonly 90: 90;
readonly 100: 100;
};
BREAKPOINTS: {
readonly xs: "0px";
readonly sm: "640px";
readonly md: "768px";
readonly lg: "1024px";
readonly xl: "1280px";
readonly "2xl": "1536px";
};
PERFORMANCE: {
readonly fps: {
readonly target: 60;
readonly minimum: 30;
readonly critical: 15;
};
readonly memory: {
readonly warning: number;
readonly critical: number;
readonly maximum: number;
};
readonly quality: {
readonly ultra: {
readonly particleLimit: 1000;
readonly textureSize: 2048;
};
readonly high: {
readonly particleLimit: 500;
readonly textureSize: 1024;
};
readonly medium: {
readonly particleLimit: 200;
readonly textureSize: 512;
};
readonly low: {
readonly particleLimit: 50;
readonly textureSize: 256;
};
};
};
ACCESSIBILITY: {
readonly focusRing: {
readonly width: "2px";
readonly style: "solid";
readonly color: "var(--glass-color-primary, 0.5)";
readonly offset: "2px";
};
readonly motion: {
readonly reduced: "(prefers-reduced-motion: reduce)";
readonly enabled: "(prefers-reduced-motion: no-preference)";
};
readonly contrast: {
readonly minimum: 4.5;
readonly enhanced: 7;
};
readonly touch: {
readonly minimum: "44px";
readonly recommended: "48px";
};
};
GLASS: {
readonly opacity: {
readonly subtle: 0.05;
readonly light: 0.1;
readonly standard: 0.15;
readonly strong: 0.2;
readonly intense: 0.3;
};
readonly blur: {
readonly none: "none";
readonly subtle: "blur(2px)";
readonly light: "blur(4px)";
readonly standard: "blur(8px)";
readonly strong: "blur(12px)";
readonly heavy: "blur(16px)";
};
readonly variants: {
readonly frosted: {};
readonly dynamic: {};
readonly clear: import("react").CSSProperties;
};
};
constants: {
getColor: (key: string) => {
readonly frosted: "rgba(255, 255, 255, 0.1)";
readonly dynamic: "rgba(255, 255, 255, 0.15)";
readonly clear: "transparent";
readonly tinted: "rgba(255, 255, 255, 0.08)";
readonly luminous: "rgba(255, 255, 255, 0.2)";
} | {
readonly primary: "var(--glass-color-primary)";
readonly secondary: "var(--glass-gray-500)";
readonly success: "var(--glass-color-success)";
readonly warning: "var(--glass-color-warning)";
readonly error: "var(--glass-color-danger)";
readonly info: "var(--glass-color-primary)";
} | {
readonly white: "var(--glass-white)";
readonly black: "var(--glass-black)";
readonly gray: {
readonly 50: "var(--glass-gray-50)";
readonly 100: "var(--glass-gray-100)";
readonly 200: "var(--glass-gray-200)";
readonly 300: "var(--glass-gray-300)";
readonly 400: "var(--glass-gray-400)";
readonly 500: "var(--glass-gray-500)";
readonly 600: "var(--glass-gray-600)";
readonly 700: "var(--glass-gray-700)";
readonly 800: "var(--glass-gray-800)";
readonly 900: "var(--glass-gray-900)";
};
} | {
readonly surface: "rgba(255, 255, 255, 0.1)";
readonly surfaceHover: "rgba(255, 255, 255, 0.15)";
readonly surfaceActive: "rgba(255, 255, 255, 0.08)";
readonly border: "rgba(255, 255, 255, 0.2)";
readonly borderHover: "rgba(255, 255, 255, 0.3)";
readonly text: "var(--glass-text-primary)";
readonly textSecondary: "var(--glass-text-secondary)";
readonly shadow: "rgba(0, 0, 0, 0.15)";
};
getSpacing: (key: string | number) => "0" | "0.75rem" | "2rem" | "1rem" | "0.25rem" | "0.5rem" | "1.5rem" | "3rem" | "1.25rem" | "2.5rem" | "4rem" | "5rem" | "6rem" | "8rem" | "10rem" | "12rem" | "14rem" | "16rem";
getFontSize: (key: string) => "0.75rem" | "1rem" | "1.5rem" | "3rem" | "0.875rem" | "1.125rem" | "1.25rem" | "2.25rem" | "1.875rem";
getBorderRadius: (key: string) => "0" | "0.75rem" | "1rem" | "0.5rem" | "1.5rem" | "0.375rem" | "0.125rem" | "9999px";
getBoxShadow: (key: string) => "none" | "0 1px 2px 0 rgba(0, 0, 0, 0.05)" | "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" | "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" | "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" | "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" | "0 25px 50px -12px rgba(0, 0, 0, 0.25)" | "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" | "0 0 0 3px rgba(66, 153, 225, 0.5)";
getBreakpoint: (key: string) => "0px" | "768px" | "640px" | "1024px" | "1280px" | "1536px";
};
};
export default _default;
//# sourceMappingURL=designConstants.d.ts.map