@ilo-org/react 0.25.0 → 0.27.0

package/lib/types/components/PhotoGallery/LightBoxGallery.d.ts

@@ -0,0 +1,10 @@
+import { PhotoGalleryItem } from './PhotoGallery';
+
+interface LightBoxProps {
+    items: PhotoGalleryItem[];
+    parentIndex?: number;
+    onSelect: (index: number) => void;
+    isActive?: boolean;
+}
+declare function LightBoxGallery({ items, parentIndex, onSelect: parentOnSelect, isActive, }: LightBoxProps): import("react/jsx-runtime").JSX.Element;
+export { LightBoxGallery };

package/lib/types/components/PhotoGallery/PhotoGallery.d.ts

@@ -0,0 +1,21 @@
+import { ImgHTMLAttributes } from 'react';
+
+type PhotoGallerySrc = {
+    gallery: string;
+    thumbnail: string;
+    lightbox: string;
+};
+export type PhotoGalleryItem = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+    credit?: string;
+    caption?: string;
+    src: PhotoGallerySrc | string;
+    alt: string;
+};
+export interface PhotoGalleryProps {
+    items: PhotoGalleryItem[];
+    fit?: "cover" | "contain" | "fill";
+    withKeyboardControls?: boolean;
+    captionView?: "visible" | "hidden" | "ifExists";
+}
+declare function PhotoGallery({ items, fit, withKeyboardControls, captionView, }: PhotoGalleryProps): import("react/jsx-runtime").JSX.Element;
+export { PhotoGallery };

package/lib/types/components/PhotoGallery/PhotoGalleryControls.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { UseEmblaCarouselType } from 'embla-carousel-react';
+
+type PhotoGalleryControlsProps = HTMLAttributes<HTMLDivElement> & {
+    onNext: () => void;
+    onPrev: () => void;
+    onFirst: () => void;
+    onLast: () => void;
+    indicator: {
+        current: number;
+        total: number;
+    };
+};
+type EmblaCarouselType = UseEmblaCarouselType[1];
+declare function usePhotoGalleryControls(emblaApi: EmblaCarouselType): {
+    onFirstButtonClick: () => void;
+    onLastButtonClick: () => void;
+    onPrevButtonClick: () => void;
+    onNextButtonClick: () => void;
+};
+declare function useKeyboardControls(emblaApi: EmblaCarouselType | undefined, enabled?: boolean): {
+    onKeyDown: (event: KeyboardEvent) => void;
+};
+declare function PhotoGalleryControls({ onNext, onPrev, onFirst, onLast, indicator, ...rest }: PhotoGalleryControlsProps): import("react/jsx-runtime").JSX.Element;
+export { PhotoGalleryControls, usePhotoGalleryControls, useKeyboardControls };

package/lib/types/components/PhotoGallery/PhotoGalleryThumbnails.d.ts

@@ -0,0 +1,11 @@
+import { PhotoGalleryItem } from './PhotoGallery';
+
+interface PhotoGalleryThumbnailsProps {
+    items: PhotoGalleryItem[];
+    selected: number;
+    onSelect?: (index: number) => void;
+    onSeeAll?: () => void;
+    seeAllLabel?: string;
+}
+declare function PhotoGalleryThumbnails({ items, selected, onSelect, onSeeAll, seeAllLabel, }: PhotoGalleryThumbnailsProps): import("react/jsx-runtime").JSX.Element;
+export { PhotoGalleryThumbnails };

package/lib/types/components/PhotoGallery/index.d.ts

@@ -0,0 +1 @@
+export * from './PhotoGallery';

package/lib/types/components/SocialMedia/SocialMedia.props.d.ts

@@ -1,4 +1,4 @@
-import { SocialTypes } from '../../types';
+import { HeadingTypes, SocialTypes } from '../../types';
 
 export interface SocialMediaIcons {
     /**
@@ -43,4 +43,8 @@ export interface SocialMediaProps {
      * The size of the social media icons
      */
     iconSize: "normal" | "large";
+    /**
+     *
+     */
+    titleLevel?: Extract<HeadingTypes, "h2" | "h3" | "h4" | "h5">;
 }

package/lib/types/components/index.d.ts

