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

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

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

package/cjs/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/cjs/navbar/menu.js

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

package/cjs/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":["items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","MenuItem","Link","Object","assign","onClick","underlineStyle"],"mappings":"8HAYoB,EAAOA,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,EAAAA,IAACC,EAAAA,cAAa,CAAAC,SACTT,EAAMU,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BT,EAAnBU,EAAcC,EAAAA,OAAKX,EAA3C,CAAA,WAAA,YACAY,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIJ,MAACS,EAAAA,SAAQ,CAAAP,SACLF,EAAAA,IAACU,OAAIC,OAAAC,OAAA,CAAA,cACYJ,GACTF,EACAD,GACJQ,QAASlB,EAAgBC,GACzBkB,eAAe,OAAMZ,SAEpBA,MARME,EAUJ,MAnBAJ,EAAAA,kBAsBP"}
+{"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":["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":"8HAaoB,EAChBA,QACAC,aACAC,kBAEA,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKJ,aAAK,EAALA,EAAOO,QAGRC,EAAAA,IAACC,EAAAA,cAAa,CAAAC,SACTV,EAAMW,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,EAAOC,OAAEA,GAA8BV,EAAnBW,EAAcC,EAAAA,OAAKZ,EAAnD,CAAA,WAAA,UAAA,WACAa,EAAS,gBAAgBL,EAAQ,IACjCM,EAAWd,EAAKe,KAAOlB,EAE7B,OACIO,EAAAA,IAACY,EAAAA,SAAQ,CAAAV,SACLF,EAAAA,IAACa,EAAAA,KAAIC,OAAAC,OAAA,CAAA,cACYN,GACTF,EACAF,GACJC,OAAQI,EAAW,OAASJ,EAAM,eACpBI,EAAW,YAASM,EAClCC,QAAStB,EAAgBC,GACzBsB,eAAe,OAAMhB,SAEpBA,MAVME,EAYJ,MAtBAJ,EAAAA,kBAyBP"}

package/cjs/navbar/menu.styles.js

@@ -19,7 +19,7 @@
 
     // use border, as padding still shows an extra line after the ellipsis
     border: ${t.Border.solid} transparent;
-    border-width: ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-8"]};
+    border-width: 10px ${t.Spacing["spacing-16"]} 10px ${t.Spacing["spacing-24"]};
     border-radius: ${t.Radius.md};
 
     ${r.lineClampCss(2)}

package/cjs/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":"kPAKO,MAAMA,EAAgBC,EAAAA,QAAOC,EAAE;;;;;;;;mBAQnBC,EAAAA,OAAO,sBAAsBC,EAAAA,OAAO;EAG1CC,EAAWJ,EAAAA,QAAOK,EAAE;;;EAKpBC,EAAON,EAAAA,QAAOO,aAAWC,OAAO;;;aAGhCL,EAAAA,OAAa;;gBAEVM,EAAAA,QAAQ;;;cAGVP,EAAAA,OAAc;oBACRO,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;qBAChCC,EAAAA,OAAW;;MAE1BC,EAAAA,aAAa;;;;;;4BAMSR,EAAAA,OAAO;iBAClBA,EAAAA,OAAa;;"}
+{"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":"kPAKO,MAAMA,EAAgBC,EAAAA,QAAOC,EAAE;;;;;;;;mBAQnBC,EAAAA,OAAO,sBAAsBC,EAAAA,OAAO;EAG1CC,EAAWJ,EAAAA,QAAOK,EAAE;;;EAKpBC,EAAON,EAAAA,QAAOO,aAAWC,OAAO;;;aAGhCL,EAAAA,OAAa;;gBAEVM,EAAAA,QAAQ;;;cAGVP,EAAAA,OAAc;yBACHO,EAAAA,QAAQ,sBAAsBA,EAAAA,QAAQ;qBAC1CC,EAAAA,OAAW;;MAE1BC,EAAAA,aAAa;;;;;;4BAMSR,EAAAA,OAAO;iBAClBA,EAAAA,OAAa;;"}

package/cjs/navbar/navbar-items.js

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

package/cjs/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":["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":["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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"}

package/cjs/navbar/navbar-items.styles.js

@@ -1,18 +1,18 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),r=require("../shared/clickable-icon/clickable-icon.js"),o=require("../theme/index.js"),i=require("../theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t);const l=a.default.ul`
+"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),o=require("../shared/clickable-icon/clickable-icon.js"),r=require("../theme/index.js"),i=require("../theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t);const l=a.default.ul`
     display: flex;
     list-style: none;
     position: relative;
 
     ${e=>e.$alignLeft&&"margin-right: auto;"}
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         display: none;
     }
 `,d=a.default.ul`
     display: none;
     list-style: none;
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -26,14 +26,13 @@
         margin-left: ${e=>e.$hiddenBranding?"-0.5rem":"0"};
     }
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         flex-direction: column;
-        padding: 0.125rem 0;
         width: 100%;
         margin-left: 0rem;
     }
 `,c=t.css`
-    ${e=>o.Font[`body-md-${e.$weight}`]}
+    ${e=>r.Font[`body-md-${e.$weight}`]}
 
     display: flex;
     position: relative;
@@ -41,7 +40,7 @@
     text-align: center;
     color: ${i.ThemeNavbar["navbar-link-colour-text"]};
     height: 100%;
-    gap: 0.5rem;
+    gap: ${r.Spacing["spacing-16"]};
 
     &:active,
     &:hover,
@@ -50,9 +49,9 @@
         color: ${e=>e.$selected?i.ThemeNavbar["navbar-link-colour-text-selected-hover"]:i.ThemeNavbar["navbar-link-colour-text-hover"]};
     }
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         width: 100%;
-        padding: 0.5rem 1rem;
+        padding: 10px ${r.Spacing["spacing-24"]};
         text-align: left;
     }
 `,u=a.default.a`
@@ -76,13 +75,13 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     white-space: pre-wrap;
-`,m=a.default.div`
+`,f=a.default.div`
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 0.25rem;
-    background-color: ${o.Colour["border-selected"]};
+    background-color: ${r.Colour["border-selected"]};
 
     ${e=>e.$selected&&t.css`
             ${u}:active &,
