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

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

@@ -1,176 +1,2 @@
-"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`
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-    border: none;
-
-    &:not(:last-child) {
-        margin-bottom: ${n.Spacing["spacing-16"]};
-    }
-`,c=d.default.div`
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-    padding: ${n.Spacing["spacing-16"]} ${n.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};
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        padding: ${n.Spacing["spacing-16"]};
-    }
-
-    &:hover {
-        background: ${n.Colour["bg-hover"]};
-    }
-
-    ${i=>{if(i.$error)return e.css`
-                background: ${n.Colour["bg-error"]};
-                border-color: ${n.Colour["border-error"]};
-
-                &:hover {
-                    background: ${n.Colour["bg-error"]};
-                }
-            `}}
-`,g=d.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-
-    ${i=>{if(i.$hasThumbnail)return e.css`
-                ${n.MediaQuery.MaxWidth.lg} {
-                    flex-direction: row;
-                    align-items: center;
-                }
-            `}}
-`,p=d.default.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-
-    width: 100%;
-
-    overflow-wrap: break-word;
-    word-break: break-all;
-    white-space: normal;
-`,u=d.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-`,x=d.default.div`
-    display: flex;
-    justify-content: flex-end;
-
-    width: 5rem;
-    margin-left: ${n.Spacing["spacing-8"]};
-
-    ${n.Font["body-md-regular"]}
-    color: ${n.Colour.text};
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        justify-content: flex-start;
-
-        width: 100%;
-        margin-left: 0;
-        margin-top: ${n.Spacing["spacing-8"]};
-
-        ${o.lineClampCss(2)}
-    }
-`,f=d.default.div`
-    ${n.Font["body-md-regular"]}
-    color: ${n.Colour.text};
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        ${o.lineClampCss(2)}
-    }
-`;d.default(f)`
-    ${n.Font["body-md-regular"]}
-    margin-top: ${n.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"]};
-    display: flex;
-    gap: ${n.Spacing["spacing-4"]};
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        display: none;
-        visibility: hidden;
-    }
-`,b=d.default(h)`
-    display: none;
-    visibility: hidden;
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        display: flex;
-        gap: ${n.Spacing["spacing-4"]};
-        visibility: visible;
-        margin-top: ${n.Spacing["spacing-8"]};
-    }
-`,y=d.default(t.ComponentLoadingSpinner)`
-    color: ${n.Colour["icon-primary"]};
-`,M=d.default.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    margin-left: ${n.Spacing["spacing-32"]};
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        margin-left: ${n.Spacing["spacing-16"]};
-    }
-`,S=d.default(r.IconButton)`
-    min-width: unset;
-
-    &:not(:last-child) {
-        margin-right: ${n.Spacing["spacing-16"]};
-    }
-`,w=d.default.div`
-    width: auto;
-    margin-right: ${n.Spacing["spacing-32"]};
-
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    justify-content: center;
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        margin-right: ${n.Spacing["spacing-16"]};
-    }
-`,C=d.default(a.ImageWithFallback)`
-    border-radius: ${n.Radius.sm};
-    border: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-
-    width: 96px;
-    height: 96px;
-    aspect-ratio: 1;
-    object-fit: cover;
-
-    ${n.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;
+"use strict";require("./file-list-card.styles_18j2gut.css");exports.actionContainer="a1xq0zd",exports.box="b7grm6i",exports.boxError="b1ryf4f4",exports.contentSection="casceiz",exports.contentSectionHasThumbnail="c83cih3",exports.desktopErrorMessage="dga23xt",exports.errorIcon="e4y82lx",exports.extendedNameSection="ethi1vt",exports.fileSizeSection="ff8ofzq",exports.iconButton="i18nltf5",exports.item="ifkrwze",exports.itemNameText="iytzo9z",exports.mobileErrorMessage="m1qdniby",exports.nameSection="n13wqyhg",exports.thumbnail="t4orgj8",exports.thumbnailContainer="tmpqdeo";
 //# 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.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const item = css`\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 = css`\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\nexport const boxError = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-error\"]};\n    }\n`;\n\nexport const contentSection = css`\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 contentSectionHasThumbnail = css`\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        align-items: center;\n    }\n`;\n\nexport const nameSection = css`\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 = css`\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 = css`\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 = css`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst baseErrorMessage = `\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    ${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 = css`\n    ${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 actionContainer = css`\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 = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnailContainer = css`\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 = css`\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":[],"mappings":"gIAgK4B,sBA5IZ,2BAqBK,kCASM,6CAYY,sCAyEP,4BAZV,sCA1CU,kCAYJ,6BA+EL,wBApKN,+BA0GQ,qCAiCM,+BA9EP,6BA6HF,qCAdS"}

package/cjs/file-download/file-list-card/file-list-card.styles_18j2gut.css

@@ -0,0 +1,16 @@
+@layer fds{.ifkrwze{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border:none;}.ifkrwze:not(:last-child){margin-bottom:var(--fds-spacing-16);}
+.b7grm6i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:var(--fds-spacing-16) var(--fds-spacing-32);cursor:pointer;background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}:where(body.fds-breakpoint-lg-max) .b7grm6i{padding:var(--fds-spacing-16);}.b7grm6i:hover{background:var(--fds-colour-bg-hover);}
+.b1ryf4f4{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}.b1ryf4f4:hover{background:var(--fds-colour-bg-error);}
+.casceiz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .casceiz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+:where(body.fds-breakpoint-lg-max) .c83cih3{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.n13wqyhg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;overflow-wrap:break-word;word-break:break-all;white-space:normal;}
+.ethi1vt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .ethi1vt{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+.ff8ofzq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;width:5rem;margin-left:var(--fds-spacing-8);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .ff8ofzq{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;margin-left:0;margin-top:var(--fds-spacing-8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.iytzo9z{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .iytzo9z{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.e4y82lx{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.dga23xt{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-lg-max) .dga23xt{display:none;visibility:hidden;}
+.m1qdniby{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-lg-max) .m1qdniby{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
+.a1xq0zd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--fds-spacing-32);}:where(body.fds-breakpoint-lg-max) .a1xq0zd{margin-left:var(--fds-spacing-16);}
+.i18nltf5{min-width:unset;}.i18nltf5:not(:last-child){margin-right:var(--fds-spacing-16);}
+.tmpqdeo{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-lg-max) .tmpqdeo{margin-right:var(--fds-spacing-16);}
+.t4orgj8{border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);width:96px;height:96px;aspect-ratio:1;object-fit:cover;}:where(body.fds-breakpoint-lg-max) .t4orgj8{width:64px;height:64px;}}

package/cjs/file-upload/custom-sensors.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-sensors.js","sources":["../../../src/file-upload/custom-sensors.tsx"],"sourcesContent":["import {\n    KeyboardSensor as LibKeyboardSensor,\n    MouseSensor as LibMouseSensor,\n} from \"@dnd-kit/core\";\n\nexport class MouseSensor extends LibMouseSensor {\n    static activators = [\n        {\n            eventName: \"onMouseDown\" as const,\n            handler: ({ nativeEvent: event }: React.MouseEvent) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nexport class KeyboardSensor extends LibKeyboardSensor {\n    static activators = [\n        {\n            eventName: \"onKeyDown\" as const,\n            handler: ({ nativeEvent: event }: React.KeyboardEvent<Element>) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nfunction shouldHandleEvent(element: HTMLElement | null) {\n    let current = element;\n    while (current) {\n        if (current.dataset && current.dataset.noDnd) {\n            return false;\n        }\n        current = current.parentElement;\n    }\n\n    return true;\n}\n"],"names":["MouseSensor","LibMouseSensor","activators","eventName","handler","nativeEvent","event","shouldHandleEvent","target","KeyboardSensor","LibKeyboardSensor","element","current","dataset","noDnd","parentElement"],"mappings":"yEAKM,MAAOA,UAAoBC,EAAAA,aACtBD,EAAAE,WAAa,CAChB,CACIC,UAAW,cACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME,UAMzC,MAAOC,UAAuBC,EAAAA,gBAWpC,SAASH,EAAkBI,GACvB,IAAIC,EAAUD,EACd,KAAOC,GAAS,CACZ,GAAIA,EAAQC,SAAWD,EAAQC,QAAQC,MACnC,OAAO,EAEXF,EAAUA,EAAQG,aACtB,CAEA,OAAO,CACX,CApBWN,EAAAP,WAAa,CAChB,CACIC,UAAW,YACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME"}
+{"version":3,"file":"custom-sensors.js","sources":["../../../src/file-upload/custom-sensors.tsx"],"sourcesContent":["import {\n    KeyboardSensor as LibKeyboardSensor,\n    MouseSensor as LibMouseSensor,\n} from \"@dnd-kit/core\";\n\nexport class MouseSensor extends LibMouseSensor {\n    public static readonly activators = [\n        {\n            eventName: \"onMouseDown\" as const,\n            handler: ({ nativeEvent: event }: React.MouseEvent) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nexport class KeyboardSensor extends LibKeyboardSensor {\n    public static readonly activators = [\n        {\n            eventName: \"onKeyDown\" as const,\n            handler: ({ nativeEvent: event }: React.KeyboardEvent<Element>) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nfunction shouldHandleEvent(element: HTMLElement | null) {\n    let current = element;\n    while (current) {\n        if (current.dataset && current.dataset.noDnd) {\n            return false;\n        }\n        current = current.parentElement;\n    }\n\n    return true;\n}\n"],"names":["MouseSensor","LibMouseSensor","activators","eventName","handler","nativeEvent","event","shouldHandleEvent","target","KeyboardSensor","LibKeyboardSensor","element","current","dataset","noDnd","parentElement"],"mappings":"yEAKM,MAAOA,UAAoBC,EAAAA,aACND,EAAAE,WAAa,CAChC,CACIC,UAAW,cACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME,UAMzC,MAAOC,UAAuBC,EAAAA,gBAWpC,SAASH,EAAkBI,GACvB,IAAIC,EAAUD,EACd,KAAOC,GAAS,CACZ,GAAIA,EAAQC,SAAWD,EAAQC,QAAQC,MACnC,OAAO,EAEXF,EAAUA,EAAQG,aACtB,CAEA,OAAO,CACX,CApB2BN,EAAAP,WAAa,CAChC,CACIC,UAAW,YACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME"}

package/cjs/file-upload/dropzone.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../external/react-dropzone/dist/es/index.js"),a=require("./dropzone.styles.js");const i=r.forwardRef((({children:i,accept:n,capture:s,multiple:o,id:d,className:l,name:c,border:p,disabled:u,onChange:g,"data-testid":j},x)=>{const m=r.useRef(null),{getRootProps:b,isDragActive:f}=t.useDropzone({onDrop:g,noClick:!0,disabled:u});r.useImperativeHandle(x,(()=>Object.assign(Object.assign({},m.current),{openFileDialog:()=>{m.current&&(m.current.value="",m.current.click())}})));return e.jsxs(a.Container,Object.assign({id:d,"data-testid":j||"dropzone",$border:p,className:l},b(),{children:[e.jsx(a.HiddenInput,{type:"file",name:c,ref:m,tabIndex:-1,"aria-hidden":!0,accept:n,capture:s,multiple:o,"data-testid":j?`${j}-input`:"dropzone-input",onChange:e=>{e.target.files&&g(Array.from(e.target.files))}}),i,f&&e.jsxs(a.DragOverlay,{children:[e.jsx(a.OverlayIcon,{}),e.jsx(a.OverlayText,{weight:"semibold",children:"Drop files here"})]})]}))}));exports.FileUploadDropzone=i;
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/cloud-arrow-up-fill"),i=require("clsx"),s=require("react"),t=require("../external/react-dropzone/dist/es/index.js"),a=require("../dashed-border/dashed-border.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),d=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var u=require("../typography/index.js"),l=require("./dropzone.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(i);const h=s.forwardRef((({children:i,accept:c,capture:h,multiple:m,id:j,className:q,name:b,border:g,disabled:y,onChange:f,"data-testid":x},v)=>{const k=s.useRef(null),{getRootProps:D,isDragActive:C}=t.useDropzone({onDrop:f,noClick:!0,disabled:y});s.useImperativeHandle(v,(()=>Object.assign(Object.assign({},k.current),{openFileDialog:()=>{k.current&&(k.current.value="",k.current.click())}})));return e.jsxs(a.DashedBorder,Object.assign({id:j,"data-testid":x||"dropzone",enabled:g,thickness:o.Border["width-040"],radius:n.Radius.sm,colour:d.Colour.border,className:p.default(l.container,g&&l.containerWithDashedBorder,q)},D(),{children:[e.jsx("input",{type:"file",name:b,ref:k,tabIndex:-1,"aria-hidden":!0,className:l.hiddenInput,accept:c,capture:h,multiple:m,"data-testid":x?`${x}-input`:"dropzone-input",onChange:e=>{e.target.files&&f(Array.from(e.target.files))}}),i,C&&e.jsxs(a.DashedBorder,{colour:d.Colour["border-primary"],thickness:o.Border["width-040"],radius:n.Radius.sm,enabled:g,backgroundColor:d.Colour["bg-primary-subtler"],className:l.dragOverlay,children:[e.jsx(r.CloudArrowUpFillIcon,{className:l.overlayIcon}),e.jsx(u.Typography.BodyMD,{className:l.overlayText,weight:"semibold",children:"Drop files here"})]})]}))}));exports.FileUploadDropzone=h;
 //# sourceMappingURL=dropzone.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropzone.js","sources":["../../../src/file-upload/dropzone.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport {\n    Container,\n    DragOverlay,\n    HiddenInput,\n    OverlayIcon,\n    OverlayText,\n} from \"./dropzone.styles\";\nimport { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DragOverlay>\n            <OverlayIcon />\n            <OverlayText weight=\"semibold\">Drop files here</OverlayText>\n        </DragOverlay>\n    );\n\n    return (\n        <Container\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            $border={border}\n            className={className}\n            {...getRootProps()}\n        >\n            <HiddenInput\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </Container>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","Container","$border","_jsx","HiddenInput","type","tabIndex","event","target","files","Array","from","DragOverlay","OverlayIcon","OverlayText","weight"],"mappings":"8JAsBA,MAiFaA,EAAqBC,EAAAA,YAjFhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OACAC,SACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAAA,OAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,cAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAAA,oBAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MAuBR,OACIC,OAACC,EAAAA,UAASP,OAAAC,OAAA,CACNjB,GAAIA,EAAE,cACOM,GAAU,WAAUkB,QACxBrB,EACTF,UAAWA,GACPS,eAEJe,EAAAA,IAACC,EAAAA,YAAW,CACRC,KAAK,OACLzB,KAAMA,EACNK,IAAKC,EACLoB,UAAU,EAAE,eAAA,EAEZ/B,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SAlCUwB,IACdA,EAAMC,OAAOC,OACb1B,EAAS2B,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IAiCKnC,EACAe,GA3BLW,EAAAA,KAACY,EAAAA,YAAW,CAAAtC,SAAA,CACR6B,EAAAA,IAACU,EAAAA,gBACDV,EAAAA,IAACW,EAAAA,YAAW,CAACC,OAAO,WAAUzC,SAAA,0BA0BtB"}
+{"version":3,"file":"dropzone.js","sources":["../../../src/file-upload/dropzone.tsx"],"sourcesContent":["import { CloudArrowUpFillIcon } from \"@lifesg/react-icons/cloud-arrow-up-fill\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./dropzone.styles\";\nimport type { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DashedBorder\n            colour={Colour[\"border-primary\"]}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            enabled={border}\n            backgroundColor={Colour[\"bg-primary-subtler\"]}\n            className={styles.dragOverlay}\n        >\n            <CloudArrowUpFillIcon className={styles.overlayIcon} />\n            <Typography.BodyMD className={styles.overlayText} weight=\"semibold\">\n                Drop files here\n            </Typography.BodyMD>\n        </DashedBorder>\n    );\n\n    return (\n        <DashedBorder\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            enabled={border}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n            className={clsx(\n                styles.container,\n                border && styles.containerWithDashedBorder,\n                className\n            )}\n            {...getRootProps()}\n        >\n            <input\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                className={styles.hiddenInput}\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </DashedBorder>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","DashedBorder","enabled","thickness","Border","radius","Radius","colour","Colour","clsx","styles.container","styles.containerWithDashedBorder","_jsx","type","tabIndex","styles.hiddenInput","event","target","files","Array","from","backgroundColor","styles.dragOverlay","CloudArrowUpFillIcon","styles.overlayIcon","Typography","BodyMD","styles.overlayText","weight"],"mappings":"o6BAuBA,MAkGaA,EAAqBC,EAAAA,YAlGhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OAAIC,OACJA,EACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAAA,OAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,cAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAAA,oBAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MAgCR,OACIC,EAAAA,KAACC,EAAAA,aAAYP,OAAAC,OAAA,CACTjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EACTsB,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OACvB7B,UAAW8B,EAAAA,QACPC,EAAAA,UACA7B,GAAU8B,EAAAA,0BACVhC,IAEAS,IAAc,CAAAd,SAAA,CAElBsC,EAAAA,IAAA,QAAA,CACIC,KAAK,OACLjC,KAAMA,EACNK,IAAKC,EACL4B,UAAU,mBAEVnC,UAAWoC,EAAAA,YACXxC,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SAnDUiC,IACdA,EAAMC,OAAOC,OACbnC,EAASoC,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IAkDK5C,EACAe,GA5CLW,EAAAA,KAACC,EAAAA,aAAY,CACTM,OAAQC,EAAAA,OAAO,kBACfL,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBJ,QAASrB,EACTwC,gBAAiBb,EAAAA,OAAO,sBACxB7B,UAAW2C,cAAkBhD,SAAA,CAE7BsC,MAACW,EAAAA,qBAAoB,CAAC5C,UAAW6C,EAAAA,cACjCZ,MAACa,EAAAA,WAAWC,OAAM,CAAC/C,UAAWgD,EAAAA,YAAoBC,OAAO,WAAUtD,SAAA,0BAoCxD"}

package/cjs/file-upload/dropzone.styles.js

@@ -1,38 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/cloud-arrow-up-fill"),r=require("styled-components"),i=require("../theme/index.js"),t=require("../typography/typography.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(r);const a=d.default.div`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-
-    ${e=>{if(e.$border)return r.css`
-                ${i.Border.Util["dashed-default"]({radius:i.Radius.sm,thickness:i.Border["width-040"],colour:i.Colour.border})}
-                padding: ${i.Spacing["spacing-32"]};
-
-                ${i.MediaQuery.MaxWidth.md} {
-                    padding: ${i.Spacing["spacing-32"]} ${i.Spacing["spacing-20"]};
-                }
-            `}}
-`,l=d.default.input`
-    display: none;
-`,n=d.default.div`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    background: ${i.Colour["bg-primary-subtler"]};
-    ${i.Border.Util["dashed-default"]({radius:i.Radius.sm,thickness:i.Border["width-040"],colour:i.Colour["border-primary"]})}
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`,s=d.default(t.Typography.BodyMD)`
-    color: ${i.Colour["text-primary"]};
-    text-align: center;
-`,u=d.default(e.CloudArrowUpFillIcon)`
-    color: ${i.Colour["icon-primary"]};
-    height: 4rem;
-    width: 4rem;
-`;exports.Container=a,exports.DragOverlay=n,exports.HiddenInput=l,exports.OverlayIcon=u,exports.OverlayText=s;
+"use strict";require("./dropzone.styles_1pllsau.css");exports.container="c1mdy24p",exports.containerWithDashedBorder="c1vk9wvq",exports.dragOverlay="dtq8bte",exports.hiddenInput="h1ogyved",exports.overlayIcon="o1seqaul",exports.overlayText="ozzxgak";
 //# sourceMappingURL=dropzone.styles.js.map

package/cjs/file-upload/dropzone.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.styles.js","sources":["../../../src/file-upload/dropzone.styles.tsx"],"sourcesContent":["import { CloudArrowUpFillIcon } from \"@lifesg/react-icons/cloud-arrow-up-fill\";\nimport styled, { css } from \"styled-components\";\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface StyleProps {\n    $border?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<StyleProps>`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        if (props.$border) {\n            return css`\n                ${Border.Util[\"dashed-default\"]({\n                    radius: Radius[\"sm\"],\n                    thickness: Border[\"width-040\"],\n                    colour: Colour[\"border\"],\n                })}\n                padding: ${Spacing[\"spacing-32\"]};\n\n                ${MediaQuery.MaxWidth.md} {\n                    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const HiddenInput = styled.input`\n    display: none;\n`;\n\nexport const DragOverlay = styled.div`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    background: ${Colour[\"bg-primary-subtler\"]};\n    ${Border.Util[\"dashed-default\"]({\n        radius: Radius[\"sm\"],\n        thickness: Border[\"width-040\"],\n        colour: Colour[\"border-primary\"],\n    })}\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const OverlayText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-primary\"]};\n    text-align: center;\n`;\n\nexport const OverlayIcon = styled(CloudArrowUpFillIcon)`\n    color: ${Colour[\"icon-primary\"]};\n    height: 4rem;\n    width: 4rem;\n`;\n"],"names":["Container","styled","div","props","$border","css","Border","Util","radius","Radius","thickness","colour","Colour","Spacing","MediaQuery","MaxWidth","md","HiddenInput","input","DragOverlay","OverlayText","Typography","BodyMD","OverlayIcon","CloudArrowUpFillIcon"],"mappings":"gQAgBO,MAAMA,EAAYC,EAAAA,QAAOC,GAAe;;;;;MAKxCC,IACC,GAAIA,EAAMC,QACN,OAAOC,KAAG;kBACJC,EAAAA,OAAOC,KAAK,kBAAkB,CAC5BC,OAAQC,EAAAA,OAAW,GACnBC,UAAWJ,EAAAA,OAAO,aAClBK,OAAQC,EAAAA,OAAe;2BAEhBC,EAAAA,QAAQ;;kBAEjBC,EAAAA,WAAWC,SAASC;+BACPH,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAGxD;EAIKI,EAAchB,EAAAA,QAAOiB,KAAK;;EAI1BC,EAAclB,EAAAA,QAAOC,GAAG;;;;;;;kBAOnBU,EAAAA,OAAO;MACnBN,EAAAA,OAAOC,KAAK,kBAAkB,CAC5BC,OAAQC,EAAAA,OAAW,GACnBC,UAAWJ,EAAAA,OAAO,aAClBK,OAAQC,EAAAA,OAAO;;;;;;EASVQ,EAAcnB,EAAAA,QAAOoB,aAAWC,OAAO;aACvCV,EAAAA,OAAO;;EAIPW,EAActB,EAAAA,QAAOuB,EAAAA,qBAAqB;aAC1CZ,EAAAA,OAAO;;;"}
+{"version":3,"file":"dropzone.styles.js","sources":["../../../src/file-upload/dropzone.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const containerWithDashedBorder = css`\n    padding: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const hiddenInput = css`\n    display: none;\n`;\n\nexport const dragOverlay = css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const overlayText = css`\n    color: ${Colour[\"text-primary\"]};\n    text-align: center;\n`;\n\nexport const overlayIcon = css`\n    color: ${Colour[\"icon-primary\"]};\n    height: 4rem;\n    width: 4rem;\n`;\n"],"names":[],"mappings":"mGAIsB,6CAMgB,+BAYd,8BAJA,+BAsBA,+BALA"}