@@ -35,11 +35,11 @@ export { List } from './List';
 export { Profile } from './Profile';
 export { TableOfContents } from './TableOfContents';
 export * from './Footer';
-export { Navigation } from './Navigation';
 export { CardGroup } from './Cards/CardGroup';
 export { Breadcrumb } from './Breadcrumb';
 export { Status } from './Status';
 export { Tabs } from './Tabs';
+export { AudioPlayer } from './AudioPlayer';
 export * from './Cards';
 export * from './LanguageToggle';
 export * from './Nav';

package/lib/types/hooks/index.d.ts

@@ -1,3 +1,5 @@
 export { default as useGlobalSettings } from './useGlobalSettings';
 export { default as usePrevious } from './usePrevious';
 export { default as useBreakpoint } from './useBreakpoint';
+export { default as useOutsideClick } from './useOutsideClick';
+export { default as useFocusTrap } from './useFocusTrap';

package/lib/types/hooks/useFocusTrap.d.ts

@@ -0,0 +1,12 @@
+import { RefCallback } from 'react';
+
+interface FocusTrapOptions {
+    isActive: boolean;
+    onEscape?: () => void;
+    onReturnFocus?: () => void;
+    autoFocus?: boolean;
+    restoreFocus?: boolean;
+}
+declare function useFocusTrap<T extends HTMLElement>(options: FocusTrapOptions): RefCallback<T>;
+export default useFocusTrap;
+export type { FocusTrapOptions };

package/lib/types/hooks/useOutsideClick.d.ts

@@ -0,0 +1,4 @@
+declare function useOutsideClick<T extends HTMLElement>(ref: React.RefObject<T>, onClickOutside: () => void, config: {
+    exceptions?: (React.RefObject<HTMLElement> | HTMLElement | Element)[];
+}): void;
+export default useOutsideClick;

package/lib/types/types/index.d.ts

@@ -22,7 +22,7 @@ export type NotificationTypes = "error" | "info" | "success" | "warning";
 export type PositionTypes = "top" | "bottom" | "left" | "right";
 export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
-export type SocialTypes = "facebook" | "x" | "instagram" | "linkedin" | "youtube" | "tiktok" | "flickr" | "wechat" | "weibo" | "bluesky";
+export type SocialTypes = "facebook" | "x" | "instagram" | "linkedin" | "youtube" | "tiktok" | "flickr" | "wechat" | "weibo" | "bluesky" | "spotify" | "apple_podcasts" | "rss";
 export type CardColor = "turquoise" | "green" | "yellow" | "blue";
 export type CardSize = "wide" | "standard" | "narrow" | "fluid";
 export type CardCornerType = boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -67,17 +67,18 @@
     "@popperjs/core": "^2.11.8",
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
+    "embla-carousel-react": "^8.6.0",
+    "merge-refs": "^2.0.0",
     "nanoid": "^3.3.6",
     "react-transition-group": "^4.4.1",
     "use-breakpoint": "^4.0.6",
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
     "@ilo-org/brand-assets": "1.0.1",
+    "@ilo-org/styles": "1.10.1",
+    "@ilo-org/icons-react": "1.0.6",
     "@ilo-org/fonts": "2.0.0",
-    "@ilo-org/icons-react": "1.0.4",
-    "@ilo-org/styles": "1.9.0",
-    "@ilo-org/themes": "0.9.1",
-    "@ilo-org/utils": "0.1.1"
+    "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^8.1.9",
@@ -112,8 +113,8 @@
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-static-copy": "^1.0.6",
     "vitest": "^2.0.5",
-    "@ilo-org/eslint-config": "2.0.0",
     "@ilo-org/prettier-config": "2.0.0",
