@flikk/ui 1.0.0-beta.21 → 1.0.0-beta.23

package/dist/components/core/CommandPalette/CommandPalette.theme.js

@@ -8,12 +8,12 @@ const commandPaletteTheme = {
         // Dark mode
         "dark:ring-black/30",
     searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
-    searchInput: "w-full px-0 py-0 text-base bg-transparent border-none outline-none " +
+    searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "focus:outline-none focus:ring-0 " +
         // Dark mode
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
-    groupLabel: "px-4 py-1 text-sm font-semibold text-[var(--color-text-muted)]/50 uppercase " +
+    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
         "dark:text-[var(--color-neutral-500)]",
     commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
         "hover:bg-[var(--color-primary)] " +
@@ -23,9 +23,9 @@ const commandPaletteTheme = {
         // Dark mode - adjust hover state
         "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
         "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
-    emptyState: "px-4 py-12 text-center text-base text-[var(--color-text-muted)] " +
+    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
-    footer: "border-t border-[var(--color-border)] px-4 py-2 text-sm text-[var(--color-text-muted)]font-medium",
+    footer: "border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-muted)]font-medium",
 };
 
 export { commandPaletteTheme };

package/dist/components/core/Drawer/Drawer.animations.js

@@ -4,6 +4,7 @@
 const drawerOverlayAnimations = {
     initial: {
         opacity: 0,
+        willChange: "opacity",
     },
     animate: {
         opacity: 1,
@@ -26,7 +27,7 @@ const drawerOverlayAnimations = {
 const getDrawerContentAnimations = (position) => {
     const animations = {
         left: {
-            initial: { x: "-100%" },
+            initial: { x: "-100%", willChange: "transform" },
             animate: {
                 x: 0,
                 transition: {
@@ -45,7 +46,7 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         right: {
-            initial: { x: "100%" },
+            initial: { x: "100%", willChange: "transform" },
             animate: {
                 x: 0,
                 transition: {
@@ -64,7 +65,7 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         top: {
-            initial: { y: "-100%" },
+            initial: { y: "-100%", willChange: "transform" },
             animate: {
                 y: 0,
                 transition: {
@@ -83,7 +84,7 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         bottom: {
-            initial: { y: "100%" },
+            initial: { y: "100%", willChange: "transform" },
             animate: {
                 y: 0,
                 transition: {

package/dist/components/core/Drawer/Drawer.theme.js

@@ -8,8 +8,8 @@ const drawerTheme = {
     inner: "h-full flex flex-col",
     header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
-    title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
-    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-base font-semibold leading-6 text-[var(--color-text-primary)]",
+    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-4",
     footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
         "",

package/dist/components/core/Dropdown/Dropdown.theme.js

@@ -9,7 +9,7 @@ const dropdownTheme = {
     itemDangerStyle: menuItemTheme.dangerStyle,
     itemFocusStyle: menuItemTheme.focusStyle,
     // Section title styling
-    sectionTitleStyle: "px-2 py-1.5 text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
+    sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
     // Separator between sections

package/dist/components/core/Empty/Empty.theme.js

@@ -5,9 +5,9 @@ const emptyTheme = {
     // Base container styles - customizable spacing, colors, and layout
     baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
     // Title text styles - customizable typography and colors
-    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)]",
+    titleStyle: "text-base font-semibold text-[var(--color-text-primary)]",
     // Description text styles - customizable typography and colors
-    subtitleStyle: "text-base text-[var(--color-text-muted)]",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
 };
 
 export { emptyTheme };

package/dist/components/core/Icon/Icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './Icon.types';
+export declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/Icon/Icon.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { iconTheme } from './Icon.theme.js';
+import { paymentMethods } from './data/paymentMethods.js';
+import { platforms } from './data/platforms.js';
+import { fileTypes } from './data/fileTypes.js';
+
+function renderPaymentIcon(icon, size, colorMode, className, theme, ref, props) {
+    var _a;
+    const method = paymentMethods[icon];
+    const dimensions = typeof size === 'number'
+        ? { width: size, height: Math.round(size * (2 / 3)) }
+        : ((_a = theme.paymentSizes[size]) !== null && _a !== void 0 ? _a : { width: 60, height: 40 });
+    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: method.viewBox, width: dimensions.width, height: dimensions.height, role: "img", "aria-label": `${method.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: method.shapes.map((shape, i) => {
+            if (shape.type === 'rect') {
+                const fill = colorMode === 'color' ? shape.fill : 'transparent';
+                const stroke = colorMode === 'color' ? shape.stroke : (shape.stroke ? 'currentColor' : undefined);
+                return (jsx("rect", { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx: shape.rx, fill: fill, stroke: stroke, strokeWidth: shape.strokeWidth }, i));
+            }
+            return (jsx("path", { d: shape.d, fill: colorMode === 'color' ? shape.fill : 'currentColor', fillRule: shape.fillRule, clipRule: shape.clipRule }, i));
+        }) }));
+}
+function renderSocialIcon(icon, size, colorMode, className, theme, ref, props) {
+    var _a;
+    const platform = platforms[icon];
+    const resolvedSize = typeof size === 'number' ? size : (_a = theme.squareSizes[size]) !== null && _a !== void 0 ? _a : 24;
+    const fill = colorMode === 'color' ? platform.brandColor : 'currentColor';
+    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: platform.viewBox, width: resolvedSize, height: resolvedSize, fill: fill, role: "img", "aria-label": `${platform.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: platform.shapes.map((shape, i) => {
+            var _a;
+            return (jsx("path", { d: shape.d, fill: colorMode === 'color' ? ((_a = shape.fill) !== null && _a !== void 0 ? _a : undefined) : undefined }, i));
+        }) }));
+}
+function renderFileTypeIcon(icon, size, colorMode, className, theme, ref, props) {
+    var _a;
+    const fileType = fileTypes[icon];
+    const resolvedSize = typeof size === 'number' ? size : (_a = theme.squareSizes[size]) !== null && _a !== void 0 ? _a : 24;
+    const strokeColor = colorMode === 'color' ? '#D5D7DA' : 'currentColor';
+    const strokeOpacity = colorMode === 'color' ? 1 : 0.3;
+    const badgeColor = colorMode === 'color' ? fileType.color : 'currentColor';
+    const labelText = fileType.label;
+    const badgeWidth = Math.round(labelText.length * 6 + 8);
+    const badgeX = 1;
+    const textX = badgeX + badgeWidth / 2;
+    return (jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", width: resolvedSize, height: resolvedSize, fill: "none", role: "img", "aria-label": `${fileType.label} file`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: [jsx("path", { d: "M11 0.75H27C27.1212 0.75 27.2375 0.798088 27.3232 0.883789L38.1162 11.6768C38.2019 11.7625 38.25 11.8788 38.25 12V36C38.25 37.7949 36.7949 39.25 35 39.25H11C9.20507 39.25 7.75 37.7949 7.75 36V4C7.75 2.20507 9.20508 0.75 11 0.75Z", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("path", { d: "M27 0.5V8C27 10.2091 28.7909 12 31 12H38.5", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("rect", { x: badgeX, y: 18, width: badgeWidth, height: 16, rx: 2, fill: badgeColor, opacity: colorMode === 'color' ? 1 : 0.15 }), jsx("text", { x: textX, y: 26, textAnchor: "middle", dominantBaseline: "central", fill: colorMode === 'color' ? 'white' : 'currentColor', fontSize: 9.5, fontWeight: 700, fontFamily: "Arial, Helvetica, sans-serif", letterSpacing: 0.3, children: labelText })] }));
+}
+const Icon = React__default.forwardRef(({ icon, size = 'md', colorMode = 'color', className, theme: customTheme, ...props }, ref) => {
+    const theme = {
+        ...iconTheme,
+        ...customTheme,
+        paymentSizes: { ...iconTheme.paymentSizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.paymentSizes },
+        squareSizes: { ...iconTheme.squareSizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.squareSizes },
+    };
+    if (icon in paymentMethods) {
+        return renderPaymentIcon(icon, size, colorMode, className, theme, ref, props);
+    }
+    if (icon in platforms) {
+        return renderSocialIcon(icon, size, colorMode, className, theme, ref, props);
+    }
+    if (icon in fileTypes) {
+        return renderFileTypeIcon(icon, size, colorMode, className, theme, ref, props);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn(`[Icon]: Unknown icon "${icon}".`);
+    }
+    return null;
+});
+Icon.displayName = 'Icon';
+
+export { Icon };

package/dist/components/core/Icon/Icon.theme.d.ts

@@ -0,0 +1,2 @@
+import { IconTheme } from './Icon.types';
+export declare const iconTheme: IconTheme;

package/dist/components/core/Icon/Icon.theme.js

@@ -0,0 +1,19 @@
+const iconTheme = {
+    baseStyle: 'inline-block shrink-0',
+    paymentSizes: {
+        xs: { width: 36, height: 24 },
+        sm: { width: 48, height: 32 },
+        md: { width: 60, height: 40 },
+        lg: { width: 90, height: 60 },
+        xl: { width: 120, height: 80 },
+    },
+    squareSizes: {
+        xs: 16,
+        sm: 20,
+        md: 24,
+        lg: 32,
+        xl: 40,
+    },
+};
+
+export { iconTheme };

package/dist/components/core/Icon/Icon.types.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export type PaymentIconName = 'visa' | 'mastercard' | 'amex' | 'applepay' | 'paypal';
+export type SocialIconName = 'github' | 'x' | 'linkedin' | 'instagram' | 'facebook' | 'youtube' | 'discord' | 'dribbble' | 'tiktok' | 'reddit' | 'twitch' | 'slack' | 'medium' | 'pinterest' | 'snapchat' | 'whatsapp' | 'telegram' | 'google' | 'apple';
+export type FileTypeName = 'pdf' | 'doc' | 'docx' | 'txt' | 'xls' | 'xlsx' | 'csv' | 'ppt' | 'mp3' | 'wav' | 'mp4' | 'mov' | 'jpg' | 'png' | 'svg' | 'gif' | 'zip' | 'rar';
+export type IconName = PaymentIconName | SocialIconName | FileTypeName;
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 'color' — uses brand/category colors. 'mono' — uses currentColor. */
+export type IconColorMode = 'color' | 'mono';
+export interface IconDimensions {
+    width: number;
+    height: number;
+}
+export interface IconTheme {
+    baseStyle: string;
+    /** Non-square dimensions for payment icons */
+    paymentSizes: Record<IconSize, IconDimensions>;
+    /** Square size (single number) for social and file-type icons */
+    squareSizes: Record<IconSize, number>;
+}
+export interface IconThemeOverrides {
+    baseStyle?: string;
+    paymentSizes?: Partial<Record<IconSize, IconDimensions>>;
+    squareSizes?: Partial<Record<IconSize, number>>;
+}
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+    icon: IconName;
+    /** Named size preset or custom pixel value. Payment icons scale at 3:2 ratio; others are square. */
+    size?: IconSize | number;
+    colorMode?: IconColorMode;
+    className?: string;
+    theme?: IconThemeOverrides;
+}

package/dist/components/core/{FileTypeIcon → Icon/data}/fileTypes.d.ts

@@ -1,4 +1,4 @@
-import { FileTypeName } from './FileTypeIcon.types';
+import { FileTypeName } from '../Icon.types';
 export interface FileTypeData {
     label: string;
     color: string;

package/dist/components/core/Icon/data/paymentMethods.d.ts

@@ -0,0 +1,27 @@
+import { PaymentIconName } from '../Icon.types';
+type ShapeRect = {
+    type: 'rect';
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    rx?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+};
+type ShapePath = {
+    type: 'path';
+    d: string;
+    fill?: string;
+    fillRule?: 'evenodd' | 'nonzero';
+    clipRule?: 'evenodd' | 'nonzero';
+};
+export type PaymentShape = ShapeRect | ShapePath;
+export interface PaymentMethodData {
+    viewBox: string;
+    label: string;
+    shapes: PaymentShape[];
+}
+export declare const paymentMethods: Record<PaymentIconName, PaymentMethodData>;
+export {};

package/dist/components/core/Icon/data/paymentMethods.js

@@ -0,0 +1,169 @@
+const paymentMethods = {
+    visa: {
+        viewBox: '0 0 120 80',
+        label: 'Visa',
+        shapes: [
+            { type: 'rect', width: 120, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M86.6666 44.9375L90.3239 35.0625L92.3809 44.9375H86.6666ZM100.952 52.8375L95.8086 27.1625H88.7383C86.3525 27.1625 85.7723 29.0759 85.7723 29.0759L76.1904 52.8375H82.8868L84.2269 49.0244H92.3947L93.1479 52.8375H100.952Z',
+                fill: '#1434CB',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M77.1866 33.5711L78.0952 28.244C78.0952 28.244 75.2896 27.1625 72.3648 27.1625C69.2031 27.1625 61.6955 28.5638 61.6955 35.3738C61.6955 41.7825 70.5071 41.8621 70.5071 45.2266C70.5071 48.5912 62.6034 47.9901 59.9955 45.8676L59.0476 51.4362C59.0476 51.4362 61.8919 52.8375 66.2397 52.8375C70.5869 52.8375 77.1467 50.5544 77.1467 44.3455C77.1467 37.8964 68.2552 37.296 68.2552 34.4921C68.2552 31.6882 74.4602 32.0484 77.1866 33.5711Z',
+                fill: '#1434CB',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M54.6517 52.8375H47.6191L52.0144 27.1625H59.0477L54.6517 52.8375Z',
+                fill: '#1434CB',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M42.3113 27.1625L35.9217 44.8213L35.1663 41.0185L35.167 41.0199L32.9114 29.4749C32.9114 29.4749 32.6394 27.1625 29.7324 27.1625H19.1709L19.0476 27.5966C19.0476 27.5966 22.2782 28.2669 26.057 30.5326L31.8793 52.8375H38.8617L49.5238 27.1625H42.3113Z',
+                fill: '#1434CB',
+            },
+        ],
+    },
+    applepay: {
+        viewBox: '0 0 120 80',
+        label: 'Apple Pay',
+        shapes: [
+            { type: 'rect', x: 1.375, y: 1.375, width: 117.25, height: 77.25, rx: 6.625, fill: 'white' },
+            {
+                type: 'path',
+                d: 'M55.5533 22.9046C61.103 22.9046 64.9675 26.7301 64.9675 32.2997C64.9675 37.8892 61.0235 41.7345 55.4142 41.7345H49.2696V51.5062H44.8301V22.9046L55.5533 22.9046ZM49.2695 38.0081H54.3635C58.2288 38.0081 60.4286 35.9271 60.4286 32.3196C60.4286 28.7124 58.2288 26.6509 54.3834 26.6509H49.2695V38.0081Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M66.1274 45.5799C66.1274 41.9326 68.9222 39.6929 73.8778 39.4154L79.5858 39.0786V37.4732C79.5858 35.1541 78.0198 33.7666 75.404 33.7666C72.9258 33.7666 71.3797 34.9556 71.0035 36.8191H66.9601C67.1979 33.0528 70.4086 30.278 75.5623 30.278C80.6165 30.278 83.8471 32.9538 83.8471 37.136V51.5062H79.7441V48.0772H79.6454C78.4365 50.3963 75.8001 51.8629 73.065 51.8629C68.9818 51.8629 66.1274 49.3258 66.1274 45.5799ZM79.5858 43.697V42.0518L74.452 42.3688C71.8951 42.5473 70.4484 43.6771 70.4484 45.461C70.4484 47.2842 71.9547 48.4736 74.254 48.4736C77.2468 48.4736 79.5858 46.4122 79.5858 43.697Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M87.7206 59.177V55.7082C88.0372 55.7874 88.7506 55.7874 89.1077 55.7874C91.0896 55.7874 92.1601 54.9551 92.8139 52.8145C92.8139 52.7747 93.1908 51.5459 93.1908 51.5261L85.6592 30.6546H90.2967L95.5696 47.6214H95.6484L100.921 30.6546H105.44L97.6303 52.5962C95.8472 57.6508 93.7857 59.276 89.4648 59.276C89.1077 59.276 88.0372 59.2363 87.7206 59.177Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M31.7358 25.6955C32.8058 24.3572 33.5319 22.5603 33.3404 20.724C31.7741 20.8019 29.8627 21.7573 28.7562 23.0967C27.7626 24.2436 26.8832 26.1158 27.1124 27.8751C28.8707 28.0276 30.6273 26.9962 31.7358 25.6955Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M33.3204 28.2186C30.7671 28.0665 28.5961 29.6678 27.3767 29.6678C26.1567 29.6678 24.2894 28.2952 22.2698 28.3322C19.6412 28.3708 17.2022 29.8571 15.8682 32.2209C13.1246 36.9497 15.1442 43.9642 17.8122 47.8155C19.1079 49.7209 20.6694 51.8189 22.7269 51.7435C24.6709 51.6672 25.4328 50.4847 27.7958 50.4847C30.1571 50.4847 30.8435 51.7435 32.9013 51.7054C35.0353 51.6672 36.3695 49.799 37.6651 47.8918C39.1515 45.7198 39.7599 43.6225 39.7982 43.5073C39.7599 43.4692 35.6832 41.9053 35.6454 37.2158C35.6069 33.2892 38.8461 31.4215 38.9985 31.3057C37.1694 28.6003 34.3113 28.2952 33.3204 28.2186Z',
+                fill: 'black',
+            },
+            { type: 'rect', x: 1.375, y: 1.375, width: 117.25, height: 77.25, rx: 6.625, fill: 'none', stroke: 'black', strokeWidth: 2.75 },
+        ],
+    },
+    paypal: {
+        viewBox: '0 0 120 80',
+        label: 'PayPal',
+        shapes: [
+            { type: 'rect', width: 120, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M76.2315 34.67C75.8559 37.1343 73.9727 37.1343 72.1505 37.1343H71.1141L71.8414 32.5332C71.8848 32.2553 72.1248 32.0508 72.4065 32.0508H72.8822C74.1224 32.0508 75.2934 32.0508 75.8975 32.7563C76.2589 33.1785 76.3679 33.8052 76.2315 34.67ZM75.4387 28.2401H68.5683C68.0979 28.2401 67.6984 28.5818 67.6249 29.0456L64.847 46.6499C64.7921 46.9969 65.0613 47.3112 65.4121 47.3112H68.9377C69.2663 47.3112 69.5462 47.0722 69.5976 46.7482L70.386 41.7567C70.4586 41.2929 70.859 40.9512 71.3285 40.9512H73.5023C78.0279 40.9512 80.6402 38.7631 81.3223 34.4248C81.6297 32.5288 81.3347 31.0382 80.4462 29.9945C79.4692 28.8474 77.7374 28.2401 75.4387 28.2401Z',
+                fill: '#009CDE',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M27.2281 34.67C26.8525 37.1343 24.9693 37.1343 23.1471 37.1343H22.1107L22.838 32.5332C22.8814 32.2553 23.1214 32.0508 23.4031 32.0508H23.8788C25.119 32.0508 26.29 32.0508 26.8941 32.7563C27.2556 33.1785 27.3645 33.8052 27.2281 34.67ZM26.4353 28.2401H19.5649C19.0945 28.2401 18.695 28.5818 18.6215 29.0456L15.8436 46.6499C15.7887 46.9969 16.0571 47.3112 16.4087 47.3112H19.6898C20.1593 47.3112 20.5588 46.9695 20.6323 46.5065L21.3826 41.7567C21.4552 41.2929 21.8556 40.9512 22.3251 40.9512H24.4989C29.0245 40.9512 31.6368 38.7631 32.3189 34.4248C32.6263 32.5288 32.3313 31.0382 31.4428 29.9945C30.4658 28.8474 28.734 28.2401 26.4353 28.2401Z',
+                fill: '#003087',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M42.3858 40.9899C42.0678 42.8683 40.5761 44.1296 38.6724 44.1296C37.7184 44.1296 36.954 43.8225 36.4632 43.2418C35.9769 42.6665 35.7935 41.8459 35.9477 40.9333C36.2435 39.0709 37.7601 37.7697 39.6344 37.7697C40.569 37.7697 41.3272 38.0795 41.8277 38.6655C42.3317 39.2559 42.5302 40.0809 42.3858 40.9899ZM46.9708 34.591H43.6808C43.3992 34.591 43.1591 34.7955 43.1148 35.0743L42.9704 35.9931L42.741 35.6603C42.0279 34.6273 40.4396 34.2812 38.854 34.2812C35.2195 34.2812 32.1147 37.0341 31.5106 40.8943C31.1961 42.8205 31.6426 44.6607 32.7357 45.9451C33.7393 47.1251 35.1717 47.6163 36.8787 47.6163C39.8089 47.6163 41.4335 45.7362 41.4335 45.7362L41.2865 46.6497C41.2316 46.9967 41.5 47.311 41.8525 47.311H44.8147C45.2851 47.311 45.6846 46.9702 45.7581 46.5063L47.5368 35.2523C47.5917 34.9053 47.3224 34.591 46.9708 34.591Z',
+                fill: '#003087',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M91.3887 40.9899C91.0707 42.8683 89.579 44.1296 87.6754 44.1296C86.7213 44.1296 85.9569 43.8225 85.4661 43.2418C84.9789 42.6665 84.7965 41.8459 84.9506 40.9333C85.2465 39.0709 86.763 37.7697 88.6374 37.7697C89.5719 37.7697 90.3302 38.0795 90.8306 38.6655C91.3347 39.2559 91.5331 40.0809 91.3887 40.9899ZM95.9737 34.591H92.6838C92.4021 34.591 92.162 34.7955 92.1177 35.0743L91.9734 35.9931L91.743 35.6603C91.0308 34.6273 89.4426 34.2812 87.857 34.2812C84.2225 34.2812 81.1177 37.0341 80.5135 40.8943C80.1991 42.8205 80.6455 44.6607 81.7386 45.9451C82.7423 47.1251 84.1746 47.6163 85.8816 47.6163C88.8119 47.6163 90.4365 45.7362 90.4365 45.7362L90.2894 46.6497C90.2345 46.9967 90.5029 47.311 90.8555 47.311H93.8176C94.288 47.311 94.6875 46.9702 94.761 46.5063L96.5397 35.2523C96.5947 34.9053 96.3254 34.591 95.9737 34.591Z',
+                fill: '#009CDE',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M64.4927 34.5911H61.186C60.8697 34.5911 60.5739 34.7478 60.3967 35.0098L55.8347 41.7229L53.9019 35.2718C53.7805 34.8682 53.4085 34.5911 52.9868 34.5911H49.7368C49.3444 34.5911 49.068 34.977 49.1947 35.3479L52.8354 46.0284L49.4108 50.857C49.1424 51.2359 49.4135 51.7599 49.8785 51.7599H53.1817C53.4944 51.7599 53.7876 51.6068 53.9665 51.3501L64.9631 35.4896C65.2262 35.1098 64.9551 34.5911 64.4927 34.5911Z',
+                fill: '#003087',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M99.8516 28.7239L97.0321 46.6504C96.9771 46.9973 97.2455 47.3116 97.5972 47.3116H100.434C100.903 47.3116 101.303 46.9699 101.376 46.5061L104.157 28.9018C104.212 28.5548 103.943 28.2406 103.591 28.2406H100.418C100.135 28.2406 99.895 28.445 99.8516 28.7239Z',
+                fill: '#009CDE',
+            },
+        ],
+    },
+    amex: {
+        viewBox: '0 0 120 80',
+        label: 'American Express',
+        shapes: [
+            { type: 'rect', x: 40, width: 80, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                d: 'm120 76v-8.6763h-9.651l-4.969-5.4944-4.994 5.4944h-31.822v-25.607h-10.27l12.74-28.831h12.286l4.3857 9.877v-9.877h15.208l2.64 7.4429 2.658-7.4429h11.789v-8.8854c0-2.2091-1.7909-4-4-4h-112c-2.2091 4.4409e-16 -4 1.7909-4 4v72c4.4409e-16 2.2091 1.7909 4 4 4h112c2.2091 0 4-1.7909 4-4zm-8.026-11.882h8.026l-10.616-11.258 10.616-11.13h-7.898l-6.556 7.1645-6.4935-7.1645h-8.0275l10.554 11.194-10.554 11.194h7.8041l6.5889-7.2283 6.556 7.2283zm1.878-11.249 6.148 6.5406v-13.027l-6.148 6.4861zm-35.78 6.0675v-3.4864h12.633v-5.0534h-12.633v-3.4859h12.953l5e-4 -5.1815h-19.062v22.388h19.062l-5e-4 -5.1813h-12.953zm35.883-20.456h6.045v-22.388h-9.403l-5.022 13.944-4.989-13.944h-9.5631v22.388h6.0446v-15.672l5.7575 15.672h5.373l5.757-15.704v15.704zm-29.809 0h6.8765l-9.8824-22.388h-7.8682l-9.8833 22.388h6.7166l1.8554-4.4776h10.298l1.887 4.4776zm-3.9976-9.4992h-6.0773l3.0387-7.3242 3.0386 7.3242z',
+                fill: '#0690FF',
+                fillRule: 'evenodd',
+            },
+        ],
+    },
+    mastercard: {
+        viewBox: '0 0 120 80',
+        label: 'Mastercard',
+        shapes: [
+            { type: 'rect', width: 120, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M97.5288 54.6562V53.7384H97.289L97.0137 54.3698L96.7378 53.7384H96.498V54.6562H96.6675V53.9637L96.9257 54.5609H97.1011L97.36 53.9624V54.6562H97.5288ZM96.0111 54.6562V53.8947H96.318V53.7397H95.5361V53.8947H95.843V54.6562H96.0111Z',
+                fill: '#F79E1B',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M49.6521 58.595H70.3479V21.4044H49.6521V58.595Z',
+                fill: '#FF5F00',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M98.2675 40.0003C98.2675 53.063 87.6791 63.652 74.6171 63.652C69.0996 63.652 64.0229 61.7624 60 58.5956C65.5011 54.2646 69.0339 47.5448 69.0339 40.0003C69.0339 32.4552 65.5011 25.7354 60 21.4044C64.0229 18.2376 69.0996 16.348 74.6171 16.348C87.6791 16.348 98.2675 26.937 98.2675 40.0003Z',
+                fill: '#F79E1B',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M50.966 40.0003C50.966 32.4552 54.4988 25.7354 59.9999 21.4044C55.977 18.2376 50.9003 16.348 45.3828 16.348C32.3208 16.348 21.7324 26.937 21.7324 40.0003C21.7324 53.063 32.3208 63.652 45.3828 63.652C50.9003 63.652 55.977 61.7624 59.9999 58.5956C54.4988 54.2646 50.966 47.5448 50.966 40.0003Z',
+                fill: '#EB001B',
+            },
+        ],
+    },
+};
+
+export { paymentMethods };

package/dist/components/core/Icon/index.d.ts

@@ -0,0 +1,4 @@
+export { Icon } from './Icon';
+export type { IconProps, IconName, IconSize, IconColorMode, IconTheme, IconThemeOverrides, IconDimensions, PaymentIconName, SocialIconName, FileTypeName, } from './Icon.types';
+export { fileTypes } from './data/fileTypes';
+export type { FileTypeData } from './data/fileTypes';

package/dist/components/core/Kbd/Kbd.theme.js

@@ -5,9 +5,9 @@ const kbdTheme = {
     baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-background-secondary)] border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
     sizes: {
         sm: 'text-xs px-1 min-w-5 h-5',
-        md: 'text-sm px-1.5 min-w-6 h-6',
+        md: 'text-xs px-1.5 min-w-6 h-6',
     },
-    separatorStyle: 'text-[var(--color-text-muted)] text-sm',
+    separatorStyle: 'text-[var(--color-text-muted)] text-xs',
 };
 
 export { kbdTheme };

package/dist/components/core/MenuItem/MenuItem.theme.js

@@ -1,6 +1,6 @@
 const menuItemTheme = {
     // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-base font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
         "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
         "data-[focused=true]:bg-[var(--color-background-secondary)] " +
         "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
@@ -19,7 +19,7 @@ const menuItemTheme = {
     focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     // Description text below the label
-    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
 };
 
 export { menuItemTheme };

package/dist/components/core/Message/Message.theme.js

@@ -5,7 +5,7 @@
 const messageTheme = {
     // Shared base styles (apply to all variants)
     bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
-    containerBaseStyle: "flex items-start gap-3 h-fit text-base",
+    containerBaseStyle: "flex items-start gap-3 h-fit text-sm",
     timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
     // Variant-specific modifiers (only differences)
     variants: {
@@ -29,14 +29,14 @@ const messageTheme = {
         system: {
             containerModifier: "justify-center", // Center alignment
             bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
-                "text-sm border-none " +
+                "text-xs border-none " +
                 // Dark mode
                 "",
             timestampModifier: "text-center",
         },
     },
     // Feature styles (streaming, actions)
-    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-sm " +
+    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs " +
         "dark:text-[var(--color-neutral-500)]",
     actionsContainerStyle: "flex items-start gap-3",
     // Status styles
@@ -48,10 +48,10 @@ const messageTheme = {
     statusFailed: "text-[var(--color-danger)]",
     // Attachment styles
     attachmentContainerStyle: "flex flex-col gap-2 mt-2",
-    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
+    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-xs",
     imageStyle: "rounded-lg overflow-hidden max-w-xs",
-    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
-    linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-sm max-w-xs",
+    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-xs",
+    linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-xs max-w-xs",
     // Reactions styles
     reactionsContainerStyle: "flex flex-wrap items-center gap-1.5 mt-1.5",
     reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-background-tertiary)]",

package/dist/components/core/Modal/Modal.animations.js

@@ -3,7 +3,8 @@
  */
 const modalOverlayAnimations = {
     initial: {
-        opacity: 0
+        opacity: 0,
+        willChange: "opacity",
     },
     animate: {
         opacity: 1,
@@ -29,6 +30,7 @@ const modalContentAnimations = {
         opacity: 0,
         scale: 0.98,
         y: 8,
+        willChange: "transform, opacity",
     },
     animate: {
         opacity: 1,

package/dist/components/core/Modal/Modal.theme.js

@@ -8,8 +8,8 @@ const modalTheme = {
     },
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-lg leading-6 font-semibold text-[var(--color-text-primary)]",
-    subtitle: "text-base text-[var(--color-text-muted)] mt-0.5",
+    title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
+    subtitle: "text-sm text-[var(--color-text-muted)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };

package/dist/components/core/Modal/ModalBody.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useCallback, useLayoutEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 
@@ -13,17 +13,16 @@ const ModalBody = ({ children, className, ...props }) => {
             setIsBodyScrollable(scrollHeight > clientHeight);
         }
     }, [setIsBodyScrollable]);
-    // Check scrollable state on layout changes
-    useLayoutEffect(() => {
-        checkScrollable();
+    // Defer initial scroll check so it doesn't trigger layout thrashing during entrance animation
+    useEffect(() => {
+        const timer = setTimeout(checkScrollable, 300);
+        return () => clearTimeout(timer);
     }, [checkScrollable, children]);
-    // Set up resize observer to monitor content changes
-    useLayoutEffect(() => {
+    // Set up resize observer to monitor content changes (deferred to avoid animation jank)
+    useEffect(() => {
         const element = bodyRef.current;
         if (!element)
             return;
-        // Initial check
-        checkScrollable();
         // Create ResizeObserver to watch for content changes
         const resizeObserver = new ResizeObserver(checkScrollable);
         resizeObserver.observe(element);