@spteck/react-controls-v2 2.6.2 → 2.6.4

package/README.md

@@ -1,6 +1,8 @@
 # @spteck/react-controls-v2
 
-A comprehensive, framework-agnostic React component library built on **Fluent UI 9**, designed for enterprise applications. Works seamlessly with **Vite**, **Next.js**, **Create React App**, and **SharePoint Framework (SPFx)**.
+**v2.6.3** — A comprehensive, framework-agnostic React component library built on **Fluent UI 9**, designed for enterprise applications. Works seamlessly with **Vite**, **Next.js**, **Create React App**, and **SharePoint Framework (SPFx)**.
+
+> 🔗 **Live Showcase & Docs:** [reactcontrols.spteckapps.com](https://reactcontrols.spteckapps.com)
 
 ---
 
@@ -16,6 +18,8 @@ A comprehensive, framework-agnostic React component library built on **Fluent UI
 - **Accessible** — WCAG-compliant via Fluent UI
 - **Adaptive Cards** — Full Adaptive Cards rendering with Fluent UI styling
 - **AI Components** — Chat assistant and AI-powered search out of the box
+- **Rich Text Editing** — TipTap-based editor with full formatting toolbar
+- **Export Utilities** — One-hook Excel / CSV / JSON export with async paginated fetchers
 
 ---
 
@@ -95,31 +99,49 @@ If you are also using app context and localization, the recommended provider ord
 
 | Component | Description |
 |-----------|-------------|
-| `Stack` | Flexbox horizontal/vertical layout with alignment and gap |
-| `StackV2` | Extended stack with responsive spacing, alignment, and wrapping |
+| `StackV2` | Extended flexbox stack with responsive spacing, alignment, and wrapping |
 | `Grid` | CSS Grid layout with responsive columns and auto-flow |
 | `Layout` | Named grid-area template layout (e.g., Holy Grail) |
-| `Card` | Fluent UI Card with header, body, footer and preview |
+| `Card` | Fluent UI Card with header, body, footer, and preview slots |
 | `Space` | Inline spacing / visual gap utility |
 | `AspectRatio` | Constrain content to a fixed aspect ratio |
 | `Center` | Center content horizontally and/or vertically |
 | `Container` | Responsive max-width container |
 | `Carousel` | Horizontally scrollable item carousel |
+| `SplitPane` | Resizable two-pane split layout |
 | `Popup` | Floating popover / popup panel |
 
+### Hero
+
+| Component | Description |
+|-----------|-------------|
+| `Hero` | Full-bleed media hero with 7 layouts: fullscreen, split, featured, mosaic, grid, filmstrip, and carousel. Supports image and video items with optional overlays. |
+
 ### Forms & Input
 
 | Component | Description |
 |-----------|-------------|
-| `SelectDate` | Date picker with calendar dropdown |
-| `SelectTime` | Time picker with configurable intervals |
-| `SelectView` | View mode switcher (list, grid, compact) |
 | `InputField` | Text input with validation and labels |
 | `DropdownField` | Drop-down select with validation, custom rendering, default value, and message support |
 | `SearchControl` | Search box with filtering |
+| `CalendarControl` | Full calendar with month, week, and day views |
+| `CompactCalendar` | Compact inline date picker |
+| `SelectTime` | Time picker with configurable intervals |
+| `SelectView` | View mode switcher (list, grid, compact) |
 | `IconButton` | Icon-only button with tooltip |
-| `ItemPicker` | Tag-based item picker with suggestions |
-| `CalendarControl` | Full calendar with month, week and day views |
+| `ItemPicker` | Tag-based item picker with suggestions and paging |
+| `Spotlight` | Command palette overlay with search, keyboard navigation, grouped actions, and configurable shortcuts |
+| `Dropzone` | Drag-and-drop file upload with MIME-type filtering, size limits, and preview |
+| `RichTextEditor` | TipTap-based editor with formatting toolbar, links, colours, image upload, and more |
+| `OTPField` | One-time password / PIN input field |
+| `Mentions` | @mention input with suggestions |
+
+### Pickers
+
+| Component | Description |
+|-----------|-------------|
+| `ColorPicker` | Sketch, Chrome, Colorful, Wheel, Circle, Compact, Block, Material, Github, and Slider pickers |
+| `EmojiPicker` | Self-contained emoji picker popup with category tabs, search, and configurable dimensions |
 
 ### Data Display
 
@@ -127,7 +149,9 @@ If you are also using app context and localization, the recommended provider ord
 |-----------|-------------|
 | `DataGrid` | Sortable, selectable, resizable data table |
 | `DataGridV2` | Virtualized high-performance data grid with infinite scroll, sorting, resizing, row selection, and imperative handle API |
-| `KPICard` | Key performance indicator card (default and compact) |
+| `KPICard` | Key performance indicator card (default and compact variants) |
+| `KPICardCompact` | Compact KPI card for dense dashboards |
+| `Skeleton` | Auto-extracting skeleton screens with pixel-perfect placeholders |
 
 ### Navigation
 
@@ -137,6 +161,8 @@ If you are also using app context and localization, the recommended provider ord
 | `Breadcrumb` | Navigation breadcrumb with overflow support |
 | `ButtonMenu` | Button with a dropdown list of options |
 | `CustomControlBar` | Configurable toolbar for custom actions |
+| `GenericOverFlowMenu` | Overflow-aware menu that collapses items automatically |
+| `ListToolbar` | SharePoint-style list action toolbar |
 
 ### Dialogs & Overlays
 
@@ -145,6 +171,8 @@ If you are also using app context and localization, the recommended provider ord
 | `RenderDialog` | Fluent UI modal dialog with title and actions |
 | `RenderDrawer` | Side-panel drawer (start or end position) |
 | `RenderHeader` | StackV2-based header with icon, title, description, and optional close button |
+| `Popup` | Floating popover panel |
+| `ShareDialog` | Share link / people picker dialog |
 
 ### Feedback & Status
 
@@ -154,14 +182,22 @@ If you are also using app context and localization, the recommended provider ord
 | `ShowMessage` | Info / success / warning status banner |
 | `RenderSpinner` | Loading spinner |
 
-### Typography
+### Typography & Content
 
 | Component | Description |
 |-----------|-------------|
-| `TypographyControl` | Fluent-styled text with variant, size and color support |
+| `TypographyControl` | Fluent-styled text with variant, size, weight, and colour support |
 | `RenderLabel` | Field label with optional required indicator |
 | `MarkdownRenderer` | Converts Markdown to styled HTML |
 | `ContentRenderer` | Auto-detects and renders Markdown, HTML, Adaptive Cards, or plain text |
+| `MermaidDiagram` | Renders Mermaid diagram syntax as SVG |
+| `Blockquote` | Styled quotation block with icon badge and semantic colours |
+| `Marquee` | Infinitely scrolling content strip with configurable direction, speed, pause-on-hover, and fade edges |
+| `Spoiler` | Toggle visibility of long content with show/hide control and smooth collapse animation |
+| `Timeline` | Vertical timeline with active state tracking, custom bullets, line variants, and configurable alignment |
+| `Stepper` | Progress through a sequence of steps with active highlighting, custom icons, and completed-state content |
+| `InlineSVG` | Load, sanitize, and render SVG from URLs, data URIs, and raw markup |
+| `BackgroundImage` | Full-width background images with cover sizing and overlay support |
 
 ### Media & Content
 
@@ -178,34 +214,32 @@ If you are also using app context and localization, the recommended provider ord
 | `UserCard` | User persona with live presence status from Graph API |
 | `LivePersona` | Persona wrapper with SPFx hover card support |
 | `StackedUsers` | Overlapping avatar stack for groups of users |
-| `ListItemActivityMessage` | SharePoint list item activity/audit trail |
+| `ListItemActivityMessage` | SharePoint list item activity / audit trail |
 
-### AI & Advanced
-
-| Component | Description |
-|-----------|-------------|
-| `AIAssistant` | Full streaming AI chat assistant |
-| `AISearchControl` | Natural language search powered by Azure OpenAI |
 
 ### Hooks
 
 | Hook | Description |
 |------|-------------|
 | `useApplicationContext()` | Access application context anywhere inside `UniversalProvider` |
-| `useGraphAPI()` | Make Microsoft Graph API calls with built-in error handling |
-| `useLogging()` | Structured logging via the configured provider |
-| `useIndexedDBCache()` | IndexedDB-based caching with TTL support |
-| `usePolling(fn, interval)` | Repeatedly call a function at a fixed interval |
-| `useTimeZoneHelper()` | Format and convert dates across time zones |
+| `useAppToast()` | Consolidated toast notifications — success, error, warning, info, action buttons, and programmatic dismiss |
+| `useExportData()` | Export data to Excel, JSON, and CSV with optional header styling, async paginated fetchers, and a built-in progress dialog |
+| `useFluentEmoji()` | Resolve reaction types to Fluent emoji image URLs with style and skin-tone support |
+| `useIndexedDBCache()` | IndexedDB-backed caching with TTL support |
+| `useLogging()` | Structured logging with info, warn, error, and verbose — pluggable transport via `UniversalProvider` |
+| `usePolling(fn, interval)` | Repeatedly call a function at a fixed interval with manual start/stop control |
+| `useTimeZoneHelper()` | DST-safe timezone conversions and locale-aware date/time formatting |
+| `useBrandCenterFonts()` | Load and apply brand fonts from the Microsoft Brand Center |
 
 ### Core & Utilities
 
-| Component | Description |
-|-----------|-------------|
-| `UniversalProvider` | Root context provider for the whole app |
-| `FluentUIProvider` | Fluent UI theme root with portal styling and scoped IDs |
-| `BaseComponentProps` | Shared responsive spacing/sizing interface |
-| `LocalStorageProvider` | `IStorageProvider` implementation using localStorage |
+| Item | Description |
+|------|-------------|
+| `UniversalProvider` | Root context provider — supplies app context, logging, storage, and Graph client |
+| `FluentUIProvider` | Fluent UI theme root with portal styling and scoped generated IDs |
+| `LocalizationProvider` | Locale-aware date / number / string formatting provider |
+| `BaseComponentProps` | Shared responsive spacing and sizing interface |
+| `LocalStorageProvider` | `IStorageProvider` implementation using `localStorage` |
 
 ---
 

package/dist/index.cjs

@@ -487,5 +487,5 @@ import { AISearchIcon } from './AISearchIcon';
         rgba(0,0,0,${e}) 0%,
         rgba(0,0,0,${parseFloat((e*.3).toFixed(2))}) 55%,
         rgba(0,0,0,0) 100%
-      )`,zIndex:0}),overlayContent:e=>{let{justify:t,align:n,textAlign:i}=DS[e]??DS[`bottom-left`];return(0,f.css)({position:`relative`,flex:1,display:`flex`,flexDirection:`column`,justifyContent:t,alignItems:n,textAlign:i,zIndex:1,padding:o.tokens.spacingHorizontalXL,paddingBottom:r===`video`?`74px`:o.tokens.spacingHorizontalL,gap:o.tokens.spacingVerticalS,pointerEvents:`none`})},fullscreenRoot:(0,f.css)({width:`100%`,height:`100%`,overflow:`hidden`}),splitRoot:(0,f.css)({display:`grid`,gridTemplateColumns:n<576?`1fr`:`1fr 1fr`,gap:o.tokens.spacingHorizontalS,width:`100%`,height:`100%`,overflow:`hidden`}),featuredRoot:(0,f.css)({display:`grid`,gridTemplateColumns:n<576?`1fr`:`2fr 1fr`,gap:o.tokens.spacingHorizontalS,width:`100%`,height:`100%`,overflow:`hidden`}),mosaicWrapper:(0,f.css)({width:`100%`,height:n<576?`auto`:`100%`,gap:o.tokens.spacingHorizontalS,overflow:n<576?`visible`:`hidden`}),mosaicPrimary:(0,f.css)({flex:n<576?`none`:`3 0 0`,minWidth:0,width:`100%`,height:n<576?`260px`:`100%`}),mosaicRightGrid:e=>{let t=n>=1100&&e>=3,r=n<576?`1fr`:t?`1fr 1fr`:`1fr`,i=n<576?void 0:e===1?`1fr`:t?`1fr 1fr`:`repeat(${e}, 1fr)`;return(0,f.css)({flex:n<576?`none`:`2 0 0`,width:n<576?`100%`:void 0,minWidth:0,display:`grid`,gap:o.tokens.spacingHorizontalS,gridTemplateColumns:r,gridTemplateRows:i,height:n<576?`auto`:`100%`})},mosaicSpanFull:(0,f.css)({gridColumn:`1 / -1`}),mosaicMarqueeLane:(0,f.css)({flex:n<576?`none`:`2 0 0`,minWidth:0,height:n<576?`320px`:`100%`,overflow:`hidden`}),mosaicMarqueeItem:(0,f.css)({flex:`0 0 auto`,minHeight:n<576?`160px`:`120px`}),mosaicScrollLane:(0,f.css)({flex:n<576?`none`:`2 0 0`,minWidth:0,height:n<576?`320px`:`100%`,overflowY:`auto`,overflowX:`hidden`,scrollbarWidth:`thin`,scrollbarColor:`${o.tokens.colorBrandBackground} transparent`,display:`flex`,flexDirection:`column`,gap:`8px`,"&::-webkit-scrollbar":{width:`4px`},"&::-webkit-scrollbar-track":{background:`transparent`},"&::-webkit-scrollbar-thumb":{background:o.tokens.colorBrandBackground,borderRadius:`999px`}}),gridRoot:(0,f.css)({display:`grid`,gridTemplateColumns:`repeat(${n>=1200?4:n>=992?3:n>=576?2:1}, 1fr)`,gap:o.tokens.spacingHorizontalS,width:`100%`}),filmstripRoot:(0,f.css)({display:`flex`,flexDirection:`row`,gap:o.tokens.spacingHorizontalM,overflowX:`auto`,width:`100%`,scrollSnapType:`x mandatory`,scrollbarWidth:`none`,"::-webkit-scrollbar":{display:`none`},paddingBottom:o.tokens.spacingVerticalXS}),filmstripItem:(0,f.css)({flex:`0 0 ${n>=1200?`400px`:n>=992?`340px`:n>=576?`280px`:`220px`}`,scrollSnapAlign:`start`}),carouselWrapper:(0,f.css)({width:`100%`,overflow:`hidden`})}};function kS(e){try{let t=new URL(e);if(t.hostname.includes(`youtube.com`))return{kind:`youtube`,id:t.searchParams.get(`v`)??``};if(t.hostname.includes(`youtu.be`))return{kind:`youtube`,id:t.pathname.slice(1).split(`?`)[0]};if(t.hostname.includes(`vimeo.com`))return{kind:`vimeo`,id:t.pathname.replace(/^\//,``).split(`/`)[0]}}catch{}return{kind:`file`,id:``}}var AS={position:`absolute`,inset:0,overflow:`hidden`,pointerEvents:`none`},jS={position:`absolute`,top:`50%`,left:`50%`,width:`auto`,height:`auto`,minWidth:`100%`,minHeight:`100%`,aspectRatio:`16 / 9`,transform:`translate(-50%, -50%)`,border:`none`,pointerEvents:`none`},MS=({src:e,loop:t=!0,title:r=`background video`})=>{let i=kS(e);if(i.kind===`youtube`&&i.id){let e=i.id;return(0,n.jsx)(`div`,{style:AS,children:(0,n.jsx)(`iframe`,{src:`https://www.youtube.com/embed/${e}?autoplay=1&mute=1${t?`&loop=1&playlist=${e}`:``}&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&playsinline=1&enablejsapi=1`,allow:`autoplay; encrypted-media`,title:r,style:jS})})}if(i.kind===`vimeo`&&i.id){let e=t?`&loop=1`:``;return(0,n.jsx)(`div`,{style:AS,children:(0,n.jsx)(`iframe`,{src:`https://player.vimeo.com/video/${i.id}?autoplay=1&muted=1${e}&background=1&byline=0&title=0&portrait=0`,allow:`autoplay; fullscreen`,title:r,style:jS})})}return(0,n.jsx)(`video`,{src:e,autoPlay:!0,loop:t,muted:!0,playsInline:!0,title:r,style:{position:`absolute`,inset:0,width:`100%`,height:`100%`,objectFit:`cover`,pointerEvents:`none`}})};MS.displayName=`BackgroundVideo`;var NS=t.memo(({item:e,heroProps:t,containerWidth:r,mediaType:i=`image`})=>{let{title:a,description:s,callToActionLabel:c,callToActionUrl:l,textPosition:u=`bottom-left`,overlayOpacity:d=.45}=e,f=a||s||c,{overlayRoot:p,overlayScrim:m,overlayContent:h}=OS(t,r,i);return f?(0,n.jsxs)(H,{className:p,children:[(0,n.jsx)(H,{className:m(d),"aria-hidden":`true`}),(0,n.jsxs)(H,{className:h(u),children:[(a||s)&&(0,n.jsxs)(`div`,{style:{overflow:`hidden`,flex:`0 1 auto`,minHeight:0,display:`flex`,flexDirection:`column`,gap:`6px`},children:[a&&(0,n.jsx)(Cd,{fontSize:`l`,fontWeight:`bold`,numberOfLines:2,truncate:!0,style:{textShadow:`0 1px 4px rgba(0,0,0,0.65)`,margin:0},children:a}),s&&(0,n.jsx)(Cd,{fontSize:`s`,numberOfLines:2,style:{textShadow:`0 1px 3px rgba(0,0,0,0.5)`,margin:0},children:s})]}),c&&l&&(0,n.jsx)(o.Button,{appearance:`primary`,as:`a`,href:l,target:`_blank`,rel:`noopener noreferrer`,style:{flexShrink:0,pointerEvents:`auto`},children:c})]})]}):null});NS.displayName=`HeroOverlay`;var PS=t.memo(({item:e,heroProps:t,containerWidth:r,className:i,itemHeight:a})=>{let{item:s}=OS(t,r),c=a===void 0?`100%`:typeof a==`number`?`${a}px`:a,l=e.mediaType===`video`&&e.videoControls===!1&&e.autoPlay;return(0,n.jsx)(H,{className:(0,o.mergeClasses)(s,i),height:c,role:`region`,"aria-label":e.alt??e.title??e.src,children:e.mediaType===`image`?(0,n.jsx)(Ob,{src:e.src,style:{height:`100%`},children:(0,n.jsx)(NS,{item:e,heroProps:t,containerWidth:r})}):l?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(MS,{src:e.src,loop:e.loop,title:e.alt??e.title}),(0,n.jsx)(NS,{item:e,heroProps:t,containerWidth:r,mediaType:`image`})]}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(Ov,{url:e.src,width:`100%`,height:c,controls:e.videoControls!==!1,playing:e.autoPlay,loop:e.loop,muted:e.autoPlay,playsinline:!0}),(0,n.jsx)(NS,{item:e,heroProps:t,containerWidth:r,mediaType:e.videoControls===!1?`image`:`video`})]})})});PS.displayName=`HeroItem`;var FS=e=>({resolvedHeight:t.useMemo(()=>typeof e==`number`?`${e}px`:e,[e]),numericHeight:t.useMemo(()=>typeof e==`number`?e:parseInt(String(e),10)||480,[e]),mosaicHeight:t.useMemo(()=>typeof e==`number`?`${e+30}px`:`calc(${e} + 30px)`,[e])}),IS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let a=we(e,1,r.rotation),{resolvedHeight:o}=FS(t),s=a[0];return s?(0,n.jsx)(H,{width:`100%`,height:o,children:(0,n.jsx)(PS,{item:s,heroProps:r,containerWidth:i})}):null};IS.displayName=`HeroFullscreen`;var LS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{splitRoot:a}=OS(r,i),o=we(e,2,r.rotation),{resolvedHeight:s}=FS(t);return(0,n.jsx)(H,{className:a,height:s,children:o.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i},e.id))})};LS.displayName=`HeroSplit`;var RS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{featuredRoot:a}=OS(r,i),o=we(e,2,r.rotation),{resolvedHeight:s}=FS(t);return(0,n.jsx)(H,{className:a,height:s,children:o.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i},e.id))})};RS.displayName=`HeroFeatured`;var zS=({items:e,height:t,heroProps:r,containerWidth:i,mosaicOverflowMode:a=`marquee`})=>{let{mosaicWrapper:o,mosaicPrimary:s,mosaicRightGrid:c,mosaicSpanFull:l,mosaicScrollLane:u}=OS(r,i),{mosaicHeight:d}=FS(t),f=e.length>5,p=f?e:e.slice(0,5),m=p[0],h=p.slice(1),g=i<576;if(!m)return null;let _=g?160:180;return(0,n.jsxs)(H,{direction:g?`vertical`:`horizontal`,className:o,height:g?void 0:d,children:[(0,n.jsx)(PS,{item:m,heroProps:r,containerWidth:i,className:s,itemHeight:g?260:void 0}),h.length>0&&!f&&(0,n.jsx)(`div`,{className:c(h.length),children:h.map((e,t)=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:g?180:void 0,className:h.length===3&&t===2&&i>=1100?l:void 0},e.id))}),h.length>0&&f&&a===`marquee`&&(0,n.jsx)(`div`,{style:{flex:g?`none`:`2 0 0`,minWidth:0,height:g?`320px`:`100%`,overflow:`hidden`,scrollbarWidth:`none`},children:(0,n.jsx)(Sb,{orientation:`vertical`,duration:6e4,pauseOnHover:!0,repeat:2,gap:`spacingHorizontalS`,fadeEdgeSize:`8%`,children:h.map(e=>(0,n.jsx)(`div`,{style:{flex:`0 0 auto`,height:`${_}px`,width:`100%`},children:(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:_})},e.id))})}),h.length>0&&f&&a===`scroll`&&(0,n.jsx)(`div`,{className:u,children:h.map(e=>(0,n.jsx)(`div`,{style:{flex:`0 0 auto`,height:`${_}px`,width:`100%`},children:(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:_})},e.id))})]})};zS.displayName=`HeroMosaic`;var BS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{gridRoot:a}=OS(r,i),{resolvedHeight:o}=FS(t);return(0,n.jsx)(H,{className:a,children:e.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:o},e.id))})};BS.displayName=`HeroGrid`;var VS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{filmstripRoot:a,filmstripItem:o}=OS(r,i),{resolvedHeight:s}=FS(t);return(0,n.jsx)(H,{direction:`horizontal`,className:a,height:s,children:e.map(e=>(0,n.jsx)(H,{className:o,children:(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i})},e.id))})};VS.displayName=`HeroFilmstrip`;var HS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{carouselWrapper:a}=OS(r,i),{numericHeight:o}=FS(t),s=o-50;return(0,n.jsx)(H,{className:a,height:o,children:(0,n.jsx)(pd,{items:e.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:s},e.id)),height:o})})};HS.displayName=`HeroCarousel`;var US=`480px`,WS=e=>{let{items:r,layout:i=`fullscreen`,height:a=US,className:s}=e,c=t.useRef(null),[l,u]=t.useState(0),[p,m]=t.useState(0),{heroRootStyles:h}=OS(e,l);t.useEffect(()=>{let e;return c.current&&(e=new d.ResizeObserver(e=>{for(let t of e){let{width:e,height:n}=t.contentRect;u(e),m(n)}}),u(c.current.clientWidth),m(c.current.clientHeight),e.observe(c.current)),()=>{e&&e.disconnect()}},[]);let g=(0,f.css)({width:`100%`}),_={items:r,height:a,heroProps:e,containerWidth:l,mosaicOverflowMode:e.mosaicOverflowMode??`marquee`},v=()=>{switch(i){case`fullscreen`:return(0,n.jsx)(IS,{..._});case`split`:return(0,n.jsx)(LS,{..._});case`featured`:return(0,n.jsx)(RS,{..._});case`mosaic`:return(0,n.jsx)(zS,{..._});case`grid`:return(0,n.jsx)(BS,{..._});case`filmstrip`:return(0,n.jsx)(VS,{..._});case`carousel`:return(0,n.jsx)(HS,{..._});default:return(0,n.jsx)(IS,{..._})}},y=t.useMemo(()=>{let e=h(l,p);if(i===`grid`||i===`mosaic`&&l>0&&l<576){let{height:t,...n}=e;return n}return e},[h,l,p,i]);return(0,n.jsx)(H,{id:`-hero`,role:`region`,"aria-label":`Hero`,ref:c,className:(0,o.mergeClasses)(g,s),style:y,children:v()})};WS.displayName=`Hero`,exports.AIAssistant=$y,exports.AISearchControl=Ny,exports.AISearchIcon=ky,exports.AISearchIconExample=Fy,exports.AdaptiveCardHost=Sy,exports.AdaptiveCardHostThemeType=Wv,exports.AddColumnAfterControl=ag,exports.AddColumnBeforeControl=ig,exports.AddRowAfterControl=cg,exports.AddRowBeforeControl=sg,exports.AlignCenterControl=Hh,exports.AlignJustifyControl=Uh,exports.AlignLeftControl=Bh,exports.AlignRightControl=Vh,exports.AppDashboard=Ix,exports.AspectRatio=rd,exports.BackgroundImage=Ob,exports.Blockquote=mb,exports.BlockquoteControl=zh,exports.BoldControl=Th,exports.Breadcrumb=kd,exports.BulletListControl=jh,exports.ButtonMenu=Td,exports.CalendarControl=gf,exports.CalendarGrid=yf,exports.CalendarHeader=bf,exports.CalendarMonth=tf,exports.Card=Ju,exports.Carousel=pd,exports.Center=od,exports.ChatInput=Ly,exports.ChatInputWithMensions=Hy,exports.ChatInputWithMensionsV1=eb,exports.ChatList=Xy,exports.ChromeInputType=D_,exports.ClearFormattingControl=kh,exports.CodeBlockControl=qh,exports.CodeControl=Kh,exports.ColorPicker=X,exports.ColorPickerAlpha=g_,exports.ColorPickerBlock=G_,exports.ColorPickerChrome=M_,exports.ColorPickerCircle=B_,exports.ColorPickerColorful=N_,exports.ColorPickerCompact=U_,exports.ColorPickerEditableInput=S_,exports.ColorPickerEditableInputHSLA=w_,exports.ColorPickerEditableInputRGBA=C_,exports.ColorPickerHue=m_,exports.ColorPickerInteractive=c_,exports.ColorPickerSaturation=u_,exports.ColorPickerShadeSlider=v_,exports.ColorPickerSketch=E_,exports.ColorPickerSlider=q_,exports.ColorPickerSwatch=b_,exports.ColorPickerTheme=ev,exports.ColorPickerWheel=L_,exports.CompactCalendar=jf,exports.CompactCalendarToolbar=xf,exports.ConsoleLoggingProvider=e.k,exports.Container=cd,exports.ContentRenderer=Yy,exports.ContentType=zu,exports.CustomControlBar=bv,exports.DataGrid=iv,exports.DataGridV2=sv,exports.DefaultGraphClient=e.O,exports.DefaultLocalizationProvider=e.T,exports.DeleteColumnControl=og,exports.DeleteRowControl=lg,exports.DeleteTableControl=rg,exports.DropdownField=bg,exports.Dropzone=Cp,exports.DropzoneAccept=vp,exports.DropzoneFullScreen=wp,exports.DropzoneIdle=bp,exports.DropzoneProvider=hp,exports.DropzoneReject=yp,exports.EBreakPoints=ge,exports.ECalendarViews=W,exports.EGoalMetric=Bx,exports.EMessageType=_e,exports.EXE_MIME_TYPE=jp,exports.EmojiPicker=Sh,exports.ErrorType=e.A,exports.EventsList=Sf,exports.FluentUIProvider=TS,exports.GenericOverFlowMenu=wv,exports.Grid=Xu,exports.H1Control=Nh,exports.H2Control=Ph,exports.H3Control=Fh,exports.H4Control=Ih,exports.H5Control=Lh,exports.H6Control=Rh,exports.Hero=WS,exports.HighlightControl=Jh,exports.HrControl=Yh,exports.IMAGE_MIME_TYPE=Ep,exports.IconButton=Ad,exports.InlineSVG=Xb,exports.InputField=Sg,exports.InsertTableControl=ng,exports.ItalicControl=Eh,exports.ItemPicker=Fg,exports.KPICard=Vx,exports.KPICardCompact=Gx,exports.KPICardSkeleton=Hx,exports.Kpis=qx,exports.Layout=$u,exports.LayoutItem=ed,exports.Link=Ip,exports.ListItemActivityMessage=Ex,exports.ListToolbar=fx,exports.LivePersona=ix,exports.LocalStorageProvider=e.w,exports.LocalizationProvider=e.t,exports.LogLevel=e.j,exports.MIME_TYPES=Tp,exports.MS_EXCEL_MIME_TYPE=kp,exports.MS_POWERPOINT_MIME_TYPE=Ap,exports.MS_WORD_MIME_TYPE=Op,exports.MaplibreWorldMap=Uv,exports.MarkdownRenderer=qy,exports.Marquee=Sb,exports.Mensions=zy,exports.MensionsExample=By,exports.MergeOrSplitCellControl=ug,exports.MermaidDiagram=ab,exports.Navigation=Tv,exports.NoKpisCard=Wx,exports.OTPField=rx,exports.OptionTime=jg,exports.OrderedListControl=Mh,exports.PDF_MIME_TYPE=Dp,exports.Popup=gd,exports.RedoControl=Qh,exports.RenderAdaptiveCard=Cy,exports.RenderDialog=uv,exports.RenderDrawer=dv,exports.RenderHeader=fv,exports.RenderLabel=vd,exports.RenderSpinner=bd,exports.RichTextEditor=vg,exports.RichTextEditorBgColorPickerControl=nh,exports.RichTextEditorColorControl=Xm,exports.RichTextEditorColorPickerControl=Zm,exports.RichTextEditorContent=Kp,exports.RichTextEditorControl=Jp,exports.RichTextEditorControlBase=Yp,exports.RichTextEditorControlsGroup=qp,exports.RichTextEditorDragHandle=rh,exports.RichTextEditorFontFamilyControl=eh,Object.defineProperty(exports,`RichTextEditorImage`,{enumerable:!0,get:function(){return L.default}}),exports.RichTextEditorImageUploadControl=th,exports.RichTextEditorLinkControl=Ym,exports.RichTextEditorResizableImage=zp,exports.RichTextEditorSourceCodeControl=Qm,exports.RichTextEditorTableControls=wh,exports.RichTextEditorToolbar=Vp,exports.SearchControl=$f,exports.SelectDay=Qd,exports.SelectMonth=nf,exports.SelectTime=Ng,exports.SelectView=Cg,exports.SelectWeek=sf,exports.ShareDialog=mv,exports.ShowError=gv,exports.ShowMessage=vv,exports.SkeletonLoader=CS,exports.Space=nd,exports.SplitPane=hd,exports.Spoiler=Tb,exports.Spotlight=pp,exports.SpotlightAction=np,exports.SpotlightActionsGroup=rp,exports.SpotlightActionsList=ip,exports.SpotlightEmpty=ap,exports.SpotlightFooter=op,exports.SpotlightRoot=Zf,exports.SpotlightSearch=ep,exports.StackV2=H,exports.StackedUsers=xx,exports.Stepper=zb,exports.StrikeThroughControl=Oh,exports.SubscriptControl=Wh,exports.SuperscriptControl=Gh,exports.TIME_RADIO_GROUP=Eg,exports.TableKit=I.TableKit,exports.TaskListControl=$h,exports.TaskListLiftControl=tg,exports.TaskListSinkControl=eg,exports.Timeline=Nb,exports.ToggleHeaderColumnControl=dg,exports.ToggleHeaderRowControl=fg,exports.ToggleTableColumnLinesControl=pg,exports.ToggleTableRowLinesControl=mg,exports.TypographyControl=Cd,exports.UnderlineControl=Dh,exports.UndoControl=Zh,exports.UniversalProvider=ye,exports.UnlinkControl=Ah,exports.UnsetColorControl=Xh,exports.UserCard=yx,exports.VideoPlayer=Ov,exports.applyHeaderStyles=hu,exports.autoFitColumns=gu,exports.buildHeaderCellStyle=mu,exports.clampHsva=o_,exports.clearInlineSVGCache=Ub,exports.cloneDeep=Ou,exports.closeOnActionTriggerAtom=Lf,exports.closeSpotlight=Wf,exports.color=J,exports.configureSkeletonLoader=lS,exports.createControl=K,exports.createSpotlight=Kf,exports.createSpotlightStore=zf,exports.debounce=Eu,exports.deepMerge=e.E,exports.defaultCalendarControlStrings=ff,exports.defaultCalendarMonthStrings=ef,exports.defaultSelectWeekStrings=rf,exports.defaultSpotlightFilter=dp,exports.detectContentType=Gu,exports.en=e.D,exports.equalColorObjects=i_,exports.equalHex=a_,exports.escapeCsvCell=_u,exports.every=Ru,exports.filter=Iu,exports.formatTime=Og,exports.get=Au,exports.getContentType=Ku,exports.getContrastingColor=r_,exports.getTaskListExtension=Lp,exports.groupBy=Pu,exports.hexToHsva=Hg,exports.hexToRgba=Gg,exports.hslaStringToHsva=$g,exports.hslaToHsva=Vg,exports.hsvaToHex=Ug,exports.hsvaToHexa=Wg,exports.hsvaToHslString=Jg,exports.hsvaToHsla=Bg,exports.hsvaToHslaString=Yg,exports.hsvaToRgbString=Xg,exports.hsvaToRgba=Rg,exports.hsvaToRgbaString=Zg,exports.isActionsGroup=cp,exports.isEmpty=ku,exports.limitActions=fp,exports.listIdAtom=Pf,exports.map=Fu,exports.onQueryChangeCallbackAtom=Rf,exports.openSpotlight=Uf,exports.openedAtom=Mf,exports.parseHue=Qg,exports.queryAtom=Ff,exports.registerBones=nS,exports.registeredActionsAtom=If,exports.renderContentAsEmailHtml=Gp,exports.resolveLocale=Of,exports.rgbaStringToHsva=e_,exports.rgbaToHex=Kg,exports.rgbaToHexa=qg,exports.rgbaToHsva=zg,exports.selectedAtom=Nf,exports.set=ju,exports.snapshotBones=Xx,exports.some=Lu,exports.spotlight=Hf,exports.spotlightActions=G,exports.spotlightStore=Bf,exports.throttle=Du,exports.timeKey=kg,exports.toasterId=fu,exports.toggleSpotlight=Gf,exports.uniq=Mu,exports.uniqBy=Nu,exports.useAIAssistantStrings=e.n,exports.useAISearchControlStrings=e.r,exports.useAppDashboardStrings=e.i,exports.useAppToast=pu,exports.useApplicationContext=be,exports.useAspectRatioStyles=id,exports.useBlockquoteStyles=ub,exports.useBrandCenterFonts=ze,exports.useCalendar=Gd,exports.useCalendarStrings=e.a,exports.useCalendarStyles=Rd,exports.useCenterStyles=ad,exports.useColorPickerStyles=Y,exports.useCommonStrings=e.o,exports.useCompactCalendarEvents=Ef,exports.useComponentStrings=e.c,exports.useComponentUtils=xu,exports.useDataGridStyles=rv,exports.useDateUtils=Su,exports.useDayViewStyles=Kd,exports.useDropzoneContext=gp,exports.useDropzoneStyles=xp,exports.useExportData=bu,exports.useFluentEmoji=du,exports.useGraphAPI=xe,exports.useGridStyles=Yu,exports.useImageUtils=Tu,exports.useIndexedDBCache=Se,exports.useInputFieldStrings=e.u,exports.useItemPickerStrings=e.d,exports.useKpiStrings=e.f,exports.useLayoutStyles=Zu,exports.useListItemActivityStrings=e.p,exports.useLocalization=e.m,exports.useLogging=B,exports.useMarqueeStyles=_b,exports.useMensionsStrings=e.h,exports.useMensionsStyles=Ry,exports.useMermaidDiagramStrings=e.g,exports.useMermaidDiagramStyles=nb,exports.useNavigationStyles=Ev,exports.useNoKpiStrings=e._,exports.useOptionTimeStyles=Tg,exports.usePolling=Ce,exports.useRenderHeaderStyles=pv,exports.useRichTextEditor=Bp,exports.useSearchControlStrings=e.v,exports.useSelectTimeStyles=wg,exports.useShareDialogStrings=e.y,exports.useShowErrorStyles=hv,exports.useShowMessageStyles=_v,exports.useSkeletonExtract=Zx,exports.useSpaceStyles=td,exports.useSplitPaneStyles=md,exports.useSpotlight=qf,exports.useSpotlightShortcut=Yf,exports.useSpotlightStrings=e.b,exports.useStrings=e.x,exports.useStyles=tb,exports.useTimeZoneHelper=Ee,exports.useUserCardStrings=e.S,exports.useUtils=Md,exports.useVideoStyles=Dv,exports.useWeekViewStyles=Vd,exports.useWorldMapStrings=e.C,exports.validHex=n_;
+      )`,zIndex:0}),overlayContent:e=>{let{justify:t,align:n,textAlign:i}=DS[e]??DS[`bottom-left`];return(0,f.css)({position:`relative`,flex:1,display:`flex`,flexDirection:`column`,justifyContent:t,alignItems:n,textAlign:i,zIndex:1,padding:o.tokens.spacingHorizontalXL,paddingBottom:r===`video`?`74px`:o.tokens.spacingHorizontalL,gap:o.tokens.spacingVerticalS,pointerEvents:`none`})},fullscreenRoot:(0,f.css)({width:`100%`,height:`100%`,overflow:`hidden`}),splitRoot:(0,f.css)({display:`grid`,gridTemplateColumns:n<576?`1fr`:`1fr 1fr`,gap:o.tokens.spacingHorizontalS,width:`100%`,height:`100%`,overflow:`hidden`}),featuredRoot:(0,f.css)({display:`grid`,gridTemplateColumns:n<576?`1fr`:`2fr 1fr`,gap:o.tokens.spacingHorizontalS,width:`100%`,height:`100%`,overflow:`hidden`}),mosaicWrapper:(0,f.css)({width:`100%`,height:n<576?`auto`:`100%`,gap:o.tokens.spacingHorizontalS,overflow:n<576?`visible`:`hidden`}),mosaicPrimary:(0,f.css)({flex:n<576?`none`:`3 0 0`,minWidth:0,width:`100%`,height:n<576?`260px`:`100%`}),mosaicRightGrid:e=>{let t=n>=1100&&e>=3,r=n<576?`1fr`:t?`1fr 1fr`:`1fr`,i=n<576?void 0:e===1?`1fr`:t?`1fr 1fr`:`repeat(${e}, 1fr)`;return(0,f.css)({flex:n<576?`none`:`2 0 0`,width:n<576?`100%`:void 0,minWidth:0,display:`grid`,gap:o.tokens.spacingHorizontalS,gridTemplateColumns:r,gridTemplateRows:i,height:n<576?`auto`:`100%`})},mosaicSpanFull:(0,f.css)({gridColumn:`1 / -1`}),mosaicMarqueeLane:(0,f.css)({flex:n<576?`none`:`2 0 0`,minWidth:0,height:n<576?`320px`:`100%`,overflow:`hidden`}),mosaicMarqueeItem:(0,f.css)({flex:`0 0 auto`,minHeight:n<576?`160px`:`120px`}),mosaicScrollLane:(0,f.css)({flex:n<576?`none`:`2 0 0`,minWidth:0,height:n<576?`320px`:`100%`,overflowY:`auto`,overflowX:`hidden`,scrollbarWidth:`thin`,scrollbarColor:`${o.tokens.colorBrandBackground} transparent`,display:`flex`,flexDirection:`column`,gap:`8px`,"&::-webkit-scrollbar":{width:`4px`},"&::-webkit-scrollbar-track":{background:`transparent`},"&::-webkit-scrollbar-thumb":{background:o.tokens.colorBrandBackground,borderRadius:`999px`}}),gridRoot:(0,f.css)({display:`grid`,gridTemplateColumns:`repeat(${n>=1200?4:n>=992?3:n>=576?2:1}, 1fr)`,gap:o.tokens.spacingHorizontalS,width:`100%`}),filmstripRoot:(0,f.css)({display:`flex`,flexDirection:`row`,gap:o.tokens.spacingHorizontalM,overflowX:`auto`,width:`100%`,scrollSnapType:`x mandatory`,scrollbarWidth:`none`,"::-webkit-scrollbar":{display:`none`},paddingBottom:o.tokens.spacingVerticalXS}),filmstripItem:(0,f.css)({flex:`0 0 ${n>=1200?`400px`:n>=992?`340px`:n>=576?`280px`:`220px`}`,scrollSnapAlign:`start`}),carouselWrapper:(0,f.css)({width:`100%`,overflow:`hidden`})}};function kS(e){try{let t=new URL(e);if(t.hostname.includes(`youtube.com`))return{kind:`youtube`,id:t.searchParams.get(`v`)??``};if(t.hostname.includes(`youtu.be`))return{kind:`youtube`,id:t.pathname.slice(1).split(`?`)[0]};if(t.hostname.includes(`vimeo.com`))return{kind:`vimeo`,id:t.pathname.replace(/^\//,``).split(`/`)[0]}}catch{}return{kind:`file`,id:``}}var AS={position:`absolute`,inset:0,overflow:`hidden`,pointerEvents:`none`},jS={position:`absolute`,top:`50%`,left:`50%`,width:`auto`,height:`auto`,minWidth:`100%`,minHeight:`100%`,aspectRatio:`16 / 9`,transform:`translate(-50%, -50%)`,border:`none`,pointerEvents:`none`},MS=({src:e,loop:t=!0,title:r=`background video`})=>{let i=kS(e);if(i.kind===`youtube`&&i.id){let e=i.id;return(0,n.jsx)(`div`,{style:AS,children:(0,n.jsx)(`iframe`,{src:`https://www.youtube.com/embed/${e}?autoplay=1&mute=1${t?`&loop=1&playlist=${e}`:``}&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&playsinline=1&enablejsapi=1`,allow:`autoplay; encrypted-media`,title:r,style:jS})})}if(i.kind===`vimeo`&&i.id){let e=t?`&loop=1`:``;return(0,n.jsx)(`div`,{style:AS,children:(0,n.jsx)(`iframe`,{src:`https://player.vimeo.com/video/${i.id}?autoplay=1&muted=1${e}&background=1&byline=0&title=0&portrait=0`,allow:`autoplay; fullscreen`,title:r,style:jS})})}return(0,n.jsx)(`video`,{src:e,autoPlay:!0,loop:t,muted:!0,playsInline:!0,title:r,style:{position:`absolute`,inset:0,width:`100%`,height:`100%`,objectFit:`cover`,pointerEvents:`none`}})};MS.displayName=`BackgroundVideo`;var NS=t.memo(({item:e,heroProps:t,containerWidth:r,mediaType:i=`image`})=>{let{title:a,description:s,callToActionLabel:c,callToActionUrl:l,textPosition:u=`bottom-left`,overlayOpacity:d=.45}=e,f=a||s||c,{overlayRoot:p,overlayScrim:m,overlayContent:h}=OS(t,r,i);return f?(0,n.jsxs)(H,{className:p,children:[(0,n.jsx)(H,{className:m(d),"aria-hidden":`true`}),(0,n.jsxs)(H,{className:h(u),children:[(a||s)&&(0,n.jsxs)(`div`,{style:{overflow:`hidden`,flex:`0 1 auto`,minHeight:0,display:`flex`,flexDirection:`column`,gap:`6px`},children:[a&&(0,n.jsx)(Cd,{fontSize:`l`,fontWeight:`bold`,numberOfLines:2,truncate:!0,style:{textShadow:`0 1px 4px rgba(0,0,0,0.65)`,margin:0,color:`#fff`},children:a}),s&&(0,n.jsx)(Cd,{fontSize:`s`,numberOfLines:2,style:{textShadow:`0 1px 3px rgba(0,0,0,0.5)`,margin:0,color:`rgba(255,255,255,0.9)`},children:s})]}),c&&l&&(0,n.jsx)(o.Button,{appearance:`primary`,as:`a`,href:l,target:`_blank`,rel:`noopener noreferrer`,style:{flexShrink:0,pointerEvents:`auto`},children:c})]})]}):null});NS.displayName=`HeroOverlay`;var PS=t.memo(({item:e,heroProps:t,containerWidth:r,className:i,itemHeight:a})=>{let{item:s}=OS(t,r),c=a===void 0?`100%`:typeof a==`number`?`${a}px`:a,l=e.mediaType===`video`&&e.videoControls===!1&&e.autoPlay;return(0,n.jsx)(H,{className:(0,o.mergeClasses)(s,i),height:c,role:`region`,"aria-label":e.alt??e.title??e.src,children:e.mediaType===`image`?(0,n.jsx)(Ob,{src:e.src,style:{height:`100%`},children:(0,n.jsx)(NS,{item:e,heroProps:t,containerWidth:r})}):l?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(MS,{src:e.src,loop:e.loop,title:e.alt??e.title}),(0,n.jsx)(NS,{item:e,heroProps:t,containerWidth:r,mediaType:`image`})]}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(Ov,{url:e.src,width:`100%`,height:c,controls:e.videoControls!==!1,playing:e.autoPlay,loop:e.loop,muted:e.autoPlay,playsinline:!0}),(0,n.jsx)(NS,{item:e,heroProps:t,containerWidth:r,mediaType:e.videoControls===!1?`image`:`video`})]})})});PS.displayName=`HeroItem`;var FS=e=>({resolvedHeight:t.useMemo(()=>typeof e==`number`?`${e}px`:e,[e]),numericHeight:t.useMemo(()=>typeof e==`number`?e:parseInt(String(e),10)||480,[e]),mosaicHeight:t.useMemo(()=>typeof e==`number`?`${e+30}px`:`calc(${e} + 30px)`,[e])}),IS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let a=we(e,1,r.rotation),{resolvedHeight:o}=FS(t),s=a[0];return s?(0,n.jsx)(H,{width:`100%`,height:o,children:(0,n.jsx)(PS,{item:s,heroProps:r,containerWidth:i})}):null};IS.displayName=`HeroFullscreen`;var LS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{splitRoot:a}=OS(r,i),o=we(e,2,r.rotation),{resolvedHeight:s}=FS(t);return(0,n.jsx)(H,{className:a,height:s,children:o.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i},e.id))})};LS.displayName=`HeroSplit`;var RS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{featuredRoot:a}=OS(r,i),o=we(e,2,r.rotation),{resolvedHeight:s}=FS(t);return(0,n.jsx)(H,{className:a,height:s,children:o.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i},e.id))})};RS.displayName=`HeroFeatured`;var zS=({items:e,height:t,heroProps:r,containerWidth:i,mosaicOverflowMode:a=`marquee`})=>{let{mosaicWrapper:o,mosaicPrimary:s,mosaicRightGrid:c,mosaicSpanFull:l,mosaicScrollLane:u}=OS(r,i),{mosaicHeight:d}=FS(t),f=e.length>5,p=f?e:e.slice(0,5),m=p[0],h=p.slice(1),g=i<576;if(!m)return null;let _=g?160:180;return(0,n.jsxs)(H,{direction:g?`vertical`:`horizontal`,className:o,height:g?void 0:d,children:[(0,n.jsx)(PS,{item:m,heroProps:r,containerWidth:i,className:s,itemHeight:g?260:void 0}),h.length>0&&!f&&(0,n.jsx)(`div`,{className:c(h.length),children:h.map((e,t)=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:g?180:void 0,className:h.length===3&&t===2&&i>=1100?l:void 0},e.id))}),h.length>0&&f&&a===`marquee`&&(0,n.jsx)(`div`,{style:{flex:g?`none`:`2 0 0`,minWidth:0,height:g?`320px`:`100%`,overflow:`hidden`,scrollbarWidth:`none`},children:(0,n.jsx)(Sb,{orientation:`vertical`,duration:6e4,pauseOnHover:!0,repeat:2,gap:`spacingHorizontalS`,fadeEdgeSize:`8%`,children:h.map(e=>(0,n.jsx)(`div`,{style:{flex:`0 0 auto`,height:`${_}px`,width:`100%`},children:(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:_})},e.id))})}),h.length>0&&f&&a===`scroll`&&(0,n.jsx)(`div`,{className:u,children:h.map(e=>(0,n.jsx)(`div`,{style:{flex:`0 0 auto`,height:`${_}px`,width:`100%`},children:(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:_})},e.id))})]})};zS.displayName=`HeroMosaic`;var BS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{gridRoot:a}=OS(r,i),{resolvedHeight:o}=FS(t);return(0,n.jsx)(H,{className:a,children:e.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:o},e.id))})};BS.displayName=`HeroGrid`;var VS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{filmstripRoot:a,filmstripItem:o}=OS(r,i),{resolvedHeight:s}=FS(t);return(0,n.jsx)(H,{direction:`horizontal`,className:a,height:s,children:e.map(e=>(0,n.jsx)(H,{className:o,children:(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i})},e.id))})};VS.displayName=`HeroFilmstrip`;var HS=({items:e,height:t,heroProps:r,containerWidth:i})=>{let{carouselWrapper:a}=OS(r,i),{numericHeight:o}=FS(t),s=o-50;return(0,n.jsx)(H,{className:a,height:o,children:(0,n.jsx)(pd,{items:e.map(e=>(0,n.jsx)(PS,{item:e,heroProps:r,containerWidth:i,itemHeight:s},e.id)),height:o})})};HS.displayName=`HeroCarousel`;var US=`480px`,WS=e=>{let{items:r,layout:i=`fullscreen`,height:a=US,className:s}=e,c=t.useRef(null),[l,u]=t.useState(0),[p,m]=t.useState(0),{heroRootStyles:h}=OS(e,l);t.useEffect(()=>{let e;return c.current&&(e=new d.ResizeObserver(e=>{for(let t of e){let{width:e,height:n}=t.contentRect;u(e),m(n)}}),u(c.current.clientWidth),m(c.current.clientHeight),e.observe(c.current)),()=>{e&&e.disconnect()}},[]);let g=(0,f.css)({width:`100%`}),_={items:r,height:a,heroProps:e,containerWidth:l,mosaicOverflowMode:e.mosaicOverflowMode??`marquee`},v=()=>{switch(i){case`fullscreen`:return(0,n.jsx)(IS,{..._});case`split`:return(0,n.jsx)(LS,{..._});case`featured`:return(0,n.jsx)(RS,{..._});case`mosaic`:return(0,n.jsx)(zS,{..._});case`grid`:return(0,n.jsx)(BS,{..._});case`filmstrip`:return(0,n.jsx)(VS,{..._});case`carousel`:return(0,n.jsx)(HS,{..._});default:return(0,n.jsx)(IS,{..._})}},y=t.useMemo(()=>{let e=h(l,p);if(i===`grid`||i===`mosaic`&&l>0&&l<576){let{height:t,...n}=e;return n}return e},[h,l,p,i]);return(0,n.jsx)(H,{id:`-hero`,role:`region`,"aria-label":`Hero`,ref:c,className:(0,o.mergeClasses)(g,s),style:y,children:v()})};WS.displayName=`Hero`,exports.AIAssistant=$y,exports.AISearchControl=Ny,exports.AISearchIcon=ky,exports.AISearchIconExample=Fy,exports.AdaptiveCardHost=Sy,exports.AdaptiveCardHostThemeType=Wv,exports.AddColumnAfterControl=ag,exports.AddColumnBeforeControl=ig,exports.AddRowAfterControl=cg,exports.AddRowBeforeControl=sg,exports.AlignCenterControl=Hh,exports.AlignJustifyControl=Uh,exports.AlignLeftControl=Bh,exports.AlignRightControl=Vh,exports.AppDashboard=Ix,exports.AspectRatio=rd,exports.BackgroundImage=Ob,exports.Blockquote=mb,exports.BlockquoteControl=zh,exports.BoldControl=Th,exports.Breadcrumb=kd,exports.BulletListControl=jh,exports.ButtonMenu=Td,exports.CalendarControl=gf,exports.CalendarGrid=yf,exports.CalendarHeader=bf,exports.CalendarMonth=tf,exports.Card=Ju,exports.Carousel=pd,exports.Center=od,exports.ChatInput=Ly,exports.ChatInputWithMensions=Hy,exports.ChatInputWithMensionsV1=eb,exports.ChatList=Xy,exports.ChromeInputType=D_,exports.ClearFormattingControl=kh,exports.CodeBlockControl=qh,exports.CodeControl=Kh,exports.ColorPicker=X,exports.ColorPickerAlpha=g_,exports.ColorPickerBlock=G_,exports.ColorPickerChrome=M_,exports.ColorPickerCircle=B_,exports.ColorPickerColorful=N_,exports.ColorPickerCompact=U_,exports.ColorPickerEditableInput=S_,exports.ColorPickerEditableInputHSLA=w_,exports.ColorPickerEditableInputRGBA=C_,exports.ColorPickerHue=m_,exports.ColorPickerInteractive=c_,exports.ColorPickerSaturation=u_,exports.ColorPickerShadeSlider=v_,exports.ColorPickerSketch=E_,exports.ColorPickerSlider=q_,exports.ColorPickerSwatch=b_,exports.ColorPickerTheme=ev,exports.ColorPickerWheel=L_,exports.CompactCalendar=jf,exports.CompactCalendarToolbar=xf,exports.ConsoleLoggingProvider=e.k,exports.Container=cd,exports.ContentRenderer=Yy,exports.ContentType=zu,exports.CustomControlBar=bv,exports.DataGrid=iv,exports.DataGridV2=sv,exports.DefaultGraphClient=e.O,exports.DefaultLocalizationProvider=e.T,exports.DeleteColumnControl=og,exports.DeleteRowControl=lg,exports.DeleteTableControl=rg,exports.DropdownField=bg,exports.Dropzone=Cp,exports.DropzoneAccept=vp,exports.DropzoneFullScreen=wp,exports.DropzoneIdle=bp,exports.DropzoneProvider=hp,exports.DropzoneReject=yp,exports.EBreakPoints=ge,exports.ECalendarViews=W,exports.EGoalMetric=Bx,exports.EMessageType=_e,exports.EXE_MIME_TYPE=jp,exports.EmojiPicker=Sh,exports.ErrorType=e.A,exports.EventsList=Sf,exports.FluentUIProvider=TS,exports.GenericOverFlowMenu=wv,exports.Grid=Xu,exports.H1Control=Nh,exports.H2Control=Ph,exports.H3Control=Fh,exports.H4Control=Ih,exports.H5Control=Lh,exports.H6Control=Rh,exports.Hero=WS,exports.HighlightControl=Jh,exports.HrControl=Yh,exports.IMAGE_MIME_TYPE=Ep,exports.IconButton=Ad,exports.InlineSVG=Xb,exports.InputField=Sg,exports.InsertTableControl=ng,exports.ItalicControl=Eh,exports.ItemPicker=Fg,exports.KPICard=Vx,exports.KPICardCompact=Gx,exports.KPICardSkeleton=Hx,exports.Kpis=qx,exports.Layout=$u,exports.LayoutItem=ed,exports.Link=Ip,exports.ListItemActivityMessage=Ex,exports.ListToolbar=fx,exports.LivePersona=ix,exports.LocalStorageProvider=e.w,exports.LocalizationProvider=e.t,exports.LogLevel=e.j,exports.MIME_TYPES=Tp,exports.MS_EXCEL_MIME_TYPE=kp,exports.MS_POWERPOINT_MIME_TYPE=Ap,exports.MS_WORD_MIME_TYPE=Op,exports.MaplibreWorldMap=Uv,exports.MarkdownRenderer=qy,exports.Marquee=Sb,exports.Mensions=zy,exports.MensionsExample=By,exports.MergeOrSplitCellControl=ug,exports.MermaidDiagram=ab,exports.Navigation=Tv,exports.NoKpisCard=Wx,exports.OTPField=rx,exports.OptionTime=jg,exports.OrderedListControl=Mh,exports.PDF_MIME_TYPE=Dp,exports.Popup=gd,exports.RedoControl=Qh,exports.RenderAdaptiveCard=Cy,exports.RenderDialog=uv,exports.RenderDrawer=dv,exports.RenderHeader=fv,exports.RenderLabel=vd,exports.RenderSpinner=bd,exports.RichTextEditor=vg,exports.RichTextEditorBgColorPickerControl=nh,exports.RichTextEditorColorControl=Xm,exports.RichTextEditorColorPickerControl=Zm,exports.RichTextEditorContent=Kp,exports.RichTextEditorControl=Jp,exports.RichTextEditorControlBase=Yp,exports.RichTextEditorControlsGroup=qp,exports.RichTextEditorDragHandle=rh,exports.RichTextEditorFontFamilyControl=eh,Object.defineProperty(exports,`RichTextEditorImage`,{enumerable:!0,get:function(){return L.default}}),exports.RichTextEditorImageUploadControl=th,exports.RichTextEditorLinkControl=Ym,exports.RichTextEditorResizableImage=zp,exports.RichTextEditorSourceCodeControl=Qm,exports.RichTextEditorTableControls=wh,exports.RichTextEditorToolbar=Vp,exports.SearchControl=$f,exports.SelectDay=Qd,exports.SelectMonth=nf,exports.SelectTime=Ng,exports.SelectView=Cg,exports.SelectWeek=sf,exports.ShareDialog=mv,exports.ShowError=gv,exports.ShowMessage=vv,exports.SkeletonLoader=CS,exports.Space=nd,exports.SplitPane=hd,exports.Spoiler=Tb,exports.Spotlight=pp,exports.SpotlightAction=np,exports.SpotlightActionsGroup=rp,exports.SpotlightActionsList=ip,exports.SpotlightEmpty=ap,exports.SpotlightFooter=op,exports.SpotlightRoot=Zf,exports.SpotlightSearch=ep,exports.StackV2=H,exports.StackedUsers=xx,exports.Stepper=zb,exports.StrikeThroughControl=Oh,exports.SubscriptControl=Wh,exports.SuperscriptControl=Gh,exports.TIME_RADIO_GROUP=Eg,exports.TableKit=I.TableKit,exports.TaskListControl=$h,exports.TaskListLiftControl=tg,exports.TaskListSinkControl=eg,exports.Timeline=Nb,exports.ToggleHeaderColumnControl=dg,exports.ToggleHeaderRowControl=fg,exports.ToggleTableColumnLinesControl=pg,exports.ToggleTableRowLinesControl=mg,exports.TypographyControl=Cd,exports.UnderlineControl=Dh,exports.UndoControl=Zh,exports.UniversalProvider=ye,exports.UnlinkControl=Ah,exports.UnsetColorControl=Xh,exports.UserCard=yx,exports.VideoPlayer=Ov,exports.applyHeaderStyles=hu,exports.autoFitColumns=gu,exports.buildHeaderCellStyle=mu,exports.clampHsva=o_,exports.clearInlineSVGCache=Ub,exports.cloneDeep=Ou,exports.closeOnActionTriggerAtom=Lf,exports.closeSpotlight=Wf,exports.color=J,exports.configureSkeletonLoader=lS,exports.createControl=K,exports.createSpotlight=Kf,exports.createSpotlightStore=zf,exports.debounce=Eu,exports.deepMerge=e.E,exports.defaultCalendarControlStrings=ff,exports.defaultCalendarMonthStrings=ef,exports.defaultSelectWeekStrings=rf,exports.defaultSpotlightFilter=dp,exports.detectContentType=Gu,exports.en=e.D,exports.equalColorObjects=i_,exports.equalHex=a_,exports.escapeCsvCell=_u,exports.every=Ru,exports.filter=Iu,exports.formatTime=Og,exports.get=Au,exports.getContentType=Ku,exports.getContrastingColor=r_,exports.getTaskListExtension=Lp,exports.groupBy=Pu,exports.hexToHsva=Hg,exports.hexToRgba=Gg,exports.hslaStringToHsva=$g,exports.hslaToHsva=Vg,exports.hsvaToHex=Ug,exports.hsvaToHexa=Wg,exports.hsvaToHslString=Jg,exports.hsvaToHsla=Bg,exports.hsvaToHslaString=Yg,exports.hsvaToRgbString=Xg,exports.hsvaToRgba=Rg,exports.hsvaToRgbaString=Zg,exports.isActionsGroup=cp,exports.isEmpty=ku,exports.limitActions=fp,exports.listIdAtom=Pf,exports.map=Fu,exports.onQueryChangeCallbackAtom=Rf,exports.openSpotlight=Uf,exports.openedAtom=Mf,exports.parseHue=Qg,exports.queryAtom=Ff,exports.registerBones=nS,exports.registeredActionsAtom=If,exports.renderContentAsEmailHtml=Gp,exports.resolveLocale=Of,exports.rgbaStringToHsva=e_,exports.rgbaToHex=Kg,exports.rgbaToHexa=qg,exports.rgbaToHsva=zg,exports.selectedAtom=Nf,exports.set=ju,exports.snapshotBones=Xx,exports.some=Lu,exports.spotlight=Hf,exports.spotlightActions=G,exports.spotlightStore=Bf,exports.throttle=Du,exports.timeKey=kg,exports.toasterId=fu,exports.toggleSpotlight=Gf,exports.uniq=Mu,exports.uniqBy=Nu,exports.useAIAssistantStrings=e.n,exports.useAISearchControlStrings=e.r,exports.useAppDashboardStrings=e.i,exports.useAppToast=pu,exports.useApplicationContext=be,exports.useAspectRatioStyles=id,exports.useBlockquoteStyles=ub,exports.useBrandCenterFonts=ze,exports.useCalendar=Gd,exports.useCalendarStrings=e.a,exports.useCalendarStyles=Rd,exports.useCenterStyles=ad,exports.useColorPickerStyles=Y,exports.useCommonStrings=e.o,exports.useCompactCalendarEvents=Ef,exports.useComponentStrings=e.c,exports.useComponentUtils=xu,exports.useDataGridStyles=rv,exports.useDateUtils=Su,exports.useDayViewStyles=Kd,exports.useDropzoneContext=gp,exports.useDropzoneStyles=xp,exports.useExportData=bu,exports.useFluentEmoji=du,exports.useGraphAPI=xe,exports.useGridStyles=Yu,exports.useImageUtils=Tu,exports.useIndexedDBCache=Se,exports.useInputFieldStrings=e.u,exports.useItemPickerStrings=e.d,exports.useKpiStrings=e.f,exports.useLayoutStyles=Zu,exports.useListItemActivityStrings=e.p,exports.useLocalization=e.m,exports.useLogging=B,exports.useMarqueeStyles=_b,exports.useMensionsStrings=e.h,exports.useMensionsStyles=Ry,exports.useMermaidDiagramStrings=e.g,exports.useMermaidDiagramStyles=nb,exports.useNavigationStyles=Ev,exports.useNoKpiStrings=e._,exports.useOptionTimeStyles=Tg,exports.usePolling=Ce,exports.useRenderHeaderStyles=pv,exports.useRichTextEditor=Bp,exports.useSearchControlStrings=e.v,exports.useSelectTimeStyles=wg,exports.useShareDialogStrings=e.y,exports.useShowErrorStyles=hv,exports.useShowMessageStyles=_v,exports.useSkeletonExtract=Zx,exports.useSpaceStyles=td,exports.useSplitPaneStyles=md,exports.useSpotlight=qf,exports.useSpotlightShortcut=Yf,exports.useSpotlightStrings=e.b,exports.useStrings=e.x,exports.useStyles=tb,exports.useTimeZoneHelper=Ee,exports.useUserCardStrings=e.S,exports.useUtils=Md,exports.useVideoStyles=Dv,exports.useWeekViewStyles=Vd,exports.useWorldMapStrings=e.C,exports.validHex=n_;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -67772,7 +67772,8 @@ var Hk = A.memo(({ item: e, heroProps: t, containerWidth: n, mediaType: r = "ima
 					truncate: !0,
 					style: {
 						textShadow: "0 1px 4px rgba(0,0,0,0.65)",
-						margin: 0
+						margin: 0,
+						color: "#fff"
 					},
 					children: i
 				}), a && /* @__PURE__ */ R(Ov, {
@@ -67780,7 +67781,8 @@ var Hk = A.memo(({ item: e, heroProps: t, containerWidth: n, mediaType: r = "ima
 					numberOfLines: 2,
 					style: {
 						textShadow: "0 1px 3px rgba(0,0,0,0.5)",
-						margin: 0
+						margin: 0,
+						color: "rgba(255,255,255,0.9)"
 					},
 					children: a
 				})]

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@spteck/react-controls-v2",
-   "version": "2.6.2",
+   "version": "2.6.4",
    "description": "Framework-agnostic React controls for Vite, Next.js, and SPFx - based on Fluent UI 9",
    "license": "MIT",
    "author": "João Mendes",