+    "@ilo-org/eslint-config": "2.0.0",
     "@ilo-org/typescript-config": "2.0.0"
   },
   "peerDependencies": {

package/lib/cjs/_store/CardGroup-chunk-Bdg6k3xe.js

@@ -1 +0,0 @@
-"use strict";const s=require("react/jsx-runtime"),N=require("react"),u=require("./index-chunk-Cxg31gtu.js"),v=require("./useGlobalSettings-chunk-Cd48T6lS.js"),C=require("./Button-chunk-GqAQVgEt.js"),S=require("./Link-chunk-CP7cvvcX.js"),b=require("./LinkList-chunk-Duhkqb-C.js"),M=require("./Profile-chunk-BYt-KzV1.js"),k=require("./Icon-chunk-DtOVpxQ-.js"),L=require("./List-entry-Cr2Df-dK.js"),V=require("./Picture-chunk-CWRmIhTV.js"),z=require("./Status-chunk-CaABjeKb.js"),G=N.forwardRef(({className:p,title:c,theme:r="light",size:e="standard",color:m,intro:o,source:n,titleLevel:x="p"},i)=>{const{prefix:a}=v.useGlobalSettings(),t=`${a}--card`,$=u.classNames(`${t}--wrapper`,p),d=u.classNames(t,`${t}__type__stat`,{[`${t}__size__${String(e)}`]:e,[`${t}__theme__${r}`]:r,[`${t}__color__${m}`]:m});return s.jsx("div",{className:$,ref:i,children:s.jsx("div",{className:d,children:s.jsx("div",{className:`${t}--wrap`,children:s.jsxs("div",{className:`${t}--content`,children:[s.jsx(x,{className:`${t}--title`,children:c}),o&&s.jsx("p",{className:`${t}--intro`,children:o}),n&&s.jsx(S.Link,{className:`${t}--source`,url:n.url,label:n.label})]})})})})}),R=N.forwardRef(({className:p,title:c,size:r="standard",alignment:e,intro:m,link:o,linklist:n,image:x,titleLevel:i="p",eyebrow:a,isVideo:t,theme:$="light"},d)=>{const{prefix:l}=v.useGlobalSettings(),_=`${l}--card`,h=u.classNames(_,p,`${_}__type__multilink`,{[`${_}__align__${e}`]:e,[`${_}__size__${r}`]:r,[`${_}__isvideo`]:t,[`${_}--no-image`]:!x,[`${_}__theme__${$}`]:$});return s.jsxs("div",{className:h,ref:d,children:[o&&s.jsx("a",{className:`${_}--link`,href:o,title:c,children:s.jsx("span",{className:`${_}--link--text`,children:c})}),s.jsxs("div",{className:`${_}--wrap`,children:[x&&s.jsx("div",{className:`${_}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{src:x,alt:c,className:`${_}--picture`})})}),s.jsxs("div",{className:`${_}--content`,children:[a&&s.jsx("p",{className:`${_}--eyebrow`,children:a}),s.jsx(i,{className:`${_}--title`,children:c}),x&&s.jsx("div",{className:`${_}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{src:x,alt:c,className:`${_}--picture`})})}),m&&(N.isValidElement(m)?s.jsx("div",{className:`${_}--intro`,children:m}):s.jsx("p",{className:`${_}--intro`,children:m})),n&&s.jsx(b.LinkList,{...n})]})]})]})}),q=N.forwardRef(({className:p,title:c,theme:r="light",size:e="narrow",date:m,profile:o,link:n,titleLevel:x="p",eyebrow:i},a)=>{const{prefix:t}=v.useGlobalSettings(),$=`${t}--card`,d=u.classNames(`${$}--wrapper`,p),l=u.classNames($,`${$}__type__text`,{[`${$}__size__${String(e)}`]:e,[`${$}__theme__${r}`]:r});return s.jsx("div",{className:d,ref:a,children:s.jsxs("div",{className:l,children:[s.jsx("a",{className:`${$}--link`,href:n,title:c,children:s.jsx("span",{className:`${$}--link--text`,children:c})}),s.jsx("div",{className:`${$}--wrap`,children:s.jsxs("div",{className:`${$}--content`,children:[i&&s.jsx("p",{className:`${$}--eyebrow`,children:i}),s.jsx(x,{className:`${$}--title`,children:c}),m&&s.jsx("time",{className:`${$}--date`,dateTime:m.unix,children:m.human}),o&&s.jsx(M.Profile,{avatar:o.avatar,description:o.description,link:o.link,name:o.name,role:o.role,theme:r})]})})]})})}),T=N.forwardRef(({className:p,title:c,theme:r="light",size:e="narrow",cornercut:m,intro:o,link:n,cta:x,titleLevel:i="p",eyebrow:a},t)=>{const{prefix:$}=v.useGlobalSettings(),d=`${$}--card`,l=u.classNames(`${d}--wrapper`,p,`${d}--wrapper__type__promo`,`${d}--wrapper__type__promo__size__${e}`),_=u.classNames(d,`${d}__type__promo`,{[`${d}__size__${String(e)}`]:e,[`${d}__theme__${r}`]:r,[`${d}__cornercut`]:m});return s.jsx("div",{className:l,ref:t,children:s.jsxs("div",{className:_,children:[s.jsx("a",{className:`${d}--link`,href:n,title:c,children:s.jsx("span",{className:`${d}--link--text`,children:c})}),s.jsx("div",{className:`${d}--wrap`,children:s.jsxs("div",{className:`${d}--content`,children:[a&&s.jsx("p",{className:`${d}--eyebrow`,children:a}),s.jsx(i,{className:`${d}--title`,children:c}),o&&s.jsx("p",{className:`${d}--intro`,children:o}),(x==null?void 0:x.label)&&s.jsx("div",{className:`${d}--cta`,children:s.jsx(C.Button,{link:{url:x.url,label:x.label},size:"medium",type:"primary"})})]})})]})})}),P=N.forwardRef(({className:p,title:c,theme:r="light",size:e="narrow",date:m,link:o,linklist:n,image:x,titleLevel:i="p",eyebrow:a,isVideo:t},$)=>{const{prefix:d}=v.useGlobalSettings(),l=`${d}--card`,_=u.classNames(l,p,`${l}__type__feature`,{[`${l}__size__${String(e)}`]:e,[`${l}__theme__${r}`]:r,[`${l}__isvideo`]:t,[`${l}__linklist`]:n});return s.jsxs("div",{className:_,ref:$,children:[o&&s.jsx("a",{className:`${l}--link`,href:o,title:c,children:s.jsx("span",{className:`${l}--link--text`,children:c})}),s.jsxs("div",{className:`${l}--wrap`,children:[x&&s.jsx("div",{className:`${l}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{src:x,alt:c,className:`${l}--picture`})})}),s.jsxs("div",{className:`${l}--content`,children:[a&&s.jsx("p",{className:`${l}--eyebrow`,children:a}),s.jsx(i,{className:`${l}--title`,children:c}),m&&s.jsx("time",{className:`${l}--date`,dateTime:m.unix,children:m.human}),n&&e==="narrow"&&s.jsx(b.LinkList,{headline:n.headline,linkgroup:n.linkgroup,theme:r})]})]}),n&&(e==="wide"||e==="fluid")&&s.jsx(b.LinkList,{headline:n.headline,linkgroup:n.linkgroup,theme:r})]})}),B=N.forwardRef(({className:p,title:c,theme:r="light",size:e="narrow",date:m,details:o,link:n,titleLevel:x="p",eyebrow:i,intro:a,image:t,isVideo:$=!1,linkComponent:d},l)=>{const{prefix:_}=v.useGlobalSettings(),h=`${_}--card`,j=u.classNames(h,`${h}__type__detail`,p,{[`${h}__size__${String(e)}`]:e,[`${h}__theme__${r}`]:r,[`${h}__isvideo`]:$}),g=N.createElement(d||"a",{className:`${h}--link`,href:n,title:c},s.jsx("span",{className:`${h}--link--text`,children:c}));return s.jsxs("div",{className:j,ref:l,children:[n&&g,s.jsxs("div",{className:`${h}--wrap`,children:[t&&s.jsx("div",{className:`${h}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{className:`${h}--picture`,src:t,alt:c})})}),s.jsxs("div",{className:`${h}--content`,children:[i&&s.jsx("p",{className:`${h}--eyebrow`,children:i}),c&&s.jsx(x,{className:`${h}--title`,children:c}),a&&(N.isValidElement(a)?s.jsx("div",{className:`${h}--intro`,children:a}):s.jsx("p",{className:`${h}--intro`,children:a})),m&&!o&&s.jsx("time",{className:`${h}--date`,dateTime:m.unix,children:m.human}),o&&s.jsxs("p",{className:`${h}--date-extra`,children:[s.jsx(k.Icon,{name:"TriangleRight",size:20,className:`${h}--icon-right`}),s.jsx(k.Icon,{name:"TriangleLeft",size:20,className:`${h}--icon-left`}),o]})]})]})]})}),F=N.forwardRef(({title:p,theme:c="light",size:r="narrow",list:e,titleLevel:m="p",className:o},n)=>{const{prefix:x}=v.useGlobalSettings(),i=`${x}--card`,a=u.classNames(i,`${i}__type__factlist`,o,{[`${i}__size__${r}`]:r,[`${i}__theme__${c}`]:c});return s.jsx("div",{className:a,ref:n,children:s.jsx("div",{className:`${i}--wrap`,children:s.jsxs("div",{className:`${i}--content`,children:[p&&s.jsx(m,{className:`${x}--card--title`,children:p}),s.jsx(L.List,{alignment:"default",ordered:"unordered",theme:c,children:e.map(t=>s.jsx(L.List.Item,{children:s.jsx("p",{children:t})},t))})]})})})}),I=N.forwardRef(({eyebrow:p,size:c="narrow",image:r,dataset:e,columns:m="one",className:o},n)=>{var d;const{prefix:x}=v.useGlobalSettings(),i=c==="narrow"?"one":m,a=`${x}--card`,t=u.classNames(a,`${a}__type__data`,o,{[`${a}__size__${String(c)}`]:c,[`${a}__type__data__columns__${i}`]:i}),$=u.classNames(`${a}--content`,{[`${a}--content__with-image`]:r,[`${a}--content__no-image-with-links`]:!r&&(e==null?void 0:e.links),[`${a}--content__default`]:!r&&!(e!=null&&e.links)});return s.jsx("div",{className:t,ref:n,children:s.jsxs("div",{className:`${a}--wrap`,children:[!r&&p&&s.jsx("div",{className:`${a}--eyebrow`,children:p}),s.jsxs("div",{className:$,children:[r&&s.jsxs("div",{className:`${a}--area--image`,children:[p&&s.jsx("div",{className:`${a}--eyebrow`,children:p}),s.jsx("div",{className:`${a}--image`,children:s.jsx("picture",{children:s.jsx("img",{className:`${a}--picture`,src:r,alt:p})})})]}),(d=e==null?void 0:e.content)==null?void 0:d.items.map((l,_)=>s.jsxs("div",{className:`${a}--area--content`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:l.label}),s.jsx("p",{className:`${a}__type__data--content-copy`,children:l.copy})]},_)),(e==null?void 0:e.files)&&s.jsx("div",{className:`${a}--area--files`,children:s.jsxs("div",{className:`${a}__type__data--content-files`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:e.files.headline}),e.files.items.map((l,_)=>s.jsx(C.Button,{link:{url:l.url,label:l.label,target:l.target||"_self"},size:"small"},_))]})}),(e==null?void 0:e.cta)&&s.jsx("div",{className:`${a}--area--cta`,children:s.jsxs("div",{className:`${a}__type__data--content-cta`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:e.cta.headline}),e.cta.items.map(l=>s.jsx(C.Button,{type:"secondary",size:"small",link:{url:l.url,label:l.label,target:l.target}},l.label))]})}),(e==null?void 0:e.links)&&s.jsx("div",{className:`${a}--area--links`,children:s.jsxs("div",{className:`${a}__type__data--content-links`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:e.links.headline}),s.jsx("div",{className:`${a}__type__data--content-links-list`,children:e.links.items.map(l=>s.jsx(N.Fragment,{children:s.jsx(S.Link,{url:l.url,label:l.label,className:`${a}__type__data--content-link`})},l.label+l.url))})]})})]})]})})}),D=N.forwardRef(({className:p,theme:c="light",titleLevel:r="p",size:e="narrow",link:m,linkComponent:o,title:n,isVideo:x=!1,image:i,status:a,eyebrow:t,content:$,cta:d},l)=>{var y;const{prefix:_}=v.useGlobalSettings(),h=c==="dark"?"var(--ilo-color-white)":"var(--ilo-color-gray-accessible)",j=`${_}--card`,g=u.classNames(j,`${j}__type__score`,{[`${j}__theme__${c}`]:c,[`${j}__size__${e}`]:e,[`${j}__isvideo`]:x}),E=N.createElement(o||"a",{href:m,title:n,className:`${j}--link`},s.jsx("span",{className:`${j}--link--text`,children:n}));return s.jsxs("div",{className:u.classNames(g,p),ref:l,children:[E,s.jsxs("div",{className:`${j}--wrap`,children:[i&&e!=="simple"&&s.jsx("div",{className:`${j}--image--wrapper`,children:s.jsx(V.Picture,{...i})}),s.jsxs("div",{className:`${j}--content`,children:[a&&s.jsx(z.Status,{content:a.content,statusType:a.statusType}),t&&e!=="simple"&&s.jsx("p",{className:`${j}--eyebrow`,children:t}),n&&s.jsx(r,{className:`${j}--title`,children:n}),$&&s.jsx("div",{className:`${j}--area--content`,children:(y=$.items)==null?void 0:y.map((f,w)=>s.jsxs("div",{className:`${j}--content--item`,children:[s.jsx(k.Icon,{name:f.icon,size:20,color:h}),s.jsx("span",{children:f.label})]},w))}),d&&s.jsx("div",{className:`${j}--area--cta`,children:d.items.map((f,w)=>s.jsx("div",{className:`${j}--cta`,children:f},w))})]})]})]})}),A={stat:G,multilink:R,text:q,promo:T,feature:P,detail:B,factlist:F,data:I,score:D},H=N.forwardRef(({type:p,group:c,cardCount:r="one",cta:e,collapsed:m=!1},o)=>{const n=A[p],{prefix:x}=v.useGlobalSettings(),i=`${x}--cardgroup`,a=u.classNames(i,`${i}__count__${r}`,{[`${i}__collapsed`]:m});return s.jsxs("div",{className:a,ref:o,children:[s.jsx("div",{className:`${i}--inner`,children:c.map((t,$)=>s.jsx(n,{...t},$))}),e&&s.jsx("div",{className:`${i}--button-wrap`,children:s.jsx(C.Button,{link:{url:e.url,label:e.label},type:"secondary",size:"medium"})})]})});exports.CardGroup=H;exports.DataCard=I;exports.DetailCard=B;exports.FactListCard=F;exports.FeatureCard=P;exports.MultiLinkCard=R;exports.PromoCard=T;exports.ScoreCard=D;exports.StatCard=G;exports.TextCard=q;

package/lib/cjs/_store/Cards-entry-BljbMyDU.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./CardGroup-chunk-Bdg6k3xe.js");exports.CardGroup=r.CardGroup;exports.DataCard=r.DataCard;exports.DetailCard=r.DetailCard;exports.FactListCard=r.FactListCard;exports.FeatureCard=r.FeatureCard;exports.MultiLinkCard=r.MultiLinkCard;exports.PromoCard=r.PromoCard;exports.ScoreCard=r.ScoreCard;exports.StatCard=r.StatCard;exports.TextCard=r.TextCard;

package/lib/cjs/_store/ContextMenu-chunk-DJWyl3UI.js

@@ -1 +0,0 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),a=require("./index-chunk-Cxg31gtu.js"),x=require("./useGlobalSettings-chunk-Cd48T6lS.js"),i=require("react-dom"),d=c.forwardRef(({className:o,links:r,withPortal:l=!1},u)=>{const{prefix:s}=x.useGlobalSettings(),m=c.useId(),n=t.jsx("ol",{className:a.classNames(`${s}--context-menu`,o),id:`${s}--context-menu-${m}`,ref:u,children:r.map(e=>t.jsx("li",{className:a.classNames(`${s}--context-menu--item`,{endsection:e.endsection,className:e.className}),children:e.component?t.jsx(e.component,{className:`${s}--context-menu--link`,href:e.url,...e.componentProps,children:t.jsx("span",{className:`${s}--context-menu--label`,children:e.label})}):t.jsx("a",{href:e.url,className:`${s}--context-menu--link`,children:t.jsx("span",{className:`${s}--context-menu--label`,children:e.label})})},`${e.label}-${e.url}`))});return l?i.createPortal(n,document.body):n});exports.ContextMenu=d;