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

package/cjs/file-download/file-list-card/file-list-card.styles.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("styled-components"),i=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("../../icon-button/icon-button.js"),t=require("../../shared/component-loading-spinner/component-loading-spinner.js"),a=require("../../shared/image-with-fallback/image-with-fallback.js"),o=require("../../shared/styles/index.js"),n=require("../../theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e);const s=d.default.li`
+"use strict";var e=require("styled-components"),i=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("../../icon-button/icon-button.js"),o=require("../../shared/component-loading-spinner/component-loading-spinner.js"),t=require("../../shared/image-with-fallback/image-with-fallback.js"),n=require("../../shared/styles/index.js"),a=require("../../theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e);const s=d.default.li`
     display: flex;
     align-items: center;
 
@@ -6,34 +6,48 @@
     border: none;
 
     &:not(:last-child) {
-        margin-bottom: ${n.Spacing["spacing-16"]};
+        margin-bottom: ${a.Spacing["spacing-16"]};
     }
-`,c=d.default.div`
+`,c=d.default.button`
+    appearance: none;
+    padding: 0;
+    background: none;
+    border: none;
+`,u=d.default.div`
     display: flex;
     align-items: center;
 
     width: 100%;
-    padding: ${n.Spacing["spacing-16"]} ${n.Spacing["spacing-32"]};
+    padding: ${a.Spacing["spacing-16"]} ${a.Spacing["spacing-32"]};
     cursor: pointer;
 
-    background: ${n.Colour["bg-primary-subtlest"]};
-    border: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-    border-radius: ${n.Radius.sm};
+    background: ${a.Colour["bg-primary-subtlest"]};
+    border: ${a.Border["width-010"]} ${a.Border.solid} ${a.Colour.border};
+    border-radius: ${a.Radius.sm};
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        padding: ${n.Spacing["spacing-16"]};
+    ${a.MediaQuery.MaxWidth.lg} {
+        padding: ${a.Spacing["spacing-16"]};
     }
 
     &:hover {
-        background: ${n.Colour["bg-hover"]};
+        background: ${a.Colour["bg-hover"]};
+    }
+
+    &:has(${c}:focus-visible) {
+        outline: 2px solid ${a.Colour["focus-ring"]};
+        outline-offset: -2px;
     }
 
     ${i=>{if(i.$error)return e.css`
-                background: ${n.Colour["bg-error"]};
-                border-color: ${n.Colour["border-error"]};
+                background: ${a.Colour["bg-error"]};
+                border-color: ${a.Colour["border-error"]};
 
                 &:hover {
-                    background: ${n.Colour["bg-error"]};
+                    background: ${a.Colour["bg-error"]};
+                }
+
+                &:has(${c}:focus-visible) {
+                    outline-color: ${a.Colour["border-error-focus"]};
                 }
             `}}
 `,g=d.default.div`
@@ -41,14 +55,14 @@
     flex: 1;
     align-items: center;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
     }
 
     ${i=>{if(i.$hasThumbnail)return e.css`
-                ${n.MediaQuery.MaxWidth.lg} {
+                ${a.MediaQuery.MaxWidth.lg} {
                     flex-direction: row;
                     align-items: center;
                 }
@@ -63,12 +77,12 @@
     overflow-wrap: break-word;
     word-break: break-all;
     white-space: normal;
-`,u=d.default.div`
+`,f=d.default.div`
     display: flex;
     flex: 1;
     align-items: center;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
@@ -78,99 +92,101 @@
     justify-content: flex-end;
 
     width: 5rem;
-    margin-left: ${n.Spacing["spacing-8"]};
+    margin-left: ${a.Spacing["spacing-8"]};
 
-    ${n.Font["body-md-regular"]}
-    color: ${n.Colour.text};
+    ${a.Font["body-md-regular"]}
+    color: ${a.Colour.text};
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         justify-content: flex-start;
 
         width: 100%;
         margin-left: 0;
-        margin-top: ${n.Spacing["spacing-8"]};
+        margin-top: ${a.Spacing["spacing-8"]};
 
-        ${o.lineClampCss(2)}
+        ${n.lineClampCss(2)}
     }
-`,f=d.default.div`
-    ${n.Font["body-md-regular"]}
-    color: ${n.Colour.text};
+`,h=d.default.div`
+    ${a.Font["body-md-regular"]}
+    color: ${a.Colour.text};
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        ${o.lineClampCss(2)}
+    ${a.MediaQuery.MaxWidth.lg} {
+        ${n.lineClampCss(2)}
     }
-`;d.default(f)`
-    ${n.Font["body-md-regular"]}
-    margin-top: ${n.Spacing["spacing-4"]};
+`;d.default(h)`
+    ${a.Font["body-md-regular"]}
+    margin-top: ${a.Spacing["spacing-4"]};
 `;const m=d.default(i.ExclamationCircleFillIcon)`
     height: 1lh;
     width: 1em;
     flex-shrink: 0;
-    color: ${n.Colour["icon-error-strong"]};
-`,h=d.default.div`
-    ${n.Font["body-sm-semibold"]}
-    color: ${n.Colour["text-error"]};
-`,$=d.default(h)`
-    margin-top: ${n.Spacing["spacing-8"]};
+    color: ${a.Colour["icon-error-strong"]};
+`,$=d.default.div`
+    ${a.Font["body-sm-semibold"]}
+    color: ${a.Colour["text-error"]};
+`,b=d.default($)`
+    margin-top: ${a.Spacing["spacing-8"]};
     display: flex;
-    gap: ${n.Spacing["spacing-4"]};
+    gap: ${a.Spacing["spacing-4"]};
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         display: none;
         visibility: hidden;
     }
-`,b=d.default(h)`
+`,y=d.default($)`
     display: none;
     visibility: hidden;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         display: flex;
-        gap: ${n.Spacing["spacing-4"]};
+        gap: ${a.Spacing["spacing-4"]};
         visibility: visible;
-        margin-top: ${n.Spacing["spacing-8"]};
+        margin-top: ${a.Spacing["spacing-8"]};
     }
-`,y=d.default(t.ComponentLoadingSpinner)`
-    color: ${n.Colour["icon-primary"]};
-`,M=d.default.div`
+`,M=d.default(o.ComponentLoadingSpinner)`
+    color: ${a.Colour["icon-primary"]};
+`,C=d.default.div`
     display: flex;
     justify-content: flex-end;
     align-items: center;
 
-    margin-left: ${n.Spacing["spacing-32"]};
+    margin-left: ${a.Spacing["spacing-32"]};
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        margin-left: ${n.Spacing["spacing-16"]};
+    ${a.MediaQuery.MaxWidth.lg} {
+        margin-left: ${a.Spacing["spacing-16"]};
     }
 `,S=d.default(r.IconButton)`
     min-width: unset;
 
     &:not(:last-child) {
-        margin-right: ${n.Spacing["spacing-16"]};
+        margin-right: ${a.Spacing["spacing-16"]};
     }
-`,w=d.default.div`
+`,v=d.default.div`
     width: auto;
-    margin-right: ${n.Spacing["spacing-32"]};
+    margin-right: ${a.Spacing["spacing-32"]};
 
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
     justify-content: center;
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        margin-right: ${n.Spacing["spacing-16"]};
+    ${a.MediaQuery.MaxWidth.lg} {
+        margin-right: ${a.Spacing["spacing-16"]};
     }
-`,C=d.default(a.ImageWithFallback)`
-    border-radius: ${n.Radius.sm};
-    border: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
+`,w=d.default(t.ImageWithFallback)`
+    border-radius: ${a.Radius.sm};
+    border: ${a.Border["width-010"]} ${a.Border.solid} ${a.Colour.border};
 
     width: 96px;
     height: 96px;
     aspect-ratio: 1;
     object-fit: cover;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         width: 64px;
         height: 64px;
     }
-`;exports.ActionContainer=M,exports.Box=c,exports.ContentSection=g,exports.DesktopErrorMessage=$,exports.ErrorIcon=m,exports.ExtendedNameSection=u,exports.FileSizeSection=x,exports.IconButton=S,exports.Item=s,exports.ItemNameText=f,exports.MobileErrorMessage=b,exports.NameSection=p,exports.Spinner=y,exports.Thumbnail=C,exports.ThumbnailContainer=w;
+`,k=d.default(w)`
+    border: none;
+`;exports.ActionContainer=C,exports.Box=u,exports.CardButton=c,exports.ContentSection=g,exports.DesktopErrorMessage=b,exports.ErrorIcon=m,exports.ExtendedNameSection=f,exports.FileSizeSection=x,exports.IconButton=S,exports.Item=s,exports.ItemNameText=h,exports.MobileErrorMessage=y,exports.NameSection=p,exports.PdfThumbnail=k,exports.Spinner=M,exports.Thumbnail=w,exports.ThumbnailContainer=v;
 //# sourceMappingURL=file-list-card.styles.js.map

package/cjs/file-download/file-list-card/file-list-card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${Colour[\"bg-error\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${MediaQuery.MaxWidth.lg} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${Font[\"body-md-regular\"]}\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["Item","styled","li","Spacing","Box","div","Colour","Border","Radius","MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","Spinner","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback"],"mappings":"4cAuBO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;;;;;;yBAQJC,EAAAA,QAAQ;;EAIpBC,EAAMH,EAAAA,QAAOI,GAAkB;;;;;eAK7BF,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;kBAG9BG,EAAAA,OAAO;cACXC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;MAE1BC,EAAAA,WAAWC,SAASC;mBACPR,EAAAA,QAAQ;;;;sBAILG,EAAAA,OAAO;;;MAGtBM,IACC,GAAIA,EAAMC,OACN,OAAOC,KAAG;8BACQR,EAAAA,OAAO;gCACLA,EAAAA,OAAO;;;kCAGLA,EAAAA,OAAO;;aAGjC;EAIKS,EAAiBd,EAAAA,QAAOI,GAA6B;;;;;MAK5DI,EAAAA,WAAWC,SAASC;;;;;;MAMnBC,IACC,GAAIA,EAAMI,cACN,OAAOF,KAAG;kBACJL,EAAAA,WAAWC,SAASC;;;;aAK9B;EAIKM,EAAchB,EAAAA,QAAOI,GAAG;;;;;;;;;;EAYxBa,EAAsBjB,EAAAA,QAAOI,GAAG;;;;;MAKvCI,EAAAA,WAAWC,SAASC;;;;;EAObQ,EAAkBlB,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,QAAQ;;MAErBiB,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;;;;;sBAKJR,EAAAA,QAAQ;;UAEpBkB,EAAAA,aAAa;;EAIVC,EAAerB,EAAAA,QAAOI,GAAG;MAChCe,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;UAChBU,EAAAA,aAAa;;EAIYpB,EAAAA,QAAOqB,EAAa;MACjDF,EAAAA,KAAK;kBACOjB,EAAAA,QAAQ;QAGboB,EAAYtB,EAAAA,QAAOuB,EAAAA,0BAA0B;;;;aAI7ClB,EAAAA,OAAO;EAGdmB,EAAmBxB,EAAAA,QAAOI,GAAG;MAC7Be,EAAAA,KAAK;aACEd,EAAAA,OAAO;EAGPoB,EAAsBzB,EAAAA,QAAOwB,EAAiB;kBACzCtB,EAAAA,QAAQ;;WAEfA,EAAAA,QAAQ;;MAEbM,EAAAA,WAAWC,SAASC;;;;EAMbgB,EAAqB1B,EAAAA,QAAOwB,EAAiB;;;;MAIpDhB,EAAAA,WAAWC,SAASC;;eAEXR,EAAAA,QAAQ;;sBAEDA,EAAAA,QAAQ;;EAIjByB,EAAU3B,EAAAA,QAAO4B,EAAAA,wBAAwB;aACzCvB,EAAAA,OAAO;EAGPwB,EAAkB7B,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,QAAQ;;MAErBM,EAAAA,WAAWC,SAASC;uBACHR,EAAAA,QAAQ;;EAIlB4B,EAAa9B,EAAAA,QAAO+B,EAAAA,WAAa;;;;wBAItB7B,EAAAA,QAAQ;;EAInB8B,EAAqBhC,EAAAA,QAAOI,GAAG;;oBAExBF,EAAAA,QAAQ;;;;;;;MAOtBM,EAAAA,WAAWC,SAASC;wBACFR,EAAAA,QAAQ;;EAInB+B,EAAYjC,EAAAA,QAAOkC,EAAAA,kBAAkB;qBAC7B3B,EAAAA,OAAW;cAClBD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;;;;;;;MAOjEG,EAAAA,WAAWC,SAASC;;;;"}
+{"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const CardButton = styled.button`\n    appearance: none;\n    padding: 0;\n    background: none;\n    border: none;\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n\n    &:has(${CardButton}:focus-visible) {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${Colour[\"bg-error\"]};\n                }\n\n                &:has(${CardButton}:focus-visible) {\n                    outline-color: ${Colour[\"border-error-focus\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${MediaQuery.MaxWidth.lg} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${Font[\"body-md-regular\"]}\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const PdfThumbnail = styled(Thumbnail)`\n    border: none;\n`;\n"],"names":["Item","styled","li","Spacing","CardButton","button","Box","div","Colour","Border","Radius","MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","Spinner","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback","PdfThumbnail"],"mappings":"4cAuBO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;;;;;;yBAQJC,EAAAA,QAAQ;;EAIpBC,EAAaH,EAAAA,QAAOI,MAAM;;;;;EAO1BC,EAAML,EAAAA,QAAOM,GAAkB;;;;;eAK7BJ,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;kBAG9BK,EAAAA,OAAO;cACXC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;MAE1BC,EAAAA,WAAWC,SAASC;mBACPV,EAAAA,QAAQ;;;;sBAILK,EAAAA,OAAO;;;YAGjBJ;6BACiBI,EAAAA,OAAO;;;;MAI7BM,IACC,GAAIA,EAAMC,OACN,OAAOC,KAAG;8BACQR,EAAAA,OAAO;gCACLA,EAAAA,OAAO;;;kCAGLA,EAAAA,OAAO;;;wBAGjBJ;qCACaI,EAAAA,OAAO;;aAGpC;EAIKS,EAAiBhB,EAAAA,QAAOM,GAA6B;;;;;MAK5DI,EAAAA,WAAWC,SAASC;;;;;;MAMnBC,IACC,GAAIA,EAAMI,cACN,OAAOF,KAAG;kBACJL,EAAAA,WAAWC,SAASC;;;;aAK9B;EAIKM,EAAclB,EAAAA,QAAOM,GAAG;;;;;;;;;;EAYxBa,EAAsBnB,EAAAA,QAAOM,GAAG;;;;;MAKvCI,EAAAA,WAAWC,SAASC;;;;;EAObQ,EAAkBpB,EAAAA,QAAOM,GAAG;;;;;mBAKtBJ,EAAAA,QAAQ;;MAErBmB,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;;;;;sBAKJV,EAAAA,QAAQ;;UAEpBoB,EAAAA,aAAa;;EAIVC,EAAevB,EAAAA,QAAOM,GAAG;MAChCe,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;UAChBU,EAAAA,aAAa;;EAIYtB,EAAAA,QAAOuB,EAAa;MACjDF,EAAAA,KAAK;kBACOnB,EAAAA,QAAQ;QAGbsB,EAAYxB,EAAAA,QAAOyB,EAAAA,0BAA0B;;;;aAI7ClB,EAAAA,OAAO;EAGdmB,EAAmB1B,EAAAA,QAAOM,GAAG;MAC7Be,EAAAA,KAAK;aACEd,EAAAA,OAAO;EAGPoB,EAAsB3B,EAAAA,QAAO0B,EAAiB;kBACzCxB,EAAAA,QAAQ;;WAEfA,EAAAA,QAAQ;;MAEbQ,EAAAA,WAAWC,SAASC;;;;EAMbgB,EAAqB5B,EAAAA,QAAO0B,EAAiB;;;;MAIpDhB,EAAAA,WAAWC,SAASC;;eAEXV,EAAAA,QAAQ;;sBAEDA,EAAAA,QAAQ;;EAIjB2B,EAAU7B,EAAAA,QAAO8B,EAAAA,wBAAwB;aACzCvB,EAAAA,OAAO;EAGPwB,EAAkB/B,EAAAA,QAAOM,GAAG;;;;;mBAKtBJ,EAAAA,QAAQ;;MAErBQ,EAAAA,WAAWC,SAASC;uBACHV,EAAAA,QAAQ;;EAIlB8B,EAAahC,EAAAA,QAAOiC,EAAAA,WAAa;;;;wBAItB/B,EAAAA,QAAQ;;EAInBgC,EAAqBlC,EAAAA,QAAOM,GAAG;;oBAExBJ,EAAAA,QAAQ;;;;;;;MAOtBQ,EAAAA,WAAWC,SAASC;wBACFV,EAAAA,QAAQ;;EAInBiC,EAAYnC,EAAAA,QAAOoC,EAAAA,kBAAkB;qBAC7B3B,EAAAA,OAAW;cAClBD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;;;;;;;MAOjEG,EAAAA,WAAWC,SAASC;;;;EAMbyB,EAAerC,EAAAA,QAAOmC,EAAU;;"}

package/cjs/file-upload/helper.js

@@ -1,2 +1,2 @@
-"use strict";var e;exports.FileUploadHelper=void 0,(e=exports.FileUploadHelper||(exports.FileUploadHelper={})).PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",e.formatFileSizeDisplay=e=>{if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`},e.isSupportedImageType=e=>["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e);
+"use strict";var e;exports.FileUploadHelper=void 0,(e=exports.FileUploadHelper||(exports.FileUploadHelper={})).PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",e.formatFileSizeDisplay=e=>{if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`},e.isSupportedImageType=e=>["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e),e.resolveThumbnailDisplay=(i,p)=>p?{type:"image",src:p}:i===e.PDF_MIME_TYPE?{type:"pdf-icon"}:{type:"none"};
 //# sourceMappingURL=helper.js.map

package/cjs/file-upload/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["export namespace FileUploadHelper {\n    export const PDF_MIME_TYPE = \"application/pdf\";\n    export const PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    export const formatFileSizeDisplay = (size?: number) => {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    };\n\n    export const isSupportedImageType = (type: string) => {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    };\n}\n"],"names":["FileUploadHelper","PDF_MIME_TYPE","PDF_ICON_URL","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes"],"mappings":"aAAA,IAAiBA,EAAAA,QAAAA,sBAAAA,GAAAA,EAAAA,QAAAA,mBAAAA,yBAAgB,CAAA,IAChBC,cAAgB,kBAChBD,EAAAE,aACT,oEAGSF,EAAAG,sBAAyBC,IAClC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAEM,EAGvBL,EAAAY,qBAAwBC,GAEN,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD"}
+{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["/**\n * How a file's thumbnail slot should be rendered.\n *\n * - `image` — a thumbnail was supplied; render it at `src`\n * - `pdf-icon` — a PDF with no thumbnail; render the PDF badge borderless\n * - `none` — nothing to show; render no thumbnail slot at all\n */\nexport type FileThumbnailDisplay =\n    | { type: \"image\"; src: string }\n    | { type: \"pdf-icon\" }\n    | { type: \"none\" };\n\nexport namespace FileUploadHelper {\n    export const PDF_MIME_TYPE = \"application/pdf\";\n    export const PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    export const formatFileSizeDisplay = (size?: number) => {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    };\n\n    export const isSupportedImageType = (type: string) => {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    };\n\n    /**\n     * Decides how a file's thumbnail slot should render, given its MIME type\n     * and any thumbnail the consumer supplied.\n     *\n     * Lives on `FileUploadHelper` so `FileUpload` can adopt it later. Today\n     * only `FileDownload` calls it: `FileUpload` still decides this inline in\n     * `file-list-item-thumbnail.tsx`, and the two do NOT yet agree — for a\n     * non-PDF with no thumbnail this returns `\"none\"` while `FileUpload`\n     * renders an `<img>` with an empty `src`. Do not read this as an invariant\n     * the two components already share.\n     *\n     * Callers render the result with their own markup, because their thumbnails\n     * change size at different breakpoints.\n     */\n    export const resolveThumbnailDisplay = (\n        mimeType: string | undefined,\n        thumbnailImageDataUrl: string | undefined\n    ): FileThumbnailDisplay => {\n        if (thumbnailImageDataUrl) {\n            return { type: \"image\", src: thumbnailImageDataUrl };\n        }\n\n        if (mimeType === PDF_MIME_TYPE) {\n            return { type: \"pdf-icon\" };\n        }\n\n        return { type: \"none\" };\n    };\n}\n"],"names":["FileUploadHelper","PDF_MIME_TYPE","PDF_ICON_URL","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","resolveThumbnailDisplay","mimeType","thumbnailImageDataUrl","src"],"mappings":"aAYA,IAAiBA,EAAAA,QAAAA,sBAAAA,GAAAA,EAAAA,QAAAA,mBAAAA,yBAAgB,CAAA,IAChBC,cAAgB,kBAChBD,EAAAE,aACT,oEAGSF,EAAAG,sBAAyBC,IAClC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAEM,EAGvBL,EAAAY,qBAAwBC,GAEN,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,GAiB1Bb,EAAAe,wBAA0B,CACnCC,EACAC,IAEIA,EACO,CAAEJ,KAAM,QAASK,IAAKD,GAG7BD,IAAahB,EAAAC,cACN,CAAEY,KAAM,YAGZ,CAAEA,KAAM"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),n=require("@lifesg/react-icons/bin"),r=require("@react-aria/live-announcer"),l=require("react"),a=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),s=require("../shared/hooks/use-state-callback.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var u=require("../util/use-event-listener.js"),d=require("./fullscreen-image-carousel.style.js");const c=e=>!!e&&"custom"===e.type,h=(h,m)=>{var v,{items:f,initialActiveItemIndex:g,hideThumbnail:j=!1,hideNavigation:x=!1,hideCounter:p=!1,hideMagnifier:b=!1,onDelete:I,onClose:C,insets:$,show:T}=h,S=e.__rest(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[w,q]=s.useStateCallback(null!=g?g:0),[k,y]=l.useState({}),[M,R]=l.useState(1),[F,A]=l.useState(),[B,L]=l.useState(),N=l.useRef(null),W=l.useRef([]),D=l.useRef([]),E=l.useRef(null),P=F&&B?F-B:0,z=f[w],G=f.some((e=>{var i;return c(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Z=G?"item":"image",_=l.useMemo((()=>f.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[f]),O=l.useCallback((e=>{var i,t;const n=f[e],r=G?"Item":"Image",l=c(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${f.length}.`;return l?`${l}. ${a}`:a}),[f,G]);l.useImperativeHandle(m,(()=>({currentItemIndex:w,setCurrentItem:Q,goToPrevItem:J,goToNextItem:K}))),u.useEventListener("keydown",(function(e){"ArrowRight"===e.key?K():"ArrowLeft"===e.key?J():"Escape"===e.key&&(null==C||C())}),"document"),l.useEffect((()=>{var e;T&&(null===(e=E.current)||void 0===e||e.focus())}),[T]),l.useEffect((()=>{0!==f.length?w>f.length-1&&q(f.length-1):q(0)}),[w,f.length,q]),l.useEffect((()=>{var e,i;null===(i=null===(e=W.current)||void 0===e?void 0:e[w])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),R(1)}),[w]);const V=e=>{R(e.state.scale)};const X=({src:e,height:i,width:t})=>{y((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},H=()=>{if(!z||c(z))return;const e=k[z.src];if(N.current&&e){const{clientHeight:i,clientWidth:t}=N.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},J=()=>{var e,i;null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.resetTransform(),q((e=>0===e?f.length-1:e-1),(e=>{r.clearAnnouncer("polite"),r.announce(O(e),"polite")}))},K=()=>{var e,i;null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.resetTransform(),q((e=>e===f.length-1?0:e+1),(e=>{r.clearAnnouncer("polite"),r.announce(O(e),"polite")}))},Q=e=>{var i,t;null===(t=null===(i=D.current)||void 0===i?void 0:i[w])||void 0===t||t.resetTransform(),q(e)};return i.jsx(o.ModalV2,Object.assign({},S,{"data-testid":"image-carousel-modal","aria-label":G?"Carousel":"Image carousel",show:T,disableInitialFocus:!0,children:i.jsxs(d.CarouselModalContent,{children:[i.jsxs(d.ImageGalleryContainer,{children:[i.jsxs(d.ImageGalleryWrapper,{children:[i.jsx(d.ImageGallerySwipe,{ref:N,onTouchStart:e=>{M<=1&&A(e.touches[0].clientX)},onTouchMove:e=>{!F||M>1||L(e.touches[0].clientX)},onTouchEnd:()=>{N.current&&(Math.abs(P)>N.current.offsetWidth/3&&(P>0?K():J()),A(void 0),L(void 0))},children:i.jsx(d.ImageGallerySlides,{style:{transform:`translateX(calc(${100*-w}% - ${P}px))`},children:f.map(((e,t)=>{const n=t===w,r=Math.abs(t-w)<=1||0===w&&t===f.length-1||w===f.length-1&&0===t;return i.jsx(d.ImageGallerySlide,{"data-testid":"slide-item",children:i.jsx(d.FocusableImageRegion,{ref:n?E:null,tabIndex:n?0:-1,children:c(e)?r?e.renderContent():i.jsx(d.SlidePlaceholderImage,{}):i.jsx(a.TransformWrapper,{ref:e=>D.current[t]=e,panning:{disabled:M<=1},initialScale:1,onZoom:V,onZoomStop:V,onWheel:V,children:i.jsx(a.TransformComponent,{children:i.jsx(d.SlideImage,{src:e.src,alt:O(t),placeholder:i.jsx(d.SlidePlaceholderImage,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:X})})})})},t)}))})}),!x&&i.jsxs(i.Fragment,{children:[i.jsx(d.ArrowButton,{"aria-label":`Previous ${Z}`,"data-testid":"prev-btn",$position:"left",onClick:J,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(d.ArrowButton,{"aria-label":`Next ${Z}`,"data-testid":"forward-btn",$position:"right",onClick:K,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!p&&i.jsx(d.BoxChip,{"aria-hidden":"true",children:i.jsx(d.Chip,{weight:"semibold",children:`${w+1}/${f.length}`})})]}),!j&&i.jsx(d.ThumbnailContainer,{$insetBottom:null==$?void 0:$.bottom,"aria-hidden":"true",children:i.jsx(d.ThumbnailWrapper,{children:f.map(((e,t)=>{var n;const r=c(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i.jsx(d.ThumbnailItemContainer,{children:i.jsx(d.ThumbnailItem,{"data-testid":"thumbnail-item",$active:t===w,onClick:()=>Q(t),ref:e=>W.current[t]=e,children:r?i.jsx(d.ThumbnailImage,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(d.SlidePlaceholderImage,{})})},t)}))})})]}),i.jsxs(d.TopActionButtons,{$hasFileInfo:_,$insetTop:null==$?void 0:$.top,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:[_&&(()=>{const{fileName:e,fileSize:t}=null!=z?z:{},n=null==e?void 0:e.trim(),r=null==t?void 0:t.trim();return i.jsxs(d.FileInfoTextWrapper,{$centerContent:!r,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[n&&i.jsx(d.FileInfoFileName,{weight:"semibold","data-testid":"file-info-name",children:n}),r&&i.jsx(d.FileInfoFileSize,{"data-testid":"file-info-size",children:r})]})})(),!b&&!c(z)&&i.jsx(d.MagnifierButton,{"aria-label":1===M?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,n;if(1===M){const t=H();null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.centerView(t),R(null!=t?t:1)}else R(1),null===(n=null===(t=D.current)||void 0===t?void 0:t[w])||void 0===n||n.resetTransform()},children:1===M?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),I&&i.jsx(d.DeleteButton,{"aria-label":`Delete ${c(z)&&(null===(v=z.itemLabel)||void 0===v?void 0:v.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{z&&I&&I(z,w)},children:i.jsx(n.BinIcon,{"aria-hidden":!0})}),i.jsx(d.CloseButton,{"aria-label":G?"Close carousel":"Close image carousel",onClick:C,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})]})}))},m=l.forwardRef(h);exports.Component=h,exports.FullscreenImageCarousel=m;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),n=require("@lifesg/react-icons/bin"),r=require("@react-aria/live-announcer"),l=require("react"),a=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),s=require("../shared/hooks/use-state-callback.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var d=require("../util/use-event-listener.js"),u=require("./fullscreen-image-carousel.style.js");const c=e=>!!e&&"custom"===e.type,h=(h,m)=>{var v,f,{items:g,initialActiveItemIndex:j,hideThumbnail:x=!1,hideNavigation:p=!1,hideCounter:b=!1,hideMagnifier:I=!1,customActions:C,onDelete:$,onClose:T,insets:S,topBarRef:w,show:k}=h,q=e.__rest(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","customActions","onDelete","onClose","insets","topBarRef","show"]);const[A,R]=s.useStateCallback(null!=j?j:0),[y,B]=l.useState({}),[M,F]=l.useState(1),[L,E]=l.useState(),[N,W]=l.useState(),D=l.useRef(null),P=l.useRef([]),z=l.useRef([]),G=l.useRef(null),Z=L&&N?L-N:0,_=g[A],O=null!==(f=null!==(v=null==_?void 0:_.customActions)&&void 0!==v?v:C)&&void 0!==f?f:[],V=g.some((e=>{var i;return c(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),X=V?"item":"image",H=l.useMemo((()=>g.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[g]),J=l.useCallback((e=>{var i,t;const n=g[e],r=V?"Item":"Image",l=c(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${g.length}.`;return l?`${l}. ${a}`:a}),[g,V]);l.useImperativeHandle(m,(()=>({currentItemIndex:A,setCurrentItem:ne,goToPrevItem:ie,goToNextItem:te}))),d.useEventListener("keydown",(function(e){"ArrowRight"===e.key?te():"ArrowLeft"===e.key?ie():"Escape"===e.key&&(null==T||T())}),"document"),l.useEffect((()=>{var e;k&&(null===(e=G.current)||void 0===e||e.focus())}),[k]),l.useEffect((()=>{0!==g.length?A>g.length-1&&R(g.length-1):R(0)}),[A,g.length,R]),l.useEffect((()=>{var e,i;null===(i=null===(e=P.current)||void 0===e?void 0:e[A])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),F(1)}),[A]);const K=e=>{F(e.state.scale)},Q=()=>{_&&$&&$(_,A)};const U=()=>{var e,i,t,n;if(1===M){const t=ee();null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.centerView(t),F(null!=t?t:1)}else F(1),null===(n=null===(t=z.current)||void 0===t?void 0:t[A])||void 0===n||n.resetTransform()},Y=({src:e,height:i,width:t})=>{B((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},ee=()=>{if(!_||c(_))return;const e=y[_.src];if(D.current&&e){const{clientHeight:i,clientWidth:t}=D.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},ie=()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.resetTransform(),R((e=>0===e?g.length-1:e-1),(e=>{r.clearAnnouncer("polite"),r.announce(J(e),"polite")}))},te=()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.resetTransform(),R((e=>e===g.length-1?0:e+1),(e=>{r.clearAnnouncer("polite"),r.announce(J(e),"polite")}))},ne=e=>{var i,t;null===(t=null===(i=z.current)||void 0===i?void 0:i[A])||void 0===t||t.resetTransform(),R(e)},re=()=>{const{fileName:e,fileSize:t}=null!=_?_:{},n=null==e?void 0:e.trim(),r=null==t?void 0:t.trim();return i.jsxs(u.FileInfoTextWrapper,{$centerContent:!r,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[n&&i.jsx(u.FileInfoFileName,{weight:"semibold","data-testid":"file-info-name",children:n}),r&&i.jsx(u.FileInfoFileSize,{"data-testid":"file-info-size",children:r})]})};return i.jsx(o.ModalV2,Object.assign({},q,{"data-testid":"image-carousel-modal","aria-label":V?"Carousel":"Image carousel",show:k,disableInitialFocus:!0,children:i.jsxs(u.CarouselModalContent,{children:[i.jsxs(u.ImageGalleryContainer,{children:[i.jsxs(u.ImageGalleryWrapper,{children:[i.jsx(u.ImageGallerySwipe,{ref:D,onTouchStart:e=>{M<=1&&E(e.touches[0].clientX)},onTouchMove:e=>{!L||M>1||W(e.touches[0].clientX)},onTouchEnd:()=>{D.current&&(Math.abs(Z)>D.current.offsetWidth/3&&(Z>0?te():ie()),E(void 0),W(void 0))},children:i.jsx(u.ImageGallerySlides,{style:{transform:`translateX(calc(${100*-A}% - ${Z}px))`},children:g.map(((e,t)=>{const n=t===A,r=Math.abs(t-A)<=1||0===A&&t===g.length-1||A===g.length-1&&0===t;return i.jsx(u.ImageGallerySlide,{"data-testid":"slide-item",children:i.jsx(u.FocusableImageRegion,{ref:n?G:null,tabIndex:n?0:-1,children:c(e)?r?e.renderContent():i.jsx(u.SlidePlaceholderImage,{}):i.jsx(a.TransformWrapper,{ref:e=>z.current[t]=e,panning:{disabled:M<=1},initialScale:1,onZoom:K,onZoomStop:K,onWheel:K,children:i.jsx(a.TransformComponent,{children:i.jsx(u.SlideImage,{src:e.src,alt:J(t),placeholder:i.jsx(u.SlidePlaceholderImage,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Y})})})})},t)}))})}),!p&&i.jsxs(i.Fragment,{children:[i.jsx(u.ArrowButton,{"aria-label":`Previous ${X}`,"data-testid":"prev-btn",$position:"left",onClick:ie,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(u.ArrowButton,{"aria-label":`Next ${X}`,"data-testid":"forward-btn",$position:"right",onClick:te,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!b&&i.jsx(u.BoxChip,{"aria-hidden":"true",children:i.jsx(u.Chip,{weight:"semibold",children:`${A+1}/${g.length}`})})]}),!x&&i.jsx(u.ThumbnailContainer,{$insetBottom:null==S?void 0:S.bottom,"aria-hidden":"true",children:i.jsx(u.ThumbnailWrapper,{children:g.map(((e,t)=>{var n;const r=c(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i.jsx(u.ThumbnailItemContainer,{children:i.jsx(u.ThumbnailItem,{"data-testid":"thumbnail-item",$active:t===A,onClick:()=>ne(t),ref:e=>P.current[t]=e,children:r?i.jsx(u.ThumbnailImage,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(u.SlidePlaceholderImage,{})})},t)}))})})]}),(()=>{var e;return i.jsxs(u.TopActionButtons,{ref:w,$hasFileInfo:H,$insetTop:null==S?void 0:S.top,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:[H&&re(),O.map(((e,t)=>i.jsx(u.CustomActionButton,{"aria-label":e.ariaLabel,"data-testid":e["data-testid"],onClick:()=>(e=>{_&&e.onClick(_,A)})(e),children:l.cloneElement(e.icon,{"aria-hidden":!0})},t))),!I&&!c(_)&&i.jsx(u.MagnifierButton,{"aria-label":1===M?"Zoom in":"Zoom out",onClick:U,children:1===M?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),$&&i.jsx(u.DeleteButton,{"aria-label":`Delete ${c(_)&&(null===(e=_.itemLabel)||void 0===e?void 0:e.trim())||"image"}`,"data-testid":"delete-btn",onClick:Q,children:i.jsx(n.BinIcon,{"aria-hidden":!0})}),i.jsx(u.CloseButton,{"aria-label":V?"Close carousel":"Close image carousel",onClick:T,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})})()]})}))},m=l.forwardRef(h);exports.Component=h,exports.FullscreenImageCarousel=m;
 //# sourceMappingURL=fullscreen-image-carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                <TopActionButtons\n                    $hasFileInfo={hasFileInfo}\n                    $insetTop={insets?.top}\n                    $insetLeft={insets?.left}\n                    $insetRight={insets?.right}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <MagnifierButton\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </MagnifierButton>\n                    )}\n\n                    {onDelete && (\n                        <DeleteButton\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </DeleteButton>\n                    )}\n\n                    <CloseButton\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </CloseButton>\n                </TopActionButtons>\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","children","_jsxs","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","$insetTop","top","trimmedName","trimmedSize","FileInfoTextWrapper","FileInfoFileName","FileInfoFileSize","renderFileInfo","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    cloneElement,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    CustomActionButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomAction,\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        customActions,\n        onDelete,\n        onClose,\n        insets,\n        topBarRef,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const resolvedCustomActions =\n        currentItem?.customActions ?? customActions ?? [];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    const handleCustomAction = (\n        action: FullscreenImageCarouselCustomAction\n    ) => {\n        if (currentItem) {\n            action.onClick(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    const renderTopActions = () => {\n        return (\n            <TopActionButtons\n                ref={topBarRef}\n                $hasFileInfo={hasFileInfo}\n                $insetTop={insets?.top}\n                $insetLeft={insets?.left}\n                $insetRight={insets?.right}\n            >\n                {hasFileInfo && renderFileInfo()}\n\n                {resolvedCustomActions.map((action, index) => (\n                    <CustomActionButton\n                        key={index}\n                        aria-label={action.ariaLabel}\n                        data-testid={action[\"data-testid\"]}\n                        onClick={() => handleCustomAction(action)}\n                    >\n                        {cloneElement(action.icon, { \"aria-hidden\": true })}\n                    </CustomActionButton>\n                ))}\n\n                {!hideMagnifier && !isCustomItem(currentItem) && (\n                    <MagnifierButton\n                        aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                        onClick={handleMagnifier}\n                    >\n                        {zoom === 1 ? (\n                            <MagnifierPlusIcon aria-hidden />\n                        ) : (\n                            <MagnifierMinusIcon aria-hidden />\n                        )}\n                    </MagnifierButton>\n                )}\n\n                {onDelete && (\n                    <DeleteButton\n                        aria-label={`Delete ${\n                            (isCustomItem(currentItem) &&\n                                currentItem.itemLabel?.trim()) ||\n                            \"image\"\n                        }`}\n                        data-testid=\"delete-btn\"\n                        onClick={handleDelete}\n                    >\n                        <BinIcon aria-hidden />\n                    </DeleteButton>\n                )}\n\n                <CloseButton\n                    aria-label={\n                        hasAnyItemLabel\n                            ? \"Close carousel\"\n                            : \"Close image carousel\"\n                    }\n                    onClick={onClose}\n                >\n                    <CrossIcon aria-hidden />\n                </CloseButton>\n            </TopActionButtons>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                {renderTopActions()}\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","customActions","onDelete","onClose","insets","topBarRef","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","resolvedCustomActions","_c","_b","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","handleDelete","handleMagnifier","zoomRatio","getZoomRatio","centerView","_d","resetTransform","setDimension","src","height","width","oldState","Object","assign","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","prev","slide","clearAnnouncer","announce","renderFileInfo","trimmedName","trimmedSize","_jsxs","FileInfoTextWrapper","_jsx","FileInfoFileName","weight","children","FileInfoFileSize","ModalV2","disableInitialFocus","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","top","action","CustomActionButton","ariaLabel","handleCustomAction","cloneElement","icon","MagnifierButton","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","renderTopActions","FullscreenImageCarousel","forwardRef"],"mappings":"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"}