@buun_group/brutalist-ui
Version:
A brutalist-styled component library
1 lines • 871 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../node_modules/clsx/dist/clsx.mjs","../src/react/utils/utility-classes.ts","../src/react/utils/responsive-utilities.ts","../src/react/hooks/useResponsiveUtilities.ts","../src/react/hooks/useUtilityClasses.ts","../src/react/box/Box.tsx","../node_modules/react/cjs/react-jsx-runtime.production.min.js","../node_modules/react/cjs/react-jsx-runtime.development.js","../node_modules/react/jsx-runtime.js","../src/react/button/Button.tsx","../src/react/input/Input.tsx","../src/react/input-otp/InputOTP.tsx","../src/react/textarea/Textarea.tsx","../src/react/select/CustomSelect.tsx","../src/react/select/Select.tsx","../src/react/checkbox/Checkbox.tsx","../src/react/radio/Radio.tsx","../src/react/switch/Switch.tsx","../src/react/toggle/Toggle.tsx","../src/react/hover-card/HoverCard.tsx","../src/react/typography/Typography.tsx","../src/react/command/Command.tsx","../src/react/slider/Slider.tsx","../src/react/avatar/Avatar.tsx","../src/react/badge/Badge.tsx","../src/react/card/Card.tsx","../src/react/alert/Alert.tsx","../src/react/alert/AlertStack.tsx","../src/react/progress/Progress.tsx","../src/react/skeleton/Skeleton.tsx","../src/react/tooltip/Tooltip.tsx","../src/react/popover/Popover.tsx","../src/react/separator/Separator.tsx","../src/react/theme/themes.ts","../src/react/theme/types.ts","../src/react/theme/utils.ts","../src/react/theme/ThemeContext.tsx","../src/react/theme/ThemePicker.tsx","../src/react/table/Table.tsx","../src/react/spinner/Spinner.tsx","../src/react/toast/Toast.tsx","../src/react/dialog/Dialog.tsx","../src/react/drawer/Drawer.tsx","../src/react/dropdown/Dropdown.tsx","../src/react/tabs/Tabs.tsx","../src/react/container/Container.tsx","../src/react/stack/Stack.tsx","../src/react/breadcrumb/Breadcrumb.tsx","../src/react/sidebar/Sidebar.tsx","../src/react/navigation/Navigation.tsx","../src/react/table-of-contents/TableOfContents.tsx","../src/react/accordion/Accordion.tsx","../src/react/combobox/Combobox.tsx","../src/react/bar-chart/BarChart.tsx","../src/react/line-chart/LineChart.tsx","../src/react/pie-chart/PieChart.tsx","../src/react/area-chart/AreaChart.tsx","../src/react/aspect-ratio/AspectRatio.tsx","../src/react/pagination/Pagination.tsx","../src/react/context-menu/ContextMenu.tsx","../src/react/sheet/Sheet.tsx","../src/react/carousel/Carousel.tsx","../src/react/chart/Chart.tsx","../src/react/scroll-area/ScrollArea.tsx","../src/react/wireframe/Wireframe.tsx","../src/react/comic-text/ComicText.tsx","../src/react/glitch-text/GlitchText.tsx","../src/react/stamp-text/StampText.tsx","../src/react/noise-texture/NoiseTexture.tsx","../src/react/halftone-pattern/HalftonePattern.tsx","../src/react/brutal-grid/BrutalGrid.tsx","../src/react/shapes/index.ts","../src/tailwind/button/Button.tsx","../src/tailwind/aspect-ratio/AspectRatio.tsx","../src/tailwind/card/Card.tsx","../src/tailwind/input/Input.tsx","../src/tailwind/badge/Badge.tsx","../src/tailwind/alert/Alert.tsx","../src/tailwind/checkbox/Checkbox.tsx","../src/tailwind/avatar/Avatar.tsx","../src/tailwind/progress/Progress.tsx","../src/tailwind/spinner/Spinner.tsx","../src/tailwind/separator/Separator.tsx","../src/tailwind/skeleton/Skeleton.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","/**\n * Utility class system for Brutalist UI components\n * Provides Tailwind-like utility classes without external dependencies\n */\n\n// Spacing scale mapping to CSS variables\nconst spacingScale: Record<string, string> = {\n '0': '0',\n '1': 'var(--brutal-space-1)',\n '2': 'var(--brutal-space-2)',\n '3': 'var(--brutal-space-3)',\n '4': 'var(--brutal-space-4)',\n '5': 'var(--brutal-space-5)',\n '6': 'var(--brutal-space-6)',\n '8': 'var(--brutal-space-8)',\n '10': 'var(--brutal-space-10)',\n '12': 'var(--brutal-space-12)',\n '16': 'var(--brutal-space-16)',\n '20': 'var(--brutal-space-20)',\n '24': 'var(--brutal-space-24)',\n}\n\n// Utility class patterns\nconst utilityPatterns = {\n // Padding\n 'p': (value: string) => ({ padding: spacingScale[value] }),\n 'pt': (value: string) => ({ paddingTop: spacingScale[value] }),\n 'pr': (value: string) => ({ paddingRight: spacingScale[value] }),\n 'pb': (value: string) => ({ paddingBottom: spacingScale[value] }),\n 'pl': (value: string) => ({ paddingLeft: spacingScale[value] }),\n 'px': (value: string) => ({ paddingLeft: spacingScale[value], paddingRight: spacingScale[value] }),\n 'py': (value: string) => ({ paddingTop: spacingScale[value], paddingBottom: spacingScale[value] }),\n \n // Margin\n 'm': (value: string) => ({ margin: spacingScale[value] }),\n 'mt': (value: string) => ({ marginTop: spacingScale[value] }),\n 'mr': (value: string) => ({ marginRight: spacingScale[value] }),\n 'mb': (value: string) => ({ marginBottom: spacingScale[value] }),\n 'ml': (value: string) => ({ marginLeft: spacingScale[value] }),\n 'mx': (value: string) => ({ marginLeft: spacingScale[value], marginRight: spacingScale[value] }),\n 'my': (value: string) => ({ marginTop: spacingScale[value], marginBottom: spacingScale[value] }),\n \n // Gap\n 'gap': (value: string) => ({ gap: spacingScale[value] }),\n 'gap-x': (value: string) => ({ columnGap: spacingScale[value] }),\n 'gap-y': (value: string) => ({ rowGap: spacingScale[value] }),\n}\n\n// Display utilities\nconst displayUtilities: Record<string, React.CSSProperties> = {\n 'block': { display: 'block' },\n 'inline-block': { display: 'inline-block' },\n 'inline': { display: 'inline' },\n 'flex': { display: 'flex' },\n 'inline-flex': { display: 'inline-flex' },\n 'grid': { display: 'grid' },\n 'hidden': { display: 'none' },\n}\n\n// Flexbox utilities\nconst flexUtilities: Record<string, React.CSSProperties> = {\n 'flex-row': { flexDirection: 'row' },\n 'flex-row-reverse': { flexDirection: 'row-reverse' },\n 'flex-col': { flexDirection: 'column' },\n 'flex-col-reverse': { flexDirection: 'column-reverse' },\n 'flex-wrap': { flexWrap: 'wrap' },\n 'flex-nowrap': { flexWrap: 'nowrap' },\n 'items-start': { alignItems: 'flex-start' },\n 'items-end': { alignItems: 'flex-end' },\n 'items-center': { alignItems: 'center' },\n 'items-baseline': { alignItems: 'baseline' },\n 'items-stretch': { alignItems: 'stretch' },\n 'justify-start': { justifyContent: 'flex-start' },\n 'justify-end': { justifyContent: 'flex-end' },\n 'justify-center': { justifyContent: 'center' },\n 'justify-between': { justifyContent: 'space-between' },\n 'justify-around': { justifyContent: 'space-around' },\n 'justify-evenly': { justifyContent: 'space-evenly' },\n}\n\n// Size utilities\nconst sizeUtilities: Record<string, React.CSSProperties> = {\n 'w-full': { width: '100%' },\n 'w-auto': { width: 'auto' },\n 'h-full': { height: '100%' },\n 'h-auto': { height: 'auto' },\n}\n\n// Position utilities\nconst positionUtilities: Record<string, React.CSSProperties> = {\n 'relative': { position: 'relative' },\n 'absolute': { position: 'absolute' },\n 'fixed': { position: 'fixed' },\n 'sticky': { position: 'sticky' },\n 'static': { position: 'static' },\n}\n\n// Overflow utilities\nconst overflowUtilities: Record<string, React.CSSProperties> = {\n 'overflow-auto': { overflow: 'auto' },\n 'overflow-hidden': { overflow: 'hidden' },\n 'overflow-visible': { overflow: 'visible' },\n 'overflow-scroll': { overflow: 'scroll' },\n 'overflow-x-auto': { overflowX: 'auto' },\n 'overflow-y-auto': { overflowY: 'auto' },\n}\n\n// Typography utilities\nconst typographyUtilities: Record<string, React.CSSProperties> = {\n // Font sizes\n 'text-xs': { fontSize: '0.75rem', lineHeight: '1rem' },\n 'text-sm': { fontSize: '0.875rem', lineHeight: '1.25rem' },\n 'text-base': { fontSize: '1rem', lineHeight: '1.5rem' },\n 'text-lg': { fontSize: '1.125rem', lineHeight: '1.75rem' },\n 'text-xl': { fontSize: '1.25rem', lineHeight: '1.75rem' },\n 'text-2xl': { fontSize: '1.5rem', lineHeight: '2rem' },\n 'text-3xl': { fontSize: '1.875rem', lineHeight: '2.25rem' },\n 'text-4xl': { fontSize: '2.25rem', lineHeight: '2.5rem' },\n 'text-5xl': { fontSize: '3rem', lineHeight: '1' },\n 'text-6xl': { fontSize: '3.75rem', lineHeight: '1' },\n \n // Text alignment\n 'text-left': { textAlign: 'left' },\n 'text-center': { textAlign: 'center' },\n 'text-right': { textAlign: 'right' },\n 'text-justify': { textAlign: 'justify' },\n \n // Font weight\n 'font-normal': { fontWeight: 'var(--brutal-font-regular)' },\n 'font-medium': { fontWeight: 'var(--brutal-font-medium)' },\n 'font-bold': { fontWeight: 'var(--brutal-font-bold)' },\n 'font-black': { fontWeight: 'var(--brutal-font-black)' },\n \n // Text transform\n 'uppercase': { textTransform: 'uppercase' },\n 'lowercase': { textTransform: 'lowercase' },\n 'capitalize': { textTransform: 'capitalize' },\n 'normal-case': { textTransform: 'none' },\n \n // Line height\n 'leading-none': { lineHeight: '1' },\n 'leading-tight': { lineHeight: '1.25' },\n 'leading-snug': { lineHeight: '1.375' },\n 'leading-normal': { lineHeight: '1.5' },\n 'leading-relaxed': { lineHeight: '1.625' },\n 'leading-loose': { lineHeight: '2' },\n \n // Letter spacing\n 'tracking-tighter': { letterSpacing: '-0.05em' },\n 'tracking-tight': { letterSpacing: '-0.025em' },\n 'tracking-normal': { letterSpacing: '0' },\n 'tracking-wide': { letterSpacing: '0.025em' },\n 'tracking-wider': { letterSpacing: '0.05em' },\n 'tracking-widest': { letterSpacing: '0.1em' },\n}\n\n// Color utilities\nconst colorUtilities: Record<string, React.CSSProperties> = {\n // Text colors\n 'text-black': { color: 'var(--brutal-black)' },\n 'text-white': { color: 'var(--brutal-white)' },\n 'text-accent': { color: 'var(--brutal-accent)' },\n 'text-gray-50': { color: '#f9fafb' },\n 'text-gray-100': { color: '#f3f4f6' },\n 'text-gray-200': { color: '#e5e7eb' },\n 'text-gray-300': { color: '#d1d5db' },\n 'text-gray-400': { color: '#9ca3af' },\n 'text-gray-500': { color: '#6b7280' },\n 'text-gray-600': { color: '#4b5563' },\n 'text-gray-700': { color: '#374151' },\n 'text-gray-800': { color: '#1f2937' },\n 'text-gray-900': { color: '#111827' },\n 'text-red': { color: '#ef4444' },\n 'text-blue': { color: '#3b82f6' },\n 'text-green': { color: '#10b981' },\n 'text-yellow': { color: '#f59e0b' },\n 'text-purple': { color: '#8b5cf6' },\n 'text-pink': { color: '#ec4899' },\n \n // Background colors\n 'bg-black': { backgroundColor: 'var(--brutal-black)' },\n 'bg-white': { backgroundColor: 'var(--brutal-white)' },\n 'bg-accent': { backgroundColor: 'var(--brutal-accent)' },\n 'bg-gray-50': { backgroundColor: '#f9fafb' },\n 'bg-gray-100': { backgroundColor: '#f3f4f6' },\n 'bg-gray-200': { backgroundColor: '#e5e7eb' },\n 'bg-gray-300': { backgroundColor: '#d1d5db' },\n 'bg-gray-400': { backgroundColor: '#9ca3af' },\n 'bg-gray-500': { backgroundColor: '#6b7280' },\n 'bg-gray-600': { backgroundColor: '#4b5563' },\n 'bg-gray-700': { backgroundColor: '#374151' },\n 'bg-gray-800': { backgroundColor: '#1f2937' },\n 'bg-gray-900': { backgroundColor: '#111827' },\n 'bg-red': { backgroundColor: '#ef4444' },\n 'bg-blue': { backgroundColor: '#3b82f6' },\n 'bg-green': { backgroundColor: '#10b981' },\n 'bg-yellow': { backgroundColor: '#f59e0b' },\n 'bg-purple': { backgroundColor: '#8b5cf6' },\n 'bg-pink': { backgroundColor: '#ec4899' },\n}\n\n// Border utilities\nconst borderUtilities: Record<string, React.CSSProperties> = {\n 'border': { border: 'var(--brutal-border-width) solid var(--brutal-black)' },\n 'border-0': { borderWidth: '0' },\n 'border-2': { borderWidth: '2px', borderStyle: 'solid' },\n 'border-4': { borderWidth: '4px', borderStyle: 'solid' },\n 'border-8': { borderWidth: '8px', borderStyle: 'solid' },\n 'border-t': { borderTop: 'var(--brutal-border-width) solid var(--brutal-black)' },\n 'border-r': { borderRight: 'var(--brutal-border-width) solid var(--brutal-black)' },\n 'border-b': { borderBottom: 'var(--brutal-border-width) solid var(--brutal-black)' },\n 'border-l': { borderLeft: 'var(--brutal-border-width) solid var(--brutal-black)' },\n 'border-black': { borderColor: 'var(--brutal-black)' },\n 'border-white': { borderColor: 'var(--brutal-white)' },\n 'border-accent': { borderColor: 'var(--brutal-accent)' },\n 'border-gray-50': { borderColor: '#f9fafb' },\n 'border-gray-100': { borderColor: '#f3f4f6' },\n 'border-gray-200': { borderColor: '#e5e7eb' },\n 'border-gray-300': { borderColor: '#d1d5db' },\n 'border-gray-400': { borderColor: '#9ca3af' },\n 'border-gray-500': { borderColor: '#6b7280' },\n 'border-gray-600': { borderColor: '#4b5563' },\n 'border-gray-700': { borderColor: '#374151' },\n 'border-gray-800': { borderColor: '#1f2937' },\n 'border-gray-900': { borderColor: '#111827' },\n \n // Border radius\n 'rounded-none': { borderRadius: '0' },\n 'rounded-sm': { borderRadius: '0.125rem' },\n 'rounded': { borderRadius: '0.25rem' },\n 'rounded-md': { borderRadius: '0.375rem' },\n 'rounded-lg': { borderRadius: '0.5rem' },\n 'rounded-xl': { borderRadius: '0.75rem' },\n 'rounded-2xl': { borderRadius: '1rem' },\n 'rounded-full': { borderRadius: '9999px' },\n}\n\n// Shadow utilities\nconst shadowUtilities: Record<string, React.CSSProperties> = {\n 'shadow-none': { boxShadow: 'none' },\n 'shadow-brutal': { boxShadow: 'var(--brutal-shadow)' },\n 'shadow-brutal-sm': { boxShadow: '2px 2px 0 var(--brutal-black)' },\n 'shadow-brutal-md': { boxShadow: '4px 4px 0 var(--brutal-black)' },\n 'shadow-brutal-lg': { boxShadow: '6px 6px 0 var(--brutal-black)' },\n 'shadow-brutal-xl': { boxShadow: '8px 8px 0 var(--brutal-black)' },\n}\n\n// Opacity utilities\nconst opacityUtilities: Record<string, React.CSSProperties> = {\n 'opacity-0': { opacity: '0' },\n 'opacity-5': { opacity: '0.05' },\n 'opacity-10': { opacity: '0.1' },\n 'opacity-20': { opacity: '0.2' },\n 'opacity-25': { opacity: '0.25' },\n 'opacity-30': { opacity: '0.3' },\n 'opacity-40': { opacity: '0.4' },\n 'opacity-50': { opacity: '0.5' },\n 'opacity-60': { opacity: '0.6' },\n 'opacity-70': { opacity: '0.7' },\n 'opacity-75': { opacity: '0.75' },\n 'opacity-80': { opacity: '0.8' },\n 'opacity-90': { opacity: '0.9' },\n 'opacity-95': { opacity: '0.95' },\n 'opacity-100': { opacity: '1' },\n}\n\n// Ring utilities (focus rings)\nconst ringUtilities: Record<string, React.CSSProperties> = {\n 'ring-0': { boxShadow: '0 0 0 0px var(--brutal-black)' },\n 'ring-1': { boxShadow: '0 0 0 1px var(--brutal-black)' },\n 'ring-2': { boxShadow: '0 0 0 2px var(--brutal-black)' },\n 'ring-4': { boxShadow: '0 0 0 4px var(--brutal-black)' },\n 'ring-8': { boxShadow: '0 0 0 8px var(--brutal-black)' },\n 'ring-black': { boxShadow: '0 0 0 2px var(--brutal-black)' },\n 'ring-white': { boxShadow: '0 0 0 2px var(--brutal-white)' },\n 'ring-accent': { boxShadow: '0 0 0 2px var(--brutal-accent)' },\n 'ring-purple': { boxShadow: '0 0 0 4px #8b5cf6' },\n // Ring offset utilities\n 'ring-offset-0': { boxShadow: '0 0 0 0px #fff, 0 0 0 0px var(--brutal-black)' },\n 'ring-offset-1': { boxShadow: '0 0 0 1px #fff, 0 0 0 3px var(--brutal-accent)' },\n 'ring-offset-2': { boxShadow: '0 0 0 2px #fff, 0 0 0 4px var(--brutal-accent)' },\n 'ring-offset-4': { boxShadow: '0 0 0 4px #fff, 0 0 0 6px var(--brutal-accent)' },\n 'ring-offset-8': { boxShadow: '0 0 0 8px #fff, 0 0 0 10px var(--brutal-accent)' },\n}\n\n// Transform utilities\nconst transformUtilities: Record<string, React.CSSProperties> = {\n 'translate-x-0': { transform: 'translateX(0px)' },\n 'translate-x-1': { transform: 'translateX(0.25rem)' },\n 'translate-x-2': { transform: 'translateX(0.5rem)' },\n 'translate-x-4': { transform: 'translateX(1rem)' },\n 'translate-y-0': { transform: 'translateY(0px)' },\n 'translate-y-1': { transform: 'translateY(0.25rem)' },\n 'translate-y-2': { transform: 'translateY(0.5rem)' },\n 'translate-y-4': { transform: 'translateY(1rem)' },\n 'scale-0': { transform: 'scale(0)' },\n 'scale-50': { transform: 'scale(0.5)' },\n 'scale-75': { transform: 'scale(0.75)' },\n 'scale-90': { transform: 'scale(0.9)' },\n 'scale-95': { transform: 'scale(0.95)' },\n 'scale-100': { transform: 'scale(1)' },\n 'scale-105': { transform: 'scale(1.05)' },\n 'scale-110': { transform: 'scale(1.1)' },\n 'scale-125': { transform: 'scale(1.25)' },\n 'scale-150': { transform: 'scale(1.5)' },\n 'rotate-0': { transform: 'rotate(0deg)' },\n 'rotate-1': { transform: 'rotate(1deg)' },\n 'rotate-2': { transform: 'rotate(2deg)' },\n 'rotate-3': { transform: 'rotate(3deg)' },\n 'rotate-6': { transform: 'rotate(6deg)' },\n 'rotate-12': { transform: 'rotate(12deg)' },\n 'rotate-45': { transform: 'rotate(45deg)' },\n 'rotate-90': { transform: 'rotate(90deg)' },\n 'rotate-180': { transform: 'rotate(180deg)' },\n}\n\n// Cursor utilities\nconst cursorUtilities: Record<string, React.CSSProperties> = {\n 'cursor-auto': { cursor: 'auto' },\n 'cursor-default': { cursor: 'default' },\n 'cursor-pointer': { cursor: 'pointer' },\n 'cursor-wait': { cursor: 'wait' },\n 'cursor-text': { cursor: 'text' },\n 'cursor-move': { cursor: 'move' },\n 'cursor-help': { cursor: 'help' },\n 'cursor-not-allowed': { cursor: 'not-allowed' },\n 'cursor-none': { cursor: 'none' },\n 'cursor-context-menu': { cursor: 'context-menu' },\n 'cursor-progress': { cursor: 'progress' },\n 'cursor-cell': { cursor: 'cell' },\n 'cursor-crosshair': { cursor: 'crosshair' },\n 'cursor-vertical-text': { cursor: 'vertical-text' },\n 'cursor-alias': { cursor: 'alias' },\n 'cursor-copy': { cursor: 'copy' },\n 'cursor-no-drop': { cursor: 'no-drop' },\n 'cursor-grab': { cursor: 'grab' },\n 'cursor-grabbing': { cursor: 'grabbing' },\n}\n\n// Transition utilities\nconst transitionUtilities: Record<string, React.CSSProperties> = {\n 'transition-none': { transition: 'none' },\n 'transition-all': { transition: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)' },\n 'transition': { transition: 'color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), fill 150ms cubic-bezier(0.4, 0, 0.2, 1), stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)' },\n 'transition-colors': { transition: 'color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), fill 150ms cubic-bezier(0.4, 0, 0.2, 1), stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)' },\n 'transition-opacity': { transition: 'opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)' },\n 'transition-shadow': { transition: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1)' },\n 'transition-transform': { transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1)' },\n // Duration modifiers\n 'duration-75': { transitionDuration: '75ms' },\n 'duration-100': { transitionDuration: '100ms' },\n 'duration-150': { transitionDuration: '150ms' },\n 'duration-200': { transitionDuration: '200ms' },\n 'duration-300': { transitionDuration: '300ms' },\n 'duration-500': { transitionDuration: '500ms' },\n 'duration-700': { transitionDuration: '700ms' },\n 'duration-1000': { transitionDuration: '1000ms' },\n}\n\n/**\n * Parse a utility class and return corresponding CSS properties\n */\nexport function parseUtilityClass(className: string): React.CSSProperties | null {\n // Check display utilities\n if (displayUtilities[className]) {\n return displayUtilities[className]\n }\n \n // Check flex utilities\n if (flexUtilities[className]) {\n return flexUtilities[className]\n }\n \n // Check size utilities\n if (sizeUtilities[className]) {\n return sizeUtilities[className]\n }\n \n // Check position utilities\n if (positionUtilities[className]) {\n return positionUtilities[className]\n }\n \n // Check overflow utilities\n if (overflowUtilities[className]) {\n return overflowUtilities[className]\n }\n \n // Check typography utilities\n if (typographyUtilities[className]) {\n return typographyUtilities[className]\n }\n \n // Check color utilities\n if (colorUtilities[className]) {\n return colorUtilities[className]\n }\n \n // Check border utilities\n if (borderUtilities[className]) {\n return borderUtilities[className]\n }\n \n // Check shadow utilities\n if (shadowUtilities[className]) {\n return shadowUtilities[className]\n }\n \n // Check opacity utilities\n if (opacityUtilities[className]) {\n return opacityUtilities[className]\n }\n \n // Check ring utilities\n if (ringUtilities[className]) {\n return ringUtilities[className]\n }\n \n // Check transform utilities\n if (transformUtilities[className]) {\n return transformUtilities[className]\n }\n \n // Check transition utilities\n if (transitionUtilities[className]) {\n return transitionUtilities[className]\n }\n \n // Check cursor utilities\n if (cursorUtilities[className]) {\n return cursorUtilities[className]\n }\n \n // Check spacing utilities\n for (const [prefix, generator] of Object.entries(utilityPatterns)) {\n if (className.startsWith(`${prefix}-`)) {\n const value = className.slice(prefix.length + 1)\n if (spacingScale[value]) {\n return generator(value)\n }\n }\n }\n \n // Check for margin auto utilities\n if (className === 'm-auto') return { margin: 'auto' }\n if (className === 'mt-auto') return { marginTop: 'auto' }\n if (className === 'mr-auto') return { marginRight: 'auto' }\n if (className === 'mb-auto') return { marginBottom: 'auto' }\n if (className === 'ml-auto') return { marginLeft: 'auto' }\n if (className === 'mx-auto') return { marginLeft: 'auto', marginRight: 'auto' }\n if (className === 'my-auto') return { marginTop: 'auto', marginBottom: 'auto' }\n \n return null\n}\n\n/**\n * Parse multiple utility classes and merge into a single style object\n */\nexport function parseUtilityClasses(classNames: string): React.CSSProperties {\n const classes = classNames.split(' ').filter(Boolean)\n const styles: React.CSSProperties = {}\n \n for (const className of classes) {\n const parsed = parseUtilityClass(className)\n if (parsed) {\n Object.assign(styles, parsed)\n }\n }\n \n return styles\n}\n\n/**\n * Extract utility classes and non-utility classes from a className string\n */\nexport function extractUtilityClasses(className: string): {\n utilities: string[]\n others: string[]\n styles: React.CSSProperties\n} {\n const classes = className.split(' ').filter(Boolean)\n const utilities: string[] = []\n const others: string[] = []\n const styles: React.CSSProperties = {}\n \n for (const cls of classes) {\n const parsed = parseUtilityClass(cls)\n if (parsed) {\n utilities.push(cls)\n Object.assign(styles, parsed)\n } else {\n others.push(cls)\n }\n }\n \n return { utilities, others, styles }\n}","/**\n * Responsive and state-based utility system for Brutalist UI\n */\n\n// Breakpoint definitions\nexport const breakpoints = {\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n '2xl': '1536px'\n} as const\n\n// State modifiers\nexport const stateModifiers = [\n 'hover',\n 'focus',\n 'active',\n 'disabled',\n 'focus-within',\n 'focus-visible'\n] as const\n\nexport type Breakpoint = keyof typeof breakpoints\nexport type StateModifier = typeof stateModifiers[number]\n\n/**\n * Parse a utility class with modifiers\n * Examples: \n * - \"sm:px-4\" -> { breakpoint: 'sm', utility: 'px-4' }\n * - \"hover:bg-gray-100\" -> { state: 'hover', utility: 'bg-gray-100' }\n * - \"md:hover:text-blue\" -> { breakpoint: 'md', state: 'hover', utility: 'text-blue' }\n */\nexport function parseModifiedUtility(className: string): {\n breakpoint?: Breakpoint\n state?: StateModifier\n utility: string\n} {\n const parts = className.split(':')\n \n if (parts.length === 1) {\n // No modifiers\n return { utility: parts[0] }\n }\n \n let breakpoint: Breakpoint | undefined\n let state: StateModifier | undefined\n let utility: string\n \n if (parts.length === 2) {\n // One modifier\n const [modifier, utilityPart] = parts\n \n if (modifier in breakpoints) {\n breakpoint = modifier as Breakpoint\n } else if (stateModifiers.includes(modifier as StateModifier)) {\n state = modifier as StateModifier\n }\n \n utility = utilityPart\n } else if (parts.length === 3) {\n // Two modifiers (breakpoint and state)\n const [breakpointPart, statePart, utilityPart] = parts\n \n if (breakpointPart in breakpoints) {\n breakpoint = breakpointPart as Breakpoint\n }\n \n if (stateModifiers.includes(statePart as StateModifier)) {\n state = statePart as StateModifier\n }\n \n utility = utilityPart\n } else {\n // Invalid format, return the last part as utility\n utility = parts[parts.length - 1]\n }\n \n return { breakpoint, state, utility }\n}\n\n/**\n * Generate CSS for responsive utilities\n */\nexport function generateResponsiveCSS(\n breakpoint: Breakpoint,\n selector: string,\n styles: React.CSSProperties\n): string {\n const cssProperties = Object.entries(styles)\n .map(([prop, value]) => {\n const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase()\n return `${cssProp}: ${value};`\n })\n .join('\\n ')\n \n return `\n @media (min-width: ${breakpoints[breakpoint]}) {\n ${selector} {\n ${cssProperties}\n }\n }`\n}\n\n/**\n * Generate CSS for state-based utilities\n */\nexport function generateStateCSS(\n state: StateModifier,\n selector: string,\n styles: React.CSSProperties\n): string {\n const cssProperties = Object.entries(styles)\n .map(([prop, value]) => {\n const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase()\n // Add !important to ensure state styles override base styles\n return `${cssProp}: ${value} !important;`\n })\n .join('\\n ')\n \n const stateSelector = state === 'focus-within' ? 'focus-within' : \n state === 'focus-visible' ? 'focus-visible' :\n state\n \n return `\n ${selector}:${stateSelector} {\n ${cssProperties}\n }`\n}\n\n/**\n * Group utilities by their modifiers for efficient CSS generation\n */\nexport function groupUtilitiesByModifiers(classNames: string[]): {\n base: string[]\n responsive: Map<Breakpoint, string[]>\n states: Map<StateModifier, string[]>\n responsiveStates: Map<`${Breakpoint}:${StateModifier}`, string[]>\n} {\n const base: string[] = []\n const responsive = new Map<Breakpoint, string[]>()\n const states = new Map<StateModifier, string[]>()\n const responsiveStates = new Map<`${Breakpoint}:${StateModifier}`, string[]>()\n \n for (const className of classNames) {\n const { breakpoint, state, utility } = parseModifiedUtility(className)\n \n if (!breakpoint && !state) {\n base.push(utility)\n } else if (breakpoint && !state) {\n if (!responsive.has(breakpoint)) {\n responsive.set(breakpoint, [])\n }\n responsive.get(breakpoint)!.push(utility)\n } else if (!breakpoint && state) {\n if (!states.has(state)) {\n states.set(state, [])\n }\n states.get(state)!.push(utility)\n } else if (breakpoint && state) {\n const key = `${breakpoint}:${state}` as const\n if (!responsiveStates.has(key)) {\n responsiveStates.set(key, [])\n }\n responsiveStates.get(key)!.push(utility)\n }\n }\n \n return { base, responsive, states, responsiveStates }\n}","/**\n * Enhanced hook for processing utility classes with responsive and state modifiers\n */\n\nimport { useMemo, useEffect, useRef } from 'react'\nimport { clsx } from 'clsx'\nimport { parseUtilityClass } from '../utils/utility-classes'\nimport { parseModifiedUtility, groupUtilitiesByModifiers, generateResponsiveCSS, generateStateCSS, breakpoints } from '../utils/responsive-utilities'\nimport type { CSSProperties } from 'react'\n\nlet styleId = 0\n\nexport interface UseResponsiveUtilitiesOptions {\n /**\n * The className prop from the component\n */\n className?: string\n \n /**\n * The style prop from the component\n */\n style?: CSSProperties\n \n /**\n * Base component classes (from CSS modules)\n */\n componentClasses?: string | string[]\n \n /**\n * Component instance ID for unique CSS generation\n */\n componentId?: string\n}\n\nexport interface UseResponsiveUtilitiesResult {\n /**\n * Combined className string\n */\n className: string\n \n /**\n * Combined style object for base utilities\n */\n style?: CSSProperties\n}\n\n/**\n * Hook that processes utility classes with responsive and state modifiers\n * \n * @example\n * ```tsx\n * const { className, style } = useResponsiveUtilities({\n * className: \"mt-4 hover:bg-gray-100 md:px-6 lg:hover:shadow-lg\",\n * style: { color: 'red' },\n * componentClasses: styles.button\n * })\n * ```\n */\nexport function useResponsiveUtilities(options: UseResponsiveUtilitiesOptions): UseResponsiveUtilitiesResult {\n const {\n className = '',\n style = {},\n componentClasses = '',\n componentId\n } = options\n \n const styleElementRef = useRef<HTMLStyleElement | null>(null)\n const uniqueIdRef = useRef<string>(`brutal-${componentId || `util-${styleId++}`}`)\n \n const result = useMemo(() => {\n if (!className) {\n return {\n className: clsx(componentClasses),\n style\n }\n }\n \n const classes = className.split(' ').filter(Boolean)\n const utilityClasses: string[] = []\n const nonUtilityClasses: string[] = []\n const baseStyles: CSSProperties = {}\n \n // Separate utility classes from non-utility classes\n for (const cls of classes) {\n const { utility } = parseModifiedUtility(cls)\n const parsed = parseUtilityClass(utility)\n \n if (parsed) {\n utilityClasses.push(cls)\n // Only add base styles for non-modified utilities\n if (cls === utility) {\n Object.assign(baseStyles, parsed)\n }\n } else {\n nonUtilityClasses.push(cls)\n }\n }\n \n // Group utilities by modifiers\n const grouped = groupUtilitiesByModifiers(utilityClasses)\n \n // Generate CSS for responsive and state utilities\n let generatedCSS = ''\n const uniqueClass = uniqueIdRef.current\n \n // Generate responsive CSS\n for (const [breakpoint, utilities] of grouped.responsive) {\n const breakpointStyles: CSSProperties = {}\n for (const utility of utilities) {\n const parsed = parseUtilityClass(utility)\n if (parsed) {\n Object.assign(breakpointStyles, parsed)\n }\n }\n if (Object.keys(breakpointStyles).length > 0) {\n generatedCSS += generateResponsiveCSS(breakpoint, `.${uniqueClass}`, breakpointStyles)\n }\n }\n \n // Generate state CSS\n for (const [state, utilities] of grouped.states) {\n const stateStyles: CSSProperties = {}\n const transformValues: string[] = []\n \n for (const utility of utilities) {\n const parsed = parseUtilityClass(utility)\n if (parsed) {\n // Handle transform utilities specially to combine them\n if (parsed.transform && typeof parsed.transform === 'string') {\n transformValues.push(parsed.transform)\n } else {\n Object.assign(stateStyles, parsed)\n }\n }\n }\n \n // Combine transform values\n if (transformValues.length > 0) {\n stateStyles.transform = transformValues.join(' ')\n }\n \n if (Object.keys(stateStyles).length > 0) {\n generatedCSS += generateStateCSS(state, `.${uniqueClass}`, stateStyles)\n }\n }\n \n // Generate responsive state CSS\n for (const [key, utilities] of grouped.responsiveStates) {\n const [breakpoint, state] = key.split(':') as [string, string]\n const responsiveStateStyles: CSSProperties = {}\n const transformValues: string[] = []\n \n for (const utility of utilities) {\n const parsed = parseUtilityClass(utility)\n if (parsed) {\n // Handle transform utilities specially to combine them\n if (parsed.transform && typeof parsed.transform === 'string') {\n transformValues.push(parsed.transform)\n } else {\n Object.assign(responsiveStateStyles, parsed)\n }\n }\n }\n \n // Combine transform values\n if (transformValues.length > 0) {\n responsiveStateStyles.transform = transformValues.join(' ')\n }\n \n if (Object.keys(responsiveStateStyles).length > 0) {\n const stateCss = generateStateCSS(state as any, `.${uniqueClass}`, responsiveStateStyles)\n // Wrap state CSS in media query with resolved breakpoint value\n const breakpointValue = breakpoints[breakpoint as keyof typeof breakpoints]\n generatedCSS += `\n @media (min-width: ${breakpointValue}) {\n ${stateCss.trim()}\n }`\n }\n }\n \n return {\n className: clsx(\n componentClasses,\n generatedCSS ? uniqueClass : '',\n ...nonUtilityClasses\n ),\n style: Object.keys(baseStyles).length > 0\n ? { ...baseStyles, ...style }\n : style,\n generatedCSS\n }\n }, [className, style, componentClasses])\n \n // Inject generated CSS\n useEffect(() => {\n if (result.generatedCSS && typeof document !== 'undefined') {\n // Create or update style element\n if (!styleElementRef.current) {\n styleElementRef.current = document.createElement('style')\n styleElementRef.current.setAttribute('data-brutal-utilities', uniqueIdRef.current)\n document.head.appendChild(styleElementRef.current)\n }\n \n styleElementRef.current.textContent = result.generatedCSS\n \n // Debug logging\n if (process.env.NODE_ENV === 'development') {\n console.log('Generated CSS for', uniqueIdRef.current, ':\\n', result.generatedCSS)\n }\n \n // Cleanup\n return () => {\n if (styleElementRef.current && styleElementRef.current.parentNode) {\n styleElementRef.current.parentNode.removeChild(styleElementRef.current)\n styleElementRef.current = null\n }\n }\n }\n }, [result.generatedCSS])\n \n return {\n className: result.className,\n style: result.style\n }\n}\n\n/**\n * Enhanced version of useUtilityStyles that supports responsive and state modifiers\n */\nexport function useEnhancedUtilityStyles(\n className?: string,\n style?: CSSProperties,\n componentClasses?: string | string[]\n): UseResponsiveUtilitiesResult {\n return useResponsiveUtilities({\n className,\n style,\n componentClasses\n })\n}","/**\n * Hook for processing utility classes in Brutalist UI components\n * Handles both inline styles and CSS module classes\n */\n\nimport { useMemo } from 'react'\nimport { clsx } from 'clsx'\nimport { extractUtilityClasses } from '../utils/utility-classes'\nimport { useResponsiveUtilities } from './useResponsiveUtilities'\nimport type { CSSProperties } from 'react'\n\nexport interface UseUtilityClassesOptions {\n /**\n * The className prop from the component\n */\n className?: string\n \n /**\n * The style prop from the component\n */\n style?: CSSProperties\n \n /**\n * Whether to use CSS modules for utility classes\n * @default false - uses inline styles\n */\n useUtilityCSS?: boolean\n \n /**\n * Base component classes (from CSS modules)\n */\n componentClasses?: string | string[]\n}\n\nexport interface UseUtilityClassesResult {\n /**\n * Combined className string (component classes + non-utility classes + utility CSS classes if enabled)\n */\n className: string\n \n /**\n * Combined style object (component styles + utility styles if not using CSS)\n */\n style?: CSSProperties\n}\n\n/**\n * Hook that processes utility classes and merges them with component classes and styles\n * \n * @example\n * ```tsx\n * const { className, style } = useUtilityClasses({\n * className: \"mt-4 mb-2 custom-class\",\n * style: { color: 'red' },\n * componentClasses: styles.button\n * })\n * ```\n */\nexport function useUtilityClasses(options: UseUtilityClassesOptions): UseUtilityClassesResult {\n const {\n className = '',\n style = {},\n useUtilityCSS = false,\n componentClasses = ''\n } = options\n \n return useMemo(() => {\n // Extract utility classes and parse them\n const { utilities, others, styles: parsedStyles } = extractUtilityClasses(className)\n \n if (useUtilityCSS) {\n // Use CSS module classes for utilities\n // Note: This would require importing the CSS module, which we'll handle in component implementation\n return {\n className: clsx(\n componentClasses,\n ...utilities, // Pass through utility classes for now\n ...others\n ),\n style: style\n }\n } else {\n // Use inline styles for utilities\n return {\n className: clsx(\n componentClasses,\n ...others\n ),\n style: Object.keys(parsedStyles).length > 0\n ? { ...parsedStyles, ...style }\n : style\n }\n }\n }, [className, style, useUtilityCSS, componentClasses])\n}\n\n/**\n * Alternative hook that always uses inline styles (simpler API)\n * \n * @example\n * ```tsx\n * const { className, style } = useUtilityStyles(\n * \"mt-4 mb-2 custom-class\",\n * { color: 'red' },\n * styles.button\n * )\n * ```\n */\nexport function useUtilityStyles(\n className?: string,\n style?: CSSProperties,\n componentClasses?: string | string[]\n): UseUtilityClassesResult {\n // Use the enhanced responsive utilities hook\n return useResponsiveUtilities({\n className,\n style,\n componentClasses\n }) as UseUtilityClassesResult\n}\n\n/**\n * Alternative hook that always uses CSS module classes\n * \n * @example\n * ```tsx\n * const { className } = useUtilityCSSClasses(\n * \"mt-4 mb-2 custom-class\",\n * styles.button\n * )\n * ```\n */\nexport function useUtilityCSSClasses(\n className?: string,\n componentClasses?: string | string[]\n): UseUtilityClassesResult {\n return useUtilityClasses({\n className,\n useUtilityCSS: true,\n componentClasses\n })\n}","/**\n * @module Box\n * @description A primitive component that supports all utility classes for layout and styling\n */\n\nimport React, { forwardRef, HTMLAttributes } from 'react'\nimport { useResponsiveUtilities } from '../hooks/useResponsiveUtilities'\n\n/**\n * Props for the Box component\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The HTML element to render\n * @default 'div'\n */\n as?: keyof JSX.IntrinsicElements\n}\n\n/**\n * A primitive component that supports all utility classes for layout and styling.\n * Can be used as any HTML element via the 'as' prop.\n * \n * @example\n * ```tsx\n * <Box className=\"p-4 bg-gray-100 rounded-lg shadow-brutal\">\n * <Box as=\"h1\" className=\"text-2xl font-bold mb-4\">Title</Box>\n * <Box as=\"p\" className=\"text-gray-600\">Content goes here</Box>\n * </Box>\n * ```\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n ({ as: Component = 'div', className, style, children, ...props }, ref) => {\n const { className: processedClassName, style: processedStyle } = useResponsiveUtilities({\n className,\n style\n })\n\n return React.createElement(\n Component,\n {\n ...props,\n ref,\n className: processedClassName,\n style: processedStyle,\n },\n children\n )\n }\n)\n\nBox.displayName = 'Box'","/**\n * @license React\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var f=require(\"react\"),k=Symbol.for(\"react.element\"),l=Symbol.for(\"react.fragment\"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};\nfunction q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=\"\"+g);void 0!==a.key&&(e=\"\"+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;\n","/**\n * @license React\n * react-jsx-runtime.development.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nif (process.env.NODE_ENV !== \"production\") {\n (function() {\n'use strict';\n\nvar React = require('react');\n\n// ATTENTION\n// When adding new symbols to this file,\n// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'\n// The Symbol used to tag the ReactElement-like types.\nvar REACT_ELEMENT_TYPE = Symbol.for('react.element');\nvar REACT_PORTAL_TYPE = Symbol.for('react.portal');\nvar REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');\nvar REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');\nvar REACT_PROFILER_TYPE = Symbol.for('react.profiler');\nvar REACT_PROVIDER_TYPE = Symbol.for('react.provider');\nvar REACT_CONTEXT_TYPE = Symbol.for('react.context');\nvar REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');\nvar REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');\nvar REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');\nvar REACT_MEMO_TYPE = Symbol.for('react.memo');\nvar REACT_LAZY_TYPE = Symbol.for('react.lazy');\nvar REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');\nvar MAYBE_ITERATOR_SYMBOL = Symbol.iterator;\nvar FAUX_ITERATOR_SYMBOL = '@@iterator';\nfunction getIteratorFn(maybeIterable) {\n if (maybeIterable === null || typeof maybeIterable !== 'object') {\n return null;\n }\n\n var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];\n\n if (typeof maybeIterator === 'function') {\n return maybeIterator;\n }\n\n return null;\n}\n\nvar ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n\nfunction error(format) {\n {\n {\n for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n args[_key2 - 1] = arguments[_key2];\n }\n\n printWarning('error', format, args);\n }\n }\n}\n\nfunction printWarning(level, format, args) {\n // When changing this logic, you might want to also\n // update consoleWithStackDev.www.js as well.\n {\n var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;\n var stack = ReactDebugCurrentFrame.getStackAddendum();\n\n if (stack !== '') {\n format += '%s';\n args = args.concat([stack]);\n } // eslint-disable-next-line react-internal/safe-string-coercion\n\n\n var argsWithFormat = args.map(function (item) {\n return String(item);\n }); // Careful: RN currently depends on this prefix\n\n argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it\n // breaks IE9: https://github.com/facebook/react/issues/13610\n // eslint-disable-next-line react-internal/no-production-logging\n\n Function.prototype.apply.call(console[level], console, argsWithFormat);\n }\n}\n\n// -----------------------------------------------------------------------------\n\nvar enableScopeAPI = false; // Experimental Create Event Handle API.\nvar enableCacheElement = false;\nvar enableTransitionTracing = false; // No known bugs, but needs performance testing\n\nvar enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber\n// stuff. Intended to enable React core members to more easily debug scheduling\n// issues in DEV builds.\n\nvar enableDebugTracing = false; // Track which Fiber(s) schedule render work.\n\nvar REACT_MODULE_REFERENCE;\n\n{\n REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');\n}\n\nfunction isValidElementType(type) {\n if (typeof type === 'string' || typeof type === 'function') {\n return true;\n } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).\n\n\n if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {\n return true;\n }\n\n if (typeof type === 'object' && type !== null) {\n if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object\n // types supported by any Flight configuration anywhere since\n // we don't know which Flight build this will end up being used\n // with.\n type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {\n return true;\n }\n }\n\n return false;\n}\n\nfunction getWrappedName(outerType, innerType, wrapperName) {\n var displayName = outerType.displayName;\n\n if (displayName) {\n return displayName;\n }\n\n var functionName = innerType.displayName || innerType.name || '';\n return functionName !== '' ? wrapperName + \"(\" + functionName + \")\" : wrapperName;\n} // Keep in sync with react-reconciler/getComponentNameFromFiber\n\n\nfunction getContextName(type) {\n return type.displayName || 'Context';\n} // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.\n\n\nfunction getComponentNameFromType(type) {\n if (type == null) {\n // Host root, text node or just invalid type.\n return null;\n }\n\n {\n if (typeof type.tag === 'number') {\n error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');\n }\n }\n\n if (typeof type === 'function') {\n return type.displayName || type.name || null;\n }\n\n if (typeof type === 'string') {\n return type;\n }\n\n switch (type) {\n case REACT_FRAGMENT_TYPE:\n return 'Fragment';\n\n case REACT_PORTAL_TYPE:\n return 'Portal';\n\n case REACT_PROFILER_TYPE:\n return 'Profiler';\n\n case REACT_STRICT_MODE_TYPE:\n return 'StrictMode';\n\n case REACT_SUSPENSE_TYPE:\n return 'Suspense';\n\n case REACT_SUSPENSE_LIST_TYPE:\n return 'SuspenseList';\n\n }\n\n if (typeof type === 'object') {\n switch (type.$$typeof) {\n case REACT_CONTEXT_TYPE:\n var context = type;\n return getContextName(context) + '.Consumer';\n\n case REACT_PROVIDER_TYPE:\n var provider = type;\n return getContextName(provider._context) + '.Provider';\n\n case REACT_FORWARD_REF_TYPE:\n return getWrappedName(type, type.render, 'ForwardRef');\n\n case REACT_MEMO_TYPE:\n var outerName = type.displayName || null;\n\n if (outerName !== null) {\n return outerName;\n }\n\n return getComponentNameFromType(type.type) || 'Memo';\n\n case REACT_LAZY_TYPE:\n {\n var lazyComponent = type;\n var payload = lazyComponent._payload;\n var init = lazyComponent._init;\n\n try {\n return getComponentNameFromType(init(payload));\n } catch (x) {\n return null;\n }\n }\n\n // eslint-disable-next-line no-fallthrough\n }\n }\n\n return null;\n}\n\nvar assign = Object.assign;\n\n// Helpers to patch console.logs to avoid logging during side-effect free\n// replaying on render function. This currently only patches the object\n// lazily which won't cover if the log function was extracted eagerly.\n// We could also eagerly patch the method.\nvar disabledDepth = 0;\nvar prevLog;\nvar prevInfo;\nvar prevWarn;\nvar prevError;\nvar prevGroup;\nvar prevGroupCollapsed;\nvar prevGroupEnd;\n\nfunction disabledLog() {}\n\ndisabledLog.__reactDisabledLog = true;\nfunction disableLogs() {\n {\n if (disabledDepth === 0) {\n /* eslint-disable react-internal/no-production-logging */\n prevLog = console.log;\n prevInfo = console.info;\n prevWarn = console.warn;\n prevError = console.error;\n prevGroup = console.group;\n prevGroupCollapsed = console.groupCollapsed;\n prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099\n\n var props = {\n configurable: true,\n enumerable: true,\n value: disabledLog,\n writable: true\n }; // $FlowFixMe Flow thinks console is immutable.\n\n Object.defineProperties(console, {\n info: props,\n log: props,\n warn: props,\n error: props,\n group: props,\n