@metropolle/design-system 1.0.0-beta.2025.9.3.1718.3e1e35c → 1.0.0-beta.2025.9.30.1300.746e606

package/dist/css/mermaid.css

@@ -0,0 +1,102 @@
+/* Metropolle Design System – Mermaid Diagram Styling */
+
+/*
+   Provides palette-aware theming for Mermaid diagrams that matches the
+   architecture documentation reference. Consumers should pair these styles
+   with the class definitions exported in documentation snippets (ex: pastelBlue,
+   accentOrange) to ensure consistent fill and typography across projects.
+*/
+
+:root {
+  --mds-mermaid-label-dark: var(--mds-color-neutral-900, #0f172a);
+  --mds-mermaid-label-light: var(--mds-color-neutral-50, #f8fafc);
+  --mds-mermaid-node-font-weight: 600;
+  --mds-mermaid-edge-font-weight: 500;
+}
+
+/* Base container styling – glass morphism aligned with platform visuals */
+html[data-theme='dark'] .mermaid {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-radius: var(--mds-border-radius-lg, 12px);
+  padding: var(--mds-space-4, 1rem);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin: var(--mds-space-4, 1rem) 0;
+}
+
+html[data-theme='light'] .mermaid {
+  background: rgba(255, 255, 255, 0.7) !important;
+  border-radius: var(--mds-border-radius-lg, 12px);
+  padding: var(--mds-space-4, 1rem);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  margin: var(--mds-space-4, 1rem) 0;
+  box-shadow: var(--mds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+}
+
+/* Default typography settings for nodes and clusters */
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) {
+  --mds-mermaid-node-color: var(--mds-mermaid-label-dark);
+  --mds-mermaid-node-weight-current: var(--mds-mermaid-node-font-weight);
+}
+
+/* Switch to light foreground when nodes use strong accent fills */
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#00bcd4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1565c0" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1976d2" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#2196f3" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#34a853" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#388e3c" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3b82f6" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3f48cc" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4285f4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#45b7d1" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4b612c" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4caf50" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4ecdc4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#607d8b" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#627eea" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#673ab7" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#689f38" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#759c3e" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#795548" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#7b1fa2" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#96ceb4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#9c27b0" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#c2185b" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#dd344c" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#e91e63" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f44336" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f57c00" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f7931a" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff5722" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff6b6b" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff9800" i]) {
+  --mds-mermaid-node-color: var(--mds-mermaid-label-light);
+}
+
+/* Apply the computed foreground colour to all supported Mermaid label types */
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label text,
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label tspan {
+  fill: var(--mds-mermaid-node-color) !important;
+  font-weight: var(--mds-mermaid-node-weight-current);
+}
+
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
+  color: var(--mds-mermaid-node-color) !important;
+  font-weight: var(--mds-mermaid-node-weight-current);
+}
+
+/* Preserve lighter typography for edge labels so they remain legible */
+html[data-theme='dark'] .mermaid .edgeLabel text,
+html[data-theme='dark'] .mermaid .edgeLabel tspan {
+  fill: var(--ifm-font-color-base, #e5e7eb) !important;
+  font-weight: var(--mds-mermaid-edge-font-weight);
+}
+
+/* Light theme keeps default dark text but enforces consistent weight */
+html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label text,
+html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label tspan,
+html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
+  font-weight: var(--mds-mermaid-node-font-weight, 600);
+}

package/dist/react/components/react/Select/Select.d.ts

