@tmorrow/cre8-wc 2.3.6 → 2.3.9

package/dist/sb-addons/vitest-4/manager-bundle.js

@@ -1,3 +1,3 @@
 try{
-(()=>{function ae(e){if(!e||typeof e!="object")return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype||Object.getPrototypeOf(t)===null?Object.prototype.toString.call(e)==="[object Object]":!1}function se(e){return Object.getOwnPropertySymbols(e).filter(t=>Object.prototype.propertyIsEnumerable.call(e,t))}function le(e){return e==null?e===void 0?"[object Undefined]":"[object Null]":Object.prototype.toString.call(e)}var Ke="[object RegExp]",We="[object String]",ze="[object Number]",Ve="[object Boolean]",ie="[object Arguments]",qe="[object Symbol]",Qe="[object Date]",Ze="[object Map]",Je="[object Set]",Xe="[object Array]",et="[object Function]",tt="[object ArrayBuffer]",F="[object Object]",ot="[object Error]",nt="[object DataView]",rt="[object Uint8Array]",at="[object Uint8ClampedArray]",st="[object Uint16Array]",lt="[object Uint32Array]",it="[object BigUint64Array]",ct="[object Int8Array]",ut="[object Int16Array]",dt="[object Int32Array]",mt="[object BigInt64Array]",pt="[object Float32Array]",gt="[object Float64Array]";function It(e,t){return e===t||Number.isNaN(e)&&Number.isNaN(t)}function ht(e,t,n){return k(e,t,void 0,void 0,void 0,void 0,n)}function k(e,t,n,s,i,r,a){let d=a(e,t,n,s,i,r);if(d!==void 0)return d;if(typeof e==typeof t)switch(typeof e){case"bigint":case"string":case"boolean":case"symbol":case"undefined":return e===t;case"number":return e===t||Object.is(e,t);case"function":return e===t;case"object":return D(e,t,r,a)}return D(e,t,r,a)}function D(e,t,n,s){if(Object.is(e,t))return!0;let i=le(e),r=le(t);if(i===ie&&(i=F),r===ie&&(r=F),i!==r)return!1;switch(i){case We:return e.toString()===t.toString();case ze:{let c=e.valueOf(),l=t.valueOf();return It(c,l)}case Ve:case Qe:case qe:return Object.is(e.valueOf(),t.valueOf());case Ke:return e.source===t.source&&e.flags===t.flags;case et:return e===t}n=n??new Map;let a=n.get(e),d=n.get(t);if(a!=null&&d!=null)return a===t;n.set(e,t),n.set(t,e);try{switch(i){case Ze:{if(e.size!==t.size)return!1;for(let[c,l]of e.entries())if(!t.has(c)||!k(l,t.get(c),c,e,t,n,s))return!1;return!0}case Je:{if(e.size!==t.size)return!1;let c=Array.from(e.values()),l=Array.from(t.values());for(let u=0;u<c.length;u++){let I=c[u],m=l.findIndex(h=>k(I,h,void 0,e,t,n,s));if(m===-1)return!1;l.splice(m,1)}return!0}case Xe:case rt:case at:case st:case lt:case it:case ct:case ut:case dt:case mt:case pt:case gt:{if(typeof Buffer<"u"&&Buffer.isBuffer(e)!==Buffer.isBuffer(t)||e.length!==t.length)return!1;for(let c=0;c<e.length;c++)if(!k(e[c],t[c],c,e,t,n,s))return!1;return!0}case tt:return e.byteLength!==t.byteLength?!1:D(new Uint8Array(e),new Uint8Array(t),n,s);case nt:return e.byteLength!==t.byteLength||e.byteOffset!==t.byteOffset?!1:D(new Uint8Array(e),new Uint8Array(t),n,s);case ot:return e.name===t.name&&e.message===t.message;case F:{if(!(D(e.constructor,t.constructor,n,s)||ae(e)&&ae(t)))return!1;let c=[...Object.keys(e),...se(e)],l=[...Object.keys(t),...se(t)];if(c.length!==l.length)return!1;for(let u=0;u<c.length;u++){let I=c[u],m=e[I];if(!Object.hasOwn(t,I))return!1;let h=t[I];if(!k(m,h,I,e,t,n,s))return!1}return!0}default:return!1}}finally{n.delete(e),n.delete(t)}}function _t(){}function ce(e,t){return ht(e,t,_t)}var Et="storybook/interactions",K=`${Et}/panel`,bt="writing-tests/integrations/vitest-addon",Jt=`${bt}#what-happens-when-there-are-different-test-results-in-multiple-environments`,b="storybook/a11y",W=`${b}/panel`,Xt=`${b}/ui`,eo=`${b}/result`,to=`${b}/request`,oo=`${b}/running`,no=`${b}/error`,ro=`${b}/manual`,ao=`${b}/select`,Tt="writing-tests/accessibility-testing",so=`${Tt}#why-are-my-tests-failing-in-different-environments`,v="storybook/test",ue=`${v}/test-provider`,de=`${v}/channel`,ft="writing-tests/integrations/vitest-addon",me=`${ft}#what-happens-if-vitest-itself-has-an-error`,z={id:v,initialState:{config:{coverage:!1,a11y:!1},watching:!1,cancelling:!1,fatalError:void 0,index:{entries:{},v:5},previewAnnotations:[],currentRun:{triggeredBy:void 0,config:{coverage:!1,a11y:!1},componentTestStatuses:[],a11yStatuses:[],a11yReports:{},reports:{},componentTestCount:{success:0,error:0},a11yCount:{success:0,warning:0,error:0},storyIds:void 0,totalTestCount:void 0,startedAt:void 0,finishedAt:void 0,unhandledErrors:[],coverageSummary:void 0}}},pe=["global","run-all"],lo=`UNIVERSAL_STORE:${z.id}`,V="storybook/component-test",q="storybook/a11y";var io=`${v}/trigger-test-run-request`,co=`${v}/trigger-test-run-response`;var o=__REACT__,{Children:Io,Component:ho,Fragment:_o,Profiler:Eo,PureComponent:bo,StrictMode:To,Suspense:fo,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:yo,act:vo,cloneElement:So,createContext:Co,createElement:Ao,createFactory:Oo,createRef:Ro,forwardRef:wo,isValidElement:Po,lazy:Lo,memo:No,startTransition:ko,unstable_act:Do,useCallback:Q,useContext:ge,useDebugValue:Uo,useDeferredValue:xo,useEffect:O,useId:Bo,useImperativeHandle:jo,useInsertionEffect:Mo,useLayoutEffect:$o,useMemo:Ie,useReducer:Go,useRef:B,useState:R,useSyncExternalStore:Ho,useTransition:Yo,version:Fo}=__REACT__;var qo=__STORYBOOK_TYPES__,{Addon_TypesEnum:he,CHANGE_DETECTION_STATUS_TYPE_ID:Qo,CoreWebpackCompiler:Zo,Feature:Jo,NON_AGGREGATED_STATUS_TYPE_IDS:Xo,REVIEW_EVENTS:en,REVIEW_NAMESPACE:tn,REVIEW_STATUS_TYPE_ID:on,SupportedBuilder:_e,SupportedLanguage:nn,SupportedRenderer:rn}=__STORYBOOK_TYPES__;var un=__STORYBOOK_API__,{ActiveTabs:dn,Consumer:mn,ManagerContext:pn,Provider:gn,RequestResponseError:In,Tag:Ee,addons:U,combineParameters:hn,controlOrMetaKey:_n,controlOrMetaSymbol:En,eventMatchesShortcut:bn,eventToShortcut:Tn,experimental_MockUniversalStore:fn,experimental_UniversalStore:be,experimental_getStatusStore:Z,experimental_getTestProviderStore:Te,experimental_requestResponse:yn,experimental_useStatusStore:J,experimental_useTestProviderStore:fe,experimental_useUniversalStore:ye,getService:vn,internal_checklistStore:Sn,internal_fullStatusStore:Cn,internal_fullTestProviderStore:An,internal_universalChecklistStore:On,internal_universalStatusStore:Rn,internal_universalTestProviderStore:wn,isMacLike:Pn,isShortcutTaken:Ln,keyToSymbol:Nn,merge:kn,mockChannel:Dn,optionOrAltSymbol:Un,registerService:xn,shortcutMatchesShortcut:Bn,shortcutToAriaKeyshortcuts:jn,shortcutToHumanString:Mn,types:$n,useAddonState:Gn,useArgTypes:Hn,useArgs:Yn,useChannel:Fn,useGlobalTypes:Kn,useGlobals:Wn,useParameter:zn,useServiceCommand:Vn,useServiceQuery:qn,useSharedState:Qn,useStoryPrepared:Zn,useStorybookApi:ve,useStorybookState:Jn}=__STORYBOOK_API__;var nr=__STORYBOOK_COMPONENTS__,{A:rr,AbstractToolbar:ar,ActionBar:sr,ActionList:p,AddonPanel:lr,Badge:ir,Bar:cr,Blockquote:ur,Button:w,Card:dr,ClipboardCode:mr,Code:pr,Collapsible:gr,DL:Ir,Div:hr,DocumentWrapper:_r,EmptyTabContent:Er,ErrorFormatter:br,FlexBar:Tr,Form:j,H1:fr,H2:yr,H3:vr,H4:Sr,H5:Cr,H6:Ar,HR:Or,IconButton:Rr,Img:wr,LI:Pr,Link:X,ListItem:Lr,Loader:Nr,Modal:M,ModalDecorator:kr,OL:Dr,P:Ur,Placeholder:xr,Popover:Br,PopoverProvider:jr,Pre:Mr,ProgressSpinner:Se,ResetWrapper:$r,ScrollArea:Gr,Select:Hr,Separator:Yr,Spaced:Fr,Span:Kr,StatelessTab:Wr,StatelessTabList:zr,StatelessTabPanel:Vr,StatelessTabsView:qr,StorybookIcon:Qr,StorybookLogo:Zr,SyntaxHighlighter:Jr,TT:Xr,TabBar:ea,TabButton:ta,TabList:oa,TabPanel:na,TabWrapper:ra,Table:aa,Tabs:sa,TabsState:la,TabsView:ia,ToggleButton:Ce,Toolbar:ca,Tooltip:ua,TooltipLinkList:da,TooltipMessage:ma,TooltipNote:pa,TooltipProvider:ga,UL:Ia,WithTooltip:ha,WithTooltipPure:_a,Zoom:Ea,codeCommon:ba,components:Ta,convertToReactAriaPlacement:fa,createCopyToClipboardFunction:ya,getStoryHref:va,interleaveSeparators:Sa,nameSpaceClassNames:Ca,resetComponents:Aa,useCopyButton:Oa,useTabsState:Ra,withReset:wa}=__STORYBOOK_COMPONENTS__;var Da=__STORYBOOK_ICONS__,{AccessibilityAltIcon:Ua,AccessibilityIcon:xa,AccessibilityIgnoredIcon:Ba,AddIcon:ja,AdminIcon:Ma,AlertAltIcon:$a,AlertIcon:Ga,AlignLeftIcon:Ha,AlignRightIcon:Ya,AppleIcon:Fa,ArrowBottomLeftIcon:Ka,ArrowBottomRightIcon:Wa,ArrowDownIcon:za,ArrowLeftIcon:Va,ArrowRightIcon:qa,ArrowSolidDownIcon:Qa,ArrowSolidLeftIcon:Za,ArrowSolidRightIcon:Ja,ArrowSolidUpIcon:Xa,ArrowTopLeftIcon:es,ArrowTopRightIcon:ts,ArrowUpIcon:os,AzureDevOpsIcon:ns,BackIcon:rs,BasketIcon:as,BatchAcceptIcon:ss,BatchDenyIcon:ls,BeakerIcon:is,BellIcon:cs,BitbucketIcon:us,BoldIcon:ds,BookIcon:ms,BookmarkHollowIcon:ps,BookmarkIcon:gs,BottomBarIcon:Is,BottomBarToggleIcon:hs,BoxIcon:_s,BranchIcon:Es,BrowserIcon:bs,BugIcon:Ts,ButtonIcon:fs,CPUIcon:ys,CalendarIcon:vs,CameraIcon:Ss,CameraStabilizeIcon:Cs,CategoryIcon:As,CertificateIcon:Os,ChangedIcon:Rs,ChatIcon:ws,CheckIcon:Ps,ChecklistIcon:Ls,ChevronDownIcon:Ns,ChevronLeftIcon:ks,ChevronRightIcon:Ds,ChevronSmallDownIcon:Us,ChevronSmallLeftIcon:xs,ChevronSmallRightIcon:Bs,ChevronSmallUpIcon:js,ChevronUpIcon:Ms,ChromaticIcon:$s,ChromeIcon:Gs,CircleHollowIcon:Hs,CircleIcon:Ys,ClearIcon:Fs,CloseAltIcon:Ks,CloseIcon:Ws,CloudHollowIcon:zs,CloudIcon:Vs,CogIcon:qs,CollapseIcon:Qs,CommandIcon:Zs,CommentAddIcon:Js,CommentIcon:Xs,CommentsIcon:el,CommitIcon:tl,CompassIcon:ol,ComponentDrivenIcon:nl,ComponentIcon:rl,ContrastIcon:al,ContrastIgnoredIcon:sl,ControlsIcon:ll,CopyIcon:il,CreditIcon:cl,CrossIcon:ul,DashboardIcon:dl,DatabaseIcon:ml,DeleteIcon:pl,DiamondIcon:gl,DirectionIcon:Il,DiscordIcon:hl,DocChartIcon:_l,DocListIcon:El,DocumentIcon:bl,DownloadIcon:Tl,DragIcon:fl,EditIcon:yl,EditorIcon:vl,EllipsisIcon:Sl,EmailIcon:Cl,ExpandAltIcon:Al,ExpandIcon:Ol,EyeCloseIcon:Rl,EyeIcon:Ae,FaceHappyIcon:wl,FaceNeutralIcon:Pl,FaceSadIcon:Ll,FacebookIcon:Nl,FailedIcon:kl,FastForwardIcon:Dl,FigmaIcon:Ul,FilesIcon:xl,FilterIcon:Bl,FlagIcon:jl,FolderIcon:Ml,FormIcon:$l,GDriveIcon:Gl,GiftIcon:Hl,GithubIcon:Yl,GitlabIcon:Fl,GlobeIcon:Kl,GoogleIcon:Wl,GraphBarIcon:zl,GraphLineIcon:Vl,GraphqlIcon:ql,GridAltIcon:Ql,GridIcon:Zl,GrowIcon:Jl,HeartHollowIcon:Xl,HeartIcon:ei,HomeIcon:ti,HourglassIcon:oi,InfoIcon:Oe,ItalicIcon:ni,JumpToIcon:ri,KeyIcon:ai,LightningIcon:si,LightningOffIcon:li,LinkBrokenIcon:ii,LinkIcon:ci,LinkedinIcon:ui,LinuxIcon:di,ListOrderedIcon:mi,ListUnorderedIcon:pi,LocationIcon:gi,LockIcon:Ii,MarkdownIcon:hi,MarkupIcon:_i,MediumIcon:Ei,MemoryIcon:bi,MenuIcon:Ti,MergeIcon:fi,MirrorIcon:yi,MobileIcon:vi,MoonIcon:Si,NutIcon:Ci,OutboxIcon:Ai,OutlineIcon:Oi,PaintBrushAltIcon:Ri,PaintBrushIcon:wi,PaperClipIcon:Pi,ParagraphIcon:Li,PassedIcon:Ni,PhoneIcon:ki,PhotoDragIcon:Di,PhotoIcon:Ui,PhotoStabilizeIcon:xi,PinAltIcon:Bi,PinIcon:ji,PlayAllHollowIcon:Mi,PlayBackIcon:$i,PlayHollowIcon:Re,PlayIcon:Gi,PlayNextIcon:Hi,PlusIcon:Yi,PointerDefaultIcon:Fi,PointerHandIcon:Ki,PopOutIcon:Wi,PowerIcon:zi,PrintIcon:Vi,ProceedIcon:qi,ProfileIcon:Qi,PullRequestIcon:Zi,QuestionIcon:Ji,RSSIcon:Xi,RedirectIcon:ec,ReduxIcon:tc,RefreshIcon:oc,ReplyIcon:nc,RepoIcon:rc,RequestChangeIcon:ac,RewindIcon:sc,RulerIcon:lc,SaveIcon:ic,SearchIcon:cc,ShareAltIcon:uc,ShareIcon:dc,ShieldIcon:mc,SideBySideIcon:pc,SidebarAltIcon:gc,SidebarAltToggleIcon:Ic,SidebarIcon:hc,SidebarToggleIcon:_c,SortDownIcon:Ec,SortUpIcon:bc,SpeakerIcon:Tc,StackedIcon:fc,StarHollowIcon:yc,StarIcon:vc,StatusFailIcon:Sc,StatusIcon:Cc,StatusNewIcon:Ac,StatusPassIcon:Oc,StatusWarnIcon:Rc,StickerIcon:wc,StopAltHollowIcon:Pc,StopAltIcon:we,StopIcon:Lc,StorybookIcon:Nc,StructureIcon:kc,SubtractIcon:Dc,SunIcon:Uc,SupportIcon:xc,SweepIcon:Bc,SwitchAltIcon:jc,SyncIcon:Pe,TabletIcon:Mc,ThumbsUpIcon:$c,TimeIcon:Gc,TimerIcon:Hc,TransferIcon:Yc,TrashIcon:Fc,TwitterIcon:Kc,TypeIcon:Wc,UbuntuIcon:zc,UndoIcon:Vc,UnfoldIcon:qc,UnlockIcon:Qc,UnpinIcon:Zc,UploadIcon:Jc,UserAddIcon:Xc,UserAltIcon:eu,UserIcon:tu,UsersIcon:ou,VSCodeIcon:nu,VerifiedIcon:ru,VideoIcon:au,WandIcon:su,WatchIcon:lu,WindowsIcon:iu,WrenchIcon:cu,XIcon:uu,YoutubeIcon:du,ZoomIcon:mu,ZoomOutIcon:pu,ZoomResetIcon:gu,iconList:Iu}=__STORYBOOK_ICONS__;var Tu=__STORYBOOK_THEMING__,{CacheProvider:fu,ClassNames:yu,Global:vu,ThemeProvider:Su,background:Cu,color:Au,convert:Ou,create:Ru,createCache:wu,createGlobal:Pu,createReset:Lu,css:Nu,darken:ku,ensure:Du,getPreferredColorScheme:Uu,ignoreSsrWarning:xu,isPropValid:Bu,jsx:ju,keyframes:Mu,lighten:$u,srOnlyStyles:Gu,srOnlyUnsetStyles:Hu,styled:g,themes:Yu,tokens:Fu,typography:Ku,useTheme:Wu,withTheme:zu}=__STORYBOOK_THEMING__;var S=be.create({...z,leader:globalThis.CONFIG_TYPE==="PRODUCTION"}),Le=Z(V),Ne=Z(q),xe=Te(v),yt=g.div({display:"flex",justifyContent:"space-between",alignItems:"center",padding:"6px 6px 6px 20px"}),vt=g.div({display:"flex",justifyContent:"space-between",alignItems:"center"}),St=g(M.Title)(({theme:{typography:e}})=>({fontSize:e.size.s2,fontWeight:e.weight.bold})),Ct=g.pre(({theme:e})=>({whiteSpace:"pre-wrap",wordWrap:"break-word",userSelect:"text",overflow:"auto",maxHeight:"60vh",margin:0,padding:"20px",fontFamily:e.typography.fonts.mono,fontSize:"12px",borderTop:`1px solid ${e.appBorderColor}`,borderRadius:0})),At=g.a(({theme:e})=>({color:e.color.defaultText})),oe=o.createContext({isModalOpen:!1,setModalOpen:void 0});function te({error:e}){return e?o.createElement("div",null,o.createElement("h4",null,"Caused by: ",e.name||"Error",": ",e.message),e.stack&&o.createElement("pre",null,e.stack),e.cause&&o.createElement(te,{error:e.cause})):null}function Ot({onRerun:e,storeState:t}){let n=ve(),{isModalOpen:s,setModalOpen:i}=ge(oe),r=n.getDocsUrl({subpath:me,versioned:!0,renderer:!0}),{fatalError:a,currentRun:{unhandledErrors:d}}=t,c=a?o.createElement(o.Fragment,null,o.createElement("p",null,a.error.name||"Error"),a.message&&o.createElement("p",null,a.message),a.error.message&&o.createElement("p",null,a.error.message),a.error.stack&&o.createElement("p",null,a.error.stack),a.error.cause&&o.createElement(te,{error:a.error.cause})):d.length>0?o.createElement("ol",null,d.map(l=>o.createElement("li",{key:l.name+l.message},o.createElement("p",null,l.name,": ",l.message),l.VITEST_TEST_PATH&&o.createElement("p",null,'This error originated in "',o.createElement("b",null,l.VITEST_TEST_PATH),`". It doesn't mean the error was thrown inside the file itself, but while it was running.`),l.VITEST_TEST_NAME&&o.createElement(o.Fragment,null,o.createElement("p",null,`The latest test that might've caused the error is "`,o.createElement("b",null,l.VITEST_TEST_NAME),'". It might mean one of the following:'),o.createElement("ul",null,o.createElement("li",null,"The error was thrown, while Vitest was running this test."),o.createElement("li",null,"If the error occurred after the test had been completed, this was the last documented test before it was thrown."))),l.stacks&&o.createElement(o.Fragment,null,o.createElement("p",null,o.createElement("b",null,"Stacks:")),o.createElement("ul",null,l.stacks.map(u=>o.createElement("li",{key:u.file+u.line+u.column},u.file,":",u.line,":",u.column," - ",u.method||"unknown method")))),l.stack&&o.createElement("p",null,l.stack),l.cause?o.createElement(te,{error:l.cause}):null))):null;return o.createElement(M,{ariaLabel:"Storybook Test Error Details",onOpenChange:i,open:s},o.createElement(yt,null,o.createElement(St,null,"Storybook Test Error Details"),o.createElement(vt,null,o.createElement(w,{onClick:e,variant:"ghost",ariaLabel:!1},o.createElement(Pe,null),"Rerun"),o.createElement(w,{variant:"ghost",ariaLabel:!1,asChild:!0},o.createElement("a",{target:"_blank",href:r,rel:"noreferrer"},"Troubleshoot")),o.createElement(M.Close,null))),o.createElement(Ct,null,c,o.createElement("br",null),o.createElement("br",null),"Troubleshoot:"," ",o.createElement(At,{target:"_blank",href:r},r)))}var ke=(e,t,n)=>{let s={"status-value:pending":[],"status-value:success":[],"status-value:error":[],"status-value:warning":[],"status-value:unknown":[]};return(n?n.map(i=>e[i]).filter(Boolean):Object.values(e)).forEach(i=>{let r=i[t];r&&s[r.value].push(r.storyId)}),s},Be=(e,t)=>{let n=fe(h=>h[v]),[s,i]=ye(S),[r,a]=R(!1),d=B();O(()=>{let h=S.onStateChange((L,A)=>{ce(L.config,A.config)||(xe.settingsChanged(),a(!0),clearTimeout(d.current),d.current=setTimeout(()=>{a(!1)},1e3))});return()=>{h(),clearTimeout(d.current)}},[]);let c=Ie(()=>t?e.findAllLeafStoryIds(t):void 0,[t,e]),l=Q(h=>ke(h,V,c),[c]),u=J(l),I=Q(h=>ke(h,q,c),[c]),m=J(I);return{storeState:s,setStoreState:i,testProviderState:n,componentTestStatusValueToStoryIds:u,a11yStatusValueToStoryIds:m,isSettingsUpdated:r}},P=null;function ee(e,t="assertive",n=7e3){P?P.announce(e,t,n):(P=new Rt,(typeof IS_REACT_ACT_ENVIRONMENT=="boolean"?IS_REACT_ACT_ENVIRONMENT:typeof jest<"u")?P.announce(e,t,n):setTimeout(()=>{P?.isAttached()&&P?.announce(e,t,n)},100))}var Rt=class{isAttached(){var e;return(e=this.node)===null||e===void 0?void 0:e.isConnected}createLog(e){let t=document.createElement("div");return t.setAttribute("role","log"),t.setAttribute("aria-live",e),t.setAttribute("aria-relevant","additions"),t}destroy(){this.node&&(document.body.removeChild(this.node),this.node=null)}announce(e,t="assertive",n=7e3){var s,i;if(!this.node)return;let r=document.createElement("div");typeof e=="object"?(r.setAttribute("role","img"),r.setAttribute("aria-labelledby",e["aria-labelledby"])):r.textContent=e,t==="assertive"?(s=this.assertiveLog)===null||s===void 0||s.appendChild(r):(i=this.politeLog)===null||i===void 0||i.appendChild(r),e!==""&&setTimeout(()=>{r.remove()},n)}clear(e){this.node&&((!e||e==="assertive")&&this.assertiveLog&&(this.assertiveLog.innerHTML=""),(!e||e==="polite")&&this.politeLog&&(this.politeLog.innerHTML=""))}constructor(){this.node=null,this.assertiveLog=null,this.politeLog=null,typeof document<"u"&&(this.node=document.createElement("div"),this.node.dataset.liveAnnouncer="true",Object.assign(this.node.style,{border:0,clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap"}),this.assertiveLog=this.createLog("assertive"),this.node.appendChild(this.assertiveLog),this.politeLog=this.createLog("polite"),this.node.appendChild(this.politeLog),document.body.prepend(this.node))}},wt=({timestamp:e})=>{let[t,n]=R(null);if(O(()=>{if(e){n(Date.now()-e);let d=setInterval(()=>n(Date.now()-e),1e4);return()=>clearInterval(d)}},[e]),t===null)return null;let s=Math.round(t/1e3);if(s<60)return"just now";let i=Math.floor(s/60);if(i<60)return i===1?"a minute ago":`${i} minutes ago`;let r=Math.floor(i/60);if(r<24)return r===1?"an hour ago":`${r} hours ago`;let a=Math.floor(r/24);return a===1?"yesterday":`${a} days ago`},Pt=g.div(({theme:e})=>({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontSize:e.typography.size.s1,color:e.textMutedColor})),Lt=g.span(({theme:e})=>({color:e.color.positiveText}));function Nt({entryId:e,storeState:t,testProviderState:n,isSettingsUpdated:s,...i}){let{setModalOpen:r}=o.useContext(oe),{componentTestCount:a,totalTestCount:d,unhandledErrors:c,finishedAt:l}=t.currentRun,u=a.success+a.error,I="Not run";if(!e&&s)I=o.createElement(Lt,null,"Settings updated");else if(n==="test-provider-state:running")I=(u??0)===0?"Starting...":`Testing... ${u}/${d}`;else if(!e&&n==="test-provider-state:crashed")I=r?o.createElement(X,{onClick:()=>r(!0)},"View full error"):"Crashed";else if(!e&&c.length>0){let m=`View ${c.length} unhandled error${c?.length>1?"s":""}`;I=r?o.createElement(X,{onClick:()=>r(!0)},m):m}else e&&d?I=`Ran ${d} ${d===1?"test":"tests"}`:l?I=o.createElement(o.Fragment,null,"Ran ",d," ",d===1?"test":"tests"," ",o.createElement(wt,{timestamp:l})):t.watching&&(I="Watching for file changes");return o.createElement(Pt,{...i},I)}var $=g.div(({percentage:e})=>({width:e?12:6,height:e?12:6,margin:e?1:4,background:e?`conic-gradient(var(--status-color) ${e}%, var(--status-background) ${e+1}%)`:"var(--status-color)",borderRadius:"50%"}),({isRunning:e,theme:t})=>e&&{animation:`${t.animation.glow} 1.5s ease-in-out infinite`},({status:e,theme:t})=>e==="positive"&&{"--status-color":t.color.positive,"--status-background":`${t.color.positive}66`},({status:e,theme:t})=>e==="warning"&&{"--status-color":t.color.gold,"--status-background":`${t.color.gold}66`},({status:e,theme:t})=>e==="negative"&&{"--status-color":t.color.negative,"--status-background":`${t.color.negative}66`},({status:e,theme:t})=>e==="critical"&&{"--status-color":t.color.defaultText,"--status-background":`${t.color.defaultText}66`},({status:e,theme:t})=>e==="unknown"&&{"--status-color":t.textMutedColor,"--status-background":`${t.textMutedColor}66`}),kt=g.div(({inContextMenu:e})=>({display:"flex",flexDirection:"column",paddingBottom:e?0:1})),Dt=g.div({display:"flex",justifyContent:"space-between",padding:"8px 0",gap:12}),Ut=g.div({display:"flex",flexDirection:"column",marginLeft:8,minWidth:0}),De=g.div(({crashed:e,theme:t})=>({fontSize:t.typography.size.s1,fontWeight:e?"bold":"normal",color:e?t.color.negativeText:t.color.defaultText})),xt=g.div({display:"flex",gap:4}),Bt=g(p)({padding:0}),jt=g.span(({theme:e})=>({color:e.textMutedColor})),Mt=g(Se)({margin:4}),$t=g(we)({width:10}),Ue=({api:e,panelId:t,entryId:n})=>{let s=n?e.findAllLeafStoryIds(n)[0]:void 0;s&&e.selectStory(s),e.setSelectedPanel(t),e.togglePanel(!0)},je=({api:e,entry:t,testProviderState:n,storeState:s,setStoreState:i,componentTestStatusValueToStoryIds:r,a11yStatusValueToStoryIds:a,isSettingsUpdated:d,...c})=>{let{config:l,watching:u,cancelling:I,currentRun:m,fatalError:h}=s,L=m.componentTestCount.success+m.componentTestCount.error,A=U.experimental_getRegisteredAddons().includes(b),_=n==="test-provider-state:running",Me=_&&L===0,[$e,ne]=h?["critical","Component tests crashed"]:r["status-value:error"].length>0?["negative","Component tests failed"]:_?["unknown","Testing in progress"]:r["status-value:success"].length>0?["positive","Component tests passed"]:["unknown","Run tests to see results"],[Ge,He]=h?["critical","Component tests crashed"]:a["status-value:error"].length>0?["negative","Accessibility tests failed"]:a["status-value:warning"].length>0?["warning","Accessibility tests failed"]:_?["unknown","Testing in progress"]:a["status-value:success"].length>0?["positive","Accessibility tests passed"]:["unknown","Run tests to see accessibility results"],re=B(n);return O(()=>{let E=re.current;if(re.current=n,E!==n){if(n==="test-provider-state:running")ee("Test run started.","polite");else if(n==="test-provider-state:crashed")ee("Test run crashed.","assertive");else if(n==="test-provider-state:succeeded"&&E==="test-provider-state:running"){let C=[],x=r["status-value:error"].length,G=r["status-value:warning"].length,H=r["status-value:success"].length;x>0&&C.push(`${x} ${x===1?"component":"components"} errored`),G>0&&C.push(`${G} ${G===1?"component":"components"} with warnings`),H>0&&C.push(`${H} ${H===1?"component":"components"} passed`);let N=0;if(A){N=a["status-value:error"].length;let Y=a["status-value:warning"].length;N>0&&C.push(`${N} accessibility ${N===1?"error":"errors"}`),Y>0&&C.push(`${Y} accessibility ${Y===1?"warning":"warnings"}`)}let Ye=C.length>0?`Test run finished. ${C.join(", ")}.`:"Test run finished. No results.",Fe=x>0||A&&N>0;ee(Ye,Fe?"assertive":"polite")}}},[n,r,a,A]),o.createElement(kt,{...c,inContextMenu:!!t},o.createElement(Dt,null,o.createElement(Ut,null,t?o.createElement(De,{id:"testing-module-title"},"Run component tests"):o.createElement(De,{id:"testing-module-title",crashed:n==="test-provider-state:crashed"||h!==void 0||m.unhandledErrors.length>0},m.unhandledErrors.length===1?"Component tests completed with an error":m.unhandledErrors.length>1?"Component tests completed with errors":h?"Component tests didn\u2019t complete":"Run component tests"),o.createElement(Nt,{id:"testing-module-description",storeState:s,testProviderState:n,entryId:t?.id,isSettingsUpdated:d})),o.createElement(xt,null,!t&&o.createElement(Ce,{ariaLabel:_?"Watch mode (cannot toggle while running)":"Watch mode",tooltip:_?"Watch mode unavailable while running":`Watch mode is ${u?"enabled":"disabled"}`,padding:"small",size:"medium",variant:"ghost",pressed:u,onClick:()=>S.send({type:"TOGGLE_WATCHING",payload:{to:!u}}),disabled:_},o.createElement(Ae,null)),_?o.createElement(w,{ariaLabel:I?"Stop test run (already stopping...)":"Stop test run",padding:"none",size:"medium",variant:"ghost",onClick:()=>S.send({type:"CANCEL_RUN"}),disabled:I||Me},o.createElement(Mt,{percentage:L&&s.currentRun.totalTestCount?L/s.currentRun.totalTestCount*100:void 0},o.createElement($t,null))):o.createElement(w,{ariaLabel:"Start test run",padding:"small",size:"medium",variant:"ghost",onClick:()=>{let E;t&&(E=t.type==="story"?[t.id]:e.findAllLeafStoryIds(t.id)),S.send({type:"TRIGGER_RUN",payload:{storyIds:E,triggeredBy:t?.type??"global"}})}},o.createElement(Re,null)))),o.createElement(Bt,null,o.createElement(p.Item,null,t?o.createElement(p.Text,null,"Interactions"):o.createElement(p.Action,{as:"label",readOnly:!0},o.createElement(p.Icon,null,o.createElement(j.Checkbox,{name:"Interactions",checked:!0,disabled:!0})),o.createElement(p.Text,null,"Interactions")),o.createElement(p.Button,{ariaLabel:`${ne}${r["status-value:error"].length+r["status-value:warning"].length>0?` (${r["status-value:error"].length+r["status-value:warning"].length} errors or warnings so far)`:""}`,tooltip:ne,disabled:r["status-value:error"].length===0&&r["status-value:warning"].length===0&&r["status-value:success"].length===0,onClick:()=>{Ue({api:e,panelId:K,entryId:r["status-value:error"][0]??r["status-value:warning"][0]??r["status-value:success"][0]??t?.id})}},r["status-value:error"].length+r["status-value:warning"].length||null,o.createElement($,{status:$e,isRunning:_}))),!t&&o.createElement(p.Item,null,o.createElement(p.Action,{as:"label",readOnly:_,ariaLabel:!1},o.createElement(p.Icon,null,o.createElement(j.Checkbox,{name:"Coverage",checked:l.coverage,disabled:_,onChange:()=>i(E=>({...E,config:{...E.config,coverage:!l.coverage}}))})),o.createElement(p.Text,null,u?o.createElement(jt,null,"Coverage (unavailable)"):"Coverage")),u||m.triggeredBy&&!pe.includes(m.triggeredBy)?o.createElement(p.Button,{disabled:!0,ariaLabel:u?"Coverage unavailable in watch mode":"Coverage only available after running all tests"},o.createElement(Oe,null)):m.coverageSummary?o.createElement(p.Button,{asChild:!0,ariaLabel:_?"Open coverage report (testing still in progress)":`Open coverage report (${m.coverageSummary.percentage}% coverage)`},o.createElement("a",{href:"/coverage/index.html",target:"_blank"},m.coverageSummary.percentage,"%",o.createElement($,{isRunning:_,percentage:m.coverageSummary.percentage,status:m.coverageSummary.status}))):o.createElement(p.Button,{disabled:!0,ariaLabel:_?"Coverage unavailable, testing still in progress":h?"Coverage unavailable, component tests crashed":"Coverage unavailable, run tests first"},o.createElement($,{isRunning:_,status:h?"critical":"unknown"}))),A&&o.createElement(p.Item,null,t?o.createElement(p.Text,null,"Accessibility"):o.createElement(p.Action,{as:"label",readOnly:_,ariaLabel:!1},o.createElement(p.Icon,null,o.createElement(j.Checkbox,{name:"Accessibility",checked:l.a11y,disabled:_,onChange:()=>i(E=>({...E,config:{...E.config,a11y:!l.a11y}}))})),o.createElement(p.Text,null,"Accessibility")),o.createElement(p.Button,{ariaLabel:He,disabled:a["status-value:error"].length===0&&a["status-value:warning"].length===0&&a["status-value:success"].length===0,onClick:()=>{Ue({api:e,entryId:a["status-value:error"][0]??a["status-value:warning"][0]??a["status-value:success"][0]??t?.id,panelId:W})}},a["status-value:error"].length+a["status-value:warning"].length||null,o.createElement($,{status:Ge,isRunning:_})))))},Gt=({context:e,api:t})=>{let{testProviderState:n,componentTestStatusValueToStoryIds:s,a11yStatusValueToStoryIds:i,storeState:r,setStoreState:a}=Be(t,e.id);return o.createElement(je,{api:t,entry:e,style:{minWidth:240},testProviderState:n,componentTestStatusValueToStoryIds:s,a11yStatusValueToStoryIds:i,storeState:r,setStoreState:a,isSettingsUpdated:!1})};U.register(v,e=>{if(globalThis.STORYBOOK_BUILDER===_e.VITE){let t=n=>{e.setSelectedPanel(n),e.togglePanel(!0)};Le.onSelect(()=>{t(K)}),Ne.onSelect(()=>{t(W)}),xe.onRunAll(()=>{S.send({type:"TRIGGER_RUN",payload:{triggeredBy:"run-all"}})}),S.subscribe("TEST_RUN_COMPLETED",({payload:n})=>{e.emit(de,{type:"test-run-completed",payload:n})}),U.add(ue,{type:he.experimental_TEST_PROVIDER,clear:()=>{Le.unset(),Ne.unset()},render:()=>{let[n,s]=R(!1),{storeState:i,setStoreState:r,testProviderState:a,componentTestStatusValueToStoryIds:d,a11yStatusValueToStoryIds:c,isSettingsUpdated:l}=Be(e);return o.createElement(oe.Provider,{value:{isModalOpen:n,setModalOpen:s}},o.createElement(je,{api:e,storeState:i,setStoreState:r,isSettingsUpdated:l,testProviderState:a,componentTestStatusValueToStoryIds:d,a11yStatusValueToStoryIds:c}),o.createElement(Ot,{storeState:i,onRerun:()=>{s(!1),S.send({type:"TRIGGER_RUN",payload:{triggeredBy:"global"}})}}))},sidebarContextMenu:({context:n})=>n.type==="docs"||n.type==="story"&&!n.tags.includes(Ee.TEST)?null:o.createElement(Gt,{context:n,api:e})})}});})();
+(()=>{function ae(e){if(!e||typeof e!="object")return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype||Object.getPrototypeOf(t)===null?Object.prototype.toString.call(e)==="[object Object]":!1}function se(e){return Object.getOwnPropertySymbols(e).filter(t=>Object.prototype.propertyIsEnumerable.call(e,t))}function le(e){return e==null?e===void 0?"[object Undefined]":"[object Null]":Object.prototype.toString.call(e)}var Ke="[object RegExp]",We="[object String]",ze="[object Number]",Ve="[object Boolean]",ie="[object Arguments]",qe="[object Symbol]",Qe="[object Date]",Ze="[object Map]",Je="[object Set]",Xe="[object Array]",et="[object Function]",tt="[object ArrayBuffer]",F="[object Object]",ot="[object Error]",nt="[object DataView]",rt="[object Uint8Array]",at="[object Uint8ClampedArray]",st="[object Uint16Array]",lt="[object Uint32Array]",it="[object BigUint64Array]",ct="[object Int8Array]",ut="[object Int16Array]",dt="[object Int32Array]",mt="[object BigInt64Array]",pt="[object Float32Array]",gt="[object Float64Array]";function It(e,t){return e===t||Number.isNaN(e)&&Number.isNaN(t)}function ht(e,t,n){return D(e,t,void 0,void 0,void 0,void 0,n)}function D(e,t,n,s,i,r,a){let d=a(e,t,n,s,i,r);if(d!==void 0)return d;if(typeof e==typeof t)switch(typeof e){case"bigint":case"string":case"boolean":case"symbol":case"undefined":return e===t;case"number":return e===t||Object.is(e,t);case"function":return e===t;case"object":return k(e,t,r,a)}return k(e,t,r,a)}function k(e,t,n,s){if(Object.is(e,t))return!0;let i=le(e),r=le(t);if(i===ie&&(i=F),r===ie&&(r=F),i!==r)return!1;switch(i){case We:return e.toString()===t.toString();case ze:{let c=e.valueOf(),l=t.valueOf();return It(c,l)}case Ve:case Qe:case qe:return Object.is(e.valueOf(),t.valueOf());case Ke:return e.source===t.source&&e.flags===t.flags;case et:return e===t}n=n??new Map;let a=n.get(e),d=n.get(t);if(a!=null&&d!=null)return a===t;n.set(e,t),n.set(t,e);try{switch(i){case Ze:{if(e.size!==t.size)return!1;for(let[c,l]of e.entries())if(!t.has(c)||!D(l,t.get(c),c,e,t,n,s))return!1;return!0}case Je:{if(e.size!==t.size)return!1;let c=Array.from(e.values()),l=Array.from(t.values());for(let u=0;u<c.length;u++){let I=c[u],m=l.findIndex(h=>D(I,h,void 0,e,t,n,s));if(m===-1)return!1;l.splice(m,1)}return!0}case Xe:case rt:case at:case st:case lt:case it:case ct:case ut:case dt:case mt:case pt:case gt:{if(typeof Buffer<"u"&&Buffer.isBuffer(e)!==Buffer.isBuffer(t)||e.length!==t.length)return!1;for(let c=0;c<e.length;c++)if(!D(e[c],t[c],c,e,t,n,s))return!1;return!0}case tt:return e.byteLength!==t.byteLength?!1:k(new Uint8Array(e),new Uint8Array(t),n,s);case nt:return e.byteLength!==t.byteLength||e.byteOffset!==t.byteOffset?!1:k(new Uint8Array(e),new Uint8Array(t),n,s);case ot:return e.name===t.name&&e.message===t.message;case F:{if(!(k(e.constructor,t.constructor,n,s)||ae(e)&&ae(t)))return!1;let c=[...Object.keys(e),...se(e)],l=[...Object.keys(t),...se(t)];if(c.length!==l.length)return!1;for(let u=0;u<c.length;u++){let I=c[u],m=e[I];if(!Object.hasOwn(t,I))return!1;let h=t[I];if(!D(m,h,I,e,t,n,s))return!1}return!0}default:return!1}}finally{n.delete(e),n.delete(t)}}function _t(){}function ce(e,t){return ht(e,t,_t)}var Et="storybook/interactions",K=`${Et}/panel`,Tt="writing-tests/integrations/vitest-addon",Jt=`${Tt}#what-happens-when-there-are-different-test-results-in-multiple-environments`,T="storybook/a11y",W=`${T}/panel`,Xt=`${T}/ui`,eo=`${T}/result`,to=`${T}/request`,oo=`${T}/running`,no=`${T}/error`,ro=`${T}/manual`,ao=`${T}/select`,ft="writing-tests/accessibility-testing",so=`${ft}#why-are-my-tests-failing-in-different-environments`,S="storybook/test",ue=`${S}/test-provider`,de=`${S}/channel`,bt="writing-tests/integrations/vitest-addon",me=`${bt}#what-happens-if-vitest-itself-has-an-error`,z={id:S,initialState:{config:{coverage:!1,a11y:!1},watching:!1,cancelling:!1,fatalError:void 0,index:{entries:{},v:5},previewAnnotations:[],currentRun:{triggeredBy:void 0,config:{coverage:!1,a11y:!1},componentTestStatuses:[],a11yStatuses:[],a11yReports:{},reports:{},componentTestCount:{success:0,error:0},a11yCount:{success:0,warning:0,error:0},storyIds:void 0,totalTestCount:void 0,startedAt:void 0,finishedAt:void 0,unhandledErrors:[],coverageSummary:void 0}}},pe=["global","run-all"],lo=`UNIVERSAL_STORE:${z.id}`,V="storybook/component-test",q="storybook/a11y";var io=`${S}/trigger-test-run-request`,co=`${S}/trigger-test-run-response`;var o=__REACT__,{Children:Io,Component:ho,Fragment:_o,Profiler:Eo,PureComponent:To,StrictMode:fo,Suspense:bo,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:vo,act:So,cloneElement:yo,createContext:Co,createElement:Ao,createFactory:Oo,createRef:Ro,forwardRef:wo,isValidElement:Lo,lazy:Po,memo:No,startTransition:Do,unstable_act:ko,useCallback:Q,useContext:ge,useDebugValue:xo,useDeferredValue:Bo,useEffect:O,useId:Uo,useImperativeHandle:Mo,useInsertionEffect:jo,useLayoutEffect:$o,useMemo:Ie,useReducer:Go,useRef:U,useState:R,useSyncExternalStore:Ho,useTransition:Yo,version:Fo}=__REACT__;var qo=__STORYBOOK_TYPES__,{Addon_TypesEnum:he,CHANGE_DETECTION_STATUS_TYPE_ID:Qo,CoreWebpackCompiler:Zo,Feature:Jo,NON_AGGREGATED_STATUS_TYPE_IDS:Xo,REVIEW_EVENTS:en,REVIEW_NAMESPACE:tn,REVIEW_STATUS_TYPE_ID:on,SupportedBuilder:_e,SupportedLanguage:nn,SupportedRenderer:rn}=__STORYBOOK_TYPES__;var un=__STORYBOOK_API__,{ActiveTabs:dn,Consumer:mn,ManagerContext:pn,Provider:gn,RequestResponseError:In,Tag:Ee,addons:x,combineParameters:hn,controlOrMetaKey:_n,controlOrMetaSymbol:En,eventMatchesShortcut:Tn,eventToShortcut:fn,experimental_MockUniversalStore:bn,experimental_UniversalStore:Te,experimental_getStatusStore:Z,experimental_getTestProviderStore:fe,experimental_requestResponse:vn,experimental_useStatusStore:J,experimental_useTestProviderStore:be,experimental_useUniversalStore:ve,getService:Sn,internal_checklistStore:yn,internal_fullStatusStore:Cn,internal_fullTestProviderStore:An,internal_universalChecklistStore:On,internal_universalStatusStore:Rn,internal_universalTestProviderStore:wn,isMacLike:Ln,isShortcutTaken:Pn,keyToSymbol:Nn,merge:Dn,mockChannel:kn,optionOrAltSymbol:xn,registerService:Bn,shortcutMatchesShortcut:Un,shortcutToAriaKeyshortcuts:Mn,shortcutToHumanString:jn,types:$n,useAddonState:Gn,useArgTypes:Hn,useArgs:Yn,useChannel:Fn,useGlobalTypes:Kn,useGlobals:Wn,useParameter:zn,useServiceCommand:Vn,useServiceQuery:qn,useSharedState:Qn,useStoryPrepared:Zn,useStorybookApi:Se,useStorybookState:Jn}=__STORYBOOK_API__;var nr=__STORYBOOK_COMPONENTS__,{A:rr,AbstractToolbar:ar,ActionBar:sr,ActionList:p,AddonPanel:lr,Badge:ir,Bar:cr,Blockquote:ur,Button:w,Card:dr,ClipboardCode:mr,Code:pr,Collapsible:gr,DL:Ir,Div:hr,DocumentWrapper:_r,EmptyTabContent:Er,ErrorFormatter:Tr,FlexBar:fr,Form:M,H1:br,H2:vr,H3:Sr,H4:yr,H5:Cr,H6:Ar,HR:Or,IconButton:Rr,Img:wr,LI:Lr,Link:X,ListItem:Pr,Loader:Nr,Modal:j,ModalDecorator:Dr,OL:kr,P:xr,Placeholder:Br,Popover:Ur,PopoverProvider:Mr,Pre:jr,ProgressSpinner:ye,ResetWrapper:$r,ScrollArea:Gr,Select:Hr,Separator:Yr,Spaced:Fr,Span:Kr,StatelessTab:Wr,StatelessTabList:zr,StatelessTabPanel:Vr,StatelessTabsView:qr,StorybookIcon:Qr,StorybookLogo:Zr,SyntaxHighlighter:Jr,TT:Xr,TabBar:ea,TabButton:ta,TabList:oa,TabPanel:na,TabWrapper:ra,Table:aa,Tabs:sa,TabsState:la,TabsView:ia,ToggleButton:Ce,Toolbar:ca,Tooltip:ua,TooltipLinkList:da,TooltipMessage:ma,TooltipNote:pa,TooltipProvider:ga,UL:Ia,WithTooltip:ha,WithTooltipPure:_a,Zoom:Ea,codeCommon:Ta,components:fa,convertToReactAriaPlacement:ba,createCopyToClipboardFunction:va,getStoryHref:Sa,interleaveSeparators:ya,nameSpaceClassNames:Ca,resetComponents:Aa,useCopyButton:Oa,useTabsState:Ra,withReset:wa}=__STORYBOOK_COMPONENTS__;var ka=__STORYBOOK_ICONS__,{AccessibilityAltIcon:xa,AccessibilityIcon:Ba,AccessibilityIgnoredIcon:Ua,AddIcon:Ma,AdminIcon:ja,AlertAltIcon:$a,AlertIcon:Ga,AlignLeftIcon:Ha,AlignRightIcon:Ya,AppleIcon:Fa,ArrowBottomLeftIcon:Ka,ArrowBottomRightIcon:Wa,ArrowDownIcon:za,ArrowLeftIcon:Va,ArrowRightIcon:qa,ArrowSolidDownIcon:Qa,ArrowSolidLeftIcon:Za,ArrowSolidRightIcon:Ja,ArrowSolidUpIcon:Xa,ArrowTopLeftIcon:es,ArrowTopRightIcon:ts,ArrowUpIcon:os,AzureDevOpsIcon:ns,BackIcon:rs,BasketIcon:as,BatchAcceptIcon:ss,BatchDenyIcon:ls,BeakerIcon:is,BellIcon:cs,BitbucketIcon:us,BoldIcon:ds,BookIcon:ms,BookmarkHollowIcon:ps,BookmarkIcon:gs,BottomBarIcon:Is,BottomBarToggleIcon:hs,BoxIcon:_s,BranchIcon:Es,BrowserIcon:Ts,BugIcon:fs,ButtonIcon:bs,CPUIcon:vs,CalendarIcon:Ss,CameraIcon:ys,CameraStabilizeIcon:Cs,CategoryIcon:As,CertificateIcon:Os,ChangedIcon:Rs,ChatIcon:ws,CheckIcon:Ls,ChecklistIcon:Ps,ChevronDownIcon:Ns,ChevronLeftIcon:Ds,ChevronRightIcon:ks,ChevronSmallDownIcon:xs,ChevronSmallLeftIcon:Bs,ChevronSmallRightIcon:Us,ChevronSmallUpIcon:Ms,ChevronUpIcon:js,ChromaticIcon:$s,ChromeIcon:Gs,CircleHollowIcon:Hs,CircleIcon:Ys,ClearIcon:Fs,CloseAltIcon:Ks,CloseIcon:Ws,CloudHollowIcon:zs,CloudIcon:Vs,CogIcon:qs,CollapseIcon:Qs,CommandIcon:Zs,CommentAddIcon:Js,CommentIcon:Xs,CommentsIcon:el,CommitIcon:tl,CompassIcon:ol,ComponentDrivenIcon:nl,ComponentIcon:rl,ContrastIcon:al,ContrastIgnoredIcon:sl,ControlsIcon:ll,CopyIcon:il,CreditIcon:cl,CrossIcon:ul,DashboardIcon:dl,DatabaseIcon:ml,DeleteIcon:pl,DiamondIcon:gl,DirectionIcon:Il,DiscordIcon:hl,DocChartIcon:_l,DocListIcon:El,DocumentIcon:Tl,DownloadIcon:fl,DragIcon:bl,EditIcon:vl,EditorIcon:Sl,EllipsisIcon:yl,EmailIcon:Cl,ExpandAltIcon:Al,ExpandIcon:Ol,EyeCloseIcon:Rl,EyeIcon:Ae,FaceHappyIcon:wl,FaceNeutralIcon:Ll,FaceSadIcon:Pl,FacebookIcon:Nl,FailedIcon:Dl,FastForwardIcon:kl,FigmaIcon:xl,FilesIcon:Bl,FilterIcon:Ul,FlagIcon:Ml,FolderIcon:jl,FormIcon:$l,GDriveIcon:Gl,GiftIcon:Hl,GithubIcon:Yl,GitlabIcon:Fl,GlobeIcon:Kl,GoogleIcon:Wl,GraphBarIcon:zl,GraphLineIcon:Vl,GraphqlIcon:ql,GridAltIcon:Ql,GridIcon:Zl,GrowIcon:Jl,HeartHollowIcon:Xl,HeartIcon:ei,HomeIcon:ti,HourglassIcon:oi,InfoIcon:Oe,ItalicIcon:ni,JumpToIcon:ri,KeyIcon:ai,LightningIcon:si,LightningOffIcon:li,LinkBrokenIcon:ii,LinkIcon:ci,LinkedinIcon:ui,LinuxIcon:di,ListOrderedIcon:mi,ListUnorderedIcon:pi,LocationIcon:gi,LockIcon:Ii,MarkdownIcon:hi,MarkupIcon:_i,MediumIcon:Ei,MemoryIcon:Ti,MenuIcon:fi,MergeIcon:bi,MirrorIcon:vi,MobileIcon:Si,MoonIcon:yi,NutIcon:Ci,OutboxIcon:Ai,OutlineIcon:Oi,PaintBrushAltIcon:Ri,PaintBrushIcon:wi,PaperClipIcon:Li,ParagraphIcon:Pi,PassedIcon:Ni,PhoneIcon:Di,PhotoDragIcon:ki,PhotoIcon:xi,PhotoStabilizeIcon:Bi,PinAltIcon:Ui,PinIcon:Mi,PlayAllHollowIcon:ji,PlayBackIcon:$i,PlayHollowIcon:Re,PlayIcon:Gi,PlayNextIcon:Hi,PlusIcon:Yi,PointerDefaultIcon:Fi,PointerHandIcon:Ki,PopOutIcon:Wi,PowerIcon:zi,PrintIcon:Vi,ProceedIcon:qi,ProfileIcon:Qi,PullRequestIcon:Zi,QuestionIcon:Ji,RSSIcon:Xi,RedirectIcon:ec,ReduxIcon:tc,RefreshIcon:oc,ReplyIcon:nc,RepoIcon:rc,RequestChangeIcon:ac,RewindIcon:sc,RulerIcon:lc,SaveIcon:ic,SearchIcon:cc,ShareAltIcon:uc,ShareIcon:dc,ShieldIcon:mc,SideBySideIcon:pc,SidebarAltIcon:gc,SidebarAltToggleIcon:Ic,SidebarIcon:hc,SidebarToggleIcon:_c,SortDownIcon:Ec,SortUpIcon:Tc,SpeakerIcon:fc,StackedIcon:bc,StarHollowIcon:vc,StarIcon:Sc,StatusFailIcon:yc,StatusIcon:Cc,StatusNewIcon:Ac,StatusPassIcon:Oc,StatusWarnIcon:Rc,StickerIcon:wc,StopAltHollowIcon:Lc,StopAltIcon:we,StopIcon:Pc,StorybookIcon:Nc,StructureIcon:Dc,SubtractIcon:kc,SunIcon:xc,SupportIcon:Bc,SweepIcon:Uc,SwitchAltIcon:Mc,SyncIcon:Le,TabletIcon:jc,ThumbsUpIcon:$c,TimeIcon:Gc,TimerIcon:Hc,TransferIcon:Yc,TrashIcon:Fc,TwitterIcon:Kc,TypeIcon:Wc,UbuntuIcon:zc,UndoIcon:Vc,UnfoldIcon:qc,UnlockIcon:Qc,UnpinIcon:Zc,UploadIcon:Jc,UserAddIcon:Xc,UserAltIcon:eu,UserIcon:tu,UsersIcon:ou,VSCodeIcon:nu,VerifiedIcon:ru,VideoIcon:au,WandIcon:su,WatchIcon:lu,WindowsIcon:iu,WrenchIcon:cu,XIcon:uu,YoutubeIcon:du,ZoomIcon:mu,ZoomOutIcon:pu,ZoomResetIcon:gu,iconList:Iu}=__STORYBOOK_ICONS__;var fu=__STORYBOOK_THEMING__,{CacheProvider:bu,ClassNames:vu,Global:Su,ThemeProvider:yu,background:Cu,color:Au,convert:Ou,create:Ru,createCache:wu,createGlobal:Lu,createReset:Pu,css:Nu,darken:Du,ensure:ku,getPreferredColorScheme:xu,ignoreSsrWarning:Bu,isPropValid:Uu,jsx:Mu,keyframes:ju,lighten:$u,srOnlyStyles:Gu,srOnlyUnsetStyles:Hu,styled:g,themes:Yu,tokens:Fu,typography:Ku,useTheme:Wu,withTheme:zu}=__STORYBOOK_THEMING__;var y=Te.create({...z,leader:globalThis.CONFIG_TYPE==="PRODUCTION"}),Pe=Z(V),Ne=Z(q),Be=fe(S),vt=g.div({display:"flex",justifyContent:"space-between",alignItems:"center",padding:"6px 6px 6px 20px"}),St=g.div({display:"flex",justifyContent:"space-between",alignItems:"center"}),yt=g(j.Title)(({theme:{typography:e}})=>({fontSize:e.size.s2,fontWeight:e.weight.bold})),Ct=g.pre(({theme:e})=>({whiteSpace:"pre-wrap",wordWrap:"break-word",userSelect:"text",overflow:"auto",maxHeight:"60vh",margin:0,padding:"20px",fontFamily:e.typography.fonts.mono,fontSize:"12px",borderTop:`1px solid ${e.appBorderColor}`,borderRadius:0})),At=g.a(({theme:e})=>({color:e.color.defaultText})),oe=o.createContext({isModalOpen:!1,setModalOpen:void 0});function te({error:e}){return e?o.createElement("div",null,o.createElement("h4",null,"Caused by: ",e.name||"Error",": ",e.message),e.stack&&o.createElement("pre",null,e.stack),e.cause&&o.createElement(te,{error:e.cause})):null}function Ot({onRerun:e,storeState:t}){let n=Se(),{isModalOpen:s,setModalOpen:i}=ge(oe),r=n.getDocsUrl({subpath:me,versioned:!0,renderer:!0}),{fatalError:a,currentRun:{unhandledErrors:d}}=t,c=a?o.createElement(o.Fragment,null,o.createElement("p",null,a.error.name||"Error"),a.message&&o.createElement("p",null,a.message),a.error.message&&o.createElement("p",null,a.error.message),a.error.stack&&o.createElement("p",null,a.error.stack),a.error.cause&&o.createElement(te,{error:a.error.cause})):d.length>0?o.createElement("ol",null,d.map(l=>o.createElement("li",{key:l.name+l.message},o.createElement("p",null,l.name,": ",l.message),l.VITEST_TEST_PATH&&o.createElement("p",null,'This error originated in "',o.createElement("b",null,l.VITEST_TEST_PATH),`". It doesn't mean the error was thrown inside the file itself, but while it was running.`),l.VITEST_TEST_NAME&&o.createElement(o.Fragment,null,o.createElement("p",null,`The latest test that might've caused the error is "`,o.createElement("b",null,l.VITEST_TEST_NAME),'". It might mean one of the following:'),o.createElement("ul",null,o.createElement("li",null,"The error was thrown, while Vitest was running this test."),o.createElement("li",null,"If the error occurred after the test had been completed, this was the last documented test before it was thrown."))),l.stacks&&o.createElement(o.Fragment,null,o.createElement("p",null,o.createElement("b",null,"Stacks:")),o.createElement("ul",null,l.stacks.map(u=>o.createElement("li",{key:u.file+u.line+u.column},u.file,":",u.line,":",u.column," - ",u.method||"unknown method")))),l.stack&&o.createElement("p",null,l.stack),l.cause?o.createElement(te,{error:l.cause}):null))):null;return o.createElement(j,{ariaLabel:"Storybook Test Error Details",onOpenChange:i,open:s},o.createElement(vt,null,o.createElement(yt,null,"Storybook Test Error Details"),o.createElement(St,null,o.createElement(w,{onClick:e,variant:"ghost",ariaLabel:!1},o.createElement(Le,null),"Rerun"),o.createElement(w,{variant:"ghost",ariaLabel:!1,asChild:!0},o.createElement("a",{target:"_blank",href:r,rel:"noreferrer"},"Troubleshoot")),o.createElement(j.Close,null))),o.createElement(Ct,null,c,o.createElement("br",null),o.createElement("br",null),"Troubleshoot:"," ",o.createElement(At,{target:"_blank",href:r},r)))}var De=(e,t,n)=>{let s={"status-value:pending":[],"status-value:success":[],"status-value:error":[],"status-value:warning":[],"status-value:unknown":[]};return(n?n.map(i=>e[i]).filter(Boolean):Object.values(e)).forEach(i=>{let r=i[t];r&&s[r.value].push(r.storyId)}),s},Ue=(e,t)=>{let n=be(h=>h[S]),[s,i]=ve(y),[r,a]=R(!1),d=U();O(()=>{let h=y.onStateChange((P,A)=>{ce(P.config,A.config)||(Be.settingsChanged(),a(!0),clearTimeout(d.current),d.current=setTimeout(()=>{a(!1)},1e3))});return()=>{h(),clearTimeout(d.current)}},[]);let c=Ie(()=>t?e.findAllLeafStoryIds(t):void 0,[t,e]),l=Q(h=>De(h,V,c),[c]),u=J(l),I=Q(h=>De(h,q,c),[c]),m=J(I);return{storeState:s,setStoreState:i,testProviderState:n,componentTestStatusValueToStoryIds:u,a11yStatusValueToStoryIds:m,isSettingsUpdated:r}},L=null;function ee(e,t="assertive",n=7e3){L?L.announce(e,t,n):(L=new Rt,(typeof IS_REACT_ACT_ENVIRONMENT=="boolean"?IS_REACT_ACT_ENVIRONMENT:typeof jest<"u")?L.announce(e,t,n):setTimeout(()=>{L?.isAttached()&&L?.announce(e,t,n)},100))}var Rt=class{isAttached(){var e;return(e=this.node)===null||e===void 0?void 0:e.isConnected}createLog(e){let t=document.createElement("div");return t.setAttribute("role","log"),t.setAttribute("aria-live",e),t.setAttribute("aria-relevant","additions"),t}destroy(){this.node&&(document.body.removeChild(this.node),this.node=null)}announce(e,t="assertive",n=7e3){var s,i;if(!this.node)return;let r=document.createElement("div");typeof e=="object"?(r.setAttribute("role","img"),r.setAttribute("aria-labelledby",e["aria-labelledby"])):r.textContent=e,t==="assertive"?(s=this.assertiveLog)===null||s===void 0||s.appendChild(r):(i=this.politeLog)===null||i===void 0||i.appendChild(r),e!==""&&setTimeout(()=>{r.remove()},n)}clear(e){this.node&&((!e||e==="assertive")&&this.assertiveLog&&(this.assertiveLog.innerHTML=""),(!e||e==="polite")&&this.politeLog&&(this.politeLog.innerHTML=""))}constructor(){this.node=null,this.assertiveLog=null,this.politeLog=null,typeof document<"u"&&(this.node=document.createElement("div"),this.node.dataset.liveAnnouncer="true",Object.assign(this.node.style,{border:0,clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap"}),this.assertiveLog=this.createLog("assertive"),this.node.appendChild(this.assertiveLog),this.politeLog=this.createLog("polite"),this.node.appendChild(this.politeLog),document.body.prepend(this.node))}},wt=({timestamp:e})=>{let[t,n]=R(null);if(O(()=>{if(e){n(Date.now()-e);let d=setInterval(()=>n(Date.now()-e),1e4);return()=>clearInterval(d)}},[e]),t===null)return null;let s=Math.round(t/1e3);if(s<60)return"just now";let i=Math.floor(s/60);if(i<60)return i===1?"a minute ago":`${i} minutes ago`;let r=Math.floor(i/60);if(r<24)return r===1?"an hour ago":`${r} hours ago`;let a=Math.floor(r/24);return a===1?"yesterday":`${a} days ago`},Lt=g.div(({theme:e})=>({overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontSize:e.typography.size.s1,color:e.textMutedColor})),Pt=g.span(({theme:e})=>({color:e.color.positiveText}));function Nt({entryId:e,storeState:t,testProviderState:n,isSettingsUpdated:s,...i}){let{setModalOpen:r}=o.useContext(oe),{componentTestCount:a,totalTestCount:d,unhandledErrors:c,finishedAt:l}=t.currentRun,u=a.success+a.error,I="Not run";if(!e&&s)I=o.createElement(Pt,null,"Settings updated");else if(n==="test-provider-state:running")I=(u??0)===0?"Starting...":`Testing... ${u}/${d}`;else if(!e&&n==="test-provider-state:crashed")I=r?o.createElement(X,{onClick:()=>r(!0)},"View full error"):"Crashed";else if(!e&&c.length>0){let m=`View ${c.length} unhandled error${c?.length>1?"s":""}`;I=r?o.createElement(X,{onClick:()=>r(!0)},m):m}else e&&d?I=`Ran ${d} ${d===1?"test":"tests"}`:l?I=o.createElement(o.Fragment,null,"Ran ",d," ",d===1?"test":"tests"," ",o.createElement(wt,{timestamp:l})):t.watching&&(I="Watching for file changes");return o.createElement(Lt,{...i},I)}var $=g.div(({percentage:e})=>({width:e?12:6,height:e?12:6,margin:e?1:4,background:e?`conic-gradient(var(--status-color) ${e}%, var(--status-background) ${e+1}%)`:"var(--status-color)",borderRadius:"50%"}),({isRunning:e,theme:t})=>e&&{animation:`${t.animation.glow} 1.5s ease-in-out infinite`},({status:e,theme:t})=>e==="positive"&&{"--status-color":t.color.positive,"--status-background":`${t.color.positive}66`},({status:e,theme:t})=>e==="warning"&&{"--status-color":t.color.gold,"--status-background":`${t.color.gold}66`},({status:e,theme:t})=>e==="negative"&&{"--status-color":t.color.negative,"--status-background":`${t.color.negative}66`},({status:e,theme:t})=>e==="critical"&&{"--status-color":t.color.defaultText,"--status-background":`${t.color.defaultText}66`},({status:e,theme:t})=>e==="unknown"&&{"--status-color":t.textMutedColor,"--status-background":`${t.textMutedColor}66`}),Dt=g.div(({inContextMenu:e})=>({display:"flex",flexDirection:"column",paddingBottom:e?0:1})),kt=g.div({display:"flex",justifyContent:"space-between",padding:"8px 0",gap:12}),xt=g.div({display:"flex",flexDirection:"column",marginLeft:8,minWidth:0}),ke=g.div(({crashed:e,theme:t})=>({fontSize:t.typography.size.s1,fontWeight:e?"bold":"normal",color:e?t.color.negativeText:t.color.defaultText})),Bt=g.div({display:"flex",gap:4}),Ut=g(p)({padding:0}),Mt=g.span(({theme:e})=>({color:e.textMutedColor})),jt=g(ye)({margin:4}),$t=g(we)({width:10}),xe=({api:e,panelId:t,entryId:n})=>{let s=n?e.findAllLeafStoryIds(n)[0]:void 0;s&&e.selectStory(s),e.setSelectedPanel(t),e.togglePanel(!0)},Me=({api:e,entry:t,testProviderState:n,storeState:s,setStoreState:i,componentTestStatusValueToStoryIds:r,a11yStatusValueToStoryIds:a,isSettingsUpdated:d,...c})=>{let{config:l,watching:u,cancelling:I,currentRun:m,fatalError:h}=s,P=m.componentTestCount.success+m.componentTestCount.error,A=x.experimental_getRegisteredAddons().includes(T),_=n==="test-provider-state:running",je=_&&P===0,[$e,ne]=h?["critical","Component tests crashed"]:r["status-value:error"].length>0?["negative","Component tests failed"]:_?["unknown","Testing in progress"]:r["status-value:success"].length>0?["positive","Component tests passed"]:["unknown","Run tests to see results"],[Ge,He]=h?["critical","Component tests crashed"]:a["status-value:error"].length>0?["negative","Accessibility tests failed"]:a["status-value:warning"].length>0?["warning","Accessibility tests failed"]:_?["unknown","Testing in progress"]:a["status-value:success"].length>0?["positive","Accessibility tests passed"]:["unknown","Run tests to see accessibility results"],re=U(n);return O(()=>{let E=re.current;if(re.current=n,E!==n){if(n==="test-provider-state:running")ee("Test run started.","polite");else if(n==="test-provider-state:crashed")ee("Test run crashed.","assertive");else if(n==="test-provider-state:succeeded"&&E==="test-provider-state:running"){let C=[],B=r["status-value:error"].length,G=r["status-value:warning"].length,H=r["status-value:success"].length;B>0&&C.push(`${B} ${B===1?"component":"components"} errored`),G>0&&C.push(`${G} ${G===1?"component":"components"} with warnings`),H>0&&C.push(`${H} ${H===1?"component":"components"} passed`);let N=0;if(A){N=a["status-value:error"].length;let Y=a["status-value:warning"].length;N>0&&C.push(`${N} accessibility ${N===1?"error":"errors"}`),Y>0&&C.push(`${Y} accessibility ${Y===1?"warning":"warnings"}`)}let Ye=C.length>0?`Test run finished. ${C.join(", ")}.`:"Test run finished. No results.",Fe=B>0||A&&N>0;ee(Ye,Fe?"assertive":"polite")}}},[n,r,a,A]),o.createElement(Dt,{...c,inContextMenu:!!t},o.createElement(kt,null,o.createElement(xt,null,t?o.createElement(ke,{id:"testing-module-title"},"Run component tests"):o.createElement(ke,{id:"testing-module-title",crashed:n==="test-provider-state:crashed"||h!==void 0||m.unhandledErrors.length>0},m.unhandledErrors.length===1?"Component tests completed with an error":m.unhandledErrors.length>1?"Component tests completed with errors":h?"Component tests didn\u2019t complete":"Run component tests"),o.createElement(Nt,{id:"testing-module-description",storeState:s,testProviderState:n,entryId:t?.id,isSettingsUpdated:d})),o.createElement(Bt,null,!t&&o.createElement(Ce,{ariaLabel:_?"Watch mode (cannot toggle while running)":"Watch mode",tooltip:_?"Watch mode unavailable while running":`Watch mode is ${u?"enabled":"disabled"}`,padding:"small",size:"medium",variant:"ghost",pressed:u,onClick:()=>y.send({type:"TOGGLE_WATCHING",payload:{to:!u}}),disabled:_},o.createElement(Ae,null)),_?o.createElement(w,{ariaLabel:I?"Stop test run (already stopping...)":"Stop test run",padding:"none",size:"medium",variant:"ghost",onClick:()=>y.send({type:"CANCEL_RUN"}),disabled:I||je},o.createElement(jt,{percentage:P&&s.currentRun.totalTestCount?P/s.currentRun.totalTestCount*100:void 0},o.createElement($t,null))):o.createElement(w,{ariaLabel:"Start test run",padding:"small",size:"medium",variant:"ghost",onClick:()=>{let E;t&&(E=t.type==="story"?[t.id]:e.findAllLeafStoryIds(t.id)),y.send({type:"TRIGGER_RUN",payload:{storyIds:E,triggeredBy:t?.type??"global"}})}},o.createElement(Re,null)))),o.createElement(Ut,null,o.createElement(p.Item,null,t?o.createElement(p.Text,null,"Interactions"):o.createElement(p.Action,{as:"label",readOnly:!0},o.createElement(p.Icon,null,o.createElement(M.Checkbox,{name:"Interactions",checked:!0,disabled:!0})),o.createElement(p.Text,null,"Interactions")),o.createElement(p.Button,{ariaLabel:`${ne}${r["status-value:error"].length+r["status-value:warning"].length>0?` (${r["status-value:error"].length+r["status-value:warning"].length} errors or warnings so far)`:""}`,tooltip:ne,disabled:r["status-value:error"].length===0&&r["status-value:warning"].length===0&&r["status-value:success"].length===0,onClick:()=>{xe({api:e,panelId:K,entryId:r["status-value:error"][0]??r["status-value:warning"][0]??r["status-value:success"][0]??t?.id})}},r["status-value:error"].length+r["status-value:warning"].length||null,o.createElement($,{status:$e,isRunning:_}))),!t&&o.createElement(p.Item,null,o.createElement(p.Action,{as:"label",readOnly:_,ariaLabel:!1},o.createElement(p.Icon,null,o.createElement(M.Checkbox,{name:"Coverage",checked:l.coverage,disabled:_,onChange:()=>i(E=>({...E,config:{...E.config,coverage:!l.coverage}}))})),o.createElement(p.Text,null,u?o.createElement(Mt,null,"Coverage (unavailable)"):"Coverage")),u||m.triggeredBy&&!pe.includes(m.triggeredBy)?o.createElement(p.Button,{disabled:!0,ariaLabel:u?"Coverage unavailable in watch mode":"Coverage only available after running all tests"},o.createElement(Oe,null)):m.coverageSummary?o.createElement(p.Button,{asChild:!0,ariaLabel:_?"Open coverage report (testing still in progress)":`Open coverage report (${m.coverageSummary.percentage}% coverage)`},o.createElement("a",{href:"/coverage/index.html",target:"_blank"},m.coverageSummary.percentage,"%",o.createElement($,{isRunning:_,percentage:m.coverageSummary.percentage,status:m.coverageSummary.status}))):o.createElement(p.Button,{disabled:!0,ariaLabel:_?"Coverage unavailable, testing still in progress":h?"Coverage unavailable, component tests crashed":"Coverage unavailable, run tests first"},o.createElement($,{isRunning:_,status:h?"critical":"unknown"}))),A&&o.createElement(p.Item,null,t?o.createElement(p.Text,null,"Accessibility"):o.createElement(p.Action,{as:"label",readOnly:_,ariaLabel:!1},o.createElement(p.Icon,null,o.createElement(M.Checkbox,{name:"Accessibility",checked:l.a11y,disabled:_,onChange:()=>i(E=>({...E,config:{...E.config,a11y:!l.a11y}}))})),o.createElement(p.Text,null,"Accessibility")),o.createElement(p.Button,{ariaLabel:He,disabled:a["status-value:error"].length===0&&a["status-value:warning"].length===0&&a["status-value:success"].length===0,onClick:()=>{xe({api:e,entryId:a["status-value:error"][0]??a["status-value:warning"][0]??a["status-value:success"][0]??t?.id,panelId:W})}},a["status-value:error"].length+a["status-value:warning"].length||null,o.createElement($,{status:Ge,isRunning:_})))))},Gt=({context:e,api:t})=>{let{testProviderState:n,componentTestStatusValueToStoryIds:s,a11yStatusValueToStoryIds:i,storeState:r,setStoreState:a}=Ue(t,e.id);return o.createElement(Me,{api:t,entry:e,style:{minWidth:240},testProviderState:n,componentTestStatusValueToStoryIds:s,a11yStatusValueToStoryIds:i,storeState:r,setStoreState:a,isSettingsUpdated:!1})};x.register(S,e=>{if(globalThis.STORYBOOK_BUILDER===_e.VITE){let t=n=>{e.setSelectedPanel(n),e.togglePanel(!0)};Pe.onSelect(()=>{t(K)}),Ne.onSelect(()=>{t(W)}),Be.onRunAll(()=>{y.send({type:"TRIGGER_RUN",payload:{triggeredBy:"run-all"}})}),y.subscribe("TEST_RUN_COMPLETED",({payload:n})=>{e.emit(de,{type:"test-run-completed",payload:n})}),x.add(ue,{type:he.experimental_TEST_PROVIDER,clear:()=>{Pe.unset(),Ne.unset()},render:()=>{let[n,s]=R(!1),{storeState:i,setStoreState:r,testProviderState:a,componentTestStatusValueToStoryIds:d,a11yStatusValueToStoryIds:c,isSettingsUpdated:l}=Ue(e);return o.createElement(oe.Provider,{value:{isModalOpen:n,setModalOpen:s}},o.createElement(Me,{api:e,storeState:i,setStoreState:r,isSettingsUpdated:l,testProviderState:a,componentTestStatusValueToStoryIds:d,a11yStatusValueToStoryIds:c}),o.createElement(Ot,{storeState:i,onRerun:()=>{s(!1),y.send({type:"TRIGGER_RUN",payload:{triggeredBy:"global"}})}}))},sidebarContextMenu:({context:n})=>n.type==="docs"||n.type==="story"&&!n.tags.includes(Ee.TEST)?null:o.createElement(Gt,{context:n,api:e})})}});})();
 }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }

package/lib/components/accordion-item/accordion-item.styles.js

@@ -608,7 +608,7 @@ span.ripple {
   --cre8-u-icon-display: flex;
   --cre8-u-icon-align-items: center;
   --cre8-u-icon-justify-content: center;
-  padding: 1.5rem 0.5rem;
+  padding: var(--cre8-padding-24) var(--cre8-padding-8);
 }
 
 .cre8-c-accordion-item--small cre8-heading button {
@@ -650,9 +650,9 @@ span.ripple {
 }
 
 .cre8-c-accordion-item__body {
-  margin-right: 0rem;
-  margin-left: 0rem;
-  padding: 0rem;
+  margin-right: 0;
+  margin-left: 0;
+  padding: 0;
   overflow: hidden;
   visibility: hidden;
   transition: height var(--cre8-anim-fade-quick) var(--cre8-anim-ease), visibility var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
@@ -669,7 +669,7 @@ span.ripple {
   line-height: var(--cre8-typography-body-default-line-height);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
-  padding: 0.5rem 3rem 0rem 0.5rem;
+  padding: var(--cre8-padding-8) var(--cre8-spacing-48) 0 var(--cre8-padding-8);
 }
 
 cre8-icon {
@@ -694,8 +694,8 @@ cre8-icon {
   display: flex;
   height: 2rem;
   justify-content: center;
-  margin-left: 0.5rem;
-  margin-right: 0.125rem;
+  margin-left: var(--cre8-spacing-8);
+  margin-right: var(--cre8-spacing-2);
   min-height: 2rem;
   min-width: 2rem;
   width: 2rem;
@@ -733,7 +733,7 @@ cre8-icon {
   background-color: var(--cre8-color-bg-transparent);
   border: var(--cre8-border-width-none);
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
+  padding: var(--cre8-padding-4) var(--cre8-padding-8);
   overflow-x: hidden;
   transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
   width: 100%;
@@ -745,7 +745,7 @@ cre8-icon {
   justify-content: flex-start;
 }
 .cre8-c-accordion-item__button.cre8-u-justify-content-start .cre8-c-accordion-item__icon-before {
-  margin-left: 0rem;
+  margin-left: 0;
 }
 .cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {
   border-color: var(--cre8-color-button-primary-border-hover);
@@ -779,11 +779,11 @@ cre8-icon {
 }
 
 .cre8-c-accordion-item--icon-before .cre8-c-accordion-item__body {
-  margin-left: 2.5rem;
+  margin-left: var(--cre8-spacing-40);
 }
 
 .cre8-c-accordion-item__icon-before {
-  margin-right: 0.75rem;
+  margin-right: var(--cre8-spacing-12);
 }
 .cre8-c-accordion-item__icon-before h4[slot=header] {
   display: block;

package/lib/components/accordion-item/accordion-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8yBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/**\n* Accordion Item panel button\n* 1) Icon rotating on open was causing scrollbar to continuously appear/disappear\n*    during the animation, overflow-x: hidden; prevents this from happening\n*/\n:host {\n  display: block;\n}\n:host ::slotted(*) {\n  text-align: left;\n  width: 100%;\n}\n\n.cre8-c-accordion-item {\n  border-bottom: var(--cre8-accordion-item-border-bottom);\n  border-radius: var(--cre8-border-radius-none);\n  --cre8-u-icon-display: flex;\n  --cre8-u-icon-align-items: center;\n  --cre8-u-icon-justify-content: center;\n  padding: 1.5rem 0.5rem;\n}\n\n.cre8-c-accordion-item--small cre8-heading button {\n  font-family: var(--cre8-typography-title-default-mobile-font-family);\n  font-size: var(--cre8-typography-title-default-mobile-font-size);\n  font-weight: var(--cre8-typography-title-default-mobile-font-weight);\n  line-height: var(--cre8-typography-title-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-accordion-item--small cre8-heading button {\n    font-family: var(--cre8-typography-title-default-font-family);\n    font-size: var(--cre8-typography-title-default-font-size);\n    font-weight: var(--cre8-typography-title-default-font-weight);\n    line-height: var(--cre8-typography-title-default-line-height);\n    text-decoration: var(--cre8-typography-title-default-text-decoration);\n    text-transform: var(--cre8-typography-title-default-text-transform);\n  }\n}\n\n.cre8-c-accordion-item--large cre8-heading button {\n  font-family: var(--cre8-typography-title-large-mobile-font-family);\n  font-size: var(--cre8-typography-title-large-mobile-font-size);\n  font-weight: var(--cre8-typography-title-large-mobile-font-weight);\n  line-height: var(--cre8-typography-title-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-accordion-item--large cre8-heading button {\n    font-family: var(--cre8-typography-title-large-font-family);\n    font-size: var(--cre8-typography-title-large-font-size);\n    font-weight: var(--cre8-typography-title-large-font-weight);\n    line-height: var(--cre8-typography-title-large-line-height);\n    text-decoration: var(--cre8-typography-title-large-text-decoration);\n    text-transform: var(--cre8-typography-title-large-text-transform);\n  }\n}\n\n.cre8-c-accordion-item__body {\n  margin-right: 0rem;\n  margin-left: 0rem;\n  padding: 0rem;\n  overflow: hidden;\n  visibility: hidden;\n  transition: height var(--cre8-anim-fade-quick) var(--cre8-anim-ease), visibility var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__body {\n  visibility: visible;\n}\n\n.cre8-c-accordion-item__body-inner {\n  display: flex;\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  padding: 0.5rem 3rem 0rem 0.5rem;\n}\n\ncre8-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.5rem;\n  min-height: 1.5rem;\n  min-width: 1.5rem;\n  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  width: 1.5rem;\n}\n.cre8-c-accordion-item.cre8-is-active cre8-icon {\n  transform: rotate(180deg);\n}\n\n.cre8-c-accordion-item__icon {\n  align-items: center;\n  background: var(--cre8-color-bg-brand-strong);\n  border-radius: var(--cre8-border-radius-round);\n  color: var(--cre8-color-content-knockout);\n  display: flex;\n  height: 2rem;\n  justify-content: center;\n  margin-left: 0.5rem;\n  margin-right: 0.125rem;\n  min-height: 2rem;\n  min-width: 2rem;\n  width: 2rem;\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon {\n  background: var(--cre8-color-button-secondary-bg);\n  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-button-secondary-border);\n  color: var(--cre8-color-button-secondary-content);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:hover {\n  border-color: var(--cre8-color-button-secondary-border-hover);\n  background-color: var(--cre8-color-button-secondary-bg-hover);\n  color: var(--cre8-color-button-secondary-content-hover);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus {\n  border-radius: var(--cre8-border-radius-default);\n  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);\n  outline: none;\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-secondary-border-active);\n  color: var(--cre8-color-button-secondary-content-active);\n  background-color: var(--cre8-color-button-secondary-bg-active);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-active);\n  background-color: var(--cre8-color-bg-transparent);\n}\n\n.cre8-c-accordion-item__button {\n  color: var(--cre8-color-content-default);\n  display: block;\n  appearance: none;\n  background-color: var(--cre8-color-bg-transparent);\n  border: var(--cre8-border-width-none);\n  cursor: pointer;\n  padding: 0.25rem 0.5rem;\n  overflow-x: hidden;\n  transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  width: 100%;\n}\n.cre8-c-accordion-item__button.cre8-brand-color {\n  color: var(--cre8-color-content-brand-strong);\n}\n.cre8-c-accordion-item__button.cre8-u-justify-content-start {\n  justify-content: flex-start;\n}\n.cre8-c-accordion-item__button.cre8-u-justify-content-start .cre8-c-accordion-item__icon-before {\n  margin-left: 0rem;\n}\n.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-primary-border-hover);\n  background-color: var(--cre8-color-button-primary-bg-hover);\n  color: var(--cre8-color-button-primary-content-hover);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-secondary-border-hover);\n  background-color: var(--cre8-color-button-secondary-bg-hover);\n  color: var(--cre8-color-button-secondary-content-hover);\n}\n.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-hover);\n  background-color: var(--cre8-color-bg-transparent);\n}\n.cre8-c-accordion-item__button:focus {\n  border-radius: var(--cre8-border-radius-default);\n  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);\n  outline: none;\n}\n.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-primary-border-active);\n  color: var(--cre8-color-button-primary-content-active);\n  background-color: var(--cre8-color-button-primary-bg-active);\n}\n.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-active);\n  background-color: var(--cre8-color-bg-transparent);\n}\n\n.cre8-c-accordion-item--icon-before .cre8-c-accordion-item__body {\n  margin-left: 2.5rem;\n}\n\n.cre8-c-accordion-item__icon-before {\n  margin-right: 0.75rem;\n}\n.cre8-c-accordion-item__icon-before h4[slot=header] {\n  display: block;\n  pointer-events: none;\n}\n\n.cre8-c-accordion-item__button slot {\n  display: contents;\n  text-align: initial;\n}\n\n.cre8-c-accordion-item--icon-before-heading-text {\n  display: flex;\n  text-align: left;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  min-width: 100%;\n}\n\n.cre8-c-accordion-item--icon-after-heading-text {\n  display: flex;\n  text-align: left;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  min-width: 100%;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8yBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/**\n* Accordion Item panel button\n* 1) Icon rotating on open was causing scrollbar to continuously appear/disappear\n*    during the animation, overflow-x: hidden; prevents this from happening\n*/\n:host {\n  display: block;\n}\n:host ::slotted(*) {\n  text-align: left;\n  width: 100%;\n}\n\n.cre8-c-accordion-item {\n  border-bottom: var(--cre8-accordion-item-border-bottom);\n  border-radius: var(--cre8-border-radius-none);\n  --cre8-u-icon-display: flex;\n  --cre8-u-icon-align-items: center;\n  --cre8-u-icon-justify-content: center;\n  padding: var(--cre8-padding-24) var(--cre8-padding-8);\n}\n\n.cre8-c-accordion-item--small cre8-heading button {\n  font-family: var(--cre8-typography-title-default-mobile-font-family);\n  font-size: var(--cre8-typography-title-default-mobile-font-size);\n  font-weight: var(--cre8-typography-title-default-mobile-font-weight);\n  line-height: var(--cre8-typography-title-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-accordion-item--small cre8-heading button {\n    font-family: var(--cre8-typography-title-default-font-family);\n    font-size: var(--cre8-typography-title-default-font-size);\n    font-weight: var(--cre8-typography-title-default-font-weight);\n    line-height: var(--cre8-typography-title-default-line-height);\n    text-decoration: var(--cre8-typography-title-default-text-decoration);\n    text-transform: var(--cre8-typography-title-default-text-transform);\n  }\n}\n\n.cre8-c-accordion-item--large cre8-heading button {\n  font-family: var(--cre8-typography-title-large-mobile-font-family);\n  font-size: var(--cre8-typography-title-large-mobile-font-size);\n  font-weight: var(--cre8-typography-title-large-mobile-font-weight);\n  line-height: var(--cre8-typography-title-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-accordion-item--large cre8-heading button {\n    font-family: var(--cre8-typography-title-large-font-family);\n    font-size: var(--cre8-typography-title-large-font-size);\n    font-weight: var(--cre8-typography-title-large-font-weight);\n    line-height: var(--cre8-typography-title-large-line-height);\n    text-decoration: var(--cre8-typography-title-large-text-decoration);\n    text-transform: var(--cre8-typography-title-large-text-transform);\n  }\n}\n\n.cre8-c-accordion-item__body {\n  margin-right: 0;\n  margin-left: 0;\n  padding: 0;\n  overflow: hidden;\n  visibility: hidden;\n  transition: height var(--cre8-anim-fade-quick) var(--cre8-anim-ease), visibility var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__body {\n  visibility: visible;\n}\n\n.cre8-c-accordion-item__body-inner {\n  display: flex;\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  padding: var(--cre8-padding-8) var(--cre8-spacing-48) 0 var(--cre8-padding-8);\n}\n\ncre8-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.5rem;\n  min-height: 1.5rem;\n  min-width: 1.5rem;\n  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  width: 1.5rem;\n}\n.cre8-c-accordion-item.cre8-is-active cre8-icon {\n  transform: rotate(180deg);\n}\n\n.cre8-c-accordion-item__icon {\n  align-items: center;\n  background: var(--cre8-color-bg-brand-strong);\n  border-radius: var(--cre8-border-radius-round);\n  color: var(--cre8-color-content-knockout);\n  display: flex;\n  height: 2rem;\n  justify-content: center;\n  margin-left: var(--cre8-spacing-8);\n  margin-right: var(--cre8-spacing-2);\n  min-height: 2rem;\n  min-width: 2rem;\n  width: 2rem;\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon {\n  background: var(--cre8-color-button-secondary-bg);\n  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-button-secondary-border);\n  color: var(--cre8-color-button-secondary-content);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:hover {\n  border-color: var(--cre8-color-button-secondary-border-hover);\n  background-color: var(--cre8-color-button-secondary-bg-hover);\n  color: var(--cre8-color-button-secondary-content-hover);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus {\n  border-radius: var(--cre8-border-radius-default);\n  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);\n  outline: none;\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-secondary-border-active);\n  color: var(--cre8-color-button-secondary-content-active);\n  background-color: var(--cre8-color-button-secondary-bg-active);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-active);\n  background-color: var(--cre8-color-bg-transparent);\n}\n\n.cre8-c-accordion-item__button {\n  color: var(--cre8-color-content-default);\n  display: block;\n  appearance: none;\n  background-color: var(--cre8-color-bg-transparent);\n  border: var(--cre8-border-width-none);\n  cursor: pointer;\n  padding: var(--cre8-padding-4) var(--cre8-padding-8);\n  overflow-x: hidden;\n  transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  width: 100%;\n}\n.cre8-c-accordion-item__button.cre8-brand-color {\n  color: var(--cre8-color-content-brand-strong);\n}\n.cre8-c-accordion-item__button.cre8-u-justify-content-start {\n  justify-content: flex-start;\n}\n.cre8-c-accordion-item__button.cre8-u-justify-content-start .cre8-c-accordion-item__icon-before {\n  margin-left: 0;\n}\n.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-primary-border-hover);\n  background-color: var(--cre8-color-button-primary-bg-hover);\n  color: var(--cre8-color-button-primary-content-hover);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-secondary-border-hover);\n  background-color: var(--cre8-color-button-secondary-bg-hover);\n  color: var(--cre8-color-button-secondary-content-hover);\n}\n.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-hover);\n  background-color: var(--cre8-color-bg-transparent);\n}\n.cre8-c-accordion-item__button:focus {\n  border-radius: var(--cre8-border-radius-default);\n  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);\n  outline: none;\n}\n.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-primary-border-active);\n  color: var(--cre8-color-button-primary-content-active);\n  background-color: var(--cre8-color-button-primary-bg-active);\n}\n.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-active);\n  background-color: var(--cre8-color-bg-transparent);\n}\n\n.cre8-c-accordion-item--icon-before .cre8-c-accordion-item__body {\n  margin-left: var(--cre8-spacing-40);\n}\n\n.cre8-c-accordion-item__icon-before {\n  margin-right: var(--cre8-spacing-12);\n}\n.cre8-c-accordion-item__icon-before h4[slot=header] {\n  display: block;\n  pointer-events: none;\n}\n\n.cre8-c-accordion-item__button slot {\n  display: contents;\n  text-align: initial;\n}\n\n.cre8-c-accordion-item--icon-before-heading-text {\n  display: flex;\n  text-align: left;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  min-width: 100%;\n}\n\n.cre8-c-accordion-item--icon-after-heading-text {\n  display: flex;\n  text-align: left;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  min-width: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/badge/badge.styles.js

@@ -631,7 +631,7 @@ span.ripple {
 */
 cre8-icon {
   height: var(--cre8-icon-height, 1rem);
-  margin-right: 0.25rem;
+  margin-right: var(--cre8-spacing-4);
 }
 
 /**

package/lib/components/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAktBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: inline-flex;\n}\n\n/**\n * 1) Badges are blocks of color with text inside used for messaging\n */\n.cre8-c-badge {\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n  display: inline-flex;\n  border-radius: var(--cre8-border-radius-badge);\n  padding: var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);\n  color: var(--cre8-color-content-knockout);\n  background-color: var(--cre8-color-bg-strong);\n  align-items: center;\n}\n\n/**\n * Success badge\n */\n.cre8-c-badge--success {\n  background-color: var(--cre8-color-bg-success-strong);\n}\n\n/**\n * Warning badge\n */\n.cre8-c-badge--warning {\n  background-color: var(--cre8-color-bg-warning-strong);\n  color: var(--cre8-color-content-default);\n}\n\n/**\n* Creating space between icon and text\n*/\ncre8-icon {\n  height: var(--cre8-icon-height, 1rem);\n  margin-right: 0.25rem;\n}\n\n/**\n * Error badge\n */\n.cre8-c-badge--error {\n  background-color: var(--cre8-color-bg-error-strong);\n}\n\n/**\n * Info badge\n */\n.cre8-c-badge--info {\n  background-color: var(--cre8-color-bg-info-strong);\n}\n\n/**\n * Attention badge\n */\n.cre8-c-badge--attention {\n  background-color: var(--cre8-color-bg-attention-strong);\n}\n\n/**\n * Light neutral (default) badge\n */\n.cre8-c-badge--light {\n  background-color: var(--cre8-color-bg-subtle);\n  color: var(--cre8-color-content-default);\n}\n\n/**\n * Light Success badge\n */\n.cre8-c-badge--light.cre8-c-badge--success {\n  background-color: var(--cre8-color-bg-success);\n  color: var(--cre8-color-content-success);\n}\n\n/**\n * Light Warning badge\n */\n.cre8-c-badge--light.cre8-c-badge--warning {\n  background-color: var(--cre8-color-bg-warning);\n}\n\n/**\n * Light Error badge\n */\n.cre8-c-badge--light.cre8-c-badge--error {\n  background-color: var(--cre8-color-bg-error);\n  color: var(--cre8-color-content-error);\n}\n\n/**\n * Light Info badge\n */\n.cre8-c-badge--light.cre8-c-badge--info {\n  background-color: var(--cre8-color-bg-info);\n}\n\n/**\n * Light Attention badge\n */\n.cre8-c-badge--light.cre8-c-badge--attention {\n  background-color: var(--cre8-color-bg-attention);\n}\n\n/**\n * White neutral (default) badge\n */\n.cre8-c-badge--white {\n  background-color: var(--cre8-color-bg-default);\n  color: var(--cre8-color-content-default);\n}\n\n/**\n * White Success badge\n */\n.cre8-c-badge--white.cre8-c-badge--success {\n  color: var(--cre8-color-content-success);\n}\n\n/**\n * White Error badge\n */\n.cre8-c-badge--white.cre8-c-badge--error {\n  background-color: none;\n  color: var(--cre8-color-content-error);\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAktBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: inline-flex;\n}\n\n/**\n * 1) Badges are blocks of color with text inside used for messaging\n */\n.cre8-c-badge {\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n  display: inline-flex;\n  border-radius: var(--cre8-border-radius-badge);\n  padding: var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);\n  color: var(--cre8-color-content-knockout);\n  background-color: var(--cre8-color-bg-strong);\n  align-items: center;\n}\n\n/**\n * Success badge\n */\n.cre8-c-badge--success {\n  background-color: var(--cre8-color-bg-success-strong);\n}\n\n/**\n * Warning badge\n */\n.cre8-c-badge--warning {\n  background-color: var(--cre8-color-bg-warning-strong);\n  color: var(--cre8-color-content-default);\n}\n\n/**\n* Creating space between icon and text\n*/\ncre8-icon {\n  height: var(--cre8-icon-height, 1rem);\n  margin-right: var(--cre8-spacing-4);\n}\n\n/**\n * Error badge\n */\n.cre8-c-badge--error {\n  background-color: var(--cre8-color-bg-error-strong);\n}\n\n/**\n * Info badge\n */\n.cre8-c-badge--info {\n  background-color: var(--cre8-color-bg-info-strong);\n}\n\n/**\n * Attention badge\n */\n.cre8-c-badge--attention {\n  background-color: var(--cre8-color-bg-attention-strong);\n}\n\n/**\n * Light neutral (default) badge\n */\n.cre8-c-badge--light {\n  background-color: var(--cre8-color-bg-subtle);\n  color: var(--cre8-color-content-default);\n}\n\n/**\n * Light Success badge\n */\n.cre8-c-badge--light.cre8-c-badge--success {\n  background-color: var(--cre8-color-bg-success);\n  color: var(--cre8-color-content-success);\n}\n\n/**\n * Light Warning badge\n */\n.cre8-c-badge--light.cre8-c-badge--warning {\n  background-color: var(--cre8-color-bg-warning);\n}\n\n/**\n * Light Error badge\n */\n.cre8-c-badge--light.cre8-c-badge--error {\n  background-color: var(--cre8-color-bg-error);\n  color: var(--cre8-color-content-error);\n}\n\n/**\n * Light Info badge\n */\n.cre8-c-badge--light.cre8-c-badge--info {\n  background-color: var(--cre8-color-bg-info);\n}\n\n/**\n * Light Attention badge\n */\n.cre8-c-badge--light.cre8-c-badge--attention {\n  background-color: var(--cre8-color-bg-attention);\n}\n\n/**\n * White neutral (default) badge\n */\n.cre8-c-badge--white {\n  background-color: var(--cre8-color-bg-default);\n  color: var(--cre8-color-content-default);\n}\n\n/**\n * White Success badge\n */\n.cre8-c-badge--white.cre8-c-badge--success {\n  color: var(--cre8-color-content-success);\n}\n\n/**\n * White Error badge\n */\n.cre8-c-badge--white.cre8-c-badge--error {\n  background-color: none;\n  color: var(--cre8-color-content-error);\n}`;\nexport default styles;\n"]}

package/lib/components/band/band.styles.js

@@ -604,11 +604,11 @@ span.ripple {
  */
 .cre8-c-band {
   background: var(--cre8-color-bg-subtle);
-  padding: 1.5rem 0;
+  padding: var(--cre8-padding-24) 0;
 }
 @media all and (min-width: 1200px) {
   .cre8-c-band {
-    padding: 2rem 0;
+    padding: var(--cre8-spacing-32) 0;
   }
 }
 

package/lib/components/band/band.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"band.styles.js","sourceRoot":"","sources":["../../../components/band/band.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmnBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/**\n * 1) Custom elements default to \\`display: inline\\`, which makes the host a text\n * box and lets its children flow like inline content. Every layout rule below\n * lives on a wrapper inside the shadow root, so without this the host itself\n * never takes part in block layout.\n */\n:host {\n  display: block;\n}\n\n/**\n * 1) A container with a background that can house various recipes of Components within\n */\n.cre8-c-band {\n  background: var(--cre8-color-bg-subtle);\n  padding: 1.5rem 0;\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-band {\n    padding: 2rem 0;\n  }\n}\n\n/**\n * Branded variant\n */\n.cre8-c-band--branded {\n  color: var(--cre8-color-content-knockout);\n  background: var(--cre8-theme-color-utility-information);\n}\n\n/**\n * Full height\n * 1) Height set to 100% to fill a container like a sidebar\n */\n.cre8-c-band--full-height {\n  height: 100%;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"band.styles.js","sourceRoot":"","sources":["../../../components/band/band.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmnBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/**\n * 1) Custom elements default to \\`display: inline\\`, which makes the host a text\n * box and lets its children flow like inline content. Every layout rule below\n * lives on a wrapper inside the shadow root, so without this the host itself\n * never takes part in block layout.\n */\n:host {\n  display: block;\n}\n\n/**\n * 1) A container with a background that can house various recipes of Components within\n */\n.cre8-c-band {\n  background: var(--cre8-color-bg-subtle);\n  padding: var(--cre8-padding-24) 0;\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-band {\n    padding: var(--cre8-spacing-32) 0;\n  }\n}\n\n/**\n * Branded variant\n */\n.cre8-c-band--branded {\n  color: var(--cre8-color-content-knockout);\n  background: var(--cre8-theme-color-utility-information);\n}\n\n/**\n * Full height\n * 1) Height set to 100% to fill a container like a sidebar\n */\n.cre8-c-band--full-height {\n  height: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/breadcrumbs/breadcrumbs.styles.js

@@ -602,7 +602,7 @@ span.ripple {
   margin: 0;
   padding: 0;
   list-style: none;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
 }`;
 export default styles;
 //# sourceMappingURL=breadcrumbs.styles.js.map

package/lib/components/breadcrumbs/breadcrumbs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.styles.js","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4lBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: inline-flex;\n}\n\n/**\n * 1) An ordered list of navigational hierarchy showing the user where they are on the site\n */\n.cre8-c-breadcrumbs__list {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  gap: 0.5rem;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"breadcrumbs.styles.js","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4lBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: inline-flex;\n}\n\n/**\n * 1) An ordered list of navigational hierarchy showing the user where they are on the site\n */\n.cre8-c-breadcrumbs__list {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  gap: var(--cre8-spacing-8);\n}`;\nexport default styles;\n"]}

package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.js

@@ -611,7 +611,7 @@ span.ripple {
 * Breadcrumbs icon
 */
 cre8-icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   color: var(--cre8-color-content-subtle);
   display: inline-flex;
 }