@designbasekorea/figma-ui 0.6.3 → 0.6.6

package/dist/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
+var react = require('@designbasekorea/ui-wc/react');
 var icons = require('@designbasekorea/icons');
-var ui = require('@designbasekorea/ui');
 
 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}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}
 
@@ -12,10 +12,20 @@ function resolveText(t, input, fallback) {
     if (typeof input === 'string') {
         return input;
     }
-    return t ? t(input.key, input.values) : input.key;
+    if (t) {
+        const translated = t(input.key, input.values);
+        if (translated && translated !== input.key) {
+            return translated;
+        }
+    }
+    return fallback ?? input.key;
 }
 
-const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 's', variant = 'tertiary', fullWidth = false, disabled = false, showPrompt = false, promptText = { key: 'donation.prompt' }, className, onClick, t }) => {
+const DONATION_ICON_NAMES = {
+    heart: 'star-filled',
+    coffee: 'cart',
+};
+const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 's', variant = 'tertiary', fullWidth = false, iconOnly = false, disabled = false, showPrompt = false, promptText = { key: 'donation.prompt' }, className, onClick, t }) => {
     const handleClick = () => {
         if (onClick) {
             onClick();
@@ -24,15 +34,12 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
             window.open(donationUrl, '_blank', 'noopener,noreferrer');
         }
     };
-    const Icon = iconType === 'heart' ? icons.HeartFilledIcon : icons.CoffeeFilledIcon;
     const displayText = resolveText(t, text, 'Buy me a coffee');
     const displayPromptText = resolveText(t, promptText, '도움이 되었다면 커피 한 잔 사주세요!');
     const buttonSize = size;
     return (React.createElement("div", { className: clsx('designbase-figma-donation-badge-container', className) },
-        showPrompt && (React.createElement("div", { className: "designbase-figma-donation-badge__prompt" }, displayPromptText)),
-        React.createElement(ui.Button, { variant: variant, size: buttonSize, fullWidth: fullWidth, disabled: disabled, onPress: handleClick, startIcon: Icon, className: clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${iconType}`), "aria-label": displayText, style: {
-                '--designbase-figma-donation-badge-icon-color': 'var(--db-brand-primary)'
-            } }, displayText)));
+        showPrompt && !iconOnly && (React.createElement("div", { className: "designbase-figma-donation-badge__prompt" }, displayPromptText)),
+        React.createElement(react.Button, { variant: variant, size: buttonSize, fullWidth: fullWidth, disabled: disabled, onPress: handleClick, iconOnly: iconOnly, startIcon: DONATION_ICON_NAMES[iconType], className: clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${iconType}`), "aria-label": displayText }, iconOnly ? undefined : displayText)));
 };
 DonationBadge.displayName = 'DonationBadge';
 
@@ -70,10 +77,11 @@ const FigmaHeader = ({ children, actions = [], searchBar, sticky = true, classNa
         'designbase-figma-header--with-search': !!searchBar,
         'designbase-figma-header--with-actions': actions.length > 0,
     }, className);
+    const hasToolbar = !!children || actions.length > 0;
     return (React.createElement("header", { className: classes },
-        React.createElement("div", { className: "designbase-figma-header__container" },
+        hasToolbar && (React.createElement("div", { className: "designbase-figma-header__container" },
             children && (React.createElement("div", { className: "designbase-figma-header__center" }, children)),
-            actions.length > 0 && (React.createElement("div", { className: "designbase-figma-header__right" }, actions.map((action, index) => (React.createElement(ui.Button, { key: index, variant: "tertiary", size: "s", iconOnly: true, "aria-label": `액션 ${index + 1}` }, action)))))),
+            actions.length > 0 && (React.createElement("div", { className: "designbase-figma-header__right" }, actions.map((action, index) => (React.createElement(react.Button, { key: `${action.startIcon}-${index}`, variant: "tertiary", size: "s", iconOnly: true, startIcon: action.startIcon, "aria-label": action.ariaLabel, onPress: action.onPress }))))))),
         searchBar && (React.createElement("div", { className: "designbase-figma-header__search-container" }, searchBar))));
 };
 FigmaHeader.displayName = 'FigmaHeader';