@@ -0,0 +1,19 @@
+import React, { SelectHTMLAttributes } from 'react';
+export interface SelectOption {
+    label: React.ReactNode;
+    value: string;
+}
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    options?: SelectOption[];
+    variant?: 'base' | 'dashboard';
+    containerClassName?: string;
+}
+/**
+ * Select Component (Design System)
+ *
+ * Provides a themed select element. The `dashboard` variant uses the
+ * dashboard control styles/tokens to match the Refresh button styling
+ * across light/dark themes.
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=Select.d.ts.map

package/dist/react/components/react/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAE1E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,uFAsCjB,CAAC"}

package/dist/react/components/react/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select, type SelectProps, type SelectOption } from './Select';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/dist/react/components/react/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface ThemeToggleProps {
+    /**
+     * Size variant of the toggle button
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * CSS class name to apply
+     */
+    className?: string;
+    /**
+     * Whether the toggle is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when theme changes
+     */
+    onChange?: (theme: 'light' | 'dark') => void;
+    /**
+     * Storage key for persisting theme preference
+     * @default 'theme'
+     */
+    storageKey?: string;
+}
+export default function ThemeToggle({ size, className, disabled, onChange, storageKey }: ThemeToggleProps): React.JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/react/components/react/ThemeToggle/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ThemeToggle/ThemeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAE7C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAW,EACX,SAAc,EACd,QAAgB,EAChB,QAAQ,EACR,UAAoB,EACrB,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgGtC"}

package/dist/react/components/react/ThemeToggle/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ThemeToggle } from './ThemeToggle';
+export type { ThemeToggleProps } from './ThemeToggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/ThemeToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ThemeToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/react/components/react/index.d.ts

@@ -1,13 +1,17 @@
 export { GlassCard, type GlassCardProps } from './GlassCard';
 export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
 export { Button, type ButtonProps } from './Button';
+export { Select, type SelectProps } from './Select';
+export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { cn } from '../../utils/cn';
 export * from './GlassCard';
 export * from './Typography';
 export * from './Button';
+export * from './Select';
 export * from './Modal/Modal';
 export * from './Modal/ModalHeader';
 export * from './Modal/ModalBody';
 export * from './Modal/ModalFooter';
 export * from './Modal/ConfirmDialog';
+export * from './ThemeToggle';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/react/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/react/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}

package/dist/react/index.d.ts

@@ -1,13 +1,17 @@
 export { GlassCard, type GlassCardProps } from './GlassCard';
 export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
 export { Button, type ButtonProps } from './Button';
+export { Select, type SelectProps } from './Select';
+export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { cn } from '../../utils/cn';
 export * from './GlassCard';
 export * from './Typography';
 export * from './Button';
+export * from './Select';
 export * from './Modal/Modal';
 export * from './Modal/ModalHeader';
 export * from './Modal/ModalBody';
 export * from './Modal/ModalFooter';
 export * from './Modal/ConfirmDialog';
+export * from './ThemeToggle';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.esm.js

@@ -1,4 +1,4 @@
-import require$$0, { forwardRef, useState, useRef, useEffect } from 'react';
+import require$$0, { forwardRef, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 var jsxRuntime = {exports: {}};
@@ -1490,6 +1490,95 @@ Button.displayName = 'Button';
  */
 const LoadingSpinner = () => (jsxRuntimeExports.jsxs("svg", { className: "mds-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntimeExports.jsx("circle", { className: "mds-spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", opacity: "0.25" }), jsxRuntimeExports.jsx("circle", { className: "mds-spinner__path", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40 20", strokeLinecap: "round" })] }));
 