package/cjs/file-upload/dropzone.styles_1pllsau.css

@@ -0,0 +1,6 @@
+@layer fds{.c1mdy24p{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.c1vk9wvq{padding:var(--fds-spacing-32);}:where(body.fds-breakpoint-md-max) .c1vk9wvq{padding:var(--fds-spacing-32) var(--fds-spacing-20);}
+.h1ogyved{display:none;}
+.dtq8bte{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.ozzxgak{color:var(--fds-colour-text-primary);text-align:center;}
+.o1seqaul{color:var(--fds-colour-icon-primary);height:4rem;width:4rem;}}

package/cjs/file-upload/file-item-edit.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("../form/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js");var r=require("../util/string-helper.js");require("@react-aria/live-announcer");var n=require("./file-item-edit.styles.js"),l=require("./file-list-item/file-list-item-thumbnail.js"),a=require("./helper.js");exports.FileItemEdit=({fileItem:s,fileDescriptionMaxLength:u,descriptionRequired:o=!0,descriptionLabel:c,wrapperWidth:d,onSave:h,onCancel:p,onBlur:m})=>{const{id:x,name:j,size:b,type:f,truncateText:g=!0,thumbnailImageDataUrl:q}=s,[v,y]=t.useState(),[S,F]=t.useState(""),C=t.useRef(null),T=t.useRef(null),D=t.useCallback((e=>{if(!g)return e;const t=T&&T.current?T.current.getBoundingClientRect().width:0;return r.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)}),[g]);t.useEffect((()=>{y(D(j))}),[d,D,j]),t.useEffect((()=>{F(s.description||"")}),[s]);const I=!!q||f===a.FileUploadHelper.PDF_MIME_TYPE;return e.jsxs(n.Item,{"data-testid":`${x}-edit-display`,children:[e.jsxs(n.ContentSection,{children:[I&&e.jsx(l.FileListItemThumbnail,{thumbnailImageDataUrl:q,fileType:f}),e.jsxs(n.DetailsSection,{children:[e.jsxs(n.NameSection,{ref:T,children:[e.jsx(n.FileNameText,{weight:"semibold",children:v}),e.jsx(n.FileSizeText,{children:a.FileUploadHelper.formatFileSizeDisplay(b)})]}),e.jsx(i.Form.Textarea,{ref:C,id:`${x}-description-textarea`,"data-testid":`${x}-textarea`,value:S,maxLength:u,onChange:e=>{F(e.target.value)},onBlur:e=>{m(e.target.value)},rows:3,label:null!=c?c:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e.jsxs(n.ActionButtonsSection,{$thumbnail:I,children:[e.jsx(n.ActionButton,{"data-testid":`${x}-save-button`,type:"button",disabled:(()=>{if(!o)return!1;return 0===S.trim().length})(),onClick:()=>{C.current&&h(C.current.value.trim())},children:"Save"}),e.jsx(n.ActionButton,{type:"button",styleType:"secondary","data-testid":`${x}-cancel-button`,onClick:p,children:"Cancel"})]})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),i=require("react"),r=require("../button/button.js"),a=require("../form/index.js"),n=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js");var s=require("../util/string-helper.js");require("@react-aria/live-announcer");var l=require("./file-item-edit.styles.js"),u=require("./file-list-item/file-list-item-thumbnail.js"),o=require("./helper.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(t);exports.FileItemEdit=({fileItem:t,fileDescriptionMaxLength:c,descriptionRequired:m=!0,descriptionLabel:p,wrapperWidth:h,onSave:f,onCancel:j,onBlur:x})=>{const{id:y,name:b,size:g,type:v,truncateText:q=!0,thumbnailImageDataUrl:T}=t,[S,B]=i.useState(),[N,D]=i.useState(""),C=i.useRef(null),F=i.useRef(null),I=i.useCallback((e=>{if(!q)return e;const t=F&&F.current?F.current.getBoundingClientRect().width:0;return s.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)}),[q]);i.useEffect((()=>{B(I(b))}),[h,I,b]),i.useEffect((()=>{D(t.description||"")}),[t]);const w=!!T||v===o.FileUploadHelper.PDF_MIME_TYPE;return e.jsxs("li",{"data-testid":`${y}-edit-display`,className:l.item,children:[e.jsxs("div",{className:l.contentSection,children:[w&&e.jsx(u.FileListItemThumbnail,{thumbnailImageDataUrl:T,fileType:v}),e.jsxs("div",{className:l.detailsSection,children:[e.jsxs("div",{ref:F,className:l.nameSection,children:[e.jsx(n.Typography.BodyMD,{className:l.fileNameText,weight:"semibold",children:S}),e.jsx(n.Typography.BodyMD,{className:l.fileSizeText,children:o.FileUploadHelper.formatFileSizeDisplay(g)})]}),e.jsx(a.Form.Textarea,{ref:C,id:`${y}-description-textarea`,"data-testid":`${y}-textarea`,value:N,maxLength:c,onChange:e=>{D(e.target.value)},onBlur:e=>{x(e.target.value)},rows:3,label:null!=p?p:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e.jsxs("div",{className:d.default(l.actionButtonsSection,w&&l.actionButtonsSectionWithThumbnail),children:[e.jsx(r.Button,{"data-testid":`${y}-save-button`,type:"button",sizeType:"small",disabled:(()=>{if(!m)return!1;return 0===N.trim().length})(),onClick:()=>{C.current&&f(C.current.value.trim())},className:l.actionButton,children:"Save"}),e.jsx(r.Button,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${y}-cancel-button`,onClick:j,className:l.actionButton,children:"Cancel"})]})]})};
 //# sourceMappingURL=file-item-edit.js.map

package/cjs/file-upload/file-item-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport { FileItemProps } from \"./types\";\nimport { FormLabelProps } from \"../form/types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    descriptionRequired = true,\n    descriptionLabel,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        if (!descriptionRequired) return false;\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        label={\n                            descriptionLabel ?? {\n                                children: \"Photo description\",\n                                subtitle:\n                                    \"Describe this photo to users who may not be able to see the image.\",\n                            }\n                        }\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","shouldDisableSave","onClick","styleType"],"mappings":"+dA6B4B,EACxBA,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAczD,OACIC,EAAAA,KAACC,EAAAA,KAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAAAA,KAACG,EAAAA,0BACIN,GACGO,EAAAA,IAACC,EAAAA,sBAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAAAA,KAACO,EAAAA,eAAc,CAAAL,SAAA,CAjBvBF,OAACQ,EAAAA,YAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAAAA,IAACM,EAAAA,aAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAAAA,IAACQ,EAAAA,aAAY,CAAAV,SACRJ,EAAAA,iBAAiBe,sBAAsBvC,QAgBpC8B,EAAAA,IAACU,OAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWnD,EACXoD,SA9CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA8CzBjB,OA3CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA2CVgC,KAAM,EACNC,MACItD,QAAAA,EAAoB,CAChBmC,SAAU,oBACVoB,SACI,8EAMxBtB,OAACuB,EAAAA,qBAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,MAACqB,EAAAA,aAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAvDU,MACtB,IAAK5D,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmB8C,OACpBC,MAAY,EAoDhBC,GACVC,QAtEG,KACX/C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAmE+BzB,SAAA,SAIvBE,EAAAA,IAACqB,eAAY,CACTlD,KAAK,SACLwD,UAAU,0BACG,GAAG3D,kBAChB0D,QAAS5D,EAAQgC,SAAA,gBAKtB"}
+{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport type { FormLabelProps } from \"../form/form-label/types\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    descriptionRequired = true,\n    descriptionLabel,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        if (!descriptionRequired) return false;\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <div ref={nameSectionRef} className={styles.nameSection}>\n            <Typography.BodyMD\n                className={styles.fileNameText}\n                weight=\"semibold\"\n            >\n                {formattedName}\n            </Typography.BodyMD>\n            <Typography.BodyMD className={styles.fileSizeText}>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </Typography.BodyMD>\n        </div>\n    );\n\n    return (\n        <li data-testid={`${id}-edit-display`} className={styles.item}>\n            <div className={styles.contentSection}>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <div className={styles.detailsSection}>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        label={\n                            descriptionLabel ?? {\n                                children: \"Photo description\",\n                                subtitle:\n                                    \"Describe this photo to users who may not be able to see the image.\",\n                            }\n                        }\n                    />\n                </div>\n            </div>\n            <div\n                className={clsx(\n                    styles.actionButtonsSection,\n                    shouldShowThumbnail &&\n                        styles.actionButtonsSectionWithThumbnail\n                )}\n            >\n                <Button\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                    className={styles.actionButton}\n                >\n                    Save\n                </Button>\n                <Button\n                    type=\"button\"\n                    sizeType=\"small\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                    className={styles.actionButton}\n                >\n                    Cancel\n                </Button>\n            </div>\n        </li>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","styles.fileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","shouldDisableSave","onClick","styles.actionButton","styleType"],"mappings":"ymBAwB4B,EACxBA,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAmBzD,OACIC,EAAAA,KAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAAA,KAAWC,SAAA,CACzDH,EAAAA,YAAKC,UAAWG,EAAAA,yBACXP,GACGQ,EAAAA,IAACC,EAAAA,uBACG7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAAA,KAAA,MAAA,CAAKC,UAAWO,EAAAA,eAAqBL,SAAA,CAtB7CH,EAAAA,KAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAAA,YAAkBP,SAAA,CACnDE,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CACdX,UAAWY,eACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CAACX,UAAWc,EAAAA,aAAmBZ,SAC5CL,EAAAA,iBAAiBkB,sBAAsB1C,QAgBpC+B,EAAAA,IAACY,EAAAA,KAAKC,SAAQ,CACVT,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPsC,UAAWtD,EACXuD,SAnDEC,IAClBvC,EAAsBuC,EAAMC,OAAOlC,MAAM,EAmDzBjB,OAhDAkD,IAChBlD,EAAOkD,EAAMC,OAAOlC,MAAM,EAgDVmC,KAAM,EACNC,MACIzD,QAAAA,EAAoB,CAChBoC,SAAU,oBACVsB,SACI,8EAMxBzB,EAAAA,KAAA,MAAA,CACIC,UAAWyB,UACPC,EAAAA,qBACA9B,GACI+B,qCACPzB,SAAA,CAEDE,MAACwB,EAAAA,OAAM,CAAA,cACU,GAAGzD,gBAChBG,KAAK,SACLuD,SAAS,QACTC,SAnEU,MACtB,IAAKjE,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmBmD,OACpBC,MAAY,EAgEhBC,GACVC,QAlFG,KACXpD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM4C,OACrC,EAgFY/B,UAAWmC,eAAmBjC,SAAA,SAIlCE,EAAAA,IAACwB,EAAAA,OAAM,CACHtD,KAAK,SACLuD,SAAS,QACTO,UAAU,YAAW,cACR,GAAGjE,kBAChB+D,QAASjE,EACT+B,UAAWmC,EAAAA,aAAmBjC,SAAA,gBAKrC"}

package/cjs/file-upload/file-item-edit.styles.js

@@ -1,71 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../theme/index.js"),a=require("../typography/typography.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=n(t);const r=o.default.li`
-    display: flex;
-    flex-direction: column;
-    padding: ${i.Spacing["spacing-32"]};
-    background: ${i.Colour["bg-primary-subtlest"]};
-    border: ${i.Border["width-010"]} ${i.Border.solid} ${i.Colour.border};
-    border-radius: ${i.Radius.sm};
-
-    &:not(:last-child) {
-        margin-bottom: ${i.Spacing["spacing-16"]};
-    }
-`,d=o.default.div`
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: ${i.Spacing["spacing-16"]};
-    width: 100%;
-`,l=o.default.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-`,s=o.default.div`
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: ${i.Spacing["spacing-16"]};
-
-    ${i.MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-        justify-content: flex-start;
-    }
-`,p=o.default(a.Typography.BodyMD)`
-    display: flex;
-    flex: 1;
-    margin-right: ${i.Spacing["spacing-16"]};
-
-    ${i.MediaQuery.MaxWidth.md} {
-        margin-right: 0;
-        margin-bottom: ${i.Spacing["spacing-8"]};
-    }
-`,c=o.default(a.Typography.BodyMD)`
-    color: ${i.Colour["text-subtler"]};
-`,u=o.default.div`
-    display: flex;
-    justify-content: flex-end;
-    ${i.MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-    }
-
-    ${e=>{if(e.$thumbnail)return t.css`
-                margin-left: calc(
-                    96px + ${i.Spacing["spacing-32"]}
-                ); // thumbnail width + right margin
-
-                ${i.MediaQuery.MaxWidth.md} {
-                    margin-left: 0;
-                }
-            `}}
-`,g=o.default(e.Button.Small)`
-    width: 7.5rem;
-    &:not(:last-of-type) {
-        margin-right: ${i.Spacing["spacing-16"]};
-    }
-
-    ${i.MediaQuery.MaxWidth.md} {
-        width: 100%;
-        &:not(:last-of-type) {
-            margin-bottom: ${i.Spacing["spacing-16"]};
-        }
-    }
-`;exports.ActionButton=g,exports.ActionButtonsSection=u,exports.ContentSection=d,exports.DetailsSection=l,exports.FileNameText=p,exports.FileSizeText=c,exports.Item=r,exports.NameSection=s;
+"use strict";require("./file-item-edit.styles_19bvztn.css");exports.actionButton="aigdfjq",exports.actionButtonsSection="ajknckh",exports.actionButtonsSectionWithThumbnail="awg16zc",exports.contentSection="c1i0crev",exports.detailsSection="d4rbbwx",exports.fileNameText="fuau9z6",exports.fileSizeText="f18dc1yj",exports.item="i1432lvs",exports.nameSection="n18lt6ho";
 //# sourceMappingURL=file-item-edit.styles.js.map

package/cjs/file-upload/file-item-edit.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.styles.js","sources":["../../../src/file-upload/file-item-edit.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button/button\";\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ActionButtonSectionStyleProps {\n    $thumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius[\"sm\"]};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ContentSection = styled.div`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const DetailsSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const NameSection = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const FileNameText = styled(Typography.BodyMD)`\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`\n    display: flex;\n    justify-content: flex-end;\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n\n    ${(props) => {\n        if (props.$thumbnail) {\n            return css`\n                margin-left: calc(\n                    96px + ${Spacing[\"spacing-32\"]}\n                ); // thumbnail width + right margin\n\n                ${MediaQuery.MaxWidth.md} {\n                    margin-left: 0;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    width: 7.5rem;\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":["Item","styled","li","Spacing","Colour","Border","solid","border","Radius","ContentSection","div","DetailsSection","NameSection","MediaQuery","MaxWidth","md","FileNameText","Typography","BodyMD","FileSizeText","ActionButtonsSection","props","$thumbnail","css","ActionButton","Button","Small"],"mappings":"4OAeO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;eAGdC,EAAAA,QAAQ;kBACLC,EAAAA,OAAO;cACXC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASF,EAAAA,OAAOG;qBACvCC,EAAAA,OAAW;;;yBAGPL,EAAAA,QAAQ;;EAIpBM,EAAiBR,EAAAA,QAAOS,GAAG;;;qBAGnBP,EAAAA,QAAQ;;EAIhBQ,EAAiBV,EAAAA,QAAOS,GAAG;;;;EAM3BE,EAAcX,EAAAA,QAAOS,GAAG;;;;qBAIhBP,EAAAA,QAAQ;;MAEvBU,EAAAA,WAAWC,SAASC;;;;EAMbC,EAAef,EAAAA,QAAOgB,aAAWC,OAAO;;;oBAGjCf,EAAAA,QAAQ;;MAEtBU,EAAAA,WAAWC,SAASC;;yBAEDZ,EAAAA,QAAQ;;EAIpBgB,EAAelB,EAAAA,QAAOgB,aAAWC,OAAO;aACxCd,EAAAA,OAAO;EAGPgB,EAAuBnB,EAAAA,QAAOS,GAAkC;;;MAGvEG,EAAAA,WAAWC,SAASC;;;;MAInBM,IACC,GAAIA,EAAMC,WACN,OAAOC,KAAG;;6BAEOpB,EAAAA,QAAQ;;;kBAGnBU,EAAAA,WAAWC,SAASC;;;aAI9B;EAIKS,EAAevB,EAAAA,QAAOwB,SAAOC,MAAM;;;wBAGxBvB,EAAAA,QAAQ;;;MAG1BU,EAAAA,WAAWC,SAASC;;;6BAGGZ,EAAAA,QAAQ;;;"}
+{"version":3,"file":"file-item-edit.styles.js","sources":["../../../src/file-upload/file-item-edit.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\nexport const item = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius[\"sm\"]};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const detailsSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const nameSection = css`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const fileNameText = css`\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const actionButtonsSection = css`\n    display: flex;\n    justify-content: flex-end;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\nexport const actionButtonsSectionWithThumbnail = css`\n    margin-left: calc(\n        96px + ${Spacing[\"spacing-32\"]}\n    ); // thumbnail width + right margin\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-left: 0;\n    }\n`;\n\nexport const actionButton = css`\n    width: 7.5rem;\n\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":[],"mappings":"4GA4EyB,uCAnBQ,oDASa,iCAjDnB,kCAOA,+BAkBF,+BAWA,wBAjDR,+BA0BO"}

package/cjs/file-upload/file-item-edit.styles_19bvztn.css

@@ -0,0 +1,11 @@
+@layer fds{.i1432lvs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-32);background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}.i1432lvs:not(:last-child){margin-bottom:var(--fds-spacing-16);}
+.c1i0crev{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;margin-bottom:var(--fds-spacing-16);width:100%;}
+.d4rbbwx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.n18lt6ho{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .n18lt6ho{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.fuau9z6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .fuau9z6{margin-right:0;margin-bottom:var(--fds-spacing-8);}
+.f18dc1yj{color:var(--fds-colour-text-subtler);}
+.ajknckh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}:where(body.fds-breakpoint-md-max) .ajknckh{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.awg16zc{margin-left:calc(
+        96px + var(--fds-spacing-32)
+    );}:where(body.fds-breakpoint-md-max) .awg16zc{margin-left:0;}
+.aigdfjq{width:7.5rem;}.aigdfjq:not(:last-of-type){margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .aigdfjq{width:100%;}:where(body.fds-breakpoint-md-max) .aigdfjq:not(:last-of-type){margin-bottom:var(--fds-spacing-16);}}

package/cjs/file-upload/file-list/file-list.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("../../external/@dnd-kit/core/dist/core.esm.js"),t=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),s=require("clsx"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),o=require("../../shared/accessibility/index.js"),l=require("../context.js"),a=require("../custom-sensors.js"),d=require("../file-item-edit.js"),c=require("../file-list-item/file-list-item.js"),u=require("../helper.js"),p=require("./file-list.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=f(s);const m=i.forwardRef((function({fileItems:s=[],editableFileItems:f,fileDescriptionMaxLength:m,descriptionRequired:h,descriptionLabel:b,sortable:j,disabled:y,readOnly:v,onItemUpdate:x,onItemDelete:S,onSort:q},I){const[$,M]=i.useState({}),{setActiveId:O}=i.useContext(l.FileUploadContext),[C,D]=i.useState(""),F=i.useRef({});i.useImperativeHandle(I,(()=>({focus:()=>{var e;null===(e=R.current)||void 0===e||e.focus()}})));const{width:L=0,ref:R}=n.useResizeDetector(),E=i.useRef({}),w=r.useSensors(r.useSensor(a.MouseSensor,{activationConstraint:{distance:8}}),r.useSensor(r.TouchSensor,{activationConstraint:{delay:150,tolerance:5}}),r.useSensor(r.KeyboardSensor,{coordinateGetter:t.sortableKeyboardCoordinates})),k=e=>{delete E.current[e]};i.useEffect((()=>{const e=G(s);((e,r)=>{const t=Object.keys(e),s=Object.keys(r);if(t.length!==s.length)return!1;for(const t of s)if(e[t]!==r[t])return!1;return!0})($,e)||M(e)}),[s,f,v]),i.useEffect((()=>{var e;if(!s||0===s.length)return void D("");const r=Date.now(),t=[];for(const i of s){const s=F.current[i.id];if(i.errorMessage)"error"!==(null==s?void 0:s.status)&&(t.push("string"==typeof i.errorMessage?`Error uploading ${i.name}: ${i.errorMessage}`:`Error uploading ${i.name}`),F.current[i.id]={progress:null!==(e=i.progress)&&void 0!==e?e:1,timestamp:r,status:"error"});else if(void 0!==i.progress)if(i.progress>=1)"complete"!==(null==s?void 0:s.status)&&(t.push(`${i.name} upload is complete`),F.current[i.id]={progress:1,timestamp:r,status:"complete"});else if("number"==typeof i.progress&&i.progress<1){(!s||"in-progress"!==s.status)&&(t.push(`Starting upload of ${i.name}`),F.current[i.id]={progress:i.progress,timestamp:r,status:"in-progress"})}}t.length>0&&D(t.join(", "))}),[s]);const A=e=>r=>{V(e.id,"display"),k(e.id);const t=Object.assign(Object.assign({},e),{description:r});x(t)},W=e=>r=>{E.current[e.id]=r},H=e=>()=>{e.description&&0!==e.description.length?V(e.id,"display"):S(e),k(e.id)},N=e=>()=>{V(e.id,"edit")},U=e=>()=>{S(e),R.current&&R.current.focus()},z=e=>{if(q&&s){const{active:r,over:i}=e;if(i&&r.id!==i.id){const e=s.findIndex((e=>e.id===r.id)),n=s.findIndex((e=>e.id===i.id)),o=t.arrayMove(s,e,n);q(o)}}O(void 0)},B=e=>{const{active:r}=e;O(r.id)},K=e=>f&&u.FileUploadHelper.isSupportedImageType(e.type),T=e=>!e.errorMessage&&!v&&!("number"==typeof e.progress&&e.progress<1)&&K(e)&&!e.description,G=e=>{if(!e||0===e.length)return{};const r={};for(const t of e)t.errorMessage?r[t.id]="error":$[t.id]?r[t.id]=$[t.id]:r[t.id]=T(t)?"edit":"display";return r},V=(e,r)=>{M((t=>Object.assign(Object.assign({},t),{[e]:r})))},J=()=>s&&s.length>1&&j&&Object.values($).every((e=>"display"===e)),P=()=>{if(0===s.length)return"No files uploaded";const e=s.filter((e=>!(null==e?void 0:e.errorMessage)&&(1===e.progress||void 0===e.progress))).length,r=s.filter((e=>"number"==typeof e.progress&&e.progress<1)).length,t=s.filter((e=>e.errorMessage)).length;if(0===e&&0===r&&0===t)return"File list";const i=[e>0?`${e} completed files`:"",r>0?`${r} file in progress`:"",t>0?`${t} ${t>1?"files":"file"} with error`:""].filter(Boolean);return`${v?"Read-only file list":"File list"}. ${i.join(", ")}`},Q=()=>{const r=((e,r)=>{if(!e||0===e.length)return[];const t=[];for(const s of e)if("edit"===r[s.id]){const e=t[t.length-1];Array.isArray(e)?e.push(s):t.push([s])}else t.push(s);return t})(s,$);return 0===r.length?null:r.map(((r,t)=>Array.isArray(r)?((r,t)=>{const s=r.map((r=>{const t=Object.assign({},r);return void 0!==E.current[r.id]&&(t.description=E.current[r.id]),e.jsx(d.FileItemEdit,{fileItem:t,wrapperWidth:L,fileDescriptionMaxLength:m,descriptionRequired:h,descriptionLabel:b,onSave:A(r),onCancel:H(r),onBlur:W(r)},r.id)}));return e.jsx("li",{className:p.editableItemsContainer,children:e.jsx("ul",{children:s})},`editable-${t}`)})(r,t):e.jsx(c.FileListItem,{fileItem:r,editable:K(r),wrapperWidth:L,sortable:J(),disabled:y,readOnly:v,descriptionLabel:b,onDelete:U(r),onEditClick:N(r)},r.id)))},X=()=>e.jsxs(e.Fragment,{children:[e.jsx(o.VisuallyHidden,{"aria-live":"polite","aria-atomic":"true",children:C}),e.jsx("ul",{tabIndex:-1,className:g.default(p.listWrapper,v&&p.listWrapperReadOnly),ref:R,"aria-label":P(),children:Q()})]});return y||v||!J()?X():e.jsx(r.DndContext,{sensors:w,onDragEnd:z,onDragStart:B,children:e.jsx(t.SortableContext,{items:s,strategy:t.verticalListSortingStrategy,children:X()})})}));exports.FileList=m;
+//# sourceMappingURL=file-list.js.map