@@ -82,22 +90,24 @@ const FigmaPageHead = ({ onBack, title, description, actions = [], moreActions =
     const classes = clsx('designbase-figma-page-head', className);
     const displayTitle = resolveText(t, title);
     const displayDescription = description ? resolveText(t, description) : undefined;
-    const dropdownItems = moreActions.map(action => ({
+    const dropdownItems = moreActions.map((action) => ({
         id: action.id,
         label: resolveText(t, action.label),
-        onClick: action.onClick
     }));
+    const handleDropdownChange = (event) => {
+        const actionId = event.detail?.id ?? event.detail?.value;
+        const action = moreActions.find((item) => item.id === actionId);
+        action?.onClick();
+    };
     return (React.createElement("div", { className: classes },
         React.createElement("div", { className: "designbase-figma-page-head__left" },
-            React.createElement(ui.Button, { variant: "tertiary", size: "s", iconOnly: true, onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" },
-                React.createElement(icons.ChevronLeftIcon, { size: 14 })),
+            React.createElement(react.Button, { variant: "tertiary", size: "s", iconOnly: true, startIcon: "chevron-left", onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" }),
             React.createElement("div", { className: "designbase-figma-page-head__titles" },
                 React.createElement("h2", null, displayTitle),
                 displayDescription && React.createElement("p", null, displayDescription))),
         React.createElement("div", { className: "designbase-figma-page-head__actions" },
             actions.map((action, index) => (React.createElement(React.Fragment, { key: index }, action))),
-            moreActions.length > 0 && (React.createElement(ui.Dropdown, { trigger: React.createElement("button", { type: "button", className: "designbase-figma-page-head__more-button", "aria-label": "\uB354\uBCF4\uAE30" },
-                    React.createElement(icons.MoreHorizontalIcon, { size: 16 })), items: dropdownItems, placement: "bottom-right", size: "s" })))));
+            moreActions.length > 0 && (React.createElement(react.Dropdown, { items: dropdownItems, triggerIcon: "more-horizontal", iconOnly: true, triggerVariant: "tertiary", placement: "bottom-right", size: "s", onChange: handleDropdownChange })))));
 };
 FigmaPageHead.displayName = 'FigmaPageHead';
 
@@ -223,12 +233,12 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
                     typeof title === 'string' || (typeof title === 'object' && 'key' in title)
                         ? resolveText(t, title)
                         : title,
-                    badge && (React.createElement(ui.Badge, { variant: "secondary", size: "s" }, badge)))),
+                    badge && (React.createElement(react.Badge, { variant: "secondary", size: "s" }, badge)))),
             React.createElement("div", { className: "designbase-figma-section__controls", onClick: (e) => e.stopPropagation() },
                 iconButton,
                 collapsible && (React.createElement("span", { className: `designbase-figma-section__collapse-icon ${collapsed ? 'designbase-figma-section__collapse-icon--collapsed' : ''}` },
                     React.createElement(icons.ChevronDownIcon, { size: 16 }))),
-                onToggle && (React.createElement(ui.Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
+                onToggle && (React.createElement(react.Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
         React.createElement("div", { className: `designbase-figma-section__content ${!isEnabled ? 'designbase-figma-section__content--hidden' : ''}` },
             React.createElement("div", { ref: clipRef, className: "designbase-figma-section__content-clip" },
                 React.createElement("div", { ref: innerRef, className: `designbase-figma-section__content-inner ${collapsible && contentHidden ? 'is-collapsed' : ''}` }, children)))));
@@ -385,7 +395,7 @@ const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) =>
     const getBadgeVariant = () => {
         return isActive ? 'success' : 'secondary';
     };
-    return (React.createElement("div", { className: `designbase-figma-payment-badge ${className || ''} ${isActive ? 'active' : 'free'}`, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' } }, isLoading ? (React.createElement(ui.Spinner, { size: "s" })) : (React.createElement(ui.Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
+    return (React.createElement("div", { className: `designbase-figma-payment-badge ${className || ''} ${isActive ? 'active' : 'free'}`, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' } }, isLoading ? (React.createElement(react.Spinner, { size: "s" })) : (React.createElement(react.Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
 };
 PaymentBadge.displayName = 'PaymentBadge';
 
@@ -414,10 +424,19 @@ const LanguageSelector = ({ currentLanguage, languages = DEFAULT_LANGUAGES, onLa
     const segmentOptions = languages.map((language) => ({
         value: language.code,
         label: resolveText(t, language.label),
-        disabled: false
+        disabled: false,
     }));
     return (React.createElement("div", { className: `designbase-figma-language-selector ${className || ''}` },
-        React.createElement(ui.SegmentControl, { options: segmentOptions, value: activeLanguage, onChange: handleLanguageChange, size: size, className: "designbase-figma-language-selector__segment" })));
+        React.createElement(react.SegmentControl, { options: segmentOptions, value: activeLanguage, onChange: (event) => {
+                const detail = event.detail;
+                const value = typeof detail === 'object' && detail !== null && 'value' in detail &&
+                    typeof detail.value === 'string'
+                    ? detail.value
+                    : undefined;
+                if (value) {
+                    handleLanguageChange(value);
+                }
+            }, size: size, className: "designbase-figma-language-selector__segment" })));
 };
 LanguageSelector.displayName = 'LanguageSelector';
 
@@ -473,7 +492,7 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase'
             return (React.createElement("img", { className: "designbase-figma-logo-dropdown__logo", src: logoSrc, alt: logoAlt, onClick: toggleDropdown }));
         }
         return (React.createElement("div", { className: "designbase-figma-logo-dropdown__logo", onClick: toggleDropdown },
-            React.createElement(ui.Logo, { type: logoType, size: logoSize, variant: "default" })));
+            React.createElement(react.Logo, { type: logoType, size: logoSize, variant: "default" })));
     };
     return (React.createElement("div", { className: classes },
         renderLogo(),
@@ -507,22 +526,29 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
             React.createElement("div", { className: "designbase-figma-footer__left" },
                 React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, t: t }),
                 showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
-            showPaymentStatus && (React.createElement("div", { className: "designbase-figma-footer__payment-states" },
-                resolvedShowUsageInfo && (React.createElement("div", { className: "designbase-figma-footer__usage-info" }, isActive ? (React.createElement("span", { className: "designbase-figma-footer__unlimited-usage designbase-figma-footer__unlimited-usage--tooltip", title: t('unlimitedUsageTooltip') }, t('unlimitedUsage'))) : (React.createElement(React.Fragment, null,
-                    React.createElement("span", { className: "designbase-figma-footer__usage-info designbase-figma-footer__usage-info--tooltip", title: t('resetsDaily') },
-                        React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
-                        React.createElement("span", { className: "designbase-figma-footer__max-daily-usage" },
-                            "/",
-                            maxDailyUsage,
-                            " ",
-                            t('perDay'))))))),
-                resolvedShowPaymentBadge && (React.createElement(PaymentBadge, { isActive: isActive, onClick: isBeta ? undefined : onLicensePageClick, isLoading: isLoading, text: isBeta ? (t('betaStatus') || 'BETA') : undefined, t: t })))),
-            showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
-                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", showPrompt: showDonationText && !isActive, promptText: donationPromptText, t: t })))),
+            React.createElement("div", { className: "designbase-figma-footer__right" },
+                showPaymentStatus && resolvedShowUsageInfo && (React.createElement("div", { className: "designbase-figma-footer__usage-info" }, isActive ? (React.createElement("span", { className: "designbase-figma-footer__unlimited-usage designbase-figma-footer__unlimited-usage--tooltip", title: t('unlimitedUsageTooltip') }, t('unlimitedUsage'))) : (React.createElement("span", { className: "designbase-figma-footer__usage-info designbase-figma-footer__usage-info--tooltip", title: t('resetsDaily') },
+                    React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
+                    React.createElement("span", { className: "designbase-figma-footer__max-daily-usage" },
+                        "/",
+                        maxDailyUsage,
+                        " ",
+                        t('perDay')))))),
+                showPaymentStatus && resolvedShowPaymentBadge && (React.createElement(PaymentBadge, { isActive: isActive, onClick: isBeta ? undefined : onLicensePageClick, isLoading: isLoading, text: isBeta ? (t('betaStatus') || 'BETA') : undefined, t: t })),
+                showDonation && (React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", iconOnly: true, showPrompt: false, t: t })))),
         children));
 };
 FigmaFooter.displayName = 'FigmaFooter';
 
+const FigmaToastStack = ({ toasts, position, maxToasts, onRemoveToast, }) => {
+    const visibleToasts = [...toasts]
+        .sort((a, b) => b.createdAt - a.createdAt)
+        .slice(0, maxToasts);
+    if (visibleToasts.length === 0)
+        return null;
+    return (React.createElement("div", { className: `figma-toast-container figma-toast-container--${position}` }, visibleToasts.map((toast) => (React.createElement("div", { key: toast.id, className: "figma-toast-container__item" },
+        React.createElement(react.Toast, { toastId: toast.id, title: toast.title, description: toast.description, status: toast.status, duration: toast.duration, showProgress: toast.showProgress, showClose: toast.showCloseButton, onClose: () => onRemoveToast(toast.id) }))))));
+};
 const ToastContext = React.createContext(null);
 const useToast = () => {
     const context = React.useContext(ToastContext);
@@ -540,13 +566,13 @@ const FigmaToastProvider = ({ children, position = 'top-right', maxToasts = 5, }
             id,
             createdAt: Date.now(),
         };
-        setToasts(prev => {
+        setToasts((prev) => {
             const updated = [newToast, ...prev];
             return updated.slice(0, maxToasts);
         });
     }, [maxToasts]);
     const removeToast = React.useCallback((id) => {
-        setToasts(prev => prev.filter(toast => toast.id !== id));
+        setToasts((prev) => prev.filter((toast) => toast.id !== id));
     }, []);
     const showToast = React.useCallback((message, options = {}) => {
         addToast({
@@ -565,17 +591,17 @@ const FigmaToastProvider = ({ children, position = 'top-right', maxToasts = 5, }
     };
     return (React.createElement(ToastContext.Provider, { value: contextValue },
         children,
-        React.createElement(ui.ToastContainer, { toasts: toasts, onRemoveToast: removeToast, position: position, maxToasts: maxToasts })));
+        React.createElement(FigmaToastStack, { toasts: toasts, onRemoveToast: removeToast, position: position, maxToasts: maxToasts })));
 };
 const FigmaToast = ({ message, isVisible, onClose, type = 'info', duration = 3000, className, }) => {
     if (!isVisible)
         return null;
     return (React.createElement("div", { className: `figma-toast-fixed-wrap ${className || ''}` },
-        React.createElement(ui.Toast, { id: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showCloseButton: true, onClose: onClose, position: "top-right" })));
+        React.createElement(react.Toast, { toastId: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showClose: true, onClose: onClose })));
 };
 const useFigmaToast = () => {
     const [toast, setToast] = React.useState({ message: '', isVisible: false });
-    const showToast = React.useCallback((message, type = 'info') => {
+    const showToast = React.useCallback((message, _type = 'info') => {
         setToast({ message, isVisible: true });
         setTimeout(() => setToast({ message: '', isVisible: false }), 5000);
     }, []);
@@ -606,8 +632,13 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
     return (React.createElement("form", { className: `designbase-figma-form-with-submit ${className || ''}`, onSubmit: handleSubmit },
         React.createElement("div", { className: "designbase-figma-form-with-submit__field" },
             React.createElement("label", { className: "designbase-figma-form-with-submit__label" }, displayLabel),
-            React.createElement(ui.Input, { value: inputValue, onChange: handleChange, placeholder: displayPlaceholder, helperText: displayHelperText, disabled: disabled || isSubmitting, size: "m" })),
-        React.createElement(ui.Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? displaySubmittingText : displaySubmitText)));
+            React.createElement(react.Input, { value: inputValue, onChange: (event) => {
+                    const value = event.detail?.value;
+                    if (value !== undefined) {
+                        handleChange(value);
+                    }
+                }, placeholder: displayPlaceholder, helperText: displayHelperText, disabled: disabled || isSubmitting, size: "m" })),
+        React.createElement(react.Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? displaySubmittingText : displaySubmitText)));
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
 
@@ -620,13 +651,95 @@ const InteractionFeedback = ({ status = 'default', message, statusMessage, leftC
     return (React.createElement("div", { className: feedbackClasses },
         React.createElement("div", { className: "designbase-figma-interaction__content" },
             React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
-                status === 'loading' && (React.createElement(ui.Spinner, { size: "s", type: "circular", label: "\uBD88\uB7EC\uC624\uB294 \uC911\uC785\uB2C8\uB2E4...", showLabel: false })),
+                status === 'loading' && (React.createElement(react.Spinner, { size: "s", type: "circular", label: "\uBD88\uB7EC\uC624\uB294 \uC911\uC785\uB2C8\uB2E4...", showLabel: false })),
                 (message || status === 'loading') && (React.createElement("span", { className: "designbase-figma-interaction__text" }, resolveText(t, message || '불러오는 중입니다...'))),
                 statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, resolveText(t, statusMessage)))))),
             rightAction && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightAction)))));
 };
 InteractionFeedback.displayName = 'InteractionFeedback';
 
+function postPluginMessage(message) {
+    if (typeof parent === 'undefined') {
+        return;
+    }
+    parent.postMessage({ pluginMessage: message }, '*');
+}
+function openExternalUrl(url) {
+    if (!url)
+        return;
+    postPluginMessage({ type: 'open-external-url', url });
+    if (typeof window !== 'undefined') {
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+}
+
+const LicenseOffer = ({ membershipUrl, t, className }) => (React.createElement("section", { className: `designbase-figma-license-offer ${className || ''}`, "aria-labelledby": "designbase-license-offer-title" },
+    React.createElement("div", { className: "designbase-figma-license-offer__eyebrow" }, "YouTube Membership"),
+    React.createElement("h3", { id: "designbase-license-offer-title" }, resolveText(t, { key: 'license.youtube_membership_title' }, 'YouTube 멤버십으로 전체 플러그인 이용')),
+    React.createElement("p", null, resolveText(t, { key: 'license.youtube_membership_description' }, 'YouTube 멤버십에 가입하면 Designbase 플러그인을 무제한으로 사용할 수 있습니다.')),
+    React.createElement("ol", null,
+        React.createElement("li", null, "Designbase YouTube \uCC44\uB110\uC758 \uBA64\uBC84\uC2ED\uC5D0 \uAC00\uC785\uD569\uB2C8\uB2E4."),
+        React.createElement("li", null, "\uBA64\uBC84 \uC804\uC6A9 \uCEE4\uBBA4\uB2C8\uD2F0 \uAC8C\uC2DC\uAE00\uC5D0\uC11C \uC774\uBC88 \uB2EC \uB77C\uC774\uC120\uC2A4 \uD0A4\uB97C \uD655\uC778\uD569\uB2C8\uB2E4."),
+        React.createElement("li", null, "\uC544\uB798 \uC785\uB825\uCC3D\uC5D0 \uD0A4\uB97C \uBD99\uC5EC \uB123\uACE0 \uD65C\uC131\uD654\uD569\uB2C8\uB2E4.")),
+    membershipUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(membershipUrl), variant: "secondary", size: "m", fullWidth: true },
+        React.createElement("span", null, resolveText(t, { key: 'license.youtube_membership_cta' }, '멤버십 안내 보기')),
+        React.createElement(icons.ExternalLinkIcon, { size: 16 })))));
+LicenseOffer.displayName = 'LicenseOffer';
+
+function maskLicenseKey(value) {
+    if (value.length <= 8)
+        return '••••••••';
+    return `${value.slice(0, 4)}••••${value.slice(-4)}`;
+}
+function formatDate(value) {
+    if (!value)
+        return undefined;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date);
+}
+function formatScope(value) {
+    if (!value)
+        return undefined;
+    if (value === 'all-products' || value === 'all_products')
+        return '전체 제품';
+    return value;
+}
+const LicenseStatusCard = ({ status, licenseKey = '', licenseStatus, licenseSource, accessScope, expiresAt, lastVerifiedAt, validationMessage, allowRevealKey = true, t, className, }) => {
+    const [isKeyRevealed, setIsKeyRevealed] = React.useState(false);
+    const isActive = status === 'PAID';
+    const statusText = isActive
+        ? resolveText(t, { key: 'license.status_active' }, 'Active')
+        : resolveText(t, { key: 'license.status_inactive' }, 'License check failed');
+    const statusClass = isActive ? 'active' : 'inactive';
+    return (React.createElement("section", { className: `designbase-figma-license-status-card designbase-figma-license-status-card--${statusClass} ${className || ''}`, "aria-label": statusText },
+        React.createElement("div", { className: "designbase-figma-license-status-card__header" },
+            React.createElement("div", null,
+                React.createElement("div", { className: "designbase-figma-license-status-card__eyebrow" }, isActive ? 'License Activated' : 'License Status'),
+                React.createElement("h3", null, statusText)),
+            React.createElement("span", { className: "designbase-figma-license-status-card__badge" }, licenseStatus || (isActive ? 'active' : 'inactive'))),
+        validationMessage && !isActive && (React.createElement("p", { className: "designbase-figma-license-status-card__message" }, validationMessage)),
+        licenseKey && (React.createElement("div", { className: "designbase-figma-license-status-card__key-row" },
+            React.createElement("span", null, resolveText(t, { key: 'license.key_label' }, '라이선스 키')),
+            React.createElement("code", null, allowRevealKey && isKeyRevealed ? licenseKey : maskLicenseKey(licenseKey)),
+            allowRevealKey && (React.createElement(react.Button, { type: "button", onPress: () => setIsKeyRevealed((value) => !value), variant: "tertiary", size: "s" }, isKeyRevealed ? '숨기기' : '보기')))),
+        (licenseSource || accessScope || expiresAt || lastVerifiedAt) && (React.createElement("dl", { className: "designbase-figma-license-status-card__meta" },
+            licenseSource && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, "Source"),
+                React.createElement("dd", null, licenseSource)),
+            formatScope(accessScope) && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, "Access"),
+                React.createElement("dd", null, formatScope(accessScope))),
+            expiresAt && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, "Expires"),
+                React.createElement("dd", null, formatDate(expiresAt) || expiresAt)),
+            lastVerifiedAt && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, "Last checked"),
+                React.createElement("dd", null, formatDate(lastVerifiedAt) || lastVerifiedAt))))));
+};
+LicenseStatusCard.displayName = 'LicenseStatusCard';
+
 const defaultFeatures = [
     { name: '사용 제한', free: '일일 제한', pro: '무제한' },
     { name: '모든 주제 사용', free: false, pro: true },
@@ -659,18 +772,21 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
     };
     return (React.createElement("div", { className: `designbase-figma-pricing-comparison ${className || ''}` },
         paymentType === 'subscription' && (React.createElement("div", { className: "designbase-figma-pricing-comparison__billing-toggle" },
-            React.createElement(ui.SegmentControl, { value: isYearly ? 'yearly' : 'monthly', onChange: (value) => setIsYearly(value === 'yearly'), options: [
+            React.createElement(react.SegmentControl, { value: isYearly ? 'yearly' : 'monthly', onChange: (event) => {
+                    const detail = event.detail;
+                    const value = typeof detail === 'object' && detail !== null && 'value' in detail &&
+                        typeof detail.value === 'string'
+                        ? detail.value
+                        : undefined;
+                    setIsYearly(value === 'yearly');
+                }, options: [
                     {
                         value: 'monthly',
                         label: t('monthlyBilling') || '월간 결제',
                     },
                     {
                         value: 'yearly',
-                        label: (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-                            t('yearlyBilling') || '연간 결제',
-                            React.createElement("span", { className: "designbase-figma-pricing-comparison__discount-badge" },
-                                getDiscountPercentage(),
-                                "% \uC808\uC57D"))),
+                        label: `${t('yearlyBilling') || '연간 결제'} (${getDiscountPercentage()}% 절약)`,
                     },
                 ], size: "s" }))),
         paymentType === 'lifetime' && (React.createElement("div", { className: "designbase-figma-pricing-comparison__lifetime-info" },
@@ -698,124 +814,302 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
 };
 PricingComparison.displayName = 'PricingComparison';
 
-const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, pricingFeatures, pricing, paymentType = 'subscription', t, className, }) => {
-    const [isSubmitting, setIsSubmitting] = React.useState(false);
+const DEFAULT_LICENSE_MESSAGE_TYPES = {
+    initialize: 'initialize',
+    verifyLicense: 'verify-license',
+    deactivateLicense: 'deactivate-license',
+    updateStatus: 'update-plugin-status',
+    verifyResult: 'license-verification-result',
+    deactivateResult: 'license-deactivation-result',
+};
+const START_DESIGNBASE_AUTH_MESSAGE = 'start-designbase-auth';
+const INITIAL_LICENSE_PAGE_STATE = {
+    paymentStatus: 'FREE',
+    licenseKey: '',
+    planTier: 'FREE',
+    hasLicenseKey: false,
+    isLicenseRegistered: false,
+    activationLimit: 0,
+    activationUsage: 0,
+    usageCount: 0,
+    remainingUsage: 0,
+    usageUsed: 0,
+    usageLimit: 0,
+    usageReset: 'none',
+    canUseFeature: true,
+};
+
+function readString(data, keys) {
+    for (const key of keys) {
+        const value = data[key];
+        if (typeof value === 'string') {
+            return value;
+        }
+    }
+    return '';
+}
+function readNumber(data, keys) {
+    for (const key of keys) {
+        const value = data[key];
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+    }
+    return undefined;
+}
+function readBoolean(data, keys) {
+    for (const key of keys) {
+        const value = data[key];
+        if (typeof value === 'boolean') {
+            return value;
+        }
+    }
+    return undefined;
+}
+function parseLicenseMessage(data) {
+    const paymentStatus = readString(data, ['paymentStatus', 'status']);
+    const usageLimitRaw = data.usageLimit;
+    return {
+        ...(paymentStatus ? { paymentStatus } : {}),
+        licenseKey: readString(data, ['licenseKey']) || undefined,
+        planTier: readString(data, ['planTier']) || undefined,
+        hasLicenseKey: readBoolean(data, ['hasLicenseKey']),
+        isLicenseRegistered: readBoolean(data, ['isLicenseRegistered']),
+        activationLimit: readNumber(data, ['activationLimit']),
+        activationUsage: readNumber(data, ['activationUsage']),
+        usageCount: readNumber(data, ['usageCount']),
+        remainingUsage: readNumber(data, ['remainingUsage']),
+        usageUsed: readNumber(data, ['usageUsed']),
+        usageLimit: usageLimitRaw === 'unlimited' ? 'unlimited' : readNumber(data, ['usageLimit']),
+        usageReset: readString(data, ['usageReset']) || undefined,
+        canUseFeature: readBoolean(data, ['canUseFeature']),
+        usageReason: readString(data, ['usageReason']) || undefined,
+        lastMessage: readString(data, ['message']) || undefined,
+        lastErrorCode: readString(data, ['errorCode']) || undefined,
+        licenseStatus: readString(data, ['licenseStatus', 'license_status']) || undefined,
+        licenseSource: readString(data, ['licenseSource', 'license_source', 'source']) || undefined,
+        accessScope: readString(data, ['accessScope', 'access_scope', 'scope']) || undefined,
+        expiresAt: readString(data, ['expiresAt', 'expires_at']) || undefined,
+        lastVerifiedAt: readString(data, ['lastVerifiedAt', 'last_verified_at']) || undefined,
+        validationMessage: readString(data, ['validationMessage', 'validation_message']) || undefined,
+    };
+}
+function useFigmaLicenseBridge(options = {}) {
+    const messageTypes = React.useMemo(() => ({ ...DEFAULT_LICENSE_MESSAGE_TYPES, ...options.messageTypes }), [options.messageTypes]);
+    const [state, setState] = React.useState({
+        ...INITIAL_LICENSE_PAGE_STATE,
+        ...options.initialState,
+    });
+    const [isVerifying, setIsVerifying] = React.useState(false);
     const [isDeactivating, setIsDeactivating] = React.useState(false);
-    const [licenseKey, setLicenseKey] = React.useState(initialLicenseKey);
-    const [status, setStatus] = React.useState(initialStatus);
-    const [usageCount, setLocalUsageCount] = React.useState(initialUsageCount);
-    const [activationLimit, setActivationLimit] = React.useState(0);
-    const [activationUsage, setActivationUsage] = React.useState(0);
-    const [showDetails, setShowDetails] = React.useState(false);
+    const [isStartingAuth, setIsStartingAuth] = React.useState(false);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const applyPatch = React.useCallback((patch) => {
+        setState((prev) => {
+            const next = {
+                ...prev,
+                ...Object.fromEntries(Object.entries(patch).filter(([, value]) => value !== undefined)),
+            };
+            optionsRef.current.onStateChange?.(next);
+            if (patch.paymentStatus) {
+                optionsRef.current.onPaymentStatusChange?.(patch.paymentStatus);
+            }
+            if (patch.usageCount !== undefined) {
+                optionsRef.current.onUsageCountChange?.(patch.usageCount);
+            }
+            return next;
+        });
+    }, []);
     React.useEffect(() => {
         const handleMessage = (event) => {
-            const { type, paymentStatus, licenseKey, activationLimit, activationUsage, success, message, usageCount } = event.data.pluginMessage || {};
-            if (type === 'update-plugin-status' || type === 'license-verification-result') {
-                if (paymentStatus)
-                    setStatus(paymentStatus);
-                if (licenseKey)
-                    setLicenseKey(licenseKey);
-                if (activationLimit !== undefined)
-                    setActivationLimit(activationLimit);
-                if (activationUsage !== undefined)
-                    setActivationUsage(activationUsage);
-                if (paymentStatus)
-                    setPaymentStatus(paymentStatus);
-                if (usageCount !== undefined) {
-                    setLocalUsageCount(usageCount);
-                    setUsageCount(usageCount);
-                }
+            const data = event.data?.pluginMessage;
+            if (!data || typeof data !== 'object')
+                return;
+            const payload = data;
+            const type = typeof payload.type === 'string' ? payload.type : '';
+            if (type === messageTypes.updateStatus) {
+                applyPatch(parseLicenseMessage(payload));
             }
-            if (type === 'license-verification-result') {
-                setIsSubmitting(false);
-                if (message)
-                    console.log('License verification:', message);
-                if (success) {
-                    setStatus('PAID');
-                    setPaymentStatus('PAID');
+            if (type === messageTypes.verifyResult) {
+                setIsVerifying(false);
+                setIsStartingAuth(false);
+                applyPatch(parseLicenseMessage(payload));
+                if (payload.success === true) {
+                    applyPatch({ paymentStatus: 'PAID', isLicenseRegistered: true });
                 }
             }
-            if (type === 'license-deactivation-result') {
+            if (type === messageTypes.deactivateResult) {
                 setIsDeactivating(false);
-                if (message)
-                    console.log('License deactivation:', message);
-                if (success) {
-                    setStatus('UNPAID');
-                    setPaymentStatus('UNPAID');
-                    setLicenseKey('');
-                    setLocalUsageCount(20);
-                    setActivationLimit(0);
-                    setActivationUsage(0);
+                applyPatch(parseLicenseMessage(payload));
+                if (payload.success === true) {
+                    applyPatch({
+                        paymentStatus: 'UNPAID',
+                        licenseKey: '',
+                        hasLicenseKey: false,
+                        isLicenseRegistered: false,
+                        activationLimit: 0,
+                        activationUsage: 0,
+                    });
+                }
+            }
+            if (type === 'designbase-auth-result') {
+                setIsStartingAuth(false);
+                if (payload.success === true) {
+                    applyPatch(parseLicenseMessage(payload));
+                }
+                else if (typeof payload.message === 'string') {
+                    applyPatch({ lastMessage: payload.message });
                 }
             }
         };
         window.addEventListener('message', handleMessage);
-        if (typeof parent !== 'undefined') {
-            parent.postMessage({ pluginMessage: { type: 'initialize' } }, '*');
-        }
+        postPluginMessage({ type: messageTypes.initialize });
         return () => window.removeEventListener('message', handleMessage);
-    }, [setPaymentStatus, setUsageCount]);
+    }, [applyPatch, messageTypes]);
+    const verifyLicense = React.useCallback((licenseKey) => {
+        setIsVerifying(true);
+        postPluginMessage({
+            type: messageTypes.verifyLicense,
+            licenseKey,
+        });
+    }, [messageTypes.verifyLicense]);
+    const deactivateLicense = React.useCallback(() => {
+        setIsDeactivating(true);
+        postPluginMessage({ type: messageTypes.deactivateLicense });
+    }, [messageTypes.deactivateLicense]);
+    const startDesignbaseAuth = React.useCallback(() => {
+        setIsStartingAuth(true);
+        postPluginMessage({ type: START_DESIGNBASE_AUTH_MESSAGE });
+    }, []);
+    return {
+        state,
+        isVerifying,
+        isDeactivating,
+        isStartingAuth,
+        verifyLicense,
+        deactivateLicense,
+        startDesignbaseAuth,
+        setLicenseKeyInput: (licenseKey) => applyPatch({ licenseKey }),
+    };
+}
+
+function formatUsageLabel(state, t) {
+    const { remainingUsage, usageUsed, usageLimit, usageReset } = state;
+    if (usageLimit === 'unlimited') {
+        return resolveText(t, { key: 'license.usage_unlimited' }, '사용 횟수 제한 없음') ?? '사용 횟수 제한 없음';
+    }
+    const limit = typeof usageLimit === 'number' ? usageLimit : remainingUsage + usageUsed;
+    const remaining = remainingUsage ?? Math.max(0, limit - usageUsed);
+    if (usageReset === 'daily') {
+        const fallback = `오늘 남은 횟수 ${remaining}/${limit}`;
+        const translated = resolveText(t, { key: 'license.usage_daily' }, fallback) ?? fallback;
+        return translated.includes(String(remaining)) ? translated : fallback;
+    }
+    if (usageReset === 'monthly') {
+        const fallback = `이번 달 남은 횟수 ${remaining}/${limit}`;
+        const translated = resolveText(t, { key: 'license.usage_monthly' }, fallback) ?? fallback;
+        return translated.includes(String(remaining)) ? translated : fallback;
+    }
+    return `남은 횟수 ${remaining}/${limit}`;
+}
+const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', wordpressLinks, paymentPageUrl, mode = 'pricing', membershipUrl, enableAccountAuth = true, showLicenseKeyInput = true, pricingFeatures, pricing, paymentType = 'subscription', messageTypes, onStateChange, setPaymentStatus, setUsageCount, onLicenseSubmit, usageCount: initialUsageCount = 0, t, className, }) => {
+    const links = React.useMemo(() => ({
+        purchaseUrl: wordpressLinks?.purchaseUrl ?? paymentPageUrl,
+        membershipUrl: membershipUrl ?? wordpressLinks?.membershipUrl,
+        accountUrl: wordpressLinks?.accountUrl,
+        helpUrl: wordpressLinks?.helpUrl,
+    }), [wordpressLinks, paymentPageUrl, membershipUrl]);
+    const { state, isVerifying, isDeactivating, isStartingAuth, verifyLicense, deactivateLicense, startDesignbaseAuth, setLicenseKeyInput, } = useFigmaLicenseBridge({
+        messageTypes,
+        initialState: {
+            paymentStatus: initialStatus,
+            licenseKey: initialLicenseKey,
+            usageCount: initialUsageCount,
+        },
+        onStateChange,
+        onPaymentStatusChange: setPaymentStatus,
+        onUsageCountChange: setUsageCount,
+    });
+    const [showDetails, setShowDetails] = React.useState(false);
+    const [licenseKeyDraft, setLicenseKeyDraft] = React.useState(initialLicenseKey);
+    const isPaid = state.isLicenseRegistered && state.paymentStatus === 'PAID';
+    const isMembershipMode = mode === 'youtube-membership';
+    const usageLabel = formatUsageLabel(state, t);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
-        setIsSubmitting(true);
-        if (typeof parent !== 'undefined') {
-            parent.postMessage({
-                pluginMessage: {
-                    type: 'verify-license',
-                    licenseKey: submittedLicenseKey
-                }
-            }, '*');
+        if (onLicenseSubmit) {
+            await onLicenseSubmit(submittedLicenseKey);
+            return;
         }
+        verifyLicense(submittedLicenseKey);
     };
-    const handleDeactivateLicense = () => {
-        setIsDeactivating(true);
-        if (typeof parent !== 'undefined') {
-            parent.postMessage({
-                pluginMessage: { type: 'deactivate-license' }
-            }, '*');
-        }
+    const handleLicenseKeyChange = (value) => {
+        setLicenseKeyDraft(value);
+        setLicenseKeyInput(value);
     };
-    const isPaid = status === 'PAID';
     return (React.createElement("div", { className: `designbase-figma-page-license ${className || ''}` },
         React.createElement("div", { className: "designbase-figma-page-license__content" },
             React.createElement("div", { className: "designbase-figma-page-license__header" },
                 React.createElement("div", { className: "designbase-figma-page-license__title" },
-                    React.createElement("h2", null, isPaid ? resolveText(t, { key: 'license.pro_account' }, '프로 계정') : resolveText(t, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드'))),
+                    React.createElement("h2", null, isMembershipMode
+                        ? resolveText(t, { key: 'license.youtube_membership' }, 'YouTube 멤버십')
+                        : isPaid
+                            ? resolveText(t, { key: 'license.pro_account' }, '프로 계정')
+                            : resolveText(t, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
+                    state.planTier && state.planTier !== 'FREE' && (React.createElement("span", { className: "designbase-figma-page-license__tier" }, state.planTier))),
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
                     ? resolveText(t, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
-                    : resolveText(t, { key: 'license.purchase_for_unlimited' }, '라이선스 구매 후 무제한 접근이 가능합니다.'))),
-            React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: t }),
+                    : isMembershipMode
+                        ? resolveText(t, { key: 'license.youtube_membership_description' }, 'YouTube 멤버십에 가입하면 Designbase 플러그인을 무제한으로 사용할 수 있습니다.')
+                        : resolveText(t, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
+                !isPaid && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
+            !isMembershipMode && (React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: t })),
+            state.lastMessage && (React.createElement("p", { className: `designbase-figma-page-license__feedback ${state.lastErrorCode ? 'designbase-figma-page-license__feedback--error' : ''}` }, state.lastMessage)),
             isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
                 React.createElement("div", { className: "designbase-figma-page-license__section-header" },
                     React.createElement("h3", null, resolveText(t, { key: 'license.activated' }, '라이선스 활성화됨')),
-                    React.createElement(ui.Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
+                    React.createElement(react.Button, { onPress: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
                         React.createElement(icons.MoreHorizontalIcon, { size: 16 }))),
-                React.createElement("div", { className: "designbase-figma-page-license__license-key" },
-                    resolveText(t, { key: 'license.key_label' }, '라이선스 키'),
-                    ": ",
-                    React.createElement("span", null, licenseKey)),
+                React.createElement(LicenseStatusCard, { status: state.paymentStatus, licenseKey: state.licenseKey, licenseStatus: state.licenseStatus, licenseSource: state.licenseSource, accessScope: state.accessScope, expiresAt: state.expiresAt, lastVerifiedAt: state.lastVerifiedAt, validationMessage: state.validationMessage, t: t }),
+                React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel),
                 showDetails && (React.createElement("div", { className: "designbase-figma-page-license__details" },
                     React.createElement("div", { className: "designbase-figma-page-license__activation-info" },
                         React.createElement("div", { className: "designbase-figma-page-license__remaining" },
-                            activationLimit - activationUsage,
-                            " ",
+                            Math.max(0, state.activationLimit - state.activationUsage),
+                            ' ',
                             resolveText(t, { key: 'license.activations_remaining' }, '활성'),
-                            " ",
+                            ' ',
                             resolveText(t, { key: 'license.spots_remaining' }, '자리 남음')),
-                        React.createElement("div", { className: "designbase-figma-page-license__usage" },
-                            activationUsage,
+                        React.createElement("div", { className: "designbase-figma-page-license__usage-count" },
+                            state.activationUsage,
                             "/",
-                            activationLimit)),
-                    React.createElement(ui.Button, { onClick: handleDeactivateLicense, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
-                        ? resolveText(t, { key: 'license.deactivating' }, '비활성화중...')
+                            state.activationLimit)),
+                    React.createElement(react.Button, { onPress: deactivateLicense, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
+                        ? resolveText(t, { key: 'license.deactivating' }, '비활성화 중...')
                         : resolveText(t, { key: 'license.deactivate' }, '라이선스 비활성화')))))),
-            !isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
-                React.createElement("div", { className: "designbase-figma-page-license__section-header" },
-                    React.createElement("h3", null, resolveText(t, { key: 'license.enter_key' }, '라이선스 키 입력')),
-                    paymentPageUrl && (React.createElement(ui.Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
-                        React.createElement("span", null, resolveText(t, { key: 'license.purchase' }, '라이선스 구매')),
-                        React.createElement(icons.ExternalLinkIcon, { size: 16 })))),
-                React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, helperText: { key: 'license.enter_from_email' }, t: t })))),
-        React.createElement(ui.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
+            !isPaid && (React.createElement(React.Fragment, null,
+                isMembershipMode && (React.createElement(LicenseOffer, { membershipUrl: links.membershipUrl || links.purchaseUrl, t: t })),
+                !isMembershipMode && (enableAccountAuth || links.purchaseUrl || links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },
+                    React.createElement("div", { className: "designbase-figma-page-license__section-header" },
+                        React.createElement("h3", null, resolveText(t, { key: 'license.designbase_account' }, '디자인베이스 계정'))),
+                    React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(t, { key: 'license.designbase_account_hint' }, 'WordPress 계정으로 로그인하거나 멤버십을 구매하면 플러그인이 자동으로 활성화됩니다.')),
+                    React.createElement("div", { className: "designbase-figma-page-license__actions" },
+                        enableAccountAuth && (React.createElement(react.Button, { onPress: startDesignbaseAuth, variant: "primary", size: "m", disabled: isStartingAuth || isVerifying, fullWidth: true }, isStartingAuth
+                            ? resolveText(t, { key: 'license.authenticating' }, '인증 중...')
+                            : resolveText(t, { key: 'license.login_with_designbase' }, '디자인베이스로 로그인'))),
+                        links.purchaseUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(links.purchaseUrl), variant: "secondary", size: "m", fullWidth: true },
+                            React.createElement("span", null, resolveText(t, { key: 'license.purchase_membership' }, '멤버십 안내')),
+                            React.createElement(icons.ExternalLinkIcon, { size: 16 }))),
+                        links.accountUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(links.accountUrl), variant: "tertiary", size: "s", fullWidth: true },
+                            React.createElement("span", null, resolveText(t, { key: 'license.manage_account' }, '계정·멤버십 관리')),
+                            React.createElement(icons.ExternalLinkIcon, { size: 16 })))))),
+                showLicenseKeyInput && (React.createElement("div", { className: "designbase-figma-page-license__section" },
+                    React.createElement("div", { className: "designbase-figma-page-license__section-header" },
+                        React.createElement("h3", null, resolveText(t, { key: 'license.enter_key' }, '라이선스 키 입력'))),
+                    React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isVerifying, value: licenseKeyDraft, onValueChange: handleLicenseKeyChange, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, helperText: { key: 'license.enter_from_email' }, t: t }))))),
+            links.helpUrl && (React.createElement("p", { className: "designbase-figma-page-license__disclaimer" },
+                React.createElement("button", { type: "button", className: "designbase-figma-page-license__link", onClick: () => openExternalUrl(links.helpUrl) }, resolveText(t, { key: 'license.help_link' }, '라이선스·결제 도움말'))))),
+        React.createElement(react.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
             React.createElement(icons.CloseIcon, { size: 20 }))));
 };
 PageLicense.displayName = 'PageLicense';