+/**
+ * Select Component (Design System)
+ *
+ * Provides a themed select element. The `dashboard` variant uses the
+ * dashboard control styles/tokens to match the Refresh button styling
+ * across light/dark themes.
+ */
+const Select = forwardRef(({ options, children, className, containerClassName, variant = 'dashboard', ...rest }, ref) => {
+    const selectEl = (jsxRuntimeExports.jsx("select", { ref: ref, className: cn(variant === 'dashboard'
+            ? 'mds-period-filter__select'
+            : 'mds-input mds-select', className), ...rest, children: options
+            ? options.map(opt => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))
+            : children }));
+    if (variant === 'dashboard') {
+        return (jsxRuntimeExports.jsx("div", { className: cn('mds-period-filter', containerClassName), children: selectEl }));
+    }
+    return selectEl;
+});
+Select.displayName = 'Select';
+
+function ThemeToggle({ size = 'md', className = '', disabled = false, onChange, storageKey = 'theme' }) {
+    const [theme, setTheme] = useState('dark');
+    const [mounted, setMounted] = useState(false);
+    // Initialize theme on mount
+    useEffect(() => {
+        try {
+            if (typeof window !== 'undefined') {
+                const savedTheme = localStorage.getItem(storageKey) || 'dark';
+                setTheme(savedTheme);
+                document.documentElement.setAttribute('data-theme', savedTheme);
+                setMounted(true);
+            }
+        }
+        catch (err) {
+            setTheme('dark');
+            setMounted(true);
+        }
+    }, [storageKey]);
+    // Listen to external theme changes
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const updateTheme = () => {
+                const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
+                setTheme(currentTheme);
+            };
+            const observer = new MutationObserver(() => {
+                updateTheme();
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+            return () => observer.disconnect();
+        }
+    }, []);
+    const toggleTheme = () => {
+        if (disabled)
+            return;
+        try {
+            const newTheme = theme === 'light' ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem(storageKey, newTheme);
+            setTheme(newTheme);
+            onChange?.(newTheme);
+        }
+        catch (err) {
+            console.warn('Failed to toggle theme:', err);
+        }
+    };
+    // Don't render until mounted (prevents hydration mismatch)
+    if (!mounted) {
+        return (jsxRuntimeExports.jsx("div", { className: `mds-theme-toggle mds-theme-toggle--${size} ${className}`, style: { opacity: 0.5 }, "aria-hidden": "true" }));
+    }
+    const isDark = theme === 'dark';
+    const buttonStyle = isDark
+        ? {
+            backgroundColor: 'rgba(0, 0, 0, 0.35)',
+            border: '1px solid rgba(255, 255, 255, 0.18)',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)'
+        }
+        : undefined;
+    const buttonClasses = [
+        'mds-theme-toggle',
+        `mds-theme-toggle--${size}`,
+        className
+    ].filter(Boolean).join(' ');
+    return (jsxRuntimeExports.jsx("button", { onClick: toggleTheme, className: buttonClasses, disabled: disabled, type: "button", "aria-pressed": isDark, "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, title: `Switch to ${isDark ? 'light' : 'dark'} mode`, "data-theme": isDark ? 'dark' : 'light', style: buttonStyle }));
+}
+
 function Modal({ open, onClose, closeOnOverlay = true, children, className, style }) {
     const [mounted, setMounted] = useState(false);
     const [visible, setVisible] = useState(false);
@@ -1617,5 +1706,5 @@ function ConfirmDialog({ open, onClose, title, description, confirmText = 'Confi
     return (jsxRuntimeExports.jsx(Modal, { open: open, onClose: onClose, closeOnOverlay: !disableOverlayClose, children: jsxRuntimeExports.jsxs("div", { className: "mds-modal-card", style: { maxWidth: 480, width: '100%' }, children: [jsxRuntimeExports.jsx(ModalHeader, { title: title, icon: icon ?? toneIcon[tone], onClose: onClose, align: "center" }), description && (jsxRuntimeExports.jsx("div", { style: { padding: '0 24px 16px 24px' }, children: description })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-end', borderTop: '1px solid var(--border-color)', padding: '16px 24px', marginTop: 8 }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, className: "mds-button mds-button--secondary", children: cancelText }), jsxRuntimeExports.jsx("button", { type: "button", onClick: onConfirm, disabled: loading, className: "mds-button mds-button--primary", children: loading ? 'Processando...' : confirmText })] })] }) }));
 }
 
-export { BrandLogo, Button, ConfirmDialog, GlassCard, Modal, ModalBody, ModalFooter, ModalHeader, Typography, cn };
+export { BrandLogo, Button, ConfirmDialog, GlassCard, Modal, ModalBody, ModalFooter, ModalHeader, Select, ThemeToggle, Typography, cn };
 //# sourceMappingURL=index.esm.js.map