@@ -91,11 +90,11 @@
             ${h}:active &,
             ${h}:hover &,
             ${h}:focus & {
-                background-color: ${o.Colour["border-selected-hover"]};
+                background-color: ${r.Colour["border-selected-hover"]};
             }
         `};
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         left: 0;
         right: unset;
         top: 0;
@@ -103,17 +102,17 @@
         height: 100%;
         width: 0.25rem;
     }
-`,f=a.default.div`
+`,g=a.default.div`
     margin-right: -0.5rem;
-`,g=a.default(r.ClickableIcon)`
+`,$=a.default(o.ClickableIcon)`
     padding: 0.5rem;
     transform: rotate(${e=>e.$expanded?0:180}deg);
     transition: transform 300ms ease-in-out;
-    margin: auto 0.25rem auto 0;
-`,$=a.default(e.ChevronUpIcon)`
+    margin: auto 0;
+`,m=a.default(e.ChevronUpIcon)`
     height: 1.25rem;
     width: 1.25rem;
-    color: ${o.Colour.icon};
+    color: ${r.Colour.icon};
 
     ${u}:active &,
     ${u}:hover &,
@@ -121,13 +120,13 @@
     ${h}:active &,
     ${h}:hover &,
     ${h}:focus & {
-        color: ${e=>e.$selected?o.Colour["icon-selected-hover"]:o.Colour["icon-hover"]};
+        color: ${e=>e.$selected?r.Colour["icon-selected-hover"]:r.Colour["icon-hover"]};
     }
-`,v=a.default($)`
+`,v=a.default(m)`
     transform: rotate(${e=>e.$expanded?0:180}deg);
     transition: transform 300ms ease-in-out;
 
     height: 1.125rem;
     width: 1.125rem;
-`;exports.ChevronIcon=$,exports.ChevronIconDesktop=v,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=f,exports.LinkIndicator=m,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
+`;exports.ChevronIcon=m,exports.ChevronIconDesktop=v,exports.ExpandCollapseButton=$,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=g,exports.LinkIndicator=f,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
 //# sourceMappingURL=navbar-items.styles.js.map

package/cjs/navbar/navbar-items.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n    $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.$weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n    gap: 0.5rem;\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    $weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${(props) =>\n        props.$selected &&\n        css`\n            ${Link}:active &,\n            ${Link}:hover &,\n            ${Link}:focus &,\n            ${LinkButton}:active &,\n            ${LinkButton}:hover &,\n            ${LinkButton}:focus & {\n                background-color: ${Colour[\"border-selected-hover\"]};\n            }\n        `};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    ${Link}:active &,\n    ${Link}:hover &,\n    ${Link}:focus &,\n    ${LinkButton}:active &,\n    ${LinkButton}:hover &,\n    ${LinkButton}:focus & {\n        color: ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","$weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"uTA6BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAsD;MAC/DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;;;iBAQPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;EAMbW,EAAOjB,EAAAA,QAAOkB,CAAoD;MACzEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;EAUtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;EAI9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAM0B,UAAY,EAAI;;;EAK7CC,EAAc7B,EAAAA,QAAO8B,EAAAA,cAA0B;;;aAG/CN,EAAAA,OAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;EAIZQ,EAAqBhC,EAAAA,QAAO6B,EAAwB;wBACxC3B,GAAWA,EAAM0B,UAAY,EAAI;;;;;"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery, Spacing } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n    $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.$weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 10px ${Spacing[\"spacing-24\"]};\n        text-align: left;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    $weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${(props) =>\n        props.$selected &&\n        css`\n            ${Link}:active &,\n            ${Link}:hover &,\n            ${Link}:focus &,\n            ${LinkButton}:active &,\n            ${LinkButton}:hover &,\n            ${LinkButton}:focus & {\n                background-color: ${Colour[\"border-selected-hover\"]};\n            }\n        `};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    ${Link}:active &,\n    ${Link}:hover &,\n    ${Link}:focus &,\n    ${LinkButton}:active &,\n    ${LinkButton}:hover &,\n    ${LinkButton}:focus & {\n        color: ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","$weight","ThemeNavbar","Spacing","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"uTA6BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;EAOpBK,EAAUC,EAAAA,GAAsD;MAC/DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;WAEdC,EAAAA,QAAQ;;;;;;iBAMDd,GACNA,EAAMe,UACAF,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;wBAEFU,EAAAA,QAAQ;;;EAInBE,EAAOlB,EAAAA,QAAOmB,CAAoD;MACzER;EAGOS,EAAapB,EAAAA,QAAOqB,MAG/B;MACIV;;;;;;;;;;EAYOW,EAAYtB,EAAAA,QAAOuB,GAAG;;;;;;;;EAUtBC,EAAgBxB,EAAAA,QAAOuB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBvB,GACCA,EAAMe,WACNL,KAAG;cACGM;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCrB,EAAAA,WAAWC,SAASC;;;;;;;;EAUboB,EAAoB1B,EAAAA,QAAOuB,GAAG;;EAI9BI,EAAuB3B,EAAAA,QAAO4B,EAAAA,cAA0B;;wBAE5C1B,GAAWA,EAAM2B,UAAY,EAAI;;;EAK7CC,EAAc9B,EAAAA,QAAO+B,EAAAA,cAA0B;;;aAG/CN,EAAAA,OAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYlB,GACNA,EAAMe,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;EAIZQ,EAAqBjC,EAAAA,QAAO8B,EAAwB;wBACxC5B,GAAWA,EAAM2B,UAAY,EAAI;;;;;"}

package/file-download/file-download.d.ts

@@ -1,2 +1,2 @@
 import { FileDownloadProps } from "./types";
-export declare const FileDownload: ({ id, fileItems, title, description, onDownload, "data-testid": testId, className, styleType, }: FileDownloadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileDownload: ({ id, fileItems, title, description, onDownload, onClick, "data-testid": testId, className, styleType, }: FileDownloadProps) => import("react/jsx-runtime").JSX.Element;

package/file-download/file-download.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as o}from"react/jsx-runtime";import{Container as t,TextContainer as d,ListWrapper as l,Title as r,TitleContainer as n,Description as s,DescriptionContainer as a}from"./file-download.styles.js";import{FileListCard as c}from"./file-list-card/file-list-card.js";const f=({id:f,fileItems:m,title:p,description:h,onDownload:u,"data-testid":y,className:w,styleType:b="bordered"})=>{const j=i=>e(void 0,void 0,void 0,(function*(){u&&(yield u(i))}));return i(t,{id:f?`${f}-file-download`:"file-download",className:w,"data-testid":y,$border:"bordered"===b,children:[(p||h)&&i(d,{children:[p?o("string"==typeof p?r:n,{children:p}):null,h?o("string"==typeof h?s:a,{children:h}):null]}),o(l,{children:m&&m.length>0&&m.map((e=>o(c,{fileItem:e,onDownload:j},e.id)))})]})};export{f as FileDownload};
+import{__awaiter as i}from"../_virtual/_tslib.js";import{jsxs as e,jsx as o}from"react/jsx-runtime";import{Container as l,TextContainer as t,ListWrapper as d,Title as r,TitleContainer as n,Description as s,DescriptionContainer as a}from"./file-download.styles.js";import{FileListCard as c}from"./file-list-card/file-list-card.js";const f=({id:f,fileItems:m,title:p,description:h,onDownload:u,onClick:y,"data-testid":w,className:b,styleType:j="bordered"})=>{const v=e=>i(void 0,void 0,void 0,(function*(){u&&(yield u(e))}));return e(l,{id:f?`${f}-file-download`:"file-download",className:b,"data-testid":w,$border:"bordered"===j,children:[(p||h)&&e(t,{children:[p?o("string"==typeof p?r:n,{children:p}):null,h?o("string"==typeof h?s:a,{children:h}):null]}),o(d,{children:m&&m.length>0&&m.map((i=>o(c,{fileItem:i,onDownload:v,onClick:y},i.id)))})]})};export{f as FileDownload};
 //# sourceMappingURL=file-download.js.map

package/file-download/file-download.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-download.js","sources":["../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["FileDownload","id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","TitleContainer","children","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"0UAYO,MAAMA,EAAe,EACxBC,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,OAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IA6BA,OACIE,EAACC,EAAS,CACNZ,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPL,GAASC,IACPQ,EAACG,aA/BJZ,EAKMa,EADU,iBAAVb,EACCc,EAGJC,EAHS,CAAAC,SAAEhB,IAJR,KAWNC,EAKMY,EADgB,iBAAhBZ,EACCgB,EAGJC,EAHe,CAAAF,SAAEf,IAJd,QAuBPY,EAACM,EAAW,CAAAH,SACPjB,GACGA,EAAUqB,OAAS,GACnBrB,EAAUsB,KAAKd,GACXM,EAACS,EAAY,CAETC,SAAUhB,EACVL,WAAYI,GAFPC,EAAKT,UAMlB"}
+{"version":3,"file":"file-download.js","sources":["../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    onClick,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                            onClick={onClick}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["FileDownload","id","fileItems","title","description","onDownload","onClick","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","TitleContainer","children","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"0UAYO,MAAMA,EAAe,EACxBC,KACAC,YACAC,QACAC,cACAC,aACAC,UACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,OAAA,OAAA,OAAA,GAAA,YACzDP,UACMA,EAAWM,GAEzB,IA6BA,OACIE,EAACC,EAAS,CACNb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCO,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPN,GAASC,IACPS,EAACG,aA/BJb,EAKMc,EADU,iBAAVd,EACCe,EAGJC,EAHS,CAAAC,SAAEjB,IAJR,KAWNC,EAKMa,EADgB,iBAAhBb,EACCiB,EAGJC,EAHe,CAAAF,SAAEhB,IAJd,QAuBPa,EAACM,EAAW,CAAAH,SACPlB,GACGA,EAAUsB,OAAS,GACnBtB,EAAUuB,KAAKd,GACXM,EAACS,EAAY,CAETC,SAAUhB,EACVN,WAAYK,EACZJ,QAASA,GAHJK,EAAKV,UAOlB"}

package/file-download/file-list-card/file-list-card.d.ts

@@ -1,2 +1,2 @@
 import { FileListItemProps } from "./types";
-export declare const FileListCard: import("react").MemoExoticComponent<({ fileItem, onDownload }: FileListItemProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const FileListCard: import("react").MemoExoticComponent<({ fileItem, onDownload, onClick }: FileListItemProps) => import("react/jsx-runtime").JSX.Element>;