@@ -839,7 +1133,7 @@ const PaymentStatusSection = ({ status, usageCount, activationLimit, activationU
                     activationUsage,
                     "/",
                     activationLimit)),
-            React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
+            React.createElement(react.Button, { onPress: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
                 ? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
                 : resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화'))))));
 };
@@ -880,16 +1174,16 @@ const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.wor
     const displayStopText = resolveText(t, stopButtonText, '중지');
     const displayConfirmText = resolveText(t, confirmButtonText, '확인');
     const displayHelpText = resolveText(t, helpText);
-    return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: displayTitle, size: "s", className: modalClasses, showCloseButton: false },
+    return (React.createElement(react.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: displayTitle, size: "s", className: modalClasses, showCloseButton: false },
         React.createElement("div", { className: "designbase-figma-progress-modal__content" },
             React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
                 React.createElement(icons.CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
-                React.createElement(ui.Spinner, { size: "m" }))))),
+                React.createElement(react.Spinner, { size: "m" }))))),
             React.createElement("p", { className: "designbase-figma-progress-modal__message" }, displayMessage),
             React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
-            React.createElement(ui.Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
+            React.createElement(react.Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
             displayHelpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, displayHelpText)),
-            React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(ui.Button, { onPress: handleConfirm, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(ui.Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
+            React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(react.Button, { onPress: handleConfirm, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(react.Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
 };
 ProgressModal.displayName = 'ProgressModal';
 
@@ -1028,7 +1322,7 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
     const modalClasses = clsx('designbase-figma-settings-modal', className);
     const displayTitle = resolveText(t, title, '목록 변경');
     const displayDescription = resolveText(t, description, '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.');
-    return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: onClose, title: displayTitle, size: "m", className: modalClasses },
+    return (React.createElement(react.Modal, { isOpen: isOpen, onClose: onClose, title: displayTitle, size: "m", className: modalClasses },
         React.createElement("div", { className: "designbase-figma-settings-modal__content" },
             displayDescription && (React.createElement("p", { className: "designbase-figma-settings-modal__description" }, displayDescription)),
             React.createElement("ul", { className: "designbase-figma-settings-modal__list" }, tempCategories.map((category, index) => (React.createElement("li", { key: category.id, draggable: true, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, className: clsx('designbase-figma-settings-modal__item', {
@@ -1040,12 +1334,12 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
                         React.createElement(icons.GripVerticalIcon, { size: 16 })),
                     category.icon && (React.createElement("span", { className: "designbase-figma-settings-modal__category-icon" }, category.icon)),
                     React.createElement("span", { className: "designbase-figma-settings-modal__category-title" }, resolveText(t, category.title))),
-                React.createElement(ui.Toggle, { checked: category.enabled, onChange: () => handleToggle(category.id), size: "s" })))))),
+                React.createElement(react.Toggle, { checked: category.enabled, onChange: () => handleToggle(category.id), size: "s" })))))),
         React.createElement("div", { className: "designbase-figma-settings-modal__footer" },
-            onReset && (React.createElement(ui.Button, { onPress: handleReset, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.reset' }, '초기화'))),
+            onReset && (React.createElement(react.Button, { onPress: handleReset, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.reset' }, '초기화'))),
             React.createElement("div", { className: "designbase-figma-settings-modal__footer-right" },
-                React.createElement(ui.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.cancel' }, '취소')),
-                React.createElement(ui.Button, { onPress: handleSave, variant: "primary", size: "s" }, resolveText(t, { key: 'settings.save' }, '저장'))))));
+                React.createElement(react.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.cancel' }, '취소')),
+                React.createElement(react.Button, { onPress: handleSave, variant: "primary", size: "s" }, resolveText(t, { key: 'settings.save' }, '저장'))))));
 };
 SettingsModal.displayName = 'SettingsModal';
 
@@ -1088,12 +1382,545 @@ const UpgradeBanner = ({ onClick, variant = 'button', isLoading = false, title =
         React.createElement("div", { className: "designbase-figma-upgrade-banner__text-wrap" },
             React.createElement("h3", { className: "designbase-figma-upgrade-banner__title" }, displayTitle),
             React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, displayDescription)),
-        variant === 'button' ? (React.createElement(ui.Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, displayButtonText)) : (React.createElement("div", { className: "designbase-figma-upgrade-banner__icon" },
+        variant === 'button' ? (React.createElement(react.Button, { onPress: onClick, variant: "primary", size: "m", disabled: isLoading }, displayButtonText)) : (React.createElement("div", { className: "designbase-figma-upgrade-banner__icon" },
             React.createElement(icons.ChevronRightIcon, { size: 20 })))));
-    return (React.createElement("div", { className: `designbase-figma-upgrade-banner designbase-figma-upgrade-banner--${variant} ${className || ''}` }, useGradient ? (React.createElement(ui.RandomGradient, { scheme: gradientScheme, tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-figma-upgrade-banner__gradient-bg" }, bannerContent)) : (bannerContent)));
+    return (React.createElement("div", { className: `designbase-figma-upgrade-banner designbase-figma-upgrade-banner--${variant} ${className || ''}` }, useGradient ? (React.createElement(react.RandomGradient, { scheme: gradientScheme, tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-figma-upgrade-banner__gradient-bg" }, bannerContent)) : (bannerContent)));
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
+Object.defineProperty(exports, 'Accordion', {
+    enumerable: true,
+    get: function () { return react.Accordion; }
+});
+Object.defineProperty(exports, 'ActivityHeatmap', {
+    enumerable: true,
+    get: function () { return react.ActivityHeatmap; }
+});
+Object.defineProperty(exports, 'AdBanner', {
+    enumerable: true,
+    get: function () { return react.AdBanner; }
+});
+Object.defineProperty(exports, 'AiChat', {
+    enumerable: true,
+    get: function () { return react.AiChat; }
+});
+Object.defineProperty(exports, 'AiChatList', {
+    enumerable: true,
+    get: function () { return react.AiChatList; }
+});
+Object.defineProperty(exports, 'Alert', {
+    enumerable: true,
+    get: function () { return react.Alert; }
+});
+Object.defineProperty(exports, 'AnimationBackground', {
+    enumerable: true,
+    get: function () { return react.AnimationBackground; }
+});
+Object.defineProperty(exports, 'AnimationText', {
+    enumerable: true,
+    get: function () { return react.AnimationText; }
+});
+Object.defineProperty(exports, 'AppBadge', {
+    enumerable: true,
+    get: function () { return react.AppBadge; }
+});
+Object.defineProperty(exports, 'AudioPlayer', {
+    enumerable: true,
+    get: function () { return react.AudioPlayer; }
+});
+Object.defineProperty(exports, 'Avatar', {
+    enumerable: true,
+    get: function () { return react.Avatar; }
+});
+Object.defineProperty(exports, 'Backdrop', {
+    enumerable: true,
+    get: function () { return react.Backdrop; }
+});
+Object.defineProperty(exports, 'Badge', {
+    enumerable: true,
+    get: function () { return react.Badge; }
+});
+Object.defineProperty(exports, 'Banner', {
+    enumerable: true,
+    get: function () { return react.Banner; }
+});
+Object.defineProperty(exports, 'BottomNavigation', {
+    enumerable: true,
+    get: function () { return react.BottomNavigation; }
+});
+Object.defineProperty(exports, 'BottomSheet', {
+    enumerable: true,
+    get: function () { return react.BottomSheet; }
+});
+Object.defineProperty(exports, 'Breadcrumbs', {
+    enumerable: true,
+    get: function () { return react.Breadcrumbs; }
+});
+Object.defineProperty(exports, 'Button', {
+    enumerable: true,
+    get: function () { return react.Button; }
+});
+Object.defineProperty(exports, 'Calendar', {
+    enumerable: true,
+    get: function () { return react.Calendar; }
+});
+Object.defineProperty(exports, 'Card', {
+    enumerable: true,
+    get: function () { return react.Card; }
+});
+Object.defineProperty(exports, 'Carousel', {
+    enumerable: true,
+    get: function () { return react.Carousel; }
+});
+Object.defineProperty(exports, 'ChatComposer', {
+    enumerable: true,
+    get: function () { return react.ChatComposer; }
+});
+Object.defineProperty(exports, 'ChatList', {
+    enumerable: true,
+    get: function () { return react.ChatList; }
+});
+Object.defineProperty(exports, 'ChatMessage', {
+    enumerable: true,
+    get: function () { return react.ChatMessage; }
+});
+Object.defineProperty(exports, 'ChatOrb', {
+    enumerable: true,
+    get: function () { return react.ChatOrb; }
+});
+Object.defineProperty(exports, 'ChatRoom', {
+    enumerable: true,
+    get: function () { return react.ChatRoom; }
+});
+Object.defineProperty(exports, 'ChatSuggestions', {
+    enumerable: true,
+    get: function () { return react.ChatSuggestions; }
+});
+Object.defineProperty(exports, 'ChatTyping', {
+    enumerable: true,
+    get: function () { return react.ChatTyping; }
+});
+Object.defineProperty(exports, 'ChatWelcome', {
+    enumerable: true,
+    get: function () { return react.ChatWelcome; }
+});
+Object.defineProperty(exports, 'ChatWidget', {
+    enumerable: true,
+    get: function () { return react.ChatWidget; }
+});
+Object.defineProperty(exports, 'Checkbox', {
+    enumerable: true,
+    get: function () { return react.Checkbox; }
+});
+Object.defineProperty(exports, 'Chip', {
+    enumerable: true,
+    get: function () { return react.Chip; }
+});
+Object.defineProperty(exports, 'CodeBlock', {
+    enumerable: true,
+    get: function () { return react.CodeBlock; }
+});
+Object.defineProperty(exports, 'ColorPicker', {
+    enumerable: true,
+    get: function () { return react.ColorPicker; }
+});
+Object.defineProperty(exports, 'ColorSwatch', {
+    enumerable: true,
+    get: function () { return react.ColorSwatch; }
+});
+Object.defineProperty(exports, 'Confirm', {
+    enumerable: true,
+    get: function () { return react.Confirm; }
+});
+Object.defineProperty(exports, 'Container', {
+    enumerable: true,
+    get: function () { return react.Container; }
+});
+Object.defineProperty(exports, 'ContextMenu', {
+    enumerable: true,
+    get: function () { return react.ContextMenu; }
+});
+Object.defineProperty(exports, 'CookieBanner', {
+    enumerable: true,
+    get: function () { return react.CookieBanner; }
+});
+Object.defineProperty(exports, 'Countdown', {
+    enumerable: true,
+    get: function () { return react.Countdown; }
+});
+Object.defineProperty(exports, 'CursorFollower', {
+    enumerable: true,
+    get: function () { return react.CursorFollower; }
+});
+Object.defineProperty(exports, 'DatePicker', {
+    enumerable: true,
+    get: function () { return react.DatePicker; }
+});
+Object.defineProperty(exports, 'Divider', {
+    enumerable: true,
+    get: function () { return react.Divider; }
+});
+Object.defineProperty(exports, 'DownloadProgress', {
+    enumerable: true,
+    get: function () { return react.DownloadProgress; }
+});
+Object.defineProperty(exports, 'Drawer', {
+    enumerable: true,
+    get: function () { return react.Drawer; }
+});
+Object.defineProperty(exports, 'Dropdown', {
+    enumerable: true,
+    get: function () { return react.Dropdown; }
+});
+Object.defineProperty(exports, 'Dropzone', {
+    enumerable: true,
+    get: function () { return react.Dropzone; }
+});
+Object.defineProperty(exports, 'EmailVerify', {
+    enumerable: true,
+    get: function () { return react.EmailVerify; }
+});
+Object.defineProperty(exports, 'EmptyState', {
+    enumerable: true,
+    get: function () { return react.EmptyState; }
+});
+Object.defineProperty(exports, 'FileUploader', {
+    enumerable: true,
+    get: function () { return react.FileUploader; }
+});
+Object.defineProperty(exports, 'FloatingActionButton', {
+    enumerable: true,
+    get: function () { return react.FloatingActionButton; }
+});
+Object.defineProperty(exports, 'Footer', {
+    enumerable: true,
+    get: function () { return react.Footer; }
+});
+Object.defineProperty(exports, 'Form', {
+    enumerable: true,
+    get: function () { return react.Form; }
+});
+Object.defineProperty(exports, 'Gantt', {
+    enumerable: true,
+    get: function () { return react.Gantt; }
+});
+Object.defineProperty(exports, 'Gradient', {
+    enumerable: true,
+    get: function () { return react.Gradient; }
+});
+Object.defineProperty(exports, 'Grid', {
+    enumerable: true,
+    get: function () { return react.Grid; }
+});
+Object.defineProperty(exports, 'GridBackground', {
+    enumerable: true,
+    get: function () { return react.GridBackground; }
+});
+Object.defineProperty(exports, 'GridItem', {
+    enumerable: true,
+    get: function () { return react.GridItem; }
+});
+Object.defineProperty(exports, 'Image', {
+    enumerable: true,
+    get: function () { return react.Image; }
+});
+Object.defineProperty(exports, 'ImageList', {
+    enumerable: true,
+    get: function () { return react.ImageList; }
+});
+Object.defineProperty(exports, 'ImagePlaceholder', {
+    enumerable: true,
+    get: function () { return react.ImagePlaceholder; }
+});
+Object.defineProperty(exports, 'Indicator', {
+    enumerable: true,
+    get: function () { return react.Indicator; }
+});
+Object.defineProperty(exports, 'Input', {
+    enumerable: true,
+    get: function () { return react.Input; }
+});
+Object.defineProperty(exports, 'Kanban', {
+    enumerable: true,
+    get: function () { return react.Kanban; }
+});
+Object.defineProperty(exports, 'Label', {
+    enumerable: true,
+    get: function () { return react.Label; }
+});
+Object.defineProperty(exports, 'Lightbox', {
+    enumerable: true,
+    get: function () { return react.Lightbox; }
+});
+Object.defineProperty(exports, 'List', {
+    enumerable: true,
+    get: function () { return react.List; }
+});
+Object.defineProperty(exports, 'Logo', {
+    enumerable: true,
+    get: function () { return react.Logo; }
+});
+Object.defineProperty(exports, 'MarkdownEditor', {
+    enumerable: true,
+    get: function () { return react.MarkdownEditor; }
+});
+Object.defineProperty(exports, 'Marquee', {
+    enumerable: true,
+    get: function () { return react.Marquee; }
+});
+Object.defineProperty(exports, 'Masonry', {
+    enumerable: true,
+    get: function () { return react.Masonry; }
+});
+Object.defineProperty(exports, 'MenuItem', {
+    enumerable: true,
+    get: function () { return react.MenuItem; }
+});
+Object.defineProperty(exports, 'Modal', {
+    enumerable: true,
+    get: function () { return react.Modal; }
+});
+Object.defineProperty(exports, 'ModalBody', {
+    enumerable: true,
+    get: function () { return react.ModalBody; }
+});
+Object.defineProperty(exports, 'ModalFooter', {
+    enumerable: true,
+    get: function () { return react.ModalFooter; }
+});
+Object.defineProperty(exports, 'ModalHeader', {
+    enumerable: true,
+    get: function () { return react.ModalHeader; }
+});
+Object.defineProperty(exports, 'Navbar', {
+    enumerable: true,
+    get: function () { return react.Navbar; }
+});
+Object.defineProperty(exports, 'OnboardingModal', {
+    enumerable: true,
+    get: function () { return react.OnboardingModal; }
+});
+Object.defineProperty(exports, 'OtpInput', {
+    enumerable: true,
+    get: function () { return react.OtpInput; }
+});
+Object.defineProperty(exports, 'PageHeader', {
+    enumerable: true,
+    get: function () { return react.PageHeader; }
+});
+Object.defineProperty(exports, 'Pagination', {
+    enumerable: true,
+    get: function () { return react.Pagination; }
+});
+Object.defineProperty(exports, 'PhoneVerify', {
+    enumerable: true,
+    get: function () { return react.PhoneVerify; }
+});
+Object.defineProperty(exports, 'Popover', {
+    enumerable: true,
+    get: function () { return react.Popover; }
+});
+Object.defineProperty(exports, 'Progress', {
+    enumerable: true,
+    get: function () { return react.Progress; }
+});
+Object.defineProperty(exports, 'ProgressStep', {
+    enumerable: true,
+    get: function () { return react.ProgressStep; }
+});
+Object.defineProperty(exports, 'Progressbar', {
+    enumerable: true,
+    get: function () { return react.Progressbar; }
+});
+Object.defineProperty(exports, 'Radio', {
+    enumerable: true,
+    get: function () { return react.Radio; }
+});
+Object.defineProperty(exports, 'RandomGradient', {
+    enumerable: true,
+    get: function () { return react.RandomGradient; }
+});
+Object.defineProperty(exports, 'RangeSlider', {
+    enumerable: true,
+    get: function () { return react.RangeSlider; }
+});
+Object.defineProperty(exports, 'Rating', {
+    enumerable: true,
+    get: function () { return react.Rating; }
+});
+Object.defineProperty(exports, 'Reorder', {
+    enumerable: true,
+    get: function () { return react.Reorder; }
+});
+Object.defineProperty(exports, 'ResizablePanels', {
+    enumerable: true,
+    get: function () { return react.ResizablePanels; }
+});
+Object.defineProperty(exports, 'ScrollArea', {
+    enumerable: true,
+    get: function () { return react.ScrollArea; }
+});
+Object.defineProperty(exports, 'SearchBar', {
+    enumerable: true,
+    get: function () { return react.SearchBar; }
+});
+Object.defineProperty(exports, 'Section', {
+    enumerable: true,
+    get: function () { return react.Section; }
+});
+Object.defineProperty(exports, 'SectionAppDownload', {
+    enumerable: true,
+    get: function () { return react.SectionAppDownload; }
+});
+Object.defineProperty(exports, 'SectionContact', {
+    enumerable: true,
+    get: function () { return react.SectionContact; }
+});
+Object.defineProperty(exports, 'SectionCta', {
+    enumerable: true,
+    get: function () { return react.SectionCta; }
+});
+Object.defineProperty(exports, 'SectionFaq', {
+    enumerable: true,
+    get: function () { return react.SectionFaq; }
+});
+Object.defineProperty(exports, 'SectionFeature', {
+    enumerable: true,
+    get: function () { return react.SectionFeature; }
+});
+Object.defineProperty(exports, 'SectionFeatureGrid', {
+    enumerable: true,
+    get: function () { return react.SectionFeatureGrid; }
+});
+Object.defineProperty(exports, 'SectionHero', {
+    enumerable: true,
+    get: function () { return react.SectionHero; }
+});
+Object.defineProperty(exports, 'SectionLogoCloud', {
+    enumerable: true,
+    get: function () { return react.SectionLogoCloud; }
+});
+Object.defineProperty(exports, 'SectionPricing', {
+    enumerable: true,
+    get: function () { return react.SectionPricing; }
+});
+Object.defineProperty(exports, 'SectionStats', {
+    enumerable: true,
+    get: function () { return react.SectionStats; }
+});
+Object.defineProperty(exports, 'SectionTestimonials', {
+    enumerable: true,
+    get: function () { return react.SectionTestimonials; }
+});
+Object.defineProperty(exports, 'SegmentControl', {
+    enumerable: true,
+    get: function () { return react.SegmentControl; }
+});
+Object.defineProperty(exports, 'Select', {
+    enumerable: true,
+    get: function () { return react.Select; }
+});
+Object.defineProperty(exports, 'Share', {
+    enumerable: true,
+    get: function () { return react.Share; }
+});
+Object.defineProperty(exports, 'Sidebar', {
+    enumerable: true,
+    get: function () { return react.Sidebar; }
+});
+Object.defineProperty(exports, 'Signature', {
+    enumerable: true,
+    get: function () { return react.Signature; }
+});
+Object.defineProperty(exports, 'Skeleton', {
+    enumerable: true,
+    get: function () { return react.Skeleton; }
+});
+Object.defineProperty(exports, 'Spinner', {
+    enumerable: true,
+    get: function () { return react.Spinner; }
+});
+Object.defineProperty(exports, 'SplitView', {
+    enumerable: true,
+    get: function () { return react.SplitView; }
+});
+Object.defineProperty(exports, 'Stack', {
+    enumerable: true,
+    get: function () { return react.Stack; }
+});
+Object.defineProperty(exports, 'Stat', {
+    enumerable: true,
+    get: function () { return react.Stat; }
+});
+Object.defineProperty(exports, 'Stepper', {
+    enumerable: true,
+    get: function () { return react.Stepper; }
+});
+Object.defineProperty(exports, 'Table', {
+    enumerable: true,
+    get: function () { return react.Table; }
+});
+Object.defineProperty(exports, 'Tabs', {
+    enumerable: true,
+    get: function () { return react.Tabs; }
+});
+Object.defineProperty(exports, 'Testimonial', {
+    enumerable: true,
+    get: function () { return react.Testimonial; }
+});
+Object.defineProperty(exports, 'Textarea', {
+    enumerable: true,
+    get: function () { return react.Textarea; }
+});
+Object.defineProperty(exports, 'TimePicker', {
+    enumerable: true,
+    get: function () { return react.TimePicker; }
+});
+Object.defineProperty(exports, 'Timeline', {
+    enumerable: true,
+    get: function () { return react.Timeline; }
+});
+Object.defineProperty(exports, 'Toast', {
+    enumerable: true,
+    get: function () { return react.Toast; }
+});
+Object.defineProperty(exports, 'Toggle', {
+    enumerable: true,
+    get: function () { return react.Toggle; }
+});
+Object.defineProperty(exports, 'Toolbar', {
+    enumerable: true,
+    get: function () { return react.Toolbar; }
+});
+Object.defineProperty(exports, 'Tooltip', {
+    enumerable: true,
+    get: function () { return react.Tooltip; }
+});
+Object.defineProperty(exports, 'TopBanner', {
+    enumerable: true,
+    get: function () { return react.TopBanner; }
+});
+Object.defineProperty(exports, 'Tutorial', {
+    enumerable: true,
+    get: function () { return react.Tutorial; }
+});
+Object.defineProperty(exports, 'TwoFactor', {
+    enumerable: true,
+    get: function () { return react.TwoFactor; }
+});
+Object.defineProperty(exports, 'VideoPlayer', {
+    enumerable: true,
+    get: function () { return react.VideoPlayer; }
+});
+Object.defineProperty(exports, 'YouTubePlayer', {
+    enumerable: true,
+    get: function () { return react.YouTubePlayer; }
+});
+Object.defineProperty(exports, 'useContextMenu', {
+    enumerable: true,
+    get: function () { return react.useContextMenu; }
+});
+exports.DEFAULT_LICENSE_MESSAGE_TYPES = DEFAULT_LICENSE_MESSAGE_TYPES;
 exports.DonationBadge = DonationBadge;
 exports.FigmaContainer = FigmaContainer;
 exports.FigmaFooter = FigmaFooter;
@@ -1106,6 +1933,8 @@ exports.FigmaToastProvider = FigmaToastProvider;
 exports.FormWithSubmit = FormWithSubmit;
 exports.InteractionFeedback = InteractionFeedback;
 exports.LanguageSelector = LanguageSelector;
+exports.LicenseOffer = LicenseOffer;
+exports.LicenseStatusCard = LicenseStatusCard;
 exports.LogoDropdown = LogoDropdown;
 exports.PageLicense = PageLicense;
 exports.PaymentBadge = PaymentBadge;
@@ -1113,18 +1942,20 @@ exports.PaymentStatusSection = PaymentStatusSection;
 exports.PricingComparison = PricingComparison;
 exports.ProgressModal = ProgressModal;
 exports.ResizablePlugin = ResizablePlugin;
+exports.START_DESIGNBASE_AUTH_MESSAGE = START_DESIGNBASE_AUTH_MESSAGE;
 exports.SettingsModal = SettingsModal;
 exports.TitleDescription = TitleDescription;
 exports.UpgradeBanner = UpgradeBanner;
 exports.getActiveSection = getActiveSection;
 exports.resolveText = resolveText;
 exports.scrollToSection = scrollToSection;
+exports.useFigmaLicenseBridge = useFigmaLicenseBridge;
 exports.useFigmaToast = useFigmaToast;
 exports.useToast = useToast;
-Object.keys(ui).forEach(function (k) {
+Object.keys(react).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,
-        get: function () { return ui[k]; }
+        get: function () { return react[k]; }
     });
 });
 //# sourceMappingURL=index.js.map