:root{--codesandbox-gap-xs:clamp(4px,1vw,8px);--codesandbox-gap-sm:clamp(8px,2vw,12px);--codesandbox-gap-md:clamp(12px,3vw,16px);--codesandbox-gap-lg:clamp(16px,4vw,24px);--codesandbox-padding-xs:clamp(6px,1.5vw,10px);--codesandbox-padding-sm:clamp(8px,2vw,16px);--codesandbox-padding-md:clamp(12px,3vw,24px);--codesandbox-padding-lg:clamp(16px,4vw,32px);--codesandbox-grid-min-width:clamp(120px,20vw,200px);--codesandbox-variant-grid-min:clamp(140px,25vw,220px);--codesandbox-input-width-narrow:clamp(80px,15vw,120px);--codesandbox-input-width-wide:clamp(120px,25vw,180px);--codesandbox-breakpoint-sm:480px;--codesandbox-breakpoint-md:768px;--codesandbox-breakpoint-lg:1024px;--codesandbox-min-height:clamp(200px,30vh,400px);--codesandbox-max-height:clamp(400px,60vh,800px)}.codesandbox-container{font-size:clamp(12px,2.5vw,14px);line-height:1.5}.codesandbox-container,.codesandbox-controls,.codesandbox-variant-matrix{container-type:inline-size}@supports(container-type:inline-size){@container (width >= 768px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(var(--codesandbox-variant-grid-min),1fr))}.codesandbox-controls{grid-template-columns:repeat(2,1fr);gap:var(--codesandbox-gap-md)}}@container (width >= 1024px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.codesandbox-controls{grid-template-columns:repeat(3,1fr)}}}@supports not (container-type:inline-size){@media(min-width:768px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(var(--codesandbox-variant-grid-min),1fr))}.codesandbox-controls{grid-template-columns:repeat(2,1fr);gap:var(--codesandbox-gap-md)}}@media(min-width:1024px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.codesandbox-controls{grid-template-columns:repeat(3,1fr)}}}@media(hover:none)and (pointer:coarse){.codesandbox-container{--codesandbox-button-min-height:44px;--codesandbox-input-min-height:44px}.codesandbox-container button,.codesandbox-container input,.codesandbox-container select{min-height:var(--codesandbox-button-min-height);padding:var(--codesandbox-padding-sm)}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.codesandbox-container{font-size:clamp(11px,2.3vw,13px)}}@media print{.codesandbox-container{--codesandbox-gap-sm:8px;--codesandbox-gap-md:12px;--codesandbox-padding-sm:8px;--codesandbox-padding-md:12px}.codesandbox-container .codesandbox-controls,.codesandbox-container .codesandbox-toolbar{display:none}}@media(prefers-reduced-motion:reduce){.codesandbox-container *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}.ComprehensiveComponentDoc_componentDoc__cMtkg{max-width:1200px;margin:0 auto;padding:0 1rem}.ComprehensiveComponentDoc_header__GvdPt{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--semantic-color-border-subtle)}.ComprehensiveComponentDoc_headerContent__I0Yqm{display:flex;flex-direction:column;gap:1rem}.ComprehensiveComponentDoc_titleSection__DAL_S{display:flex;flex-direction:column;gap:.75rem}.ComprehensiveComponentDoc_title__Wcfj4{margin:0;color:var(--semantic-color-foreground-primary);font-weight:700;font-size:2.5rem}.ComprehensiveComponentDoc_metadata__jg13U{display:flex;flex-wrap:wrap;gap:.5rem}.ComprehensiveComponentDoc_badge__3780_{padding:.25rem .75rem;border-radius:1rem;font-weight:500;font-size:.875rem}.ComprehensiveComponentDoc_badge__3780_[data-type=category]{background:var(--semantic-color-background-info-subtle);color:var(--semantic-color-foreground-info)}.ComprehensiveComponentDoc_badge__3780_[data-type=complexity]{background:var(--semantic-color-background-highlight);color:var(--semantic-color-foreground-info)}.ComprehensiveComponentDoc_badge__3780_[data-type=status][data-status=built]{background:var(--semantic-color-background-success-subtle);color:var(--semantic-color-foreground-success)}.ComprehensiveComponentDoc_badge__3780_[data-type=status][data-status=planned]{background:var(--semantic-color-background-warning-subtle);color:var(--semantic-color-foreground-warning)}.ComprehensiveComponentDoc_badge__3780_[data-type=status][data-status=doconly]{background:var(--semantic-color-background-neutral-subtle);color:var(--semantic-color-foreground-secondary)}.ComprehensiveComponentDoc_description__Gems4{margin:0;color:var(--semantic-color-foreground-secondary);font-size:1.125rem;line-height:1.6}.ComprehensiveComponentDoc_aliases__xPlD5{color:var(--semantic-color-foreground-tertiary);font-size:.875rem}.ComprehensiveComponentDoc_aliases__xPlD5 ul{display:inline-flex;gap:.5rem;margin:0;padding:0;list-style:none}.ComprehensiveComponentDoc_aliases__xPlD5 ul li:not(:last-child):after{margin-left:.5rem;opacity:.5;content:"•"}.ComprehensiveComponentDoc_quickNav__kYQ_C{position:-webkit-sticky;position:sticky;top:1rem;z-index:100;margin-bottom:2rem;padding:1rem;background:var(--semantic-color-background-elevated);border:1px solid var(--semantic-color-border-subtle);border-radius:.5rem;box-shadow:0 2px 8px rgba(0,0,0,.1)}.ComprehensiveComponentDoc_quickNav__kYQ_C ul{display:flex;flex-wrap:wrap;gap:1rem;margin:0;padding:0;list-style:none}.ComprehensiveComponentDoc_quickNav__kYQ_C ul li a{padding:.5rem 1rem;border-radius:.25rem;color:var(--semantic-color-foreground-secondary);font-weight:500;text-decoration:none;transition:all .2s ease}.ComprehensiveComponentDoc_quickNav__kYQ_C ul li a:hover{background:var(--semantic-color-background-hover);color:var(--semantic-color-foreground-accent)}.ComprehensiveComponentDoc_section___b5iI{position:relative;isolation:isolate;z-index:1;margin-bottom:3rem;contain:layout style}.ComprehensiveComponentDoc_section___b5iI h2{margin:0 0 1.5rem;padding-bottom:.5rem;border-bottom:2px solid var(--semantic-color-foreground-accent);color:var(--semantic-color-foreground-primary);font-weight:600;font-size:1.75rem}.ComprehensiveComponentDoc_section___b5iI h3{margin:1.5rem 0 .75rem;color:var(--semantic-color-foreground-primary);font-weight:600;font-size:1.25rem}.ComprehensiveComponentDoc_section___b5iI+.ComprehensiveComponentDoc_section___b5iI{margin-top:4rem}.ComprehensiveComponentDoc_overviewGrid__1_E3W{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem;gap:2rem}@media(max-width:768px){.ComprehensiveComponentDoc_overviewGrid__1_E3W{grid-template-columns:1fr}}.ComprehensiveComponentDoc_overviewContent__9SkGR ul{padding-left:1.5rem}.ComprehensiveComponentDoc_overviewContent__9SkGR ul li{margin-bottom:.5rem;line-height:1.5}.ComprehensiveComponentDoc_liveExample__DWEBA{isolation:isolate;contain:layout}.ComprehensiveComponentDoc_liveExample__DWEBA .ComprehensiveComponentDoc_exampleContainer__ZPhOZ{position:relative;overflow:hidden;border:1px solid var(--semantic-color-border-subtle);border-radius:.5rem;min-height:400px}.ComprehensiveComponentDoc_anatomyContent__uCweO .ComprehensiveComponentDoc_anatomyDiagram__oqGNM{padding:2rem;background:var(--semantic-color-background-secondary);border:1px solid var(--semantic-color-border-subtle);border-radius:.5rem}.ComprehensiveComponentDoc_plannedContent__YDnrT{padding:2rem;background:var(--semantic-color-background-info-subtle);border:1px solid var(--semantic-color-border-info);border-radius:.5rem;color:var(--semantic-color-foreground-info)}.ComprehensiveComponentDoc_plannedContent__YDnrT p{margin:0}.ComprehensiveComponentDoc_plannedContent__YDnrT code{padding:.125rem .25rem;background:var(--semantic-color-background-primary);border-radius:.25rem;font-family:var(--core-typography-font-family-mono)}.ComprehensiveComponentDoc_placeholder__JoyHh{color:var(--semantic-color-foreground-tertiary);font-style:italic;text-align:center}.ComprehensiveComponentDoc_apiContent__yWvkX{isolation:isolate;contain:layout}.ComprehensiveComponentDoc_apiContent__yWvkX .ComprehensiveComponentDoc_methodsTable__r_4ZO,.ComprehensiveComponentDoc_apiContent__yWvkX .ComprehensiveComponentDoc_propsTable__G2818{position:relative;padding:1.5rem;background:var(--semantic-color-background-secondary);border:1px solid var(--semantic-color-border-subtle);border-radius:.5rem;margin-bottom:2rem;contain:layout style}.ComprehensiveComponentDoc_accessibilityContent__JE5I7 .ComprehensiveComponentDoc_pitfalls__8Ed5d{margin:1.5rem 0;padding:1.5rem;background:var(--semantic-color-background-warning-subtle);border:1px solid var(--semantic-color-border-warning);border-radius:.5rem}.ComprehensiveComponentDoc_accessibilityContent__JE5I7 .ComprehensiveComponentDoc_pitfalls__8Ed5d ul{margin:.5rem 0 0;padding-left:1.5rem}.ComprehensiveComponentDoc_accessibilityContent__JE5I7 .ComprehensiveComponentDoc_accessibilityChecklist___sbg1{padding:1.5rem;background:var(--semantic-color-background-success-subtle);border:1px solid var(--semantic-color-border-success);border-radius:.5rem}.ComprehensiveComponentDoc_accessibilityContent__JE5I7 .ComprehensiveComponentDoc_accessibilityChecklist___sbg1 ul{margin:.5rem 0 0;padding-left:1.5rem;list-style:none}.ComprehensiveComponentDoc_accessibilityContent__JE5I7 .ComprehensiveComponentDoc_accessibilityChecklist___sbg1 ul li{margin-bottom:.5rem;color:var(--semantic-color-foreground-success)}.ComprehensiveComponentDoc_relatedCard__lv3MK>h3{margin:0 0 .5rem;color:var(--semantic-color-foreground-primary)}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_dosAndDonts__PWCgt{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem;gap:2rem}@media(max-width:768px){.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_dosAndDonts__PWCgt{grid-template-columns:1fr}}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_dos__k3QWR{padding:1.5rem;background:var(--semantic-color-background-success-subtle);border:1px solid var(--semantic-color-border-success);border-radius:.5rem}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_dos__k3QWR h3{margin-top:0;color:var(--semantic-color-foreground-success)}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_dos__k3QWR ul{margin:0;padding-left:1.5rem}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_dos__k3QWR ul li{margin-bottom:.5rem;color:var(--semantic-color-foreground-success)}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_donts__b9uSK{padding:1.5rem;background:var(--semantic-color-background-danger-subtle);border:1px solid var(--semantic-color-border-danger);border-radius:.5rem}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_donts__b9uSK h3{margin-top:0;color:var(--semantic-color-foreground-danger)}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_donts__b9uSK ul{margin:0;padding-left:1.5rem}.ComprehensiveComponentDoc_usageContent__8s4vE .ComprehensiveComponentDoc_donts__b9uSK ul li{margin-bottom:.5rem;color:var(--semantic-color-foreground-danger)}.ComprehensiveComponentDoc_examplesContent__pQjUH{isolation:isolate;contain:layout}.ComprehensiveComponentDoc_examplesContent__pQjUH .ComprehensiveComponentDoc_exampleGrid__FVcCf{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem;gap:2rem}@media(max-width:768px){.ComprehensiveComponentDoc_examplesContent__pQjUH .ComprehensiveComponentDoc_exampleGrid__FVcCf{grid-template-columns:1fr}}.ComprehensiveComponentDoc_examplesContent__pQjUH .ComprehensiveComponentDoc_example__ibE2m{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--semantic-color-border-subtle);border-radius:.5rem;contain:layout style;min-height:300px}.ComprehensiveComponentDoc_examplesContent__pQjUH .ComprehensiveComponentDoc_example__ibE2m h3{margin:0;padding:1rem;background:var(--semantic-color-background-secondary);border-bottom:1px solid var(--semantic-color-border-subtle);position:relative;z-index:1}.ComprehensiveComponentDoc_relatedGrid__q6088{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:1rem;gap:1rem}.ComprehensiveComponentDoc_relatedCard__lv3MK{display:block;padding:1.5rem;border:1px solid var(--semantic-color-border-subtle);border-radius:.5rem;color:inherit;text-decoration:none;transition:all .2s ease}.ComprehensiveComponentDoc_relatedCard__lv3MK:hover{background:var(--semantic-color-background-hover);border-color:var(--semantic-color-foreground-accent);transform:translateY(-2px)}.ComprehensiveComponentDoc_relatedCard__lv3MK p{margin:0 0 .75rem;color:var(--semantic-color-foreground-secondary);font-size:.875rem;line-height:1.4}.ComprehensiveComponentDoc_relatedCard__lv3MK .ComprehensiveComponentDoc_relatedMeta__hLYbK{color:var(--semantic-color-foreground-tertiary);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}