@lifesg/react-design-system 3.4.0 → 3.5.0-canary.1

package/file-upload/file-list.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list.js","sources":["../../src/file-upload/file-list.tsx"],"sourcesContent":["import {\n    DndContext,\n    DragEndEvent,\n    DragStartEvent,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    SortableContext,\n    arrayMove,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { FileUploadContext } from \"./context\";\nimport { MouseSensor } from \"./custom-sensors\";\nimport { FileItemEdit } from \"./file-item-edit\";\nimport { FileListItem } from \"./file-list-item\";\nimport { EditableItemsContainer, ListWrapper } from \"./file-list.styles\";\nimport { FileUploadHelper } from \"./helper\";\nimport { FileItemProps } from \"./types\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <EditableItemsContainer key={`editable-${keyToUse}`}>\n                <ul>{itemsToRender}</ul>\n            </EditableItemsContainer>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ListWrapper\n                    tabIndex={-1}\n                    $readOnly={readOnly}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ListWrapper>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","EditableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","ListWrapper","tabIndex","$readOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}
+{"version":3,"file":"file-list.js","sources":["../../src/file-upload/file-list.tsx"],"sourcesContent":["import {\n    DndContext,\n    DragEndEvent,\n    DragStartEvent,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    SortableContext,\n    arrayMove,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { FileUploadContext } from \"./context\";\nimport { MouseSensor } from \"./custom-sensors\";\nimport { FileItemEdit } from \"./file-item-edit\";\nimport { FileListItem } from \"./file-list-item\";\nimport { EditableItemsContainer, ListWrapper } from \"./file-list.styles\";\nimport { FileUploadHelper } from \"./helper\";\nimport { FileItemProps } from \"./types\";\nimport { FormLabelProps } from \"../form/types\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        descriptionRequired,\n        descriptionLabel,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <EditableItemsContainer key={`editable-${keyToUse}`}>\n                <ul>{itemsToRender}</ul>\n            </EditableItemsContainer>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        descriptionLabel={descriptionLabel}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ListWrapper\n                    tabIndex={-1}\n                    $readOnly={readOnly}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ListWrapper>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","EditableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","ListWrapper","tabIndex","$readOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}

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

@@ -1,20 +1,13 @@
-import t from"styled-components";import{Spacing as o,Border as i,Colour as r}from"../theme/index.js";const e=t.ul`
+import t from"styled-components";import{Spacing as o}from"../theme/index.js";const n=t.ul`
     list-style-type: none;
     margin-bottom: ${t=>t.$readOnly?"0":o["spacing-32"]};
-`,n=t.li`
-    border-top: ${i["width-010"]} ${i.solid} ${r.border};
-    border-bottom: ${i["width-010"]} ${i.solid} ${r.border};
-
+`,e=t.li`
     &:not(:last-child) {
-        margin-bottom: ${o["spacing-32"]};
-    }
-
-    &:not(:first-child) {
-        margin-top: ${o["spacing-32"]};
+        margin-bottom: ${o["spacing-16"]};
     }
 
     ul {
         list-style-type: none;
     }
-`;export{n as EditableItemsContainer,e as ListWrapper};
+`;export{e as EditableItemsContainer,n as ListWrapper};
 //# sourceMappingURL=file-list.styles.js.map

package/file-upload/file-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list.styles.js","sources":["../../src/file-upload/file-list.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListWrapperStyleProps {\n    $readOnly?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ListWrapper = styled.ul<ListWrapperStyleProps>`\n    list-style-type: none;\n    margin-bottom: ${(props) =>\n        props.$readOnly ? \"0\" : Spacing[\"spacing-32\"]};\n`;\n\nexport const EditableItemsContainer = styled.li`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-32\"]};\n    }\n\n    &:not(:first-child) {\n        margin-top: ${Spacing[\"spacing-32\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":["ListWrapper","styled","ul","props","$readOnly","Spacing","EditableItemsContainer","li","Border","solid","Colour","border"],"mappings":"qGAaO,MAAMA,EAAcC,EAAOC,EAAyB;;qBAErCC,GACdA,EAAMC,UAAY,IAAMC,EAAQ;EAG3BC,EAAyBL,EAAOM,EAAE;kBAC7BC,EAAO,gBAAgBA,EAAOC,SAASC,EAAOC;qBAC3CH,EAAO,gBAAgBA,EAAOC,SAASC,EAAOC;;;yBAG1CN,EAAQ;;;;sBAIXA,EAAQ;;;;;;"}
+{"version":3,"file":"file-list.styles.js","sources":["../../src/file-upload/file-list.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListWrapperStyleProps {\n    $readOnly?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ListWrapper = styled.ul<ListWrapperStyleProps>`\n    list-style-type: none;\n    margin-bottom: ${(props) =>\n        props.$readOnly ? \"0\" : Spacing[\"spacing-32\"]};\n`;\n\nexport const EditableItemsContainer = styled.li`\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":["ListWrapper","styled","ul","props","$readOnly","Spacing","EditableItemsContainer","li"],"mappings":"6EAaO,MAAMA,EAAcC,EAAOC,EAAyB;;qBAErCC,GACdA,EAAMC,UAAY,IAAMC,EAAQ;EAG3BC,EAAyBL,EAAOM,EAAE;;yBAEtBF,EAAQ;;;;;;"}

package/file-upload/file-upload.d.ts

@@ -1,2 +1,2 @@
 import { FileUploadProps } from "./types";
-export declare const FileUpload: ({ styleType, fileItems, title, description, maxFiles, warning, className, name, id, "data-testid": testId, accept, capture, multiple, disabled, sortable, fileDescriptionMaxLength, editableFileItems, errorMessage, readOnly, customLabels, onChange, onDelete, onEdit, onSort, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileUpload: ({ styleType, fileItems, title, description, maxFiles, warning, className, name, id, "data-testid": testId, accept, capture, multiple, disabled, sortable, fileDescriptionMaxLength, editableFileItems, descriptionRequired, descriptionLabel, errorMessage, readOnly, customLabels, onChange, onDelete, onEdit, onSort, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;

package/file-upload/file-upload.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as l}from"react";import{FileUploadContext as o}from"./context.js";import{FileUploadDropzone as i}from"./dropzone.js";import{FileList as n}from"./file-list.js";import{TextContainer as d,WarningAlert as a,ErrorAlert as s,UploadButtonContainer as c,UploadButton as p,UploadButtonText as u,Title as m,TitleContainer as f,Description as h,DescriptionContainer as b}from"./file-upload.styles.js";const y=({styleType:y="bordered",fileItems:g,title:v,description:I,maxFiles:x,warning:D,className:j,name:F,id:L,"data-testid":w,accept:z,capture:B,multiple:C,disabled:M,sortable:N=!1,fileDescriptionMaxLength:O,editableFileItems:S=!1,errorMessage:T,readOnly:U,customLabels:k,onChange:A,onDelete:E,onEdit:P,onSort:$})=>{const q={uploadButton:(null==k?void 0:k.uploadButtonLabel)||"Upload files"},G=r(null),H=r(null),[J,K]=l(),Q=()=>!(!x||!g)&&g.length>=x;return e(o.Provider,{value:{activeId:J,setActiveId:K},children:t(i,{ref:G,onChange:e=>{var t;!M&&A&&(A(e),null===(t=H.current)||void 0===t||t.focus())},id:L?`${L}-dropzone`:"dropzone",accept:z,capture:B,border:"bordered"===y,className:j,"data-testid":w,name:F,multiple:C,disabled:M||Q()||U,children:[!(!v&&!I)&&t(d,{children:[v?e("string"==typeof v?m:f,{children:v}):null,I?e("string"==typeof I?h:b,{children:I}):null]}),!!D&&e(a,{type:"warning",children:D}),e(n,{ref:H,fileItems:g,editableFileItems:S,fileDescriptionMaxLength:O,sortable:N,disabled:M,readOnly:U,onItemDelete:e=>{var t;E&&(E(e),null===(t=H.current)||void 0===t||t.focus())},onItemUpdate:e=>{P&&P(e)},onSort:e=>{$&&$(e)}}),T&&e(s,{type:"error",children:T}),!U&&t(c,{children:[e(p,{type:"button",styleType:"secondary",disabled:!!J||M||Q(),onClick:e=>{M||(e.preventDefault(),G.current&&G.current.openFileDialog())},children:q.uploadButton}),e(u,{weight:"semibold",children:"or drop them here"})]})]})})};export{y as FileUpload};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as i}from"react";import{FileUploadContext as l}from"./context.js";import{FileUploadDropzone as o}from"./dropzone.js";import{FileList as n}from"./file-list.js";import{TextContainer as d,WarningAlert as a,ErrorAlert as s,UploadButtonContainer as c,UploadButton as p,UploadButtonText as u,Title as m,TitleContainer as f,Description as h,DescriptionContainer as b}from"./file-upload.styles.js";const y=({styleType:y="bordered",fileItems:g,title:v,description:I,maxFiles:x,warning:D,className:L,name:j,id:F,"data-testid":w,accept:z,capture:B,multiple:C,disabled:M,sortable:q=!1,fileDescriptionMaxLength:N,editableFileItems:O=!1,descriptionRequired:R=!0,descriptionLabel:S,errorMessage:T,readOnly:U,customLabels:k,onChange:A,onDelete:E,onEdit:P,onSort:$})=>{const G={uploadButton:(null==k?void 0:k.uploadButtonLabel)||"Upload files"},H=r(null),J=r(null),[K,Q]=i(),V=()=>!(!x||!g)&&g.length>=x;return e(l.Provider,{value:{activeId:K,setActiveId:Q},children:t(o,{ref:H,onChange:e=>{var t;!M&&A&&(A(e),null===(t=J.current)||void 0===t||t.focus())},id:F?`${F}-dropzone`:"dropzone",accept:z,capture:B,border:"bordered"===y,className:L,"data-testid":w,name:j,multiple:C,disabled:M||V()||U,children:[!(!v&&!I)&&t(d,{children:[v?e("string"==typeof v?m:f,{children:v}):null,I?e("string"==typeof I?h:b,{children:I}):null]}),!!D&&e(a,{type:"warning",children:D}),e(n,{ref:J,fileItems:g,editableFileItems:O,descriptionRequired:R,descriptionLabel:S,fileDescriptionMaxLength:N,sortable:q,disabled:M,readOnly:U,onItemDelete:e=>{var t;E&&(E(e),null===(t=J.current)||void 0===t||t.focus())},onItemUpdate:e=>{P&&P(e)},onSort:e=>{$&&$(e)}}),T&&e(s,{type:"error",children:T}),!U&&t(c,{children:[e(p,{type:"button",styleType:"secondary",disabled:!!K||M||V(),onClick:e=>{M||(e.preventDefault(),H.current&&H.current.openFileDialog())},children:G.uploadButton}),e(u,{weight:"semibold",children:"or drop them here"})]})]})})};export{y as FileUpload};
 //# sourceMappingURL=file-upload.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { FileUploadContext } from \"./context\";\nimport { DropzoneElement, FileUploadDropzone } from \"./dropzone\";\nimport { FileList, FileListRef } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["FileUpload","styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"odAkBO,MAAMA,EAAa,EACtBC,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAwB,MACtCC,EAAcD,EAAoB,OACjCE,EAAUC,GAAeC,IA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EA8BvD,OACI+B,EAACC,EAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAACC,EAAkB,CACfC,IAAKf,EACLP,SA3EUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAwEQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAACQ,EAAa,CAAAT,SAAA,CAvCrBrC,EAKMiC,EADU,iBAAVjC,EACC+C,EAGJC,EAHS,CAAAX,SAAErC,IAJR,KAWNC,EAKMgC,EADgB,iBAAhBhC,EACCgD,EAGJC,EAHe,CAAAb,SAAEpC,IAJd,UA+BAE,GACC8B,EAACkB,GAAaC,KAAK,UAASf,SAAElC,IAElC8B,EAACoB,EAAQ,CACLb,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVsC,aAhGUC,UAClBpC,IACAA,EAASoC,GACU,QAAnBb,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EA6FYY,aA/EUC,IAClBrC,GACAA,EAAOqC,EACX,EA6EYpC,OA1EIqC,IACZrC,GACAA,EAAOqC,EACX,IAyES3C,GACGkB,EAAC0B,EAAU,CAACP,KAAK,QAAOf,SAAEtB,KAE5BC,GACEsB,EAACsB,EAAqB,CAAAvB,SAAA,CAClBJ,EAAC4B,EAAY,CACTT,KAAK,SACLtD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9B+B,QAvGpBC,IAEKpD,IACDoD,EAAMC,iBACFvC,EAAYkB,SACZlB,EAAYkB,QAAQsB,iBAE5B,EAgGoD5B,SAE/Bf,EAAOC,eAEZU,EAACiC,EAAgB,CAACC,OAAO,WAAU9B,SAAA,6BAMtB"}
+{"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { FileUploadContext } from \"./context\";\nimport { DropzoneElement, FileUploadDropzone } from \"./dropzone\";\nimport { FileList, FileListRef } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    descriptionRequired = true,\n    descriptionLabel,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["FileUpload","styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","descriptionRequired","descriptionLabel","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"odAkBO,MAAMA,EAAa,EACtBC,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,uBAAsB,EACtBC,mBACAC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAwB,MACtCC,EAAcD,EAAoB,OACjCE,EAAUC,GAAeC,IA6C1BC,EAAkB,OACb/B,IAAYH,IAAYA,EAAUmC,QAAUhC,EA8BvD,OACIiC,EAACC,EAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAACC,EAAkB,CACfC,IAAKf,EACLP,SA3EUuB,WACbhC,GAAYS,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAwEQxC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACTsC,OAAsB,aAAdjD,EACRM,UAAWA,gBACEG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYsB,KAAqBf,EAAQqB,SAAA,IAE/CvC,IAASC,IACTuC,EAACQ,EAAa,CAAAT,SAAA,CAvCrBvC,EAKMmC,EADU,iBAAVnC,EACCiD,EAGJC,EAHS,CAAAX,SAAEvC,IAJR,KAWNC,EAKMkC,EADgB,iBAAhBlC,EACCkD,EAGJC,EAHe,CAAAb,SAAEtC,IAJd,UA+BAE,GACCgC,EAACkB,EAAY,CAACC,KAAK,UAASf,SAAEpC,IAElCgC,EAACoB,GACGb,IAAKb,EACL9B,UAAWA,EACXe,kBAAmBA,EACnBC,oBAAqBA,EACrBC,iBAAkBA,EAClBH,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVO,SAAUA,EACVsC,aAlGUC,UAClBpC,IACAA,EAASoC,GACU,QAAnBb,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EA+FYY,aAjFUC,IAClBrC,GACAA,EAAOqC,EACX,EA+EYpC,OA5EIqC,IACZrC,GACAA,EAAOqC,EACX,IA2ES3C,GACGkB,EAAC0B,EAAU,CAACP,KAAK,QAAOf,SAAEtB,KAE5BC,GACEsB,EAACsB,EAAqB,CAAAvB,SAAA,CAClBJ,EAAC4B,EAAY,CACTT,KAAK,SACLxD,UAAU,YACVa,WACMmB,GAAYnB,GAAYsB,IAE9B+B,QAzGpBC,IAEKtD,IACDsD,EAAMC,iBACFvC,EAAYkB,SACZlB,EAAYkB,QAAQsB,iBAE5B,EAkGoD5B,SAE/Bf,EAAOC,eAEZU,EAACiC,EAAgB,CAACC,OAAO,WAAU9B,SAAA,6BAMtB"}

package/file-upload/types.d.ts

@@ -1,3 +1,4 @@
+import { FormLabelProps } from "../form/types";
 export interface FileItemProps {
     id: string;
     /** The name of the file */
@@ -44,6 +45,10 @@ export interface FileUploadProps extends FileInputProps {
     editableFileItems?: boolean | undefined;
     /** The max length of the description of the file (only image files) */
     fileDescriptionMaxLength?: number | undefined;
+    /** When false, save button is enabled even with empty description. Default: true */
+    descriptionRequired?: boolean | undefined;
+    /** Overrides default label and subtext for description field */
+    descriptionLabel?: FormLabelProps | undefined;
     /** Specifies if sorting is enabled for the file items */
     sortable?: boolean | undefined;
     /** The general error message for the component */

package/form/form-label.style.js

@@ -1,29 +1,32 @@
-import o from"styled-components";import{ExclamationCircleFillIcon as t}from"@lifesg/react-icons/exclamation-circle-fill";import{applyHtmlContentStyle as e}from"../shared/html-content/html-content.js";import{Spacing as i,Colour as r,Font as l}from"../theme/index.js";const n=o.div`
+import o from"styled-components";import{ExclamationCircleFillIcon as t}from"@lifesg/react-icons/exclamation-circle-fill";import{applyHtmlContentStyle as e}from"../shared/html-content/html-content.js";import{Spacing as i,Colour as l,Font as r}from"../theme/index.js";const n=o.div`
     margin-bottom: ${i["spacing-8"]};
+    display: flex;
+    flex-direction: column;
+    gap: ${i["spacing-4"]};
 `,m=o.label`
-    color: ${r["text-subtle"]};
+    color: ${l["text-subtle"]};
     display: inline-block;
 
-    ${l["form-label"]}
+    ${r["form-label"]}
     ${e()}
-    font-weight: ${l.Spec["weight-semibold"]};
+    font-weight: ${r.Spec["weight-semibold"]};
 `,s=o(t)`
     height: 1lh;
     width: 1em;
     flex-shrink: 0;
-    color: ${r["icon-error-strong"]};
+    color: ${l["icon-error-strong"]};
 `,c=o.div`
-    ${l["body-sm-semibold"]}
+    ${r["body-sm-semibold"]}
     display: flex;
     gap: ${i["spacing-4"]};
     margin-top: ${i["spacing-8"]};
 `,p=o.p`
-    color: ${r["text-error"]};
+    color: ${l["text-error"]};
     margin-bottom: 0;
     outline: none;
 `,a=o.span`
-    ${l["form-description"]}
-    color: ${r["text-subtler"]};
+    ${r["form-description"]}
+    color: ${l["text-subtler"]};
     display: block;
 `;export{s as ErrorIcon,p as ErrorMessage,c as ErrorMessageContainer,m as Label,n as LabelContainer,a as Subtitle};
 //# sourceMappingURL=form-label.style.js.map

package/form/form-label.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.style.js","sources":["../../src/form/form-label.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const LabelContainer = styled.div`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\nexport const Label = styled.label`\n    color: ${Colour[\"text-subtle\"]};\n    display: inline-block;\n\n    ${Font[\"form-label\"]}\n    ${applyHtmlContentStyle()}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\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\nexport const ErrorMessageContainer = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ErrorMessage = styled.p`\n    color: ${Colour[\"text-error\"]};\n    margin-bottom: 0;\n    outline: none;\n`;\n\nexport const Subtitle = styled.span`\n    ${Font[\"form-description\"]}\n    color: ${Colour[\"text-subtler\"]};\n    display: block;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","Label","label","Colour","Font","applyHtmlContentStyle","Spec","ErrorIcon","ExclamationCircleFillIcon","ErrorMessageContainer","ErrorMessage","p","Subtitle","span"],"mappings":"0QAQO,MAAMA,EAAiBC,EAAOC,GAAG;qBACnBC,EAAQ;EAEhBC,EAAQH,EAAOI,KAAK;aACpBC,EAAO;;;MAGdC,EAAK;MACLC;mBACaD,EAAKE,KAAK;EAGhBC,EAAYT,EAAOU,EAA0B;;;;aAI7CL,EAAO;EAGPM,EAAwBX,EAAOC,GAAG;MACzCK,EAAK;;WAEAJ,EAAQ;kBACDA,EAAQ;EAGbU,EAAeZ,EAAOa,CAAC;aACvBR,EAAO;;;EAKPS,EAAWd,EAAOe,IAAI;MAC7BT,EAAK;aACED,EAAO;;"}
+{"version":3,"file":"form-label.style.js","sources":["../../src/form/form-label.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const LabelContainer = styled.div`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\nexport const Label = styled.label`\n    color: ${Colour[\"text-subtle\"]};\n    display: inline-block;\n\n    ${Font[\"form-label\"]}\n    ${applyHtmlContentStyle()}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\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\nexport const ErrorMessageContainer = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ErrorMessage = styled.p`\n    color: ${Colour[\"text-error\"]};\n    margin-bottom: 0;\n    outline: none;\n`;\n\nexport const Subtitle = styled.span`\n    ${Font[\"form-description\"]}\n    color: ${Colour[\"text-subtler\"]};\n    display: block;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","Label","label","Colour","Font","applyHtmlContentStyle","Spec","ErrorIcon","ExclamationCircleFillIcon","ErrorMessageContainer","ErrorMessage","p","Subtitle","span"],"mappings":"0QAQO,MAAMA,EAAiBC,EAAOC,GAAG;qBACnBC,EAAQ;;;WAGlBA,EAAQ;EAENC,EAAQH,EAAOI,KAAK;aACpBC,EAAO;;;MAGdC,EAAK;MACLC;mBACaD,EAAKE,KAAK;EAGhBC,EAAYT,EAAOU,EAA0B;;;;aAI7CL,EAAO;EAGPM,EAAwBX,EAAOC,GAAG;MACzCK,EAAK;;WAEAJ,EAAQ;kBACDA,EAAQ;EAGbU,EAAeZ,EAAOa,CAAC;aACvBR,EAAO;;;EAKPS,EAAWd,EAAOe,IAAI;MAC7BT,EAAK;aACED,EAAO;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.4.0",
+  "version": "3.5.0-canary.1",
   "description": "A component design system for LifeSG web apps",
   "keywords": [
     "design-system"

package/theme/font-spec/specs/bookingsg-font-spec-set.js

@@ -1,2 +1,2 @@
-const e={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.75rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.02rem","heading-ls-lg":"-0.02rem","heading-ls-md":"0rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Plus Jakarta Sans","heading-font-family":"Plus Jakarta Sans","body-font-family":"Plus Jakarta Sans","body-size-baseline":"1.125rem","body-size-md":"1rem","body-size-sm":"0.875rem","body-size-xs":"0.75rem","body-lh-baseline":"1.75rem","body-lh-md":"1.5rem","body-lh-sm":"1.6rem","body-lh-xs":"1.2rem","body-ls-baseline":"0rem","body-ls-md":"0.009rem","body-ls-sm":"0.008rem","body-ls-xs":"0.008rem","form-label-size":"1rem","form-description-size":"0.875rem","form-label-lh":"1.5rem","form-description-lh":"1.625rem","form-label-ls":"0.009rem","form-description-ls":"0.008rem"};export{e as BookingSgFontSpecSet};
+const e={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.625rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.02rem","heading-ls-lg":"-0.02rem","heading-ls-md":"0rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Plus Jakarta Sans","heading-font-family":"Plus Jakarta Sans","body-font-family":"Plus Jakarta Sans","body-size-baseline":"1.125rem","body-size-md":"1rem","body-size-sm":"0.875rem","body-size-xs":"0.75rem","body-lh-baseline":"1.625rem","body-lh-md":"1.5rem","body-lh-sm":"1.625rem","body-lh-xs":"1.25rem","body-ls-baseline":"0rem","body-ls-md":"0.009rem","body-ls-sm":"0.008rem","body-ls-xs":"0.008rem","form-label-size":"1rem","form-description-size":"0.875rem","form-label-lh":"1.5rem","form-description-lh":"1.625rem","form-label-ls":"0.009rem","form-description-ls":"0.008rem"};export{e as BookingSgFontSpecSet};
 //# sourceMappingURL=bookingsg-font-spec-set.js.map

package/theme/font-spec/specs/bookingsg-font-spec-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"bookingsg-font-spec-set.js","sources":["../../../../src/theme/font-spec/specs/bookingsg-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const BookingSgFontSpecSet: FontSpecSet = {\n    \"heading-size-xxl\": \"3rem\",\n    \"heading-size-xl\": \"2.5rem\",\n    \"heading-size-lg\": \"2rem\",\n    \"heading-size-md\": \"1.625rem\",\n    \"heading-size-sm\": \"1.375rem\",\n    \"heading-size-xs\": \"1.125rem\",\n\n    \"heading-lh-xxl\": \"3.5rem\",\n    \"heading-lh-xl\": \"3rem\",\n    \"heading-lh-lg\": \"2.5rem\",\n    \"heading-lh-md\": \"2.25rem\",\n    \"heading-lh-sm\": \"1.75rem\",\n    \"heading-lh-xs\": \"1.75rem\",\n\n    \"heading-ls-xxl\": \"-0.035rem\",\n    \"heading-ls-xl\": \"-0.02rem\",\n    \"heading-ls-lg\": \"-0.02rem\",\n    \"heading-ls-md\": \"0rem\",\n    \"heading-ls-sm\": \"0rem\",\n    \"heading-ls-xs\": \"0rem\",\n\n    \"weight-light\": \"300\",\n    \"weight-regular\": \"400\",\n    \"weight-semibold\": \"600\",\n    \"weight-bold\": \"700\",\n    \"font-family\": \"Plus Jakarta Sans\",\n    \"heading-font-family\": \"Plus Jakarta Sans\",\n    \"body-font-family\": \"Plus Jakarta Sans\",\n\n    \"body-size-baseline\": \"1.125rem\",\n    \"body-size-md\": \"1rem\",\n    \"body-size-sm\": \"0.875rem\",\n    \"body-size-xs\": \"0.75rem\",\n\n    \"body-lh-baseline\": \"1.75rem\",\n    \"body-lh-md\": \"1.5rem\",\n    \"body-lh-sm\": \"1.6rem\",\n    \"body-lh-xs\": \"1.2rem\",\n\n    \"body-ls-baseline\": \"0rem\",\n    \"body-ls-md\": \"0.009rem\",\n    \"body-ls-sm\": \"0.008rem\",\n    \"body-ls-xs\": \"0.008rem\",\n\n    \"form-label-size\": \"1rem\",\n    \"form-description-size\": \"0.875rem\",\n\n    \"form-label-lh\": \"1.5rem\",\n    \"form-description-lh\": \"1.625rem\",\n\n    \"form-label-ls\": \"0.009rem\",\n    \"form-description-ls\": \"0.008rem\",\n};\n"],"names":["BookingSgFontSpecSet"],"mappings":"AAEO,MAAMA,EAAoC,CAC7C,mBAAoB,OACpB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UAEjB,iBAAkB,YAClB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,oBACf,sBAAuB,oBACvB,mBAAoB,oBAEpB,qBAAsB,WACtB,eAAgB,OAChB,eAAgB,WAChB,eAAgB,UAEhB,mBAAoB,UACpB,aAAc,SACd,aAAc,SACd,aAAc,SAEd,mBAAoB,OACpB,aAAc,WACd,aAAc,WACd,aAAc,WAEd,kBAAmB,OACnB,wBAAyB,WAEzB,gBAAiB,SACjB,sBAAuB,WAEvB,gBAAiB,WACjB,sBAAuB"}
+{"version":3,"file":"bookingsg-font-spec-set.js","sources":["../../../../src/theme/font-spec/specs/bookingsg-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const BookingSgFontSpecSet: FontSpecSet = {\n    \"heading-size-xxl\": \"3rem\",\n    \"heading-size-xl\": \"2.5rem\",\n    \"heading-size-lg\": \"2rem\",\n    \"heading-size-md\": \"1.625rem\",\n    \"heading-size-sm\": \"1.375rem\",\n    \"heading-size-xs\": \"1.125rem\",\n\n    \"heading-lh-xxl\": \"3.5rem\",\n    \"heading-lh-xl\": \"3rem\",\n    \"heading-lh-lg\": \"2.5rem\",\n    \"heading-lh-md\": \"2.25rem\",\n    \"heading-lh-sm\": \"1.75rem\",\n    \"heading-lh-xs\": \"1.625rem\",\n\n    \"heading-ls-xxl\": \"-0.035rem\",\n    \"heading-ls-xl\": \"-0.02rem\",\n    \"heading-ls-lg\": \"-0.02rem\",\n    \"heading-ls-md\": \"0rem\",\n    \"heading-ls-sm\": \"0rem\",\n    \"heading-ls-xs\": \"0rem\",\n\n    \"weight-light\": \"300\",\n    \"weight-regular\": \"400\",\n    \"weight-semibold\": \"600\",\n    \"weight-bold\": \"700\",\n    \"font-family\": \"Plus Jakarta Sans\",\n    \"heading-font-family\": \"Plus Jakarta Sans\",\n    \"body-font-family\": \"Plus Jakarta Sans\",\n\n    \"body-size-baseline\": \"1.125rem\",\n    \"body-size-md\": \"1rem\",\n    \"body-size-sm\": \"0.875rem\",\n    \"body-size-xs\": \"0.75rem\",\n\n    \"body-lh-baseline\": \"1.625rem\",\n    \"body-lh-md\": \"1.5rem\",\n    \"body-lh-sm\": \"1.625rem\",\n    \"body-lh-xs\": \"1.25rem\",\n\n    \"body-ls-baseline\": \"0rem\",\n    \"body-ls-md\": \"0.009rem\",\n    \"body-ls-sm\": \"0.008rem\",\n    \"body-ls-xs\": \"0.008rem\",\n\n    \"form-label-size\": \"1rem\",\n    \"form-description-size\": \"0.875rem\",\n\n    \"form-label-lh\": \"1.5rem\",\n    \"form-description-lh\": \"1.625rem\",\n\n    \"form-label-ls\": \"0.009rem\",\n    \"form-description-ls\": \"0.008rem\",\n};\n"],"names":["BookingSgFontSpecSet"],"mappings":"AAEO,MAAMA,EAAoC,CAC7C,mBAAoB,OACpB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,WAEjB,iBAAkB,YAClB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,oBACf,sBAAuB,oBACvB,mBAAoB,oBAEpB,qBAAsB,WACtB,eAAgB,OAChB,eAAgB,WAChB,eAAgB,UAEhB,mBAAoB,WACpB,aAAc,SACd,aAAc,WACd,aAAc,UAEd,mBAAoB,OACpB,aAAc,WACd,aAAc,WACd,aAAc,WAEd,kBAAmB,OACnB,wBAAyB,WAEzB,gBAAiB,SACjB,sBAAuB,WAEvB,gBAAiB,WACjB,sBAAuB"}

package/theme/font-spec/specs/default-font-spec-set.js

@@ -1,2 +1,2 @@
-const e={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.625rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.02rem","heading-ls-lg":"-0.02rem","heading-ls-md":"0rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Open Sans","heading-font-family":"Open Sans","body-font-family":"Open Sans","body-size-baseline":"1.125rem","body-size-md":"1rem","body-size-sm":"0.875rem","body-size-xs":"0.75rem","body-lh-baseline":"1.625rem","body-lh-md":"1.5rem","body-lh-sm":"1.625rem","body-lh-xs":"1.25rem","body-ls-baseline":"0rem","body-ls-md":"0.009rem","body-ls-sm":"0.008rem","body-ls-xs":"0.008rem","form-label-size":"1rem","form-description-size":"0.875rem","form-label-lh":"1.5rem","form-description-lh":"1.625rem","form-label-ls":"0.009rem","form-description-ls":"0.008rem"};export{e as DefaultFontSpecSet};
+const e={"heading-size-xxl":"3rem","heading-size-xl":"2.5rem","heading-size-lg":"2rem","heading-size-md":"1.625rem","heading-size-sm":"1.375rem","heading-size-xs":"1.125rem","heading-lh-xxl":"3.5rem","heading-lh-xl":"3rem","heading-lh-lg":"2.5rem","heading-lh-md":"2.25rem","heading-lh-sm":"1.75rem","heading-lh-xs":"1.625rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.02rem","heading-ls-lg":"-0.02rem","heading-ls-md":"0rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Open Sans","heading-font-family":"Open Sans","body-font-family":"Open Sans","body-size-baseline":"1.125rem","body-size-md":"1rem","body-size-sm":"0.875rem","body-size-xs":"0.75rem","body-lh-baseline":"1.625rem","body-lh-md":"1.5rem","body-lh-sm":"1.25rem","body-lh-xs":"1.25rem","body-ls-baseline":"0rem","body-ls-md":"0.009rem","body-ls-sm":"0.008rem","body-ls-xs":"0.008rem","form-label-size":"1rem","form-description-size":"0.875rem","form-label-lh":"1.375rem","form-description-lh":"1.25rem","form-label-ls":"0rem","form-description-ls":"0rem"};export{e as DefaultFontSpecSet};
 //# sourceMappingURL=default-font-spec-set.js.map

package/theme/font-spec/specs/default-font-spec-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-font-spec-set.js","sources":["../../../../src/theme/font-spec/specs/default-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const DefaultFontSpecSet: FontSpecSet = {\n    \"heading-size-xxl\": \"3rem\",\n    \"heading-size-xl\": \"2.5rem\",\n    \"heading-size-lg\": \"2rem\",\n    \"heading-size-md\": \"1.625rem\",\n    \"heading-size-sm\": \"1.375rem\",\n    \"heading-size-xs\": \"1.125rem\",\n\n    \"heading-lh-xxl\": \"3.5rem\",\n    \"heading-lh-xl\": \"3rem\",\n    \"heading-lh-lg\": \"2.5rem\",\n    \"heading-lh-md\": \"2.25rem\",\n    \"heading-lh-sm\": \"1.75rem\",\n    \"heading-lh-xs\": \"1.625rem\",\n\n    \"heading-ls-xxl\": \"-0.035rem\",\n    \"heading-ls-xl\": \"-0.02rem\",\n    \"heading-ls-lg\": \"-0.02rem\",\n    \"heading-ls-md\": \"0rem\",\n    \"heading-ls-sm\": \"0rem\",\n    \"heading-ls-xs\": \"0rem\",\n\n    \"weight-light\": \"300\",\n    \"weight-regular\": \"400\",\n    \"weight-semibold\": \"600\",\n    \"weight-bold\": \"700\",\n    \"font-family\": \"Open Sans\",\n    \"heading-font-family\": \"Open Sans\",\n    \"body-font-family\": \"Open Sans\",\n\n    \"body-size-baseline\": \"1.125rem\",\n    \"body-size-md\": \"1rem\",\n    \"body-size-sm\": \"0.875rem\",\n    \"body-size-xs\": \"0.75rem\",\n\n    \"body-lh-baseline\": \"1.625rem\",\n    \"body-lh-md\": \"1.5rem\",\n    \"body-lh-sm\": \"1.625rem\",\n    \"body-lh-xs\": \"1.25rem\",\n\n    \"body-ls-baseline\": \"0rem\",\n    \"body-ls-md\": \"0.009rem\",\n    \"body-ls-sm\": \"0.008rem\",\n    \"body-ls-xs\": \"0.008rem\",\n\n    \"form-label-size\": \"1rem\",\n    \"form-description-size\": \"0.875rem\",\n\n    \"form-label-lh\": \"1.5rem\",\n    \"form-description-lh\": \"1.625rem\",\n\n    \"form-label-ls\": \"0.009rem\",\n    \"form-description-ls\": \"0.008rem\",\n};\n"],"names":["DefaultFontSpecSet"],"mappings":"AAEO,MAAMA,EAAkC,CAC3C,mBAAoB,OACpB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,WAEjB,iBAAkB,YAClB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,YACf,sBAAuB,YACvB,mBAAoB,YAEpB,qBAAsB,WACtB,eAAgB,OAChB,eAAgB,WAChB,eAAgB,UAEhB,mBAAoB,WACpB,aAAc,SACd,aAAc,WACd,aAAc,UAEd,mBAAoB,OACpB,aAAc,WACd,aAAc,WACd,aAAc,WAEd,kBAAmB,OACnB,wBAAyB,WAEzB,gBAAiB,SACjB,sBAAuB,WAEvB,gBAAiB,WACjB,sBAAuB"}
+{"version":3,"file":"default-font-spec-set.js","sources":["../../../../src/theme/font-spec/specs/default-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const DefaultFontSpecSet: FontSpecSet = {\n    \"heading-size-xxl\": \"3rem\",\n    \"heading-size-xl\": \"2.5rem\",\n    \"heading-size-lg\": \"2rem\",\n    \"heading-size-md\": \"1.625rem\",\n    \"heading-size-sm\": \"1.375rem\",\n    \"heading-size-xs\": \"1.125rem\",\n\n    \"heading-lh-xxl\": \"3.5rem\",\n    \"heading-lh-xl\": \"3rem\",\n    \"heading-lh-lg\": \"2.5rem\",\n    \"heading-lh-md\": \"2.25rem\",\n    \"heading-lh-sm\": \"1.75rem\",\n    \"heading-lh-xs\": \"1.625rem\",\n\n    \"heading-ls-xxl\": \"-0.035rem\",\n    \"heading-ls-xl\": \"-0.02rem\",\n    \"heading-ls-lg\": \"-0.02rem\",\n    \"heading-ls-md\": \"0rem\",\n    \"heading-ls-sm\": \"0rem\",\n    \"heading-ls-xs\": \"0rem\",\n\n    \"weight-light\": \"300\",\n    \"weight-regular\": \"400\",\n    \"weight-semibold\": \"600\",\n    \"weight-bold\": \"700\",\n    \"font-family\": \"Open Sans\",\n    \"heading-font-family\": \"Open Sans\",\n    \"body-font-family\": \"Open Sans\",\n\n    \"body-size-baseline\": \"1.125rem\",\n    \"body-size-md\": \"1rem\",\n    \"body-size-sm\": \"0.875rem\",\n    \"body-size-xs\": \"0.75rem\",\n\n    \"body-lh-baseline\": \"1.625rem\",\n    \"body-lh-md\": \"1.5rem\",\n    \"body-lh-sm\": \"1.25rem\",\n    \"body-lh-xs\": \"1.25rem\",\n\n    \"body-ls-baseline\": \"0rem\",\n    \"body-ls-md\": \"0.009rem\",\n    \"body-ls-sm\": \"0.008rem\",\n    \"body-ls-xs\": \"0.008rem\",\n\n    \"form-label-size\": \"1rem\",\n    \"form-description-size\": \"0.875rem\",\n\n    \"form-label-lh\": \"1.375rem\",\n    \"form-description-lh\": \"1.25rem\",\n\n    \"form-label-ls\": \"0rem\",\n    \"form-description-ls\": \"0rem\",\n};\n"],"names":["DefaultFontSpecSet"],"mappings":"AAEO,MAAMA,EAAkC,CAC3C,mBAAoB,OACpB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,WAEjB,iBAAkB,YAClB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,YACf,sBAAuB,YACvB,mBAAoB,YAEpB,qBAAsB,WACtB,eAAgB,OAChB,eAAgB,WAChB,eAAgB,UAEhB,mBAAoB,WACpB,aAAc,SACd,aAAc,UACd,aAAc,UAEd,mBAAoB,OACpB,aAAc,WACd,aAAc,WACd,aAAc,WAEd,kBAAmB,OACnB,wBAAyB,WAEzB,gBAAiB,WACjB,sBAAuB,UAEvB,gBAAiB,OACjB,sBAAuB"}

package/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js

@@ -1,2 +1,2 @@
-const e={"heading-size-xxl":"3.75rem","heading-size-xl":"3rem","heading-size-lg":"2.5rem","heading-size-md":"2rem","heading-size-sm":"1.625rem","heading-size-xs":"1.375rem","heading-lh-xxl":"4.5rem","heading-lh-xl":"3.5rem","heading-lh-lg":"3rem","heading-lh-md":"2.5rem","heading-lh-sm":"2.25rem","heading-lh-xs":"1.75rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.035em","heading-ls-lg":"-0.02rem","heading-ls-md":"-0.02rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Libre Franklin","heading-font-family":"Libre Franklin","body-font-family":"Libre Franklin","body-size-baseline":"1.375rem","body-size-md":"1.25rem","body-size-sm":"1.125rem","body-size-xs":"1rem","body-lh-baseline":"1.75rem","body-lh-md":"1.625rem","body-lh-sm":"1.625rem","body-lh-xs":"1.5rem","body-ls-baseline":"0rem","body-ls-md":"0rem","body-ls-sm":"0rem","body-ls-xs":"0.009rem","form-label-size":"1.25rem","form-description-size":"1.125rem","form-label-lh":"1.625rem","form-description-lh":"1.625rem","form-label-ls":"0rem","form-description-ls":"0rem"};export{e as SGWDigitalLobbyFontSpecSet};
+const e={"heading-size-xxl":"3.75rem","heading-size-xl":"3rem","heading-size-lg":"2.5rem","heading-size-md":"2rem","heading-size-sm":"1.625rem","heading-size-xs":"1.375rem","heading-lh-xxl":"4.5rem","heading-lh-xl":"3.5rem","heading-lh-lg":"3rem","heading-lh-md":"2.5rem","heading-lh-sm":"2.25rem","heading-lh-xs":"1.75rem","heading-ls-xxl":"-0.035rem","heading-ls-xl":"-0.035rem","heading-ls-lg":"-0.02rem","heading-ls-md":"-0.02rem","heading-ls-sm":"0rem","heading-ls-xs":"0rem","weight-light":"300","weight-regular":"400","weight-semibold":"600","weight-bold":"700","font-family":"Libre Franklin","heading-font-family":"Libre Franklin","body-font-family":"Libre Franklin","body-size-baseline":"1.375rem","body-size-md":"1.25rem","body-size-sm":"1.125rem","body-size-xs":"1rem","body-lh-baseline":"1.75rem","body-lh-md":"1.625rem","body-lh-sm":"1.625rem","body-lh-xs":"1.5rem","body-ls-baseline":"0rem","body-ls-md":"0rem","body-ls-sm":"0rem","body-ls-xs":"0.009rem","form-label-size":"1.25rem","form-description-size":"1.125rem","form-label-lh":"1.625rem","form-description-lh":"1.625rem","form-label-ls":"0rem","form-description-ls":"0rem"};export{e as SGWDigitalLobbyFontSpecSet};
 //# sourceMappingURL=sgw-digital-lobby-font-spec-set.js.map

package/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgw-digital-lobby-font-spec-set.js","sources":["../../../../src/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const SGWDigitalLobbyFontSpecSet: FontSpecSet = {\n    \"heading-size-xxl\": \"3.75rem\",\n    \"heading-size-xl\": \"3rem\",\n    \"heading-size-lg\": \"2.5rem\",\n    \"heading-size-md\": \"2rem\",\n    \"heading-size-sm\": \"1.625rem\",\n    \"heading-size-xs\": \"1.375rem\",\n\n    \"heading-lh-xxl\": \"4.5rem\",\n    \"heading-lh-xl\": \"3.5rem\",\n    \"heading-lh-lg\": \"3rem\",\n    \"heading-lh-md\": \"2.5rem\",\n    \"heading-lh-sm\": \"2.25rem\",\n    \"heading-lh-xs\": \"1.75rem\",\n\n    \"heading-ls-xxl\": \"-0.035rem\",\n    \"heading-ls-xl\": \"-0.035em\",\n    \"heading-ls-lg\": \"-0.02rem\",\n    \"heading-ls-md\": \"-0.02rem\",\n    \"heading-ls-sm\": \"0rem\",\n    \"heading-ls-xs\": \"0rem\",\n\n    \"weight-light\": \"300\",\n    \"weight-regular\": \"400\",\n    \"weight-semibold\": \"600\",\n    \"weight-bold\": \"700\",\n    \"font-family\": \"Libre Franklin\",\n    \"heading-font-family\": \"Libre Franklin\",\n    \"body-font-family\": \"Libre Franklin\",\n\n    \"body-size-baseline\": \"1.375rem\",\n    \"body-size-md\": \"1.25rem\",\n    \"body-size-sm\": \"1.125rem\",\n    \"body-size-xs\": \"1rem\",\n\n    \"body-lh-baseline\": \"1.75rem\",\n    \"body-lh-md\": \"1.625rem\",\n    \"body-lh-sm\": \"1.625rem\",\n    \"body-lh-xs\": \"1.5rem\",\n\n    \"body-ls-baseline\": \"0rem\",\n    \"body-ls-md\": \"0rem\",\n    \"body-ls-sm\": \"0rem\",\n    \"body-ls-xs\": \"0.009rem\",\n\n    \"form-label-size\": \"1.25rem\",\n    \"form-description-size\": \"1.125rem\",\n\n    \"form-label-lh\": \"1.625rem\",\n    \"form-description-lh\": \"1.625rem\",\n\n    \"form-label-ls\": \"0rem\",\n    \"form-description-ls\": \"0rem\",\n};\n"],"names":["SGWDigitalLobbyFontSpecSet"],"mappings":"AAEO,MAAMA,EAA0C,CACnD,mBAAoB,UACpB,kBAAmB,OACnB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,SACjB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UAEjB,iBAAkB,YAClB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,iBACf,sBAAuB,iBACvB,mBAAoB,iBAEpB,qBAAsB,WACtB,eAAgB,UAChB,eAAgB,WAChB,eAAgB,OAEhB,mBAAoB,UACpB,aAAc,WACd,aAAc,WACd,aAAc,SAEd,mBAAoB,OACpB,aAAc,OACd,aAAc,OACd,aAAc,WAEd,kBAAmB,UACnB,wBAAyB,WAEzB,gBAAiB,WACjB,sBAAuB,WAEvB,gBAAiB,OACjB,sBAAuB"}
+{"version":3,"file":"sgw-digital-lobby-font-spec-set.js","sources":["../../../../src/theme/font-spec/specs/sgw-digital-lobby-font-spec-set.ts"],"sourcesContent":["import { FontSpecSet } from \"../types\";\n\nexport const SGWDigitalLobbyFontSpecSet: FontSpecSet = {\n    \"heading-size-xxl\": \"3.75rem\",\n    \"heading-size-xl\": \"3rem\",\n    \"heading-size-lg\": \"2.5rem\",\n    \"heading-size-md\": \"2rem\",\n    \"heading-size-sm\": \"1.625rem\",\n    \"heading-size-xs\": \"1.375rem\",\n\n    \"heading-lh-xxl\": \"4.5rem\",\n    \"heading-lh-xl\": \"3.5rem\",\n    \"heading-lh-lg\": \"3rem\",\n    \"heading-lh-md\": \"2.5rem\",\n    \"heading-lh-sm\": \"2.25rem\",\n    \"heading-lh-xs\": \"1.75rem\",\n\n    \"heading-ls-xxl\": \"-0.035rem\",\n    \"heading-ls-xl\": \"-0.035rem\",\n    \"heading-ls-lg\": \"-0.02rem\",\n    \"heading-ls-md\": \"-0.02rem\",\n    \"heading-ls-sm\": \"0rem\",\n    \"heading-ls-xs\": \"0rem\",\n\n    \"weight-light\": \"300\",\n    \"weight-regular\": \"400\",\n    \"weight-semibold\": \"600\",\n    \"weight-bold\": \"700\",\n    \"font-family\": \"Libre Franklin\",\n    \"heading-font-family\": \"Libre Franklin\",\n    \"body-font-family\": \"Libre Franklin\",\n\n    \"body-size-baseline\": \"1.375rem\",\n    \"body-size-md\": \"1.25rem\",\n    \"body-size-sm\": \"1.125rem\",\n    \"body-size-xs\": \"1rem\",\n\n    \"body-lh-baseline\": \"1.75rem\",\n    \"body-lh-md\": \"1.625rem\",\n    \"body-lh-sm\": \"1.625rem\",\n    \"body-lh-xs\": \"1.5rem\",\n\n    \"body-ls-baseline\": \"0rem\",\n    \"body-ls-md\": \"0rem\",\n    \"body-ls-sm\": \"0rem\",\n    \"body-ls-xs\": \"0.009rem\",\n\n    \"form-label-size\": \"1.25rem\",\n    \"form-description-size\": \"1.125rem\",\n\n    \"form-label-lh\": \"1.625rem\",\n    \"form-description-lh\": \"1.625rem\",\n\n    \"form-label-ls\": \"0rem\",\n    \"form-description-ls\": \"0rem\",\n};\n"],"names":["SGWDigitalLobbyFontSpecSet"],"mappings":"AAEO,MAAMA,EAA0C,CACnD,mBAAoB,UACpB,kBAAmB,OACnB,kBAAmB,SACnB,kBAAmB,OACnB,kBAAmB,WACnB,kBAAmB,WAEnB,iBAAkB,SAClB,gBAAiB,SACjB,gBAAiB,OACjB,gBAAiB,SACjB,gBAAiB,UACjB,gBAAiB,UAEjB,iBAAkB,YAClB,gBAAiB,YACjB,gBAAiB,WACjB,gBAAiB,WACjB,gBAAiB,OACjB,gBAAiB,OAEjB,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,cAAe,MACf,cAAe,iBACf,sBAAuB,iBACvB,mBAAoB,iBAEpB,qBAAsB,WACtB,eAAgB,UAChB,eAAgB,WAChB,eAAgB,OAEhB,mBAAoB,UACpB,aAAc,WACd,aAAc,WACd,aAAc,SAEd,mBAAoB,OACpB,aAAc,OACd,aAAc,OACd,aAAc,WAEd,kBAAmB,UACnB,wBAAyB,WAEzB,gBAAiB,WACjB,sBAAuB,WAEvB,gBAAiB,OACjB,sBAAuB"}

package/typography/typography.styles.js

@@ -1,6 +1,6 @@
 import{ExternalIcon as e}from"@lifesg/react-icons/external";import t,{css as r}from"styled-components";import{Colour as i}from"../theme/index.js";import{createTypographyStyles as o,getTextStyle as l}from"./helper.js";const n=t.div`
     ${e=>o(e.$textStyle,e.$weight,e.$inline,e.$paragraph,e.$maxLines)}
-`,m=t.a`
+`,a=t.a`
     ${e=>{var t;return r`
         ${l(e.$textStyle,e.$weight||"regular")}
         color: ${i.hyperlink};
@@ -12,10 +12,10 @@ import{ExternalIcon as e}from"@lifesg/react-icons/external";import t,{css as r}f
             color: ${i["text-hover"]};
         }
     `}}
-`,a=t(e)`
+`,m=t(e)`
     height: 1lh;
     width: 1em;
     margin-left: 0.4em;
-    vertical-align: middle;
-`;export{m as HyperlinkBase,a as StyledExternalIcon,n as TypographyBase};
+    vertical-align: top;
+`;export{a as HyperlinkBase,m as StyledExternalIcon,n as TypographyBase};
 //# sourceMappingURL=typography.styles.js.map

package/typography/typography.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n    $textStyle: TypographySizeType;\n    $weight?: TypographyWeight | undefined;\n    $inline?: boolean | undefined;\n    $paragraph?: boolean | undefined;\n    $maxLines?: number | undefined;\n    $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n    ${(props) =>\n        createTypographyStyles(\n            props.$textStyle,\n            props.$weight,\n            props.$inline,\n            props.$paragraph,\n            props.$maxLines\n        )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n    ${(props) => css`\n        ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n        color: ${Colour.hyperlink};\n        text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n        &:hover,\n        &:active,\n        &:focus {\n            color: ${Colour[\"text-hover\"]};\n        }\n    `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n    height: 1lh;\n    width: 1em;\n    margin-left: 0.4em;\n    vertical-align: middle;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"yNAuBO,MAAMA,EAAiBC,EAAOC,GAAgB;MAC9CC,GACCC,EACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAOU,CAAc;MAC3CR,UAAU,OAAAS,CAAG;UACVC,EAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAOC;2BACwB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAO;;KAEvB;EAGQI,EAAqBjB,EAAOkB,EAAa;;;;;"}
+{"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n    $textStyle: TypographySizeType;\n    $weight?: TypographyWeight | undefined;\n    $inline?: boolean | undefined;\n    $paragraph?: boolean | undefined;\n    $maxLines?: number | undefined;\n    $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n    ${(props) =>\n        createTypographyStyles(\n            props.$textStyle,\n            props.$weight,\n            props.$inline,\n            props.$paragraph,\n            props.$maxLines\n        )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n    ${(props) => css`\n        ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n        color: ${Colour.hyperlink};\n        text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n        &:hover,\n        &:active,\n        &:focus {\n            color: ${Colour[\"text-hover\"]};\n        }\n    `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n    height: 1lh;\n    width: 1em;\n    margin-left: 0.4em;\n    vertical-align: top;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"yNAuBO,MAAMA,EAAiBC,EAAOC,GAAgB;MAC9CC,GACCC,EACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAOU,CAAc;MAC3CR,UAAU,OAAAS,CAAG;UACVC,EAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAOC;2BACwB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAO;;KAEvB;EAGQI,EAAqBjB,EAAOkB,EAAa;;;;;"}