@designbasekorea/ui-wc 0.2.2 → 0.3.0

package/dist/react/index.d.ts

@@ -473,6 +473,8 @@ declare class DbTooltip extends HTMLElement {
     private showTimer?;
     private hideTimer?;
     private repositionRaf?;
+    private enterRaf?;
+    private removalTimer?;
     get content(): string;
     set content(value: string);
     get position(): string;
@@ -504,6 +506,7 @@ declare class DbTooltip extends HTMLElement {
     private syncTooltipClasses;
     private calculatePosition;
     private setVisible;
+    private hideTooltip;
     private removeTooltip;
     private handleShow;
     private handleHide;
@@ -586,11 +589,21 @@ declare global {
 
 declare class DbProgress extends HTMLElement {
     static get observedAttributes(): string[];
+    private structureSignature;
+    private barEl?;
+    private linearValueEl?;
+    private circularBarEl?;
+    private circularValueEl?;
+    private circumference;
     get value(): number;
     set value(value: number);
     connectedCallback(): void;
     attributeChangedCallback(): void;
     private render;
+    private buildLinear;
+    private updateLinear;
+    private buildCircular;
+    private updateCircular;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1067,6 +1080,10 @@ declare class DbIndicator extends HTMLElement {
     set size(value: string);
     get direction(): string;
     set direction(value: string);
+    get numberBackground(): boolean;
+    set numberBackground(value: boolean);
+    get playback(): boolean;
+    set playback(value: boolean);
     get clickable(): boolean;
     set clickable(value: boolean);
     get timer(): boolean;
@@ -1085,6 +1102,14 @@ declare class DbIndicator extends HTMLElement {
     private renderStep;
     private renderDots;
     private renderPlaybackButton;
+    private renderNumbers;
+    private renderSlide;
+    private renderScaleFill;
+    private renderLine;
+    private renderDotLine;
+    private fillRatio;
+    private renderFill;
+    private renderContent;
     private render;
 }
 declare global {
@@ -1375,6 +1400,7 @@ declare class DbLightbox extends HTMLElement {
     private imageError;
     private keydownHandler;
     private boundSrc;
+    private thumbnailSignature;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -1436,9 +1462,34 @@ interface DbNavbarItem {
     label: string;
     href?: string;
     icon?: string;
+    /** 메가 메뉴 링크에서 라벨 아래 표시되는 보조 설명 */
+    description?: string;
     active?: boolean;
     disabled?: boolean;
     children?: DbNavbarItem[];
+    /** children 대신 메가 메뉴(다단 패널) 스타일로 렌더링 */
+    megaMenu?: boolean;
+    /** 메가 메뉴 컬럼 목록 */
+    columns?: DbNavbarMegaColumn[];
+    /** 메가 메뉴 우측 강조(피처드) 영역 */
+    featured?: DbNavbarMegaFeatured;
+}
+interface DbNavbarMegaColumn {
+    id: string;
+    /** 컬럼 상단 제목 */
+    title?: string;
+    /** 컬럼 내 링크 목록 */
+    items: DbNavbarItem[];
+}
+interface DbNavbarMegaFeatured {
+    title?: string;
+    description?: string;
+    /** 배경 이미지 URL */
+    image?: string;
+    href?: string;
+    /** CTA 텍스트 (예: 자세히 보기) */
+    ctaLabel?: string;
+    icon?: string;
 }
 interface DbNavbarUserProfile {
     name: string;
@@ -1471,10 +1522,16 @@ declare class DbNavbar extends HTMLElement {
     private unbindOutsideClick;
     private dispatchItemClick;
     private syncHostClasses;
+    private isMegaMenu;
+    private createNavToggleButton;
+    private createMegaLink;
+    private createMegaMenu;
+    private createMegaFeatured;
     private createDesktopNavItem;
     private createUserMenuItemElement;
     private bindSearchEvents;
     private applyAvatarProfile;
+    private getMobileChildren;
     private createMobileMenuItem;
     private updateUserMenuVisibility;
     private renderMobileMenu;
@@ -1486,6 +1543,78 @@ declare global {
     }
 }
 
+type DbFooterSocialPlatform = 'youtube' | 'instagram' | 'x' | 'linkedin' | 'facebook' | 'email';
+interface DbFooterLink {
+    id: string;
+    label: string;
+    href?: string;
+    external?: boolean;
+    /** 개인정보처리방침 등 강조 링크 */
+    emphasize?: boolean;
+}
+interface DbFooterLinkColumn {
+    id: string;
+    title: string;
+    items: DbFooterLink[];
+}
+interface DbFooterSocialLink {
+    id: string;
+    platform: DbFooterSocialPlatform;
+    href: string;
+    label?: string;
+}
+interface DbFooterCompanyInfo {
+    companyName?: string;
+    representative?: string;
+    businessNumber?: string;
+    mailOrderNumber?: string;
+    address?: string;
+    phone?: string;
+    customerCenter?: string;
+    email?: string;
+    hostingProvider?: string;
+}
+interface DbFooterFamilySite {
+    id: string;
+    label: string;
+    href: string;
+}
+declare class DbFooter extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get columns(): DbFooterLinkColumn[];
+    set columns(value: DbFooterLinkColumn[] | string);
+    get legalLinks(): DbFooterLink[];
+    set legalLinks(value: DbFooterLink[] | string);
+    get socialLinks(): DbFooterSocialLink[];
+    set socialLinks(value: DbFooterSocialLink[] | string);
+    get companyInfo(): DbFooterCompanyInfo;
+    set companyInfo(value: DbFooterCompanyInfo | string);
+    get familySites(): DbFooterFamilySite[];
+    set familySites(value: DbFooterFamilySite[] | string);
+    private syncHostClasses;
+    private dispatchLinkClick;
+    private createLink;
+    private createSocialLink;
+    private createCompanyInfoRows;
+    private showLogo;
+    private createLogo;
+    private renderBrand;
+    private renderColumns;
+    private createLegalNav;
+    private renderLegalBar;
+    private renderCompanyInfo;
+    private createCopyright;
+    private renderMinimal;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-footer': DbFooter;
+    }
+}
+
 interface DbSidebarItem {
     id: string;
     label: string;
@@ -3057,27 +3186,49 @@ declare class DbMarquee extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
     private containerEl?;
-    private trackEl?;
-    private baseGroupEl?;
+    private rowsEl?;
     private srOnlyEl?;
+    private rows;
+    private rowCount;
     private resizeObserver?;
     private containerWidth;
-    private baseGroupWidth;
+    private gap;
+    private scrollVelocityEnabled;
+    private rafId;
+    private lastFrameTime;
+    private lastScrollY;
+    private smoothedScrollV;
+    private baseDurationSec;
+    private reduceMotion;
     private boundMeasure;
+    private boundFrame;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private getBool;
     private parseItems;
+    private itemToText;
     private build;
     private bindResize;
+    /** rows 개수에 맞춰 행 DOM을 만들거나 제거한다. */
+    private reconcileRows;
     private measure;
     private unbindImageListeners;
     private bindImageListeners;
     private renderItem;
     private renderGroup;
-    private renderDuplicates;
+    /**
+     * 각 행의 base 그룹을 items로 다시 만든다 — items/attributes 변경 시에만 실행.
+     * 이미지 노드 재생성으로 인한 재로딩을 막기 위해 measure() 중에는 건드리지 않는다.
+     */
+    private buildBase;
+    private baseImagesReady;
+    /** 트랙을 채울 만큼의 복제 그룹 개수를 델타만 조정한다. */
+    private reconcileDuplicates;
     private syncReadyState;
+    private startScrollEngine;
+    private stopScrollEngine;
+    private frame;
     private updateUI;
 }
 declare global {
@@ -3142,8 +3293,16 @@ declare class DbAdBanner extends HTMLElement {
     private autoCloseTimer?;
     private rootEl?;
     private gradientEl?;
+    private animBgEl?;
+    private animBgInner?;
+    private gridBgEl?;
+    private gridBgInner?;
     private contentEl?;
+    private mainEl?;
+    private textEl?;
     private closeBtn?;
+    private imageEl?;
+    private linkEl?;
     private iconEl?;
     private labelEl?;
     private badgeEl?;
@@ -3161,11 +3320,28 @@ declare class DbAdBanner extends HTMLElement {
     private getBool;
     private getType;
     private getVariant;
+    private getSize;
+    private ctaButtonSize;
     private build;
     private handleClose;
     private stopAutoClose;
     private startAutoClose;
-    private renderGradientWrapper;
+    private getBackground;
+    private ensureAnimBg;
+    private ensureGridBg;
+    /** 이전 배경 모드의 백드롭 엘리먼트를 정리한다. */
+    private clearBackdrop;
+    private renderBackground;
+    /** 장식 아이콘은 card 타입에서만 사용한다. */
+    private syncIcon;
+    /** floating 타입에서만 텍스트 상단에 배지 칩을 노출한다. */
+    private syncBadge;
+    /** floating 타입에서 배너 이미지를 콘텐츠 상단(패딩 밖)에 렌더한다. */
+    private syncImage;
+    /** topbar 타입에서 href 가 있으면 전체를 덮는 링크 오버레이를 렌더한다. */
+    private syncLink;
+    /** show-countdown + end-date 가 있을 때만 카운트다운을 마운트한다. */
+    private syncCountdown;
     private updateUI;
 }
 declare global {
@@ -3209,11 +3385,18 @@ declare class DbAnimationText extends HTMLElement {
     private displayText;
     private isVisible;
     private isAnimating;
+    private wordEls;
+    private scrollHandler?;
+    private rafId?;
+    private rotateToken;
+    private rotateObserver?;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private getText;
+    private getRotateTexts;
+    private getLongestText;
     private getType;
     private getTrigger;
     private ensureStructure;
@@ -3221,6 +3404,10 @@ declare class DbAnimationText extends HTMLElement {
     private syncFromAttributes;
     private syncClasses;
     private setupTrigger;
+    private setupTextRotate;
+    private setupScrollFill;
+    private teardownScrollFill;
+    private updateScrollFill;
     private startAnimation;
     private startTyping;
     private startDecoding;
@@ -3288,15 +3475,36 @@ declare global {
 declare class DbAnimationBackground extends HTMLElement {
     private layersEl?;
     private contentEl?;
+    private controlsRootEl?;
+    private panelEl?;
+    private panelOpen;
     private layerHandle?;
     private clickHandler?;
+    private mountedType?;
+    private controlInputs;
+    private syncingControls;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
-    private teardownLayers;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private getBool;
     private getSizeStyle;
+    private getConfig;
+    private teardownLayers;
+    private remountLayers;
+    private canLiveUpdate;
+    private applyConfig;
+    private syncClickable;
     private render;
+    private ensureControlsShell;
+    private syncControlsVisibility;
+    private syncPanelState;
+    private createIconButton;
+    private rebuildControlInputs;
+    private createControlField;
+    private commitControlValue;
+    private syncControlInputs;
+    private renderColorInputs;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -3304,8 +3512,99 @@ declare global {
     }
 }
 
+/**
+ * db-grid-background — 캔버스 기반 그리드 배경.
+ *
+ * 패턴은 항상 중앙을 기준으로 대칭 배치되며(가장자리 라인 없음),
+ * 단독 배경으로도, 다른 배경 위 데코 레이어(overlay)로도 쓸 수 있다.
+ * interactive/animate 로 마우스 인터랙션과 앰비언트 애니메이션을 켤 수 있다.
+ *
+ * @example
+ *   <db-grid-background type="lines" size="32" fade="all"
+ *     interactive animate height="240"></db-grid-background>
+ */
+declare class DbGridBackground extends HTMLElement {
+    private canvas?;
+    private ctx?;
+    private hlCanvas?;
+    private maskCanvas?;
+    private ro?;
+    private rafId?;
+    private lastTime;
+    private lastPointerMove;
+    private bandAngle;
+    private pointer;
+    private cssW;
+    private cssH;
+    private colorProbe?;
+    private themeObserver?;
+    private themeMedia?;
+    private tracePulses;
+    private traceSpawnAccumulator;
+    private onThemeMediaChange;
+    private onPointerMove;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private getNumber;
+    private getSizeStyle;
+    private getColorProbe;
+    private resolveCssColor;
+    private isDarkContext;
+    private resolveThemeColor;
+    private effectiveOpacity;
+    private effectiveColor;
+    private effectiveInterColor;
+    private traceDrawColor;
+    private traceDrawOpacity;
+    private parseColorRgb;
+    private crossArm;
+    private interactionMode;
+    private animationStyle;
+    private traceDirection;
+    private linesLayout;
+    private crossStyle;
+    private parseGuideEdges;
+    private guideFraction;
+    private isGridLines;
+    private isTraceableLines;
+    private get cfg();
+    private ensureCanvas;
+    private applyHostStyles;
+    private startObserving;
+    private observeDocumentTheme;
+    private bindPointer;
+    private handlePointerMove;
+    private measure;
+    /** 중앙을 기준으로 대칭 배치되며 (0, extent) 내부 좌표만 반환 → 가장자리 라인 없음 */
+    private axis;
+    private scheduleDraw;
+    private ensureLoop;
+    private drawFrame;
+    private easeInOutCubic;
+    private traceSegmentLength;
+    private pulseHead;
+    private updateTracePulses;
+    private traceLinePositions;
+    private spawnTracePulse;
+    private drawTracePulseSegment;
+    private drawTraceHighlight;
+    private drawPattern;
+    private drawGridLines;
+    private drawFrameGuides;
+    private drawCenterGuides;
+    private buildEnergyMask;
+    private applyFade;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-grid-background': DbGridBackground;
+    }
+}
+
 declare class DbCursorFollower extends HTMLElement {
-    private scopeEl?;
     private portalRoot?;
     private pillEl?;
     private labelEl?;
@@ -3323,7 +3622,7 @@ declare class DbCursorFollower extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private setupDesktopGate;
-    private ensureScope;
+    private updateScope;
     private isInScope;
     private mountLayer;
     private teardownLayer;
@@ -4284,6 +4583,10 @@ type RangeSliderProps = WebComponentProps & {
     size?: 's' | 'm' | 'l';
     variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
     showValue?: boolean;
+    showLabel?: boolean;
+    label?: string;
+    valueFixed?: number;
+    showThumbTooltip?: boolean;
     valuePosition?: 'top' | 'left' | 'right' | 'bottom';
     showMarks?: boolean;
     marks?: number[];
@@ -4926,6 +5229,56 @@ type NavbarProps = WebComponentProps & {
     fullWidth?: boolean;
     shadow?: boolean;
 };
+type FooterLink = {
+    id: string;
+    label: string;
+    href?: string;
+    external?: boolean;
+    emphasize?: boolean;
+};
+type FooterLinkColumn = {
+    id: string;
+    title: string;
+    items: FooterLink[];
+};
+type FooterSocialLink = {
+    id: string;
+    platform: 'youtube' | 'instagram' | 'x' | 'linkedin' | 'facebook' | 'email';
+    href: string;
+    label?: string;
+};
+type FooterCompanyInfo = {
+    companyName?: string;
+    representative?: string;
+    businessNumber?: string;
+    mailOrderNumber?: string;
+    address?: string;
+    phone?: string;
+    customerCenter?: string;
+    email?: string;
+    hostingProvider?: string;
+};
+type FooterFamilySite = {
+    id: string;
+    label: string;
+    href: string;
+};
+type FooterProps = WebComponentProps & {
+    columns?: FooterLinkColumn[] | string;
+    legalLinks?: FooterLink[] | string;
+    socialLinks?: FooterSocialLink[] | string;
+    companyInfo?: FooterCompanyInfo | string;
+    familySites?: FooterFamilySite[] | string;
+    tagline?: string;
+    copyright?: string;
+    logoType?: string;
+    variant?: 'default' | 'compact' | 'minimal';
+    size?: 's' | 'm' | 'l';
+    fullWidth?: boolean;
+    showLogo?: boolean;
+    showSocial?: boolean;
+    familySiteLabel?: string;
+};
 type SidebarItem = {
     id: string;
     label: string;
@@ -5007,6 +5360,8 @@ type ProgressProps = WebComponentProps & {
     showValue?: boolean;
     animated?: boolean;
     striped?: boolean;
+    gradient?: boolean;
+    glow?: boolean;
 };
 type SkeletonProps = WebComponentProps & {
     variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
@@ -5559,10 +5914,12 @@ type IndicatorProps = WebComponentProps & {
     total?: number;
     current?: number;
     defaultCurrent?: number;
-    indicatorType?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'combined';
-    type?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'combined';
+    indicatorType?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'fill' | 'combined';
+    type?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'fill' | 'combined';
     direction?: 'horizontal' | 'vertical';
     size?: 's' | 'm' | 'l';
+    numberBackground?: boolean;
+    playback?: boolean;
     clickable?: boolean;
     timer?: boolean;
     timerDuration?: number;
@@ -6356,8 +6713,14 @@ type SectionAppDownloadProps = WebComponentProps & {
     fullHeight?: boolean;
     overflowVisible?: boolean;
 };
+type MarqueeImageItem = {
+    src: string;
+    alt?: string;
+    href?: string;
+    height?: number;
+};
 type MarqueeProps = WebComponentProps & {
-    items?: string[] | string;
+    items?: Array<string | MarqueeImageItem> | string;
     direction?: 'left' | 'right';
     duration?: number;
     speed?: number;
@@ -6370,6 +6733,10 @@ type MarqueeProps = WebComponentProps & {
     edgePadding?: number;
     gap?: number;
     alignY?: 'start' | 'center' | 'end';
+    rowCount?: number;
+    rowGap?: number;
+    scrollVelocity?: boolean;
+    scrollBoost?: number;
     ariaLabel?: string;
 };
 type GradientColor = {
@@ -6401,11 +6768,19 @@ type RandomGradientProps = WebComponentProps & {
 type AdBannerProps = WebComponentProps & {
     type?: 'hero' | 'topbar' | 'card' | 'floating';
     variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    size?: 's' | 'm' | 'l';
     title?: string;
     subtitle?: string;
     ctaText?: string;
+    image?: string;
+    imageAlt?: string;
+    href?: string;
+    target?: string;
     autoClose?: boolean;
     closeDelay?: number;
+    background?: 'solid' | 'gradient' | 'animation' | 'grid';
+    animationType?: string;
+    gridType?: 'lines' | 'dots' | 'cross' | 'diagonal';
     useRandomGradient?: boolean;
     gradientScheme?: RandomGradientProps['scheme'];
     gradientTone?: RandomGradientProps['tone'];
@@ -6449,8 +6824,12 @@ type TimelineProps = WebComponentProps & {
 };
 type AnimationTextProps = WebComponentProps & {
     text?: string;
+    /** text-rotate 타입용 — 콤마로 구분된 여러 텍스트 */
+    texts?: string;
+    /** text-rotate 타입용 — 각 텍스트 유지 시간(ms) */
+    interval?: number;
     trigger?: 'mount' | 'hover' | 'click' | 'in-view';
-    type?: 'typing' | 'fade' | 'slide' | 'bounce' | 'shake' | 'glow' | 'gradient' | 'wave' | 'flip' | 'scale' | 'decode';
+    type?: 'typing' | 'fade' | 'slide' | 'bounce' | 'shake' | 'glow' | 'gradient' | 'wave' | 'flip' | 'scale' | 'decode' | 'roll' | 'reveal' | 'scroll-fill' | 'text-rotate';
     speed?: number;
     repeat?: number;
     delay?: number;
@@ -6495,7 +6874,7 @@ type TutorialProps = WebComponentProps & {
     onDbPrev?: DbEventHandler;
 };
 type AnimationBackgroundProps = WebComponentProps & {
-    type?: 'gradient' | 'particles' | 'stars' | 'snow' | 'flowers' | 'confetti' | 'aurora' | 'plasma' | 'mesh-flow' | 'fluid' | 'radiant' | 'ethereal';
+    type?: 'particles' | 'stars' | 'snow' | 'flowers' | 'confetti' | 'aurora' | 'plasma' | 'mesh-flow' | 'fluid' | 'radiant' | 'ethereal' | 'graphite';
     theme?: 'light' | 'dark';
     intensity?: 'subtle' | 'medium' | 'vivid';
     blur?: number;
@@ -6521,6 +6900,10 @@ type AnimationBackgroundProps = WebComponentProps & {
     showVignette?: boolean;
     preset?: string;
     zoom?: number;
+    showControls?: boolean;
+    shaderSpeed?: number;
+    shaderIntensity?: number;
+    warp?: number;
     onClick?: DbEventHandler;
     onDbClick?: DbEventHandler;
 };
@@ -6593,6 +6976,7 @@ declare const ImageList: react.ForwardRefExoticComponent<Omit<ImageListProps, "r
 declare const Lightbox: react.ForwardRefExoticComponent<Omit<LightboxProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const BottomNavigation: react.ForwardRefExoticComponent<Omit<BottomNavigationProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Navbar: react.ForwardRefExoticComponent<Omit<NavbarProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Footer: react.ForwardRefExoticComponent<Omit<FooterProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Sidebar: react.ForwardRefExoticComponent<Omit<SidebarProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const SegmentControl: react.ForwardRefExoticComponent<Omit<SegmentControlProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Select: react.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -6633,6 +7017,34 @@ declare const Timeline: react.ForwardRefExoticComponent<Omit<TimelineProps, "ref
 declare const AnimationText: react.ForwardRefExoticComponent<Omit<AnimationTextProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Tutorial: react.ForwardRefExoticComponent<Omit<TutorialProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const AnimationBackground: react.ForwardRefExoticComponent<Omit<AnimationBackgroundProps, "ref"> & react.RefAttributes<HTMLElement>>;
+type GridBackgroundProps = WebComponentProps & {
+    type?: 'lines' | 'dots' | 'cross' | 'diagonal';
+    size?: number;
+    thickness?: number;
+    color?: string;
+    theme?: string;
+    opacity?: number;
+    fade?: string;
+    fadeSize?: number | string;
+    background?: string;
+    overlay?: string;
+    interactive?: boolean;
+    interaction?: 'none' | 'glow' | 'magnet' | 'rotate';
+    interactionColor?: string;
+    interactionRadius?: number;
+    crossSize?: number;
+    crossStyle?: 'plus' | 'line';
+    linesLayout?: 'grid' | 'frame' | 'center';
+    animated?: boolean;
+    animationStyle?: 'band' | 'trace' | 'both';
+    animationSpeed?: number;
+    traceLength?: number;
+    traceDirection?: 'vertical' | 'horizontal' | 'both';
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+};
+declare const GridBackground: react.ForwardRefExoticComponent<Omit<GridBackgroundProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const CursorFollower: react.ForwardRefExoticComponent<Omit<CursorFollowerProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Lottie: react.ForwardRefExoticComponent<Omit<LottieProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const PageHeader: react.ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -6648,5 +7060,5 @@ declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps,
 declare const TimePicker: react.ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Calendar: react.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & react.RefAttributes<HTMLElement>>;
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, CodeBlock, ColorPicker, Confirm, Container, ContextMenu, Countdown, CursorFollower, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Label, Lightbox, List, Logo, Lottie, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, PageHeader, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionFeature, SectionHero, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, VideoPlayer, YouTubePlayer, useContextMenu };
-export type { AccordionItemConfig, AccordionProps, AdBannerProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbEventHandler, DividerProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmptyStateProps, FileUploaderProps, FloatingActionButtonProps, FormFieldData, FormProps, GradientColor, GradientProps, GradientScheme, GradientTone, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, LottieProps, MarkdownEditorProps, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, OnboardingModalProps, OnboardingStep, PageHeaderProps, PageHeaderTabItem, PaginationProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionContactAction, SectionContactProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarProps, SidebarSection, SidebarUserProfile, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, CodeBlock, ColorPicker, Confirm, Container, ContextMenu, Countdown, CursorFollower, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Footer, Form, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Label, Lightbox, List, Logo, Lottie, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, PageHeader, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionFeature, SectionHero, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, VideoPlayer, YouTubePlayer, useContextMenu };
+export type { AccordionItemConfig, AccordionProps, AdBannerProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbEventHandler, DividerProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmptyStateProps, FileUploaderProps, FloatingActionButtonProps, FooterCompanyInfo, FooterFamilySite, FooterLink, FooterLinkColumn, FooterProps, FooterSocialLink, FormFieldData, FormProps, GradientColor, GradientProps, GradientScheme, GradientTone, GridBackgroundProps, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, LottieProps, MarkdownEditorProps, MarqueeImageItem, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, OnboardingModalProps, OnboardingStep, PageHeaderProps, PageHeaderTabItem, PaginationProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionContactAction, SectionContactProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarProps, SidebarSection, SidebarUserProfile, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };