@lifesg/react-design-system 3.5.0-canary.7 → 3.5.0

package/fullscreen-image-carousel/fullscreen-image-carousel.style.js

@@ -74,7 +74,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
               `}
 `,x=i(g)``,f=i(g)`
     color: ${n["icon-error"]};
-`,m=i(g)``,b=i(g)`
+`,m=i(g)``,b=i(g)``,u=i(g)`
     z-index: 4;
     position: absolute;
     top: 50%;
@@ -99,19 +99,19 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
                 );
             }
         `}
-`,u=i.div`
+`,w=i.div`
     position: relative;
     width: 100%;
     height: 100dvh;
     display: flex;
     flex-direction: column;
-`,w=i.div`
+`,v=i.div`
     display: flex;
     flex-direction: column;
     width: 100%;
     flex: 1;
     min-height: 0;
-`,v=i.div`
+`,y=i.div`
     user-select: none;
     position: relative;
     display: block;
@@ -119,13 +119,13 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
     width: 100%;
     flex: 1;
     min-height: 0;
-`,y=i.div`
+`,j=i.div`
     display: block;
     user-select: none;
     height: 100%;
     overflow: hidden;
     touch-action: pan-y;
-`,j=i.div`
+`,k=i.div`
     display: flex;
     transition: all 450ms ease-out 0s;
     position: relative;
@@ -133,7 +133,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
     user-select: none;
     width: 100%;
     height: 100%;
-`,k=i.div`
+`,M=i.div`
     flex: 0 0 100%;
     box-sizing: border-box;
     display: flex;
@@ -149,7 +149,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
         height: 100%;
         width: 100%;
     }
-`,M=i.div`
+`,W=i.div`
     height: 100%;
     width: 100%;
     outline: none;
@@ -162,17 +162,17 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
         outline: ${s["width-020"]} solid ${n["border-selected"]};
         outline-offset: -2px;
     }
-`,W=i(h)`
+`,z=i(h)`
     height: 100%;
     width: 100%;
     border-radius: ${c.none};
-`,z=i(o)`
+`,B=i(o)`
     width: 60vw;
     height: auto;
     max-height: 100%;
     border-radius: ${c.none};
     aspect-ratio: 4 / 3;
-`,B=i.div`
+`,R=i.div`
     display: flex;
     justify-content: center;
     padding: ${d["spacing-16"]};
@@ -183,7 +183,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
-`,R=i(p.BodyXS)`
+`,L=i(p.BodyXS)`
     display: inline-flex;
     padding: ${d["spacing-4"]} ${d["spacing-16"]};
     justify-content: center;
@@ -191,7 +191,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
     border-radius: ${c.full};
     background-color: ${n.bg};
     text-align: center;
-`,L=i.div`
+`,T=i.div`
     flex-shrink: 0;
     display: flex;
     overflow: auto;
@@ -204,7 +204,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
                 ${d["spacing-16"]} ${d["spacing-20"]} calc(${d["spacing-16"]} + ${i.$insetBottom||0}px);
             `};
     }
-`,T=i.div`
+`,S=i.div`
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -212,7 +212,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
-`,S=i.div`
+`,C=i.div`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -223,7 +223,7 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
         height: 64px;
         width: 64px;
     }
-`,C=i.div`
+`,D=i.div`
     cursor: pointer;
     background-color: ${n["bg-inverse"]};
     border-radius: ${c.md};
@@ -261,10 +261,10 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
                       border-color: ${n["border-hover"]};
                   }
               `};
-`,D=i(h)`
+`,F=i(h)`
     height: 100%;
     width: 100%;
-`,F=i.div`
+`,I=i.div`
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -278,17 +278,17 @@ import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../sha
     ${i=>i.$centerContent&&e`
             justify-content: center;
         `}
-`,I=i(p.BodyBL)`
+`,X=i(p.BodyBL)`
     color: ${n["text-inverse"]};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
-`,X=i(p.BodyMD)`
+`,Y=i(p.BodyMD)`
     color: ${n["text-inverse"]};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
-`;export{b as ArrowButton,B as BoxChip,u as CarouselModalContent,R as Chip,x as CloseButton,f as DeleteButton,I as FileInfoFileName,X as FileInfoFileSize,F as FileInfoTextWrapper,M as FocusableImageRegion,w as ImageGalleryContainer,k as ImageGallerySlide,j as ImageGallerySlides,y as ImageGallerySwipe,v as ImageGalleryWrapper,m as MagnifierButton,W as SlideImage,z as SlidePlaceholderImage,L as ThumbnailContainer,D as ThumbnailImage,C as ThumbnailItem,S as ThumbnailItemContainer,T as ThumbnailWrapper,$ as TopActionButtons};
+`;export{u as ArrowButton,R as BoxChip,w as CarouselModalContent,L as Chip,x as CloseButton,b as CustomActionButton,f as DeleteButton,X as FileInfoFileName,Y as FileInfoFileSize,I as FileInfoTextWrapper,W as FocusableImageRegion,v as ImageGalleryContainer,M as ImageGallerySlide,k as ImageGallerySlides,j as ImageGallerySwipe,y as ImageGalleryWrapper,m as MagnifierButton,z as SlideImage,B as SlidePlaceholderImage,T as ThumbnailContainer,F as ThumbnailImage,D as ThumbnailItem,C as ThumbnailItemContainer,S as ThumbnailWrapper,$ as TopActionButtons};
 //# sourceMappingURL=fullscreen-image-carousel.style.js.map

package/fullscreen-image-carousel/fullscreen-image-carousel.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { InsetStyleProps } from \"../shared/types\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${Colour[\"bg\"]};\n    color: ${Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(${Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-24\"]} ${Spacing[\n                    \"spacing-16\"\n                ]} calc(${Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-16\"]} ${Spacing[\n                    \"spacing-20\"\n                ]} calc(${Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${Colour[\"bg-inverse\"]};\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${Border[\"width-040\"]};\n                  border-color: ${Colour[\"border-selected\"]};\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      border-width: ${Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${Font.Spec[\"body-lh-baseline\"]} + ${Spacing[\"spacing-8\"]} +\n            ${Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","Colour","Shadow","Border","TopActionButtons","div","Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { InsetStyleProps } from \"../shared/types\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${Colour[\"bg\"]};\n    color: ${Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const CustomActionButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(${Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-24\"]} ${Spacing[\n                    \"spacing-16\"\n                ]} calc(${Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-16\"]} ${Spacing[\n                    \"spacing-20\"\n                ]} calc(${Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${Colour[\"bg-inverse\"]};\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${Border[\"width-040\"]};\n                  border-color: ${Colour[\"border-selected\"]};\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      border-width: ${Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${Font.Spec[\"body-lh-baseline\"]} + ${Spacing[\"spacing-8\"]} +\n            ${Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","Colour","Shadow","Border","TopActionButtons","div","Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","CustomActionButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"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"}

package/fullscreen-image-carousel/types.d.ts

@@ -6,6 +6,16 @@ export interface FullscreenImageCarouselRef {
     goToPrevItem: () => void;
     goToNextItem: () => void;
 }
+/** Custom button rendered in the carousel's top bar */
+export interface FullscreenImageCarouselCustomAction {
+    /** Icon element rendered inside the button */
+    icon: JSX.Element;
+    /** Accessible name for the button */
+    ariaLabel: string;
+    /** Called when the action is activated */
+    onClick: (item: FullscreenImageCarouselItemProps, index: number) => void;
+    "data-testid"?: string | undefined;
+}
 export interface FullscreenImageCarouselProps extends Pick<ModalProps, "show" | "rootComponentId" | "animationFrom" | "zIndex"> {
     items: FullscreenImageCarouselItemProps[];
     /** The index of the visible item, starts from 0 */
@@ -14,13 +24,19 @@ export interface FullscreenImageCarouselProps extends Pick<ModalProps, "show" |
     hideNavigation?: boolean | undefined;
     hideCounter?: boolean | undefined;
     hideMagnifier?: boolean | undefined;
+    /** Additional icon buttons rendered in the top bar, before the default buttons. An item's own `customActions` replaces this list for that item */
+    customActions?: FullscreenImageCarouselCustomAction[] | undefined;
     onDelete?: ((item: FullscreenImageCarouselItemProps, index: number) => void) | undefined;
     onClose?: (() => void) | undefined;
     insets?: Insets | undefined;
+    /** Ref to the top bar element, which holds the file info and the action buttons */
+    topBarRef?: React.Ref<HTMLDivElement> | undefined;
 }
 interface FullscreenImageCarouselBaseItemProps {
     fileName?: string | undefined;
     fileSize?: string | undefined;
+    /** Replaces the component-level `customActions` while this item is active. Leave `undefined` to inherit the component-level list; pass `[]` to render none */
+    customActions?: FullscreenImageCarouselCustomAction[] | undefined;
 }
 export interface FullscreenImageCarouselImageItemProps extends FullscreenImageCarouselBaseItemProps {
     type?: "image" | undefined;

package/masthead/masthead.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import"../external/@govtechsg/sgds-web-component/themes/day.css.js";import"../external/@govtechsg/sgds-web-component/themes/night.css.js";import{memo as t,useContext as s,useEffect as o}from"react";import{ThemeContext as n}from"styled-components";import{Wrapper as m}from"./masthead.style.js";const d=t((({stretch:t=!1})=>{const d=s(n),i="dark"===(null==d?void 0:d.colourMode);o((()=>{l()||h()}),[]),o((()=>{i?document.documentElement.classList.add(a):document.documentElement.classList.remove(a)}),[i]);const l=()=>document.getElementById(c),h=()=>{if(!document.getElementById(c)){const e=document.createElement("script");e.id=c,e.type="module",e.src=r,document.head.appendChild(e)}};return e(m,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:t})})),c="lifesg-ds-masthead-script",r="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",a="sgds-night-theme";export{d as Masthead};
+import{jsx as e}from"react/jsx-runtime";import"../external/@govtechsg/sgds-web-component/themes/day.css.js";import"../external/@govtechsg/sgds-web-component/themes/night.css.js";import{memo as t,useContext as s,useEffect as o}from"react";import{ThemeContext as m}from"styled-components";import{Wrapper as n}from"./masthead.style.js";const r=t((({stretch:t=!1})=>{const r=s(m),d="dark"===(null==r?void 0:r.colourMode);o((()=>{import("../external/@govtechsg/sgds-web-component/components/Masthead/index.js")}),[]),o((()=>{d?document.documentElement.classList.add(c):document.documentElement.classList.remove(c)}),[d]);return e(n,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:t})})),c="sgds-night-theme";export{r as Masthead};
 //# sourceMappingURL=masthead.js.map

package/masthead/masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"masthead.js","sources":["../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Wrapper } from \"./masthead.style\";\nimport { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper dangerouslySetInnerHTML={createContent()} $stretch={stretch} />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","Wrapper","dangerouslySetInnerHTML","__html","$stretch"],"mappings":"6UAOA,MA8DaA,EAAWC,GA9DE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAWC,GACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,GAAU,KACDC,KACDC,GACJ,GACD,IAEHF,GAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACT,IAKJ,MAAMG,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,EAACC,EAAO,CAACC,wBARF,CAAEC,OAAQ,mCAQgCC,SAAY7B,GAAW,IAS1EgB,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"version":3,"file":"masthead.js","sources":["../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Wrapper } from \"./masthead.style\";\nimport { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        import(\"@govtechsg/sgds-web-component/components/Masthead/index.js\");\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper dangerouslySetInnerHTML={createContent()} $stretch={stretch} />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","import","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","_jsx","Wrapper","dangerouslySetInnerHTML","__html","$stretch"],"mappings":"6UAOA,MA6CaA,EAAWC,GA7CE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAWC,GACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,GAAU,KACNC,OAAO,yEAA6D,GACrE,IAEHD,GAAU,KAEFF,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAoBJ,OACIU,EAACC,EAAO,CAACC,wBARF,CAAEC,OAAQ,mCAQgCC,SAAYlB,GAAW,IAS1EY,EAA6B"}

package/navbar/menu.d.ts

@@ -2,7 +2,8 @@ import React from "react";
 import { NavItemCommonProps } from "./types";
 interface Props<T> {
     items: NavItemCommonProps<T>[];
+    selectedId?: string | undefined;
     onItemClick: (event: React.MouseEvent<HTMLAnchorElement>, item: NavItemCommonProps<T>) => void;
 }
-export declare const Menu: <T>({ items, onItemClick }: Props<T>) => JSX.Element;
+export declare const Menu: <T>({ items, selectedId, onItemClick, }: Props<T>) => JSX.Element;
 export {};

package/navbar/menu.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as n,Fragment as e}from"react/jsx-runtime";import{MobileWrapper as i,MenuItem as o,Link as r}from"./menu.styles.js";const l=({items:l,onItemClick:s})=>{const m=t=>n=>{n.stopPropagation(),s(n,t)};return(null==l?void 0:l.length)?n(i,{children:l.map(((e,i)=>{const{children:l,options:s}=e,c=t(e,["children","options"]),d=`menu__mobile-${i+1}`;return n(o,{children:n(r,Object.assign({"data-testid":d},c,s,{onClick:m(e),underlineStyle:"none",children:l}))},i)}))}):n(e,{})};export{l as Menu};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,Fragment as i}from"react/jsx-runtime";import{MobileWrapper as n,MenuItem as o,Link as r}from"./menu.styles.js";const l=({items:l,selectedId:s,onItemClick:c})=>{const d=e=>t=>{t.stopPropagation(),c(t,e)};return(null==l?void 0:l.length)?t(n,{children:l.map(((i,n)=>{const{children:l,options:c,weight:m}=i,a=e(i,["children","options","weight"]),p=`menu__mobile-${n+1}`,h=i.id===s;return t(o,{children:t(r,Object.assign({"data-testid":p},a,c,{weight:h?"bold":m,"aria-current":h?"page":void 0,onClick:d(i),underlineStyle:"none",children:l}))},n)}))}):t(i,{})};export{l as Menu};
 //# sourceMappingURL=menu.js.map

package/navbar/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/navbar/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link, MenuItem, MobileWrapper } from \"./menu.styles\";\nimport { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({ items, onItemClick }: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <MobileWrapper>\n            {items.map((item, index) => {\n                const { children, options, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n\n                return (\n                    <MenuItem key={index}>\n                        <Link\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Link>\n                    </MenuItem>\n                );\n            })}\n        </MobileWrapper>\n    );\n};\n"],"names":["Menu","items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","MenuItem","Link","Object","assign","onClick","underlineStyle"],"mappings":"8KAYO,MAAMA,EAAO,EAAOC,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,EAACC,EAAa,CAAAC,SACTT,EAAMU,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BT,EAAnBU,EAAcC,EAAKX,EAA3C,CAAA,WAAA,YACAY,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIJ,EAACS,EAAQ,CAAAP,SACLF,EAACU,EAAIC,OAAAC,OAAA,CAAA,cACYJ,GACTF,EACAD,GACJQ,QAASlB,EAAgBC,GACzBkB,eAAe,OAAMZ,SAEpBA,MARME,EAUJ,MAnBAJ,OAsBP"}
+{"version":3,"file":"menu.js","sources":["../../src/navbar/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link, MenuItem, MobileWrapper } from \"./menu.styles\";\nimport { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    selectedId?: string | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({\n    items,\n    selectedId,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <MobileWrapper>\n            {items.map((item, index) => {\n                const { children, options, weight, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n                const selected = item.id === selectedId;\n\n                return (\n                    <MenuItem key={index}>\n                        <Link\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            weight={selected ? \"bold\" : weight}\n                            aria-current={selected ? \"page\" : undefined}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Link>\n                    </MenuItem>\n                );\n            })}\n        </MobileWrapper>\n    );\n};\n"],"names":["Menu","items","selectedId","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","weight","otherItemAttrs","__rest","testId","selected","id","MenuItem","Link","Object","assign","undefined","onClick","underlineStyle"],"mappings":"8KAaO,MAAMA,EAAO,EAChBC,QACAC,aACAC,kBAEA,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKJ,aAAK,EAALA,EAAOO,QAGRC,EAACC,EAAa,CAAAC,SACTV,EAAMW,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,EAAOC,OAAEA,GAA8BV,EAAnBW,EAAcC,EAAKZ,EAAnD,CAAA,WAAA,UAAA,WACAa,EAAS,gBAAgBL,EAAQ,IACjCM,EAAWd,EAAKe,KAAOlB,EAE7B,OACIO,EAACY,EAAQ,CAAAV,SACLF,EAACa,EAAIC,OAAAC,OAAA,CAAA,cACYN,GACTF,EACAF,GACJC,OAAQI,EAAW,OAASJ,EAAM,eACpBI,EAAW,YAASM,EAClCC,QAAStB,EAAgBC,GACzBsB,eAAe,OAAMhB,SAEpBA,MAVME,EAYJ,MAtBAJ,OAyBP"}

package/navbar/menu.styles.js

@@ -10,7 +10,7 @@ import e from"styled-components";import{lineClampCss as r}from"../shared/styles/
 `,a=e.li`
     width: 100%;
     display: flex;
-`,n=e(d.LinkBL)`
+`,p=e(d.LinkBL)`
     width: 100%;
     text-align: left;
     color: ${t.text};
@@ -19,7 +19,7 @@ import e from"styled-components";import{lineClampCss as r}from"../shared/styles/
 
     // use border, as padding still shows an extra line after the ellipsis
     border: ${o.solid} transparent;
-    border-width: ${i["spacing-12"]} ${i["spacing-8"]};
+    border-width: 10px ${i["spacing-16"]} 10px ${i["spacing-24"]};
     border-radius: ${s.md};
 
     ${r(2)}
@@ -31,5 +31,5 @@ import e from"styled-components";import{lineClampCss as r}from"../shared/styles/
         background-color: ${t["bg-hover"]};
         color: ${t.text};
     }
-`;export{n as Link,a as MenuItem,l as MobileWrapper};
+`;export{p as Link,a as MenuItem,l as MobileWrapper};
 //# sourceMappingURL=menu.styles.js.map

package/navbar/menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sources":["../../src/navbar/menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\nexport const MobileWrapper = styled.ul`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const MenuItem = styled.li`\n    width: 100%;\n    display: flex;\n`;\n\nexport const Link = styled(Typography.LinkBL)`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    // use border, as padding still shows an extra line after the ellipsis\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":["MobileWrapper","styled","ul","Border","Colour","MenuItem","li","Link","Typography","LinkBL","Spacing","Radius","lineClampCss"],"mappings":"mOAKO,MAAMA,EAAgBC,EAAOC,EAAE;;;;;;;;mBAQnBC,EAAO,sBAAsBC,EAAO;EAG1CC,EAAWJ,EAAOK,EAAE;;;EAKpBC,EAAON,EAAOO,EAAWC,OAAO;;;aAGhCL,EAAa;;gBAEVM,EAAQ;;;cAGVP,EAAc;oBACRO,EAAQ,iBAAiBA,EAAQ;qBAChCC,EAAW;;MAE1BC,EAAa;;;;;;4BAMSR,EAAO;iBAClBA,EAAa;;"}
+{"version":3,"file":"menu.styles.js","sources":["../../src/navbar/menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\nexport const MobileWrapper = styled.ul`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const MenuItem = styled.li`\n    width: 100%;\n    display: flex;\n`;\n\nexport const Link = styled(Typography.LinkBL)`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    // use border, as padding still shows an extra line after the ellipsis\n    border: ${Border[\"solid\"]} transparent;\n    border-width: 10px ${Spacing[\"spacing-16\"]} 10px ${Spacing[\"spacing-24\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":["MobileWrapper","styled","ul","Border","Colour","MenuItem","li","Link","Typography","LinkBL","Spacing","Radius","lineClampCss"],"mappings":"mOAKO,MAAMA,EAAgBC,EAAOC,EAAE;;;;;;;;mBAQnBC,EAAO,sBAAsBC,EAAO;EAG1CC,EAAWJ,EAAOK,EAAE;;;EAKpBC,EAAON,EAAOO,EAAWC,OAAO;;;aAGhCL,EAAa;;gBAEVM,EAAQ;;;cAGVP,EAAc;yBACHO,EAAQ,sBAAsBA,EAAQ;qBAC1CC,EAAW;;MAE1BC,EAAa;;;;;;4BAMSR,EAAO;iBAClBA,EAAa;;"}

package/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as n,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as o}from"react";import{Menu as d}from"../menu/menu.js";import{Menu as a}from"./menu.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{MobileWrapper as c,Wrapper as u,LinkItem as p,Link as m,LinkLabel as h,LinkButton as g,ChevronIconDesktop as b,LinkIndicator as v,LinkIconContainer as $,ExpandCollapseButton as f,ChevronIcon as j}from"./navbar-items.styles.js";const k=({items:k,selectedId:x,mobile:C=!1,hideNavBranding:M,hideLinkIndicator:I=!1,onItemClick:O})=>{const[_,w]=r(-1),[L,P]=r(!1),[y,E]=r(null),B=l(null),D=s();o((()=>{const e=e=>{B.current&&!B.current.contains(e.target)&&(P(!1),w(-1),E(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const A=(e,n)=>t=>{var i;if(t.stopPropagation(),C&&(null===(i=e.subMenu)||void 0===i?void 0:i.length)){const e=!(_===n&&L);w(n),P(e)}O(t,e)},F=(e,n)=>{e.stopPropagation(),O(e,n),P(!1),w(-1)},H=(e,t)=>n(d.Content,{id:t,children:n(d.Section,{showDivider:!1,children:e.map(((e,t)=>n(d.Link,{href:e.href,children:e.children},`${e.id}-${t}`)))})}),N=e=>n(a,{items:e,onItemClick:F}),S=(r,l)=>{const{children:o,options:a,subMenu:s}=r,c=e(r,["children","options","subMenu"]),u=!!(null==s?void 0:s.length),O=(e=>{var n;return e.id===x||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===x))})(r),w=C&&u&&_===l&&L,P=!C&&u&&y===l||w,B=null!==y?y===l:O,F=!I&&B,S=B?C?"bold":"semibold":"regular",T=C?`link__mobile-${l+1}`:`link__${l+1}`,q=()=>F?n(v,{"data-testid":`${T}-indicator`,$selected:B}):null;return n(p,{$hiddenBranding:M,children:u?(e=>{const p=`navbar-submenu-${D}-${r.id}`;return C?i(t,{children:[i(m,Object.assign({"data-testid":T,$weight:S,$selected:B},c,{"aria-current":O?"page":void 0,"aria-haspopup":"menu","aria-expanded":P,onClick:A(r,l)},a,{children:[n(h,{children:o}),q(),C&&u?n($,{children:n(f,{"data-testid":`${T}-expand-collapse-button`,$selected:B,$expanded:P,focusHighlight:!1,focusOutline:"browser","aria-label":P?"Collapse":"Expand",children:n(j,{$selected:B})})}):null]})),w&&N(s)]}):n(d,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:H(s,p),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>E(l),onPopoverDismiss:()=>{E((e=>e===l?null:e))},children:i(g,Object.assign({type:"button",tabIndex:0,"data-testid":T,$weight:S,$selected:B,"aria-haspopup":"menu","aria-expanded":P},a,{children:[n(h,{children:o}),q(),n(b,{$selected:B,$expanded:P})]}))})})(l===k.length-1):i(m,Object.assign({tabIndex:0,"data-testid":T,$weight:S,$selected:B},c,{"aria-current":O?"page":void 0,onClick:A(r,l)},a,{children:[n(h,{children:o}),q()]}))},l)},T=()=>k.map(((e,t)=>{var i;return"component"===e.itemType?n("li",{children:null!==(i=e.children)&&void 0!==i?i:null},t):S(e,t)}));return k&&k.length>0?C?n(c,{ref:B,children:T()}):n(u,{ref:B,$alignLeft:M,children:T()}):n(t,{})};export{k as NavbarItems};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as n,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as o}from"react";import{Menu as d}from"../menu/menu.js";import{Menu as a}from"./menu.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{MobileWrapper as c,Wrapper as u,LinkItem as p,Link as m,LinkLabel as h,LinkButton as g,ChevronIconDesktop as b,LinkIndicator as v,LinkIconContainer as $,ExpandCollapseButton as f,ChevronIcon as j}from"./navbar-items.styles.js";const x=({items:x,selectedId:k,mobile:I=!1,hideNavBranding:C,hideLinkIndicator:M=!1,onItemClick:O})=>{const[_,w]=r(null),L=l(null),y=s(),P=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===k)))},E=I?x.findIndex((e=>"component"!==e.itemType&&P(e))):-1,B=E<0?null:E;o((()=>{I&&w(B)}),[I,B]),o((()=>{if(I)return;const e=e=>{L.current&&!L.current.contains(e.target)&&w(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[I]);const D=(e,n)=>t=>{t.stopPropagation(),I&&w((t=>{var i;return(null===(i=e.subMenu)||void 0===i?void 0:i.length)&&t!==n?n:null})),O(t,e)},T=(e,n)=>{e.stopPropagation(),O(e,n)},A=(e,t)=>n(d.Content,{id:t,children:n(d.Section,{showDivider:!1,children:e.map(((e,t)=>n(d.Link,{href:e.href,children:e.children},`${e.id}-${t}`)))})}),F=e=>n(a,{items:e,selectedId:k,onItemClick:T}),H=(r,l)=>{const{children:o,options:a,subMenu:s}=r,c=e(r,["children","options","subMenu"]),u=!!(null==s?void 0:s.length),O=(e=>e.id===k||P(e))(r),L=I&&u&&_===l,E=!I&&u&&_===l||L,B=I||null===_?O:_===l,T=!M&&B,H=B?I?"bold":"semibold":"regular",N=I?`link__mobile-${l+1}`:`link__${l+1}`,S=()=>T?n(v,{"data-testid":`${N}-indicator`,$selected:B}):null;return n(p,{$hiddenBranding:C,children:u?(e=>{const p=`navbar-submenu-${y}-${r.id}`;return I?i(t,{children:[i(m,Object.assign({"data-testid":N,$weight:H,$selected:B},c,{"aria-current":O?"page":void 0,"aria-haspopup":"menu","aria-expanded":E,onClick:D(r,l)},a,{children:[n(h,{children:o}),S(),I&&u?n($,{children:n(f,{"data-testid":`${N}-expand-collapse-button`,$selected:B,$expanded:E,focusHighlight:!1,focusOutline:"browser","aria-label":E?"Collapse":"Expand",children:n(j,{$selected:B})})}):null]})),L&&F(s)]}):n(d,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:A(s,p),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{w(l)},onPopoverDismiss:()=>{w((e=>e===l?null:e))},children:i(g,Object.assign({type:"button",tabIndex:0,"data-testid":N,$weight:H,$selected:B,"aria-haspopup":"menu","aria-expanded":E},a,{children:[n(h,{children:o}),S(),n(b,{$selected:B,$expanded:E})]}))})})(l===x.length-1):i(m,Object.assign({tabIndex:0,"data-testid":N,$weight:H,$selected:B},c,{"aria-current":O?"page":void 0,onClick:D(r,l)},a,{children:[n(h,{children:o}),S()]}))},l)},N=()=>x.map(((e,t)=>{var i;return"component"===e.itemType?n("li",{children:null!==(i=e.children)&&void 0!==i?i:null},t):H(e,t)}));return x&&x.length>0?I?n(c,{ref:L,children:N()}):n(u,{ref:L,$alignLeft:C,children:N()}):n(t,{})};export{x as NavbarItems};
 //# sourceMappingURL=navbar-items.js.map

package/navbar/navbar-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n        closeMobileSubMenu();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                $weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            $weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        $weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","$weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
+{"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                $weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            $weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        $weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","$weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}