npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1629) hide show

package/file-upload/file-list-item/file-list-item-thumbnail.styles_1y4si19.css ADDED Viewed

@@ -0,0 +1,4 @@
+@layer fds{.c1hu6y7h{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.t18h6q7y{width:96px;height:96px;aspect-ratio:1;border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);object-fit:cover;}:where(body.fds-breakpoint-md-max) .t18h6q7y{width:64px;height:64px;}
+.t1w2z01d{border:none;}
+.r5e5ep6{width:100%;height:1.625rem;margin-top:var(--fds-spacing-8);border:none;background:transparent;cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);}.r5e5ep6:hover{color:var(--fds-colour-text-hover);}}

package/file-upload/file-list-item/file-list-item.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
+import type { FormLabelProps } from "../../form/types";
 import type { FileListItemProps } from "./types";
 interface Props extends FileListItemProps {
     readOnly?: boolean | undefined;
+    descriptionLabel?: FormLabelProps | undefined;
 }
-export declare const FileListItem: import("react").MemoExoticComponent<({ fileItem, editable, sortable, wrapperWidth, disabled, readOnly, onDelete, onEditClick, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export declare const FileListItem: import("react").MemoExoticComponent<({ fileItem, editable, sortable, wrapperWidth, disabled, readOnly, descriptionLabel, onDelete, onEditClick, }: Props) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/file-upload/file-list-item/file-list-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{useSortable as a}from"../../external/@dnd-kit/sortable/dist/sortable.esm.js";import{CSS as r}from"../../external/@dnd-kit/utilities/dist/utilities.esm.js";import{BinIcon as s}from"@lifesg/react-icons/bin";import{DragHandleIcon as l}from"@lifesg/react-icons/drag-handle";import{ExclamationCircleFillIcon as d}from"@lifesg/react-icons/exclamation-circle-fill";import{PencilIcon as n}from"@lifesg/react-icons/pencil";import{memo as o,useState as m,useContext as c,useRef as h,useCallback as p,useEffect as b}from"react";import{Button as f}from"../../button/button.js";import{ProgressBar as u}from"../../shared/progress-bar/progress-bar.js";import{Typography as y}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import{StringHelper as g}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{FileUploadContext as N}from"../context.js";import{FileUploadHelper as v}from"../helper.js";import{item as j,dragHandleIcon as x,box as D,contentSection as $,iconButton as M,actionContainer as T,nameSection as B,desktopErrorMessage as k,errorIcon as w,fileSizeSection as z,fileSizeText as C,mobileErrorMessage as I,extendedNameSection as O,itemDescriptionText as S}from"./file-list-item.styles.js";import{FileListItemThumbnail as E}from"./file-list-item-thumbnail.js";const P=o((({fileItem:o,editable:P,sortable:F,wrapperWidth:K,disabled:R,readOnly:U,onDelete:_,onEditClick:L})=>{const{id:W,name:Y,size:q,description:A,progress:G=1,errorMessage:H,thumbnailImageDataUrl:J,truncateText:Q=!0}=o,[V,X]=m(),{activeId:Z}=c(N),{attributes:ee,listeners:ie,setNodeRef:te,transform:ae,transition:re}=a({id:W}),se=h(null),le={transform:r.Translate.toString(ae),transition:re},de=Object.assign(Object.assign({style:le},ee),ie),ne=G<1,oe=v.formatFileSizeDisplay(q),me=Z?Z===W?"self":"others":"none",ce=p((e=>{if(!Q)return e;const i=se&&se.current?se.current.getBoundingClientRect().width:0;return g.truncateOneLine(e,i,i/2,i/2/8,16)}),[Q]);b((()=>{X(ce(Y))}),[K,ce,Y]);const he=()=>{_()},pe=()=>{L&&L()},be=e=>{F&&e.stopPropagation()},fe=()=>R||!!Z,ue=()=>!!F&&!U,ye=()=>e(t,{children:[i(y.BodyMD,{weight:A?"semibold":"regular",children:V}),A&&i(y.BodyMD,{className:S,children:A})]});return e("li",Object.assign({id:W,ref:te,className:j,"data-item-state":fe()&&"none"===me?"disabled":ue()&&"self"===me?"sortable-active":ue()?"sortable":void 0,"data-testid":`${W}-item`},ue()?de:{},{children:[ue()&&i(l,{"data-testid":`${W}-drag-handle`,className:x,"data-drag-handle-state":"self"===me?"active":fe()?"disabled":void 0}),e("div",{className:D,"data-box-state":"self"===me?"focused":fe()?"disabled":H?"error":void 0,"data-stack-mobile":!H&&(ne||P),children:[(()=>{let a;const r=!!J||o.type===v.PDF_MIME_TYPE;return a=H?e(t,{children:[e("div",{ref:se,className:B,children:[ye(),H&&e(y.BodySM,{className:k,weight:"semibold",children:[i(d,{className:w,"aria-hidden":!0}),H]})]}),i("div",{className:z,"data-mobile-visibility":ne?"hidden":"expand",children:i(y.BodyMD,{className:C,children:oe})}),H&&e(y.BodySM,{className:I,weight:"semibold",children:[i(d,{className:w,"aria-hidden":!0}),H]})]}):r?(a=>e(t,{children:[i(E,{thumbnailImageDataUrl:a,fileType:o.type,"data-testid":`${W}-thumbnail`}),e("div",{className:O,children:[i("div",{ref:se,className:B,children:ye()}),i("div",{className:z,"data-mobile-visibility":ne?"hidden":"expand",children:i(y.BodyMD,{className:C,children:oe})})]})]}))(J||""):e(t,{children:[i("div",{ref:se,className:B,children:ye()}),i("div",{className:z,"data-mobile-visibility":ne?"hidden":"expand",children:i(y.BodyMD,{className:C,children:oe})})]}),i("div",{className:$,"data-has-thumbnail":r,children:a})})(),!U&&(()=>{let a;return a=H?i(f,{"data-testid":`${W}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${Y}, error: ${H}`,onClick:he,className:M,icon:i(s,{"aria-hidden":!0})}):ne?i(u,{progress:G,"data-testid":`${W}-progress-bar`}):e(t,{children:[P&&i(f,{"data-testid":`${W}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${Y}`,disabled:fe(),onClick:pe,onKeyDown:be,icon:i(n,{"aria-hidden":!0}),className:M},"edit"),i(f,{"data-testid":`${W}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${Y}`,disabled:fe(),onClick:he,onKeyDown:be,icon:i(s,{"aria-hidden":!0}),className:M},"delete")]}),i("div",{className:T,"data-mobile-layout":!H&&ne?"loading":!H&&P?"editable":void 0,children:a})})()]})]}))}));export{P as FileListItem};
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{useSortable as a}from"../../external/@dnd-kit/sortable/dist/sortable.esm.js";import{CSS as l}from"../../external/@dnd-kit/utilities/dist/utilities.esm.js";import{BinIcon as r}from"@lifesg/react-icons/bin";import{DragHandleIcon as s}from"@lifesg/react-icons/drag-handle";import{ExclamationCircleFillIcon as d}from"@lifesg/react-icons/exclamation-circle-fill";import{PencilIcon as n}from"@lifesg/react-icons/pencil";import{memo as o,useState as c,useContext as m,useRef as h,useCallback as p,useEffect as b}from"react";import{Button as u}from"../../button/button.js";import{ProgressBar as y}from"../../shared/progress-bar/progress-bar.js";import{Typography as f}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import{StringHelper as g}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{FileUploadContext as N}from"../context.js";import{FileUploadHelper as v}from"../helper.js";import{item as j,dragHandleIcon as D,box as M,contentSection as T,iconButton as $,actionContainer as B,nameSection as x,desktopErrorMessage as w,errorIcon as k,fileSizeSection as z,fileSizeText as C,mobileErrorMessage as P,descriptionFileSizeText as I,itemDescriptionLabel as E,itemDescriptionText as O,extendedNameSection as K,inlineActionContainer as S}from"./file-list-item.styles.js";import{FileListItemThumbnail as _}from"./file-list-item-thumbnail.js";const F=o((({fileItem:o,editable:F,sortable:L,wrapperWidth:R,disabled:U,readOnly:Y,descriptionLabel:W,onDelete:q,onEditClick:A})=>{const{id:G,name:H,size:J,description:Q,progress:V=1,errorMessage:X,thumbnailImageDataUrl:Z,truncateText:ee=!0}=o,[te,ie]=c(),{activeId:ae}=m(N),{attributes:le,listeners:re,setNodeRef:se,transform:de,transition:ne}=a({id:G}),oe=h(null),ce={transform:l.Translate.toString(de),transition:ne},me=Object.assign(Object.assign({style:ce},le),re),he=V<1,pe=v.formatFileSizeDisplay(J),be=!!Q&&!!F,ue=ae?ae===G?"self":"others":"none",ye=p((e=>{if(!ee)return e;const t=oe&&oe.current?oe.current.getBoundingClientRect().width:0;return g.truncateOneLine(e,t,t/2,t/2/8,16)}),[ee]);b((()=>{ie(ye(H))}),[R,ye,H]);const fe=()=>{q()},ge=()=>{A&&A()},Ne=e=>{L&&e.stopPropagation()},ve=()=>U||!!ae,je=()=>!!L&&!Y,De=()=>{var a;return e(i,{children:[t(f.BodyMD,{weight:Q?"semibold":"regular",children:te}),Q&&e(i,{children:[t(f.BodyMD,{className:E,children:null!==(a=null==W?void 0:W.children)&&void 0!==a?a:"Photo description"}),t(f.BodyMD,{className:O,children:Q})]})]})};return e("li",Object.assign({id:G,ref:se,className:j,"data-item-state":ve()&&"none"===ue?"disabled":je()&&"self"===ue?"sortable-active":je()?"sortable":void 0,"data-testid":`${G}-item`},je()?me:{},{children:[je()&&t(s,{"data-testid":`${G}-drag-handle`,className:D,"data-drag-handle-state":"self"===ue?"active":ve()?"disabled":void 0}),e("div",{className:M,"data-box-state":"self"===ue?"focused":ve()?"disabled":X?"error":void 0,"data-stack-mobile":!X&&(he||F),children:[(()=>{const a=!!Z||o.type===v.PDF_MIME_TYPE,l=X?e(i,{children:[e("div",{ref:oe,className:x,children:[De(),X&&e(f.BodySM,{className:w,weight:"semibold",children:[t(d,{className:k,"aria-hidden":!0}),X]})]}),t("div",{className:z,"data-mobile-visibility":he?"hidden":"expand",children:t(f.BodyMD,{className:C,children:pe})}),X&&e(f.BodySM,{className:P,weight:"semibold",children:[t(d,{className:k,"aria-hidden":!0}),X]})]}):(a=>{const l=a||o.type===v.PDF_MIME_TYPE?t(_,{thumbnailImageDataUrl:a||"",fileType:o.type,"data-testid":`${G}-thumbnail`}):null;return e(i,be?{children:[l,e("div",{ref:oe,className:K,children:[t(f.BodyMD,{weight:"semibold",children:te}),t(f.BodyMD,{className:E,children:null!==(s=null==W?void 0:W.children)&&void 0!==s?s:"Photo description"}),t(f.BodyMD,{className:O,children:Q}),t(f.BodyMD,{className:I,children:pe}),!Y&&be&&e("div",{className:S,children:[t(u,{"data-testid":`${G}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${H}`,disabled:ve(),onClick:ge,onKeyDown:Ne,icon:t(n,{"aria-hidden":!0}),className:$},"edit"),t(u,{"data-testid":`${G}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${H}`,disabled:ve(),onClick:fe,onKeyDown:Ne,icon:t(r,{"aria-hidden":!0}),className:$},"delete")]})]})]}:{children:[l,e("div",{ref:oe,className:x,children:[De(),!he&&t(f.BodyMD,{className:I,children:pe})]})]});var s})(Z);return t("div",{className:T,"data-has-thumbnail":a,children:l})})(),!Y&&!be&&(()=>{let a;return a=X?t(u,{"data-testid":`${G}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${H}, error: ${X}`,onClick:fe,className:$,icon:t(r,{"aria-hidden":!0})}):he?t(y,{progress:V,"data-testid":`${G}-progress-bar`}):e(i,{children:[F&&t(u,{"data-testid":`${G}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${H}`,disabled:ve(),onClick:ge,onKeyDown:Ne,icon:t(n,{"aria-hidden":!0}),className:$},"edit"),t(u,{"data-testid":`${G}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${H}`,disabled:ve(),onClick:fe,onKeyDown:Ne,icon:t(r,{"aria-hidden":!0}),className:$},"delete")]}),t("div",{className:B,"data-mobile-layout":!X&&he?"loading":!X&&F?"editable":void 0,children:a})})()]})]}))}));export{F as FileListItem};
 //# sourceMappingURL=file-list-item.js.map

package/file-upload/file-list-item/file-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-list-item.js","sources":["../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n memo,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Button } from \"../../button\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { Typography } from \"../../typography\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { ItemFocusType } from \"./file-list-item.styles\";\nimport * as styles from \"./file-list-item.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport type { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n readOnly?: boolean \| undefined;\n}\n\nconst Component = ({\n fileItem,\n editable,\n sortable,\n wrapperWidth,\n disabled,\n readOnly,\n onDelete,\n onEditClick,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n size,\n description,\n progress = 1,\n errorMessage,\n thumbnailImageDataUrl,\n truncateText = true,\n } = fileItem;\n const [formattedName, setFormattedName] = useState<string>();\n const { activeId } = useContext(FileUploadContext);\n\n // Sortable mechanism\n const { attributes, listeners, setNodeRef, transform, transition } =\n useSortable({ id });\n const detailSectionRef = useRef<HTMLDivElement>(null);\n const style = {\n transform: CSS.Translate.toString(transform),\n transition,\n };\n\n const sortableProps = {\n style,\n ...attributes,\n ...listeners,\n };\n\n // Local variables\n const isLoading = progress < 1;\n const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n const focusType: ItemFocusType = activeId\n ? activeId === id\n ? \"self\"\n : \"others\"\n : \"none\";\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = useCallback(\n (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n detailSectionRef && detailSectionRef.current\n ? detailSectionRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateOneLine(\n value,\n widthOfElement,\n widthOfElement / 2,\n widthOfElement / 2 / 8, // Arbitrary\n 16 // Font size\n );\n },\n [truncateText]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setFormattedName(getTruncatedText(name));\n }, [wrapperWidth, getTruncatedText, name]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDelete = () => {\n onDelete();\n };\n\n const handleEdit = () => {\n if (onEditClick) {\n onEditClick();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n /*\n Circumvent issue of keydown action activating the sort mechanism\n * rather than the actual action\n */\n if (sortable) {\n event.stopPropagation();\n }\n };\n\n const shouldDisable = () => disabled \|\| !!activeId;\n\n const shouldEnableSort = () => !!sortable && !readOnly;\n\n const getItemState = () => {\n if (shouldDisable() && focusType === \"none\") {\n return \"disabled\";\n }\n\n if (shouldEnableSort() && focusType === \"self\") {\n return \"sortable-active\";\n }\n\n if (shouldEnableSort()) {\n return \"sortable\";\n }\n\n return undefined;\n };\n\n const getDragHandleState = () => {\n if (focusType === \"self\") {\n return \"active\";\n }\n\n if (shouldDisable()) {\n return \"disabled\";\n }\n\n return undefined;\n };\n\n const getBoxState = () => {\n if (focusType === \"self\") {\n return \"focused\";\n }\n\n if (shouldDisable()) {\n return \"disabled\";\n }\n\n if (errorMessage) {\n return \"error\";\n }\n\n return undefined;\n };\n\n const getActionContainerLayout = () => {\n if (!errorMessage && isLoading) {\n return \"loading\";\n }\n\n if (!errorMessage && editable) {\n return \"editable\";\n }\n\n return undefined;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderNameDescription = () => (\n <>\n <Typography.BodyMD weight={description ? \"semibold\" : \"regular\"}>\n {formattedName}\n </Typography.BodyMD>\n {description && (\n <Typography.BodyMD className={styles.itemDescriptionText}>\n {description}\n </Typography.BodyMD>\n )}\n </>\n );\n\n const renderErrorState = () => (\n <>\n <div ref={detailSectionRef} className={styles.nameSection}>\n {renderNameDescription()}\n {errorMessage && (\n <Typography.BodySM\n className={styles.desktopErrorMessage}\n weight=\"semibold\"\n >\n <ExclamationCircleFillIcon\n className={styles.errorIcon}\n aria-hidden\n />\n {errorMessage}\n </Typography.BodySM>\n )}\n </div>\n <div\n className={styles.fileSizeSection}\n data-mobile-visibility={isLoading ? \"hidden\" : \"expand\"}\n >\n <Typography.BodyMD className={styles.fileSizeText}>\n {fileSize}\n </Typography.BodyMD>\n </div>\n {errorMessage && (\n <Typography.BodySM\n className={styles.mobileErrorMessage}\n weight=\"semibold\"\n >\n <ExclamationCircleFillIcon\n className={styles.errorIcon}\n aria-hidden\n />\n {errorMessage}\n </Typography.BodySM>\n )}\n </>\n );\n\n const renderWithThumbnail = (thumbnailImageDataUrl: string) => (\n <>\n <FileListItemThumbnail\n thumbnailImageDataUrl={thumbnailImageDataUrl}\n fileType={fileItem.type}\n data-testid={`${id}-thumbnail`}\n />\n <div className={styles.extendedNameSection}>\n <div ref={detailSectionRef} className={styles.nameSection}>\n {renderNameDescription()}\n </div>\n <div\n className={styles.fileSizeSection}\n data-mobile-visibility={isLoading ? \"hidden\" : \"expand\"}\n >\n <Typography.BodyMD className={styles.fileSizeText}>\n {fileSize}\n </Typography.BodyMD>\n </div>\n </div>\n </>\n );\n\n const renderDefault = () => (\n <>\n <div ref={detailSectionRef} className={styles.nameSection}>\n {renderNameDescription()}\n </div>\n <div\n className={styles.fileSizeSection}\n data-mobile-visibility={isLoading ? \"hidden\" : \"expand\"}\n >\n <Typography.BodyMD className={styles.fileSizeText}>\n {fileSize}\n </Typography.BodyMD>\n </div>\n </>\n );\n\n const renderContents = () => {\n let content: JSX.Element;\n const shouldShowThumbnail =\n !!thumbnailImageDataUrl \|\|\n fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n if (errorMessage) {\n content = renderErrorState();\n } else if (shouldShowThumbnail) {\n content = renderWithThumbnail(thumbnailImageDataUrl \|\| \"\");\n } else {\n content = renderDefault();\n }\n\n return (\n <div\n className={styles.contentSection}\n data-has-thumbnail={shouldShowThumbnail}\n >\n {content}\n </div>\n );\n };\n\n const renderActions = () => {\n let content: JSX.Element;\n\n if (errorMessage) {\n content = (\n <Button\n data-testid={`${id}-error-delete-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`delete ${name}, error: ${errorMessage}`}\n onClick={handleDelete}\n className={styles.iconButton}\n icon={<BinIcon aria-hidden />}\n />\n );\n } else if (isLoading) {\n content = (\n <ProgressBar\n progress={progress}\n data-testid={`${id}-progress-bar`}\n />\n );\n } else {\n content = (\n <>\n {editable && (\n <Button\n key=\"edit\"\n data-testid={`${id}-edit-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`edit ${name}`}\n disabled={shouldDisable()}\n onClick={handleEdit}\n onKeyDown={handleKeyDown}\n icon={<PencilIcon aria-hidden />}\n className={styles.iconButton}\n />\n )}\n <Button\n key=\"delete\"\n data-testid={`${id}-delete-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`delete ${name}`}\n disabled={shouldDisable()}\n onClick={handleDelete}\n onKeyDown={handleKeyDown}\n icon={<BinIcon aria-hidden />}\n className={styles.iconButton}\n />\n </>\n );\n }\n\n return (\n <div\n className={styles.actionContainer}\n data-mobile-layout={getActionContainerLayout()}\n >\n {content}\n </div>\n );\n };\n\n return (\n <li\n id={id}\n ref={setNodeRef}\n className={styles.item}\n data-item-state={getItemState()}\n data-testid={`${id}-item`}\n {...(shouldEnableSort() ? sortableProps : {})}\n >\n {shouldEnableSort() && (\n <DSDragHandleIcon\n data-testid={`${id}-drag-handle`}\n className={styles.dragHandleIcon}\n data-drag-handle-state={getDragHandleState()}\n />\n )}\n <div\n className={styles.box}\n data-box-state={getBoxState()}\n data-stack-mobile={!errorMessage && (isLoading \|\| editable)}\n >\n {renderContents()}\n {!readOnly && renderActions()}\n </div>\n </li>\n );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","Typography","BodyMD","weight","className","styles.itemDescriptionText","Object","assign","ref","styles.item","DSDragHandleIcon","styles.dragHandleIcon","styles.box","content","shouldShowThumbnail","type","PDF_MIME_TYPE","styles.nameSection","BodySM","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.fileSizeSection","styles.fileSizeText","styles.mobileErrorMessage","FileListItemThumbnail","fileType","styles.extendedNameSection","renderWithThumbnail","styles.contentSection","renderContents","Button","styleType","sizeType","onClick","styles.iconButton","icon","BinIcon","ProgressBar","onKeyDown","PencilIcon","styles.actionContainer","renderActions"],"mappings":"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"}
1	+ {"version":3,"file":"file-list-item.js","sources":["../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n memo,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Button } from \"../../button\";\nimport type { FormLabelProps } from \"../../form/types\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { Typography } from \"../../typography\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { ItemFocusType } from \"./file-list-item.styles\";\nimport * as styles from \"./file-list-item.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport type { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n readOnly?: boolean \| undefined;\n descriptionLabel?: FormLabelProps \| undefined;\n}\n\nconst Component = ({\n fileItem,\n editable,\n sortable,\n wrapperWidth,\n disabled,\n readOnly,\n descriptionLabel,\n onDelete,\n onEditClick,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n size,\n description,\n progress = 1,\n errorMessage,\n thumbnailImageDataUrl,\n truncateText = true,\n } = fileItem;\n const [formattedName, setFormattedName] = useState<string>();\n const { activeId } = useContext(FileUploadContext);\n\n // Sortable mechanism\n const { attributes, listeners, setNodeRef, transform, transition } =\n useSortable({ id });\n const detailSectionRef = useRef<HTMLDivElement>(null);\n const style = {\n transform: CSS.Translate.toString(transform),\n transition,\n };\n\n const sortableProps = {\n style,\n ...attributes,\n ...listeners,\n };\n\n // Local variables\n const isLoading = progress < 1;\n const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n const hasInlineActions = !!description && !!editable;\n const focusType: ItemFocusType = activeId\n ? activeId === id\n ? \"self\"\n : \"others\"\n : \"none\";\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = useCallback(\n (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n detailSectionRef && detailSectionRef.current\n ? detailSectionRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateOneLine(\n value,\n widthOfElement,\n widthOfElement / 2,\n widthOfElement / 2 / 8, // Arbitrary\n 16 // Font size\n );\n },\n [truncateText]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setFormattedName(getTruncatedText(name));\n }, [wrapperWidth, getTruncatedText, name]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDelete = () => {\n onDelete();\n };\n\n const handleEdit = () => {\n if (onEditClick) {\n onEditClick();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n /*\n Circumvent issue of keydown action activating the sort mechanism\n * rather than the actual action\n */\n if (sortable) {\n event.stopPropagation();\n }\n };\n\n const shouldDisable = () => disabled \|\| !!activeId;\n\n const shouldEnableSort = () => !!sortable && !readOnly;\n\n const getItemState = () => {\n if (shouldDisable() && focusType === \"none\") {\n return \"disabled\";\n }\n\n if (shouldEnableSort() && focusType === \"self\") {\n return \"sortable-active\";\n }\n\n if (shouldEnableSort()) {\n return \"sortable\";\n }\n\n return undefined;\n };\n\n const getDragHandleState = () => {\n if (focusType === \"self\") {\n return \"active\";\n }\n\n if (shouldDisable()) {\n return \"disabled\";\n }\n\n return undefined;\n };\n\n const getBoxState = () => {\n if (focusType === \"self\") {\n return \"focused\";\n }\n\n if (shouldDisable()) {\n return \"disabled\";\n }\n\n if (errorMessage) {\n return \"error\";\n }\n\n return undefined;\n };\n\n const getActionContainerLayout = () => {\n if (!errorMessage && isLoading) {\n return \"loading\";\n }\n\n if (!errorMessage && editable) {\n return \"editable\";\n }\n\n return undefined;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderNameDescription = () => (\n <>\n <Typography.BodyMD weight={description ? \"semibold\" : \"regular\"}>\n {formattedName}\n </Typography.BodyMD>\n {description && (\n <>\n <Typography.BodyMD className={styles.itemDescriptionLabel}>\n {descriptionLabel?.children ?? \"Photo description\"}\n </Typography.BodyMD>\n <Typography.BodyMD className={styles.itemDescriptionText}>\n {description}\n </Typography.BodyMD>\n </>\n )}\n </>\n );\n\n const renderErrorState = () => (\n <>\n <div ref={detailSectionRef} className={styles.nameSection}>\n {renderNameDescription()}\n {errorMessage && (\n <Typography.BodySM\n className={styles.desktopErrorMessage}\n weight=\"semibold\"\n >\n <ExclamationCircleFillIcon\n className={styles.errorIcon}\n aria-hidden\n />\n {errorMessage}\n </Typography.BodySM>\n )}\n </div>\n <div\n className={styles.fileSizeSection}\n data-mobile-visibility={isLoading ? \"hidden\" : \"expand\"}\n >\n <Typography.BodyMD className={styles.fileSizeText}>\n {fileSize}\n </Typography.BodyMD>\n </div>\n {errorMessage && (\n <Typography.BodySM\n className={styles.mobileErrorMessage}\n weight=\"semibold\"\n >\n <ExclamationCircleFillIcon\n className={styles.errorIcon}\n aria-hidden\n />\n {errorMessage}\n </Typography.BodySM>\n )}\n </>\n );\n\n const renderInlineActions = () => (\n <div className={styles.inlineActionContainer}>\n <Button\n key=\"edit\"\n data-testid={`${id}-edit-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`edit ${name}`}\n disabled={shouldDisable()}\n onClick={handleEdit}\n onKeyDown={handleKeyDown}\n icon={<PencilIcon aria-hidden />}\n className={styles.iconButton}\n />\n <Button\n key=\"delete\"\n data-testid={`${id}-delete-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`delete ${name}`}\n disabled={shouldDisable()}\n onClick={handleDelete}\n onKeyDown={handleKeyDown}\n icon={<BinIcon aria-hidden />}\n className={styles.iconButton}\n />\n </div>\n );\n\n const renderDescriptionContent = () => (\n <div ref={detailSectionRef} className={styles.extendedNameSection}>\n <Typography.BodyMD weight=\"semibold\">\n {formattedName}\n </Typography.BodyMD>\n <Typography.BodyMD className={styles.itemDescriptionLabel}>\n {descriptionLabel?.children ?? \"Photo description\"}\n </Typography.BodyMD>\n <Typography.BodyMD className={styles.itemDescriptionText}>\n {description}\n </Typography.BodyMD>\n <Typography.BodyMD className={styles.descriptionFileSizeText}>\n {fileSize}\n </Typography.BodyMD>\n {!readOnly && hasInlineActions && renderInlineActions()}\n </div>\n );\n\n const renderFileContent = (thumbnailImageDataUrl?: string) => {\n const shouldShowThumbnail =\n !!thumbnailImageDataUrl \|\|\n fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n const thumbnail = shouldShowThumbnail ? (\n <FileListItemThumbnail\n thumbnailImageDataUrl={thumbnailImageDataUrl \|\| \"\"}\n fileType={fileItem.type}\n data-testid={`${id}-thumbnail`}\n />\n ) : null;\n\n if (hasInlineActions) {\n return (\n <>\n {thumbnail}\n {renderDescriptionContent()}\n </>\n );\n }\n\n return (\n <>\n {thumbnail}\n <div ref={detailSectionRef} className={styles.nameSection}>\n {renderNameDescription()}\n {!isLoading && (\n <Typography.BodyMD\n className={styles.descriptionFileSizeText}\n >\n {fileSize}\n </Typography.BodyMD>\n )}\n </div>\n </>\n );\n };\n\n const renderContents = () => {\n const shouldShowThumbnail =\n !!thumbnailImageDataUrl \|\|\n fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n const content = errorMessage\n ? renderErrorState()\n : renderFileContent(thumbnailImageDataUrl);\n\n return (\n <div\n className={styles.contentSection}\n data-has-thumbnail={shouldShowThumbnail}\n >\n {content}\n </div>\n );\n };\n\n const renderActions = () => {\n let content: JSX.Element;\n\n if (errorMessage) {\n content = (\n <Button\n data-testid={`${id}-error-delete-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`delete ${name}, error: ${errorMessage}`}\n onClick={handleDelete}\n className={styles.iconButton}\n icon={<BinIcon aria-hidden />}\n />\n );\n } else if (isLoading) {\n content = (\n <ProgressBar\n progress={progress}\n data-testid={`${id}-progress-bar`}\n />\n );\n } else {\n content = (\n <>\n {editable && (\n <Button\n key=\"edit\"\n data-testid={`${id}-edit-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`edit ${name}`}\n disabled={shouldDisable()}\n onClick={handleEdit}\n onKeyDown={handleKeyDown}\n icon={<PencilIcon aria-hidden />}\n className={styles.iconButton}\n />\n )}\n <Button\n key=\"delete\"\n data-testid={`${id}-delete-button`}\n data-no-dnd=\"true\"\n type=\"button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-label={`delete ${name}`}\n disabled={shouldDisable()}\n onClick={handleDelete}\n onKeyDown={handleKeyDown}\n icon={<BinIcon aria-hidden />}\n className={styles.iconButton}\n />\n </>\n );\n }\n\n return (\n <div\n className={styles.actionContainer}\n data-mobile-layout={getActionContainerLayout()}\n >\n {content}\n </div>\n );\n };\n\n return (\n <li\n id={id}\n ref={setNodeRef}\n className={styles.item}\n data-item-state={getItemState()}\n data-testid={`${id}-item`}\n {...(shouldEnableSort() ? sortableProps : {})}\n >\n {shouldEnableSort() && (\n <DSDragHandleIcon\n data-testid={`${id}-drag-handle`}\n className={styles.dragHandleIcon}\n data-drag-handle-state={getDragHandleState()}\n />\n )}\n <div\n className={styles.box}\n data-box-state={getBoxState()}\n data-stack-mobile={!errorMessage && (isLoading \|\| editable)}\n >\n {renderContents()}\n {!readOnly && !hasInlineActions && renderActions()}\n </div>\n </li>\n );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","descriptionLabel","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","hasInlineActions","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","Typography","BodyMD","weight","className","styles.itemDescriptionLabel","_a","styles.itemDescriptionText","Object","assign","ref","styles.item","DSDragHandleIcon","styles.dragHandleIcon","styles.box","shouldShowThumbnail","type","PDF_MIME_TYPE","content","styles.nameSection","BodySM","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.fileSizeSection","styles.fileSizeText","styles.mobileErrorMessage","thumbnail","FileListItemThumbnail","fileType","styles.extendedNameSection","styles.descriptionFileSizeText","styles.inlineActionContainer","Button","styleType","sizeType","onClick","onKeyDown","icon","PencilIcon","styles.iconButton","BinIcon","renderFileContent","styles.contentSection","renderContents","ProgressBar","styles.actionContainer","renderActions"],"mappings":"+/CAgCA,MAkbaA,EAAeC,GAlbV,EACdC,WACAC,WACAC,WACAC,eACAC,WACAC,WACAC,mBACAC,WACAC,kBAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,YACJA,EAAWC,SACXA,EAAW,EAACC,aACZA,EAAYC,sBACZA,EAAqBC,aACrBA,IAAe,GACfhB,GACGiB,GAAeC,IAAoBC,KACpCC,SAAEA,IAAaC,EAAWC,IAG1BC,WAAEA,GAAUC,UAAEA,GAASC,WAAEA,GAAUC,UAAEA,GAASC,WAAEA,IAClDC,EAAY,CAAEnB,OACZoB,GAAmBC,EAAuB,MAC1CC,GAAQ,CACVL,UAAWM,EAAIC,UAAUC,SAASR,IAClCC,eAGEQ,gCACFJ,UACGR,IACAC,IAIDY,GAAYvB,EAAW,EACvBwB,GAAWC,EAAiBC,sBAAsB5B,GAClD6B,KAAqB5B,KAAiBX,EACtCwC,GAA2BrB,GAC3BA,KAAaX,EACT,OACA,SACJ,OAKAiC,GAAmBC,GACpBC,IACG,IAAK5B,GAAc,OAAO4B,EAE1B,MAAMC,EACFhB,IAAoBA,GAAiBiB,QAC/BjB,GAAiBiB,QAAQC,wBAAwBC,MACjD,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAAC7B,KAMLmC,GAAU,KACNjC,GAAiBwB,GAAiBhC,GAAM,GACzC,CAACP,EAAcuC,GAAkBhC,IAKpC,MAAM0C,GAAe,KACjB7C,GAAU,EAGR8C,GAAa,KACX7C,GACAA,GACJ,EAGE8C,GAAiBC,IAKfrD,GACAqD,EAAMC,iBACV,EAGEC,GAAgB,IAAMrD,KAAcgB,GAEpCsC,GAAmB,MAAQxD,IAAaG,EA6DxCsD,GAAwB,WAAM,OAChCC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAWC,OAAM,CAACC,OAAQtD,EAAc,WAAa,UAASkD,SAC1D7C,KAEJL,GACGgD,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAWC,QAAOE,UAAWC,EAA2BN,SAC1B,QAA1BO,EAAA/D,aAAgB,EAAhBA,EAAkBwD,gBAAQ,IAAAO,EAAAA,EAAI,sBAEnCN,EAACC,EAAWC,OAAM,CAACE,UAAWG,EAA0BR,SACnDlD,SAId,EA+NP,OACIgD,EAAA,KAAAW,OAAAC,OAAA,CACI/D,GAAIA,EACJgE,IAAKhD,GACL0C,UAAWO,oBA5SXjB,MAAiC,SAAdhB,GACZ,WAGPiB,MAAoC,SAAdjB,GACf,kBAGPiB,KACO,gBADX,gBAsSiB,GAAGjD,UACXiD,KAAqBvB,GAAgB,CAAA,EAAG,CAAA2B,SAAA,CAE5CJ,MACGK,EAACY,iBACgB,GAAGlE,gBAChB0D,UAAWS,EAAqB,yBApS1B,SAAdnC,GACO,SAGPgB,KACO,gBADX,IAoSIG,EAAA,MAAA,CACIO,UAAWU,EAAU,iBA7RX,SAAdpC,GACO,UAGPgB,KACO,WAGP3C,EACO,aADX,EAsRqC,qBACTA,IAAiBsB,IAAanC,GAAS6D,SAAA,CA7GhD,MACnB,MAAMgB,IACA/D,GACFf,EAAS+E,OAASzC,EAAiB0C,cAEjCC,EAAUnE,EAtIhB8C,EAAAC,EAAA,CAAAC,SAAA,CACIF,EAAA,MAAA,CAAKa,IAAK5C,GAAkBsC,UAAWe,EAAkBpB,SAAA,CACpDH,KACA7C,GACG8C,EAACI,EAAWmB,QACRhB,UAAWiB,EACXlB,OAAO,WAAUJ,SAAA,CAEjBC,EAACsB,EAAyB,CACtBlB,UAAWmB,EAAgB,eAAA,IAG9BxE,QAIbiD,EAAA,MAAA,CACII,UAAWoB,EAAsB,yBACTnD,GAAY,SAAW,SAAQ0B,SAEvDC,EAACC,EAAWC,OAAM,CAACE,UAAWqB,EAAmB1B,SAC5CzB,OAGRvB,GACG8C,EAACI,EAAWmB,OAAM,CACdhB,UAAWsB,EACXvB,OAAO,WAAUJ,SAAA,CAEjBC,EAACsB,EAAyB,CACtBlB,UAAWmB,EAAgB,eAAA,IAG9BxE,QAyDS,CAACC,IACvB,MAIM2E,EAHA3E,GACFf,EAAS+E,OAASzC,EAAiB0C,cAGnCjB,EAAC4B,EAAqB,CAClB5E,sBAAuBA,GAAyB,GAChD6E,SAAU5F,EAAS+E,mBACN,GAAGtE,gBAEpB,KAEJ,OAEQmD,IAFJpB,cAGSkD,EAjCb9B,EAAA,MAAA,CAAKa,IAAK5C,GAAkBsC,UAAW0B,YACnC9B,EAACC,EAAWC,OAAM,CAACC,OAAO,WAAUJ,SAC/B7C,KAEL8C,EAACC,EAAWC,QAAOE,UAAWC,EAA2BN,SAC1B,QAA1BO,EAAA/D,eAAAA,EAAkBwD,gBAAQ,IAAAO,EAAAA,EAAI,sBAEnCN,EAACC,EAAWC,OAAM,CAACE,UAAWG,EAA0BR,SACnDlD,IAELmD,EAACC,EAAWC,OAAM,CAACE,UAAW2B,EAA8BhC,SACvDzB,MAEHhC,GAAYmC,IA9ClBoB,EAAA,MAAA,CAAKO,UAAW4B,EAA4BjC,SAAA,CACxCC,EAACiC,EAAM,CAAA,cAEU,GAAGvF,gBAAgB,cACpB,OACZsE,KAAK,SACLkB,UAAU,QACVC,SAAS,QAAO,aACJ,QAAQxF,IACpBN,SAAUqD,KACV0C,QAAS9C,GACT+C,UAAW9C,GACX+C,KAAMtC,EAACuC,EAAU,CAAA,eAAA,IACjBnC,UAAWoC,GAXP,QAaRxC,EAACiC,EAAM,CAAA,cAEU,GAAGvF,kBAAkB,cACtB,OACZsE,KAAK,SACLkB,UAAU,QACVC,SAAS,QAAO,aACJ,UAAUxF,IACtBN,SAAUqD,KACV0C,QAAS/C,GACTgD,UAAW9C,GACX+C,KAAMtC,EAACyC,EAAO,CAAA,eAAA,IACdrC,UAAWoC,GAXP,kBAyDR,CAAAzC,SAAA,CACK4B,EACD9B,EAAA,MAAA,CAAKa,IAAK5C,GAAkBsC,UAAWe,EAAkBpB,SAAA,CACpDH,MACCvB,IACE2B,EAACC,EAAWC,OAAM,CACdE,UAAW2B,WAEVzD,WAjDQ,KAqDtB,EAWDoE,CAAkB1F,GAExB,OACIgD,EAAA,MAAA,CACII,UAAWuC,EAAqB,qBACZ5B,EAAmBhB,SAEtCmB,GACC,EAgGD0B,IACCtG,IAAamC,IA7FL,MAClB,IAAIyC,EA4DJ,OAzDIA,EADAnE,EAEIiD,EAACiC,iBACgB,GAAGvF,wBAAwB,cAC5B,OACZsE,KAAK,SACLkB,UAAU,QACVC,SAAS,QAAO,aACJ,UAAUxF,aAAgBI,IACtCqF,QAAS/C,GACTe,UAAWoC,EACXF,KAAMtC,EAACyC,EAAO,CAAA,eAAA,MAGfpE,GAEH2B,EAAC6C,GACG/F,SAAUA,EAAQ,cACL,GAAGJ,mBAKpBmD,EAAAC,EAAA,CAAAC,SAAA,CACK7D,GACG8D,EAACiC,EAAM,CAAA,cAEU,GAAGvF,8BACJ,OACZsE,KAAK,SACLkB,UAAU,QACVC,SAAS,QAAO,aACJ,QAAQxF,IACpBN,SAAUqD,KACV0C,QAAS9C,GACT+C,UAAW9C,GACX+C,KAAMtC,EAACuC,EAAU,CAAA,eAAA,IACjBnC,UAAWoC,GAXP,QAcZxC,EAACiC,EAAM,CAAA,cAEU,GAAGvF,kBAAkB,cACtB,OACZsE,KAAK,SACLkB,UAAU,QACVC,SAAS,QAAO,aACJ,UAAUxF,IACtBN,SAAUqD,KACV0C,QAAS/C,GACTgD,UAAW9C,GACX+C,KAAMtC,EAACyC,EAAO,CAAA,eAAA,IACdrC,UAAWoC,GAXP,aAkBhBxC,EAAA,MAAA,CACII,UAAW0C,EAAsB,sBApPpC/F,GAAgBsB,GACV,WAGNtB,GAAgBb,EACV,gBADX,EAiPsD6D,SAE7CmB,GACC,EA0BiC6B,SAEtC"}

package/file-upload/file-list-item/file-list-item.styles.d.ts CHANGED Viewed

@@ -7,9 +7,12 @@ export declare const nameSection: import("@linaria/core").LinariaClassName;
 export declare const extendedNameSection: import("@linaria/core").LinariaClassName;
 export declare const fileSizeSection: import("@linaria/core").LinariaClassName;
 export declare const fileSizeText: import("@linaria/core").LinariaClassName;
+export declare const descriptionFileSizeText: import("@linaria/core").LinariaClassName;
+export declare const itemDescriptionLabel: import("@linaria/core").LinariaClassName;
 export declare const itemDescriptionText: import("@linaria/core").LinariaClassName;
 export declare const errorIcon: import("@linaria/core").LinariaClassName;
 export declare const desktopErrorMessage: import("@linaria/core").LinariaClassName;
 export declare const mobileErrorMessage: import("@linaria/core").LinariaClassName;
 export declare const actionContainer: import("@linaria/core").LinariaClassName;
+export declare const inlineActionContainer: import("@linaria/core").LinariaClassName;
 export declare const iconButton: import("@linaria/core").LinariaClassName;

package/file-upload/file-list-item/file-list-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./file-list-item.styles_y7my2m.css";const e="i18pxk0j",i="dqb8x5u",l="bddx9rr",t="c1dhzflv",s="nk38w4a",d="elwke9e",f="f14h64yt",m="f1wv8fjl",o="iivlkvo",k="e1jm950n",p="d1vgco4e",v="map0p9n",a="a1gk2zsk",c="i1wh4bod";export{a as actionContainer,l as box,t as contentSection,p as desktopErrorMessage,i as dragHandleIcon,k as errorIcon,d as extendedNameSection,f as fileSizeSection,m as fileSizeText,c as iconButton,e as item,o as itemDescriptionText,v as mobileErrorMessage,s as nameSection};
+import"./file-list-item.styles_o8000f.css";const i="i18pxk0j",e="dqb8x5u",l="bddx9rr",o="c1dhzflv",f="nk38w4a",t="elwke9e",d="f14h64yt",s="f1wv8fjl",v="divlkvo",k="i1jm950n",p="i1vgco4e",m="eap0p9n",r="d1gk2zsk",a="m1wh4bod",c="a3rvfgv",n="i5ozu70",u="ilou5qo";export{c as actionContainer,l as box,o as contentSection,v as descriptionFileSizeText,r as desktopErrorMessage,e as dragHandleIcon,m as errorIcon,t as extendedNameSection,d as fileSizeSection,s as fileSizeText,u as iconButton,n as inlineActionContainer,i as item,k as itemDescriptionLabel,p as itemDescriptionText,a as mobileErrorMessage,f as nameSection};
 //# sourceMappingURL=file-list-item.styles.js.map

package/file-upload/file-list-item/file-list-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n MediaQuery,\n Radius,\n Shadow,\n Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" \| \"others\" \| \"none\";\n\nexport const item = css`\n display: flex;\n align-items: center;\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n &[data-item-state=\"disabled\"] {\n cursor: not-allowed;\n }\n\n &[data-item-state=\"sortable\"] {\n &:hover {\n cursor: grab;\n }\n\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n }\n\n &[data-item-state=\"sortable-active\"] {\n cursor: grabbing;\n\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n }\n`;\n\nexport const dragHandleIcon = css`\n margin-right: ${Spacing[\"spacing-16\"]};\n height: 1.5rem;\n width: 1.5rem;\n color: ${Colour[\"icon\"]};\n\n &[data-drag-handle-state=\"active\"] {\n color: ${Colour[\"icon-primary\"]};\n }\n\n &[data-drag-handle-state=\"disabled\"] {\n color: ${Colour[\"icon-disabled\"]};\n }\n`;\n\nexport const box = css`\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n width: 100%;\n\n ${MediaQuery.MaxWidth.md} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n &[data-box-state=\"focused\"] {\n border-color: ${Colour[\"border-focus\"]};\n box-shadow: ${Shadow[\"xs-focus-strong\"]};\n }\n\n &[data-box-state=\"disabled\"] {\n border-color: ${Colour[\"border-disabled\"]};\n }\n\n &[data-box-state=\"error\"] {\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n }\n\n &[data-stack-mobile=\"true\"] {\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n`;\n\nexport const contentSection = css`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n }\n\n &[data-has-thumbnail=\"true\"] {\n ${MediaQuery.MaxWidth.md} {\n flex-direction: row;\n align-items: center;\n }\n }\n`;\n\nexport const nameSection = css`\n display: flex;\n flex: 1;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const extendedNameSection = css`\n display: flex;\n flex: 1;\n align-items: ~~center~~;\n\n ${MediaQuery.MaxWidth.md} {\n ~~flex-direction: column;\n align-items: flex-start;\n~~ width: 100%;\n }\n`;\n\nexport const fileSizeSection = css`\n display: flex;\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n justify-content: flex-end;\n\n &[data-mobile-visibility=\"hidden\"] {\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n }\n\n &[data-mobile-visibility=\"expand\"] {\n ${MediaQuery.MaxWidth.md} {\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n justify-content: flex-start;\n }\n }\n`;\n\nexport const fileSizeText = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const itemDescriptionText = css`\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const errorIcon = css`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n color: ${Colour[\"text-error\"]};\n margin-top: ${Spacing[\"spacing-4\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const mobileErrorMessage = css`\n color: ${Colour[\"text-error\"]};\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const actionContainer = css`\n width: 6rem;\n margin-left: ${Spacing[\"spacing-32\"]};\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n width: fit-content;\n }\n\n &[data-mobile-layout=\"loading\"] {\n ${MediaQuery.MaxWidth.md} {\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n width: 100%;\n }\n }\n\n &[data-mobile-layout=\"editable\"] {\n ${MediaQuery.MaxWidth.md} {\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n align-self: flex-end;\n }\n }\n`;\n\nexport const iconButton = css`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-16\"]};\n }\n`;\n"],"names":["item","dragHandleIcon","box","contentSection","nameSection","extendedNameSection","fileSizeSection","fileSizeText","itemDescriptionText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","iconButton"],"mappings":"~~qFAaO~~,MAAMA,EAAI,WAgCJC,EAAc,UAedC,EAAG,UAmCHC,EAAc,WAmBdC,EAAW,UAOXC,EAAmB,~~UAYnBC~~,EAAe,WAuBfC,EAAY,WAIZC,EAAmB,~~UAInBC~~,EAAS,~~WAOTC~~,EAAmB,WAYnBC,EAAkB,~~UAalBC~~,EAAe,~~WA4BfC~~,EAAU"}
1	+ {"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Shadow,\n Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" \| \"others\" \| \"none\";\n\nexport const item = css`\n display: flex;\n align-items: center;\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n &[data-item-state=\"disabled\"] {\n cursor: not-allowed;\n }\n\n &[data-item-state=\"sortable\"] {\n &:hover {\n cursor: grab;\n }\n\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n }\n\n &[data-item-state=\"sortable-active\"] {\n cursor: grabbing;\n\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n }\n`;\n\nexport const dragHandleIcon = css`\n margin-right: ${Spacing[\"spacing-16\"]};\n height: 1.5rem;\n width: 1.5rem;\n color: ${Colour[\"icon\"]};\n\n &[data-drag-handle-state=\"active\"] {\n color: ${Colour[\"icon-primary\"]};\n }\n\n &[data-drag-handle-state=\"disabled\"] {\n color: ${Colour[\"icon-disabled\"]};\n }\n`;\n\nexport const box = css`\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n width: 100%;\n\n ${MediaQuery.MaxWidth.md} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n &[data-box-state=\"focused\"] {\n border-color: ${Colour[\"border-focus\"]};\n box-shadow: ${Shadow[\"xs-focus-strong\"]};\n }\n\n &[data-box-state=\"disabled\"] {\n border-color: ${Colour[\"border-disabled\"]};\n }\n\n &[data-box-state=\"error\"] {\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n }\n\n &[data-stack-mobile=\"true\"] {\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n`;\n\nexport const contentSection = css`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n }\n\n &[data-has-thumbnail=\"true\"] {\n ${MediaQuery.MaxWidth.md} {\n flex-direction: row;\n align-items: center;\n }\n }\n`;\n\nexport const nameSection = css`\n display: flex;\n flex: 1;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const extendedNameSection = css`\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n\n ${MediaQuery.MaxWidth.md} {\n width: 100%;\n }\n`;\n\nexport const fileSizeSection = css`\n display: flex;\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n justify-content: flex-end;\n\n &[data-mobile-visibility=\"hidden\"] {\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n }\n\n &[data-mobile-visibility=\"expand\"] {\n ${MediaQuery.MaxWidth.md} {\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n justify-content: flex-start;\n }\n }\n`;\n\nexport const fileSizeText = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const descriptionFileSizeText = css`\n color: ${Colour[\"text-subtler\"]};\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionLabel = css`\n ${Font[\"form-label\"]}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour[\"text-subtle\"]};\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionText = css`\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const errorIcon = css`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n color: ${Colour[\"text-error\"]};\n margin-top: ${Spacing[\"spacing-4\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const mobileErrorMessage = css`\n color: ${Colour[\"text-error\"]};\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const actionContainer = css`\n width: 6rem;\n margin-left: ${Spacing[\"spacing-32\"]};\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n width: fit-content;\n }\n\n &[data-mobile-layout=\"loading\"] {\n ${MediaQuery.MaxWidth.md} {\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n width: 100%;\n }\n }\n\n &[data-mobile-layout=\"editable\"] {\n ${MediaQuery.MaxWidth.md} {\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n align-self: flex-end;\n }\n }\n`;\n\nexport const inlineActionContainer = css`\n width: 100%;\n margin-top: ${Spacing[\"spacing-16\"]};\n display: flex;\n justify-content: flex-end;\n align-items: center;\n`;\n\nexport const iconButton = css`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-8\"]};\n }\n`;\n"],"names":["item","dragHandleIcon","box","contentSection","nameSection","extendedNameSection","fileSizeSection","fileSizeText","descriptionFileSizeText","itemDescriptionLabel","itemDescriptionText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","inlineActionContainer","iconButton"],"mappings":"qFAcO,MAAMA,EAAI,WAgCJC,EAAc,UAedC,EAAG,UAmCHC,EAAc,WAmBdC,EAAW,UAOXC,EAAmB,UAWnBC,EAAe,WAuBfC,EAAY,WAIZC,EAAuB,UAKvBC,EAAoB,WAOpBC,EAAmB,WAInBC,EAAS,UAOTC,EAAmB,WAYnBC,EAAkB,WAalBC,EAAe,UA4BfC,EAAqB,UAQrBC,EAAU"}

package/file-upload/file-list-item/file-list-item.styles_o8000f.css ADDED Viewed

@@ -0,0 +1,17 @@
+@layer fds{.i18pxk0j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border:none;}.i18pxk0j:not(:last-child){margin-bottom:var(--fds-spacing-16);}.i18pxk0j[data-item-state="disabled"]{cursor:not-allowed;}.i18pxk0j[data-item-state="sortable"]{touch-action:manipulation;}.i18pxk0j[data-item-state="sortable"]:hover{cursor:-webkit-grab;cursor:grab;}.i18pxk0j[data-item-state="sortable-active"]{cursor:-webkit-grabbing;cursor:grabbing;touch-action:manipulation;}
+.dqb8x5u{margin-right:var(--fds-spacing-16);height:1.5rem;width:1.5rem;color:var(--fds-colour-icon);}.dqb8x5u[data-drag-handle-state="active"]{color:var(--fds-colour-icon-primary);}.dqb8x5u[data-drag-handle-state="disabled"]{color:var(--fds-colour-icon-disabled);}
+.bddx9rr{background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);padding:var(--fds-spacing-16) var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}:where(body.fds-breakpoint-md-max) .bddx9rr{padding:var(--fds-spacing-16);}.bddx9rr[data-box-state="focused"]{border-color:var(--fds-colour-border-focus);box-shadow:var(--fds-shadow-xs-focus-strong);}.bddx9rr[data-box-state="disabled"]{border-color:var(--fds-colour-border-disabled);}.bddx9rr[data-box-state="error"]{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}:where(body.fds-breakpoint-md-max) .bddx9rr[data-stack-mobile="true"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.c1dhzflv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .c1dhzflv{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}:where(body.fds-breakpoint-md-max) .c1dhzflv[data-has-thumbnail="true"]{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.nk38w4a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}
+.elwke9e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}:where(body.fds-breakpoint-md-max) .elwke9e{width:100%;}
+.f14h64yt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:5rem;margin-left:var(--fds-spacing-8);-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="hidden"]{display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="expand"]{width:100%;margin-left:0;margin-top:var(--fds-spacing-8);-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.f1wv8fjl{color:var(--fds-colour-text-subtler);}
+.divlkvo{color:var(--fds-colour-text-subtler);margin-top:var(--fds-spacing-16);}
+.i1jm950n{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-form-label-size);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-form-label-lh);letter-spacing:var(--fds-font-form-label-ls);font-weight:var(--fds-font-weight-semibold);color:var(--fds-colour-text-subtle);margin-top:var(--fds-spacing-16);}
+.i1vgco4e{margin-top:var(--fds-spacing-4);}
+.eap0p9n{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.d1gk2zsk{color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-4);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-md-max) .d1gk2zsk{display:none;visibility:hidden;}
+.m1wh4bod{color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .m1wh4bod{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
+.a3rvfgv{width:6rem;margin-left:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .a3rvfgv{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}:where(body.fds-breakpoint-md-max) .a3rvfgv[data-mobile-layout="loading"]{margin-left:0;margin-top:var(--fds-spacing-16);width:100%;}:where(body.fds-breakpoint-md-max) .a3rvfgv[data-mobile-layout="editable"]{margin-left:0;margin-top:var(--fds-spacing-16);-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}
+.i5ozu70{width:100%;margin-top:var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.ilou5qo{min-width:unset;}.ilou5qo:not(:last-child){margin-right:var(--fds-spacing-8);}}

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

@@ -1,2 +1,3 @@
 import type { 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;
+/** Allows user to upload images via drag-and-drop or a native file dialog. */
+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 CHANGED Viewed

@@ -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{Alert as o}from"../alert/alert.js";import{Button as i}from"../button/button.js";import{Markup as a}from"../markup/markup.js";import{Typography as n}from"../typography/index.js";import{FileUploadContext as s}from"./context.js";import{FileUploadDropzone as d}from"./dropzone.js";import{FileList as c}from"./file-list.js";import{textContainer as m,warningAlert as p,errorAlert as u,uploadButtonContainer as f,uploadButton as h,uploadButtonText as b,markupContainer as y,description as v}from"./file-upload.styles.js";const g=({styleType:g="bordered",fileItems:N,title:x,description:j,maxFiles:D,warning:I,className:B,name:z,id:M,"data-testid":L,accept:T,capture:F,multiple:S,disabled:k,sortable:w=!1,fileDescriptionMaxLength:C,editableFileItems:O=!1,errorMessage:U,readOnly:A,customLabels:E,onChange:P,onDelete:$,onEdit:q,onSort:G})=>{const H={uploadButton:(null==E?void 0:E.uploadButtonLabel)||"Upload files"},J=r(null),K=r(null),[Q,R]=l(),V=e=>{var t;if(void 0===D)return e;const r=null!==(t=null==N?void 0:N.length)&&void 0!==t?t:0,l=Math.max(D-r,0);return e.slice(0,l)},W=()=>!(!D||!N)&&N.length>=D;return e(s.Provider,{value:{activeId:Q,setActiveId:R},children:t(d,{ref:J,onChange:e=>{var t;const r=V(e);!k&&P&&r.length>0&&(P(r),null===(t=K.current)||void 0===t||t.focus())},id:M?`${M}-dropzone`:"dropzone",accept:T,capture:F,border:"bordered"===g,className:B,"data-testid":L,name:z,multiple:S,disabled:k||W()||A,children:[!(!x&&!j)&&t("div",{className:m,children:[x?"string"==typeof x?e(n.BodyBL,{children:x}):e(a,{className:y,baseTextSize:"body-baseline",children:x}):null,j?"string"==typeof j?e(n.BodyMD,{className:v,children:j}):e(a,{className:y,baseTextSize:"body-md",children:j}):null]}),!!I&&e(o,{className:p,type:"warning",children:I}),e(c,{ref:K,fileItems:N,editableFileItems:O,fileDescriptionMaxLength:C,sortable:w,disabled:k,readOnly:A,onItemDelete:e=>{var t;$&&($(e),null===(t=K.current)||void 0===t||t.focus())},onItemUpdate:e=>{q&&q(e)},onSort:e=>{G&&G(e)}}),U&&e(o,{className:u,type:"error",children:U}),!A&&t("div",{className:f,children:[e(i,{type:"button",sizeType:"small",styleType:"secondary",disabled:!!Q||k||W(),onClick:e=>{k||(e.preventDefault(),J.current&&J.current.openFileDialog())},className:h,children:H.uploadButton}),e(n.BodyMD,{className:b,weight:"semibold",children:"or drop them here"})]})]})})};export{g as FileUpload};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as l}from"react";import{Alert as i}from"../alert/alert.js";import{Button as o}from"../button/button.js";import{Markup as a}from"../markup/markup.js";import{Typography as n}from"../typography/index.js";import{FileUploadContext as s}from"./context.js";import{FileUploadDropzone as d}from"./dropzone.js";import{FileList as c}from"./file-list/file-list.js";import{textContainer as m,warningAlert as p,errorAlert as u,uploadButtonContainer as f,uploadButton as b,uploadButtonText as h,markupContainer as y,description as v}from"./file-upload.styles.js";const g=({styleType:g="bordered",fileItems:N,title:x,description:j,maxFiles:D,warning:I,className:B,name:L,id:z,"data-testid":M,accept:T,capture:F,multiple:S,disabled:k,sortable:w=!1,fileDescriptionMaxLength:C,editableFileItems:q=!1,descriptionRequired:O=!0,descriptionLabel:R,errorMessage:U,readOnly:A,customLabels:E,onChange:P,onDelete:$,onEdit:G,onSort:H})=>{const J={uploadButton:(null==E?void 0:E.uploadButtonLabel)||"Upload files"},K=r(null),Q=r(null),[V,W]=l(),X=e=>{var t;if(void 0===D)return e;const r=null!==(t=null==N?void 0:N.length)&&void 0!==t?t:0,l=Math.max(D-r,0);return e.slice(0,l)},Y=()=>!(!D||!N)&&N.length>=D;return e(s.Provider,{value:{activeId:V,setActiveId:W},children:t(d,{ref:K,onChange:e=>{var t;const r=X(e);!k&&P&&r.length>0&&(P(r),null===(t=Q.current)||void 0===t||t.focus())},id:z?`${z}-dropzone`:"dropzone",accept:T,capture:F,border:"bordered"===g,className:B,"data-testid":M,name:L,multiple:S,disabled:k||Y()||A,children:[!(!x&&!j)&&t("div",{className:m,children:[x?"string"==typeof x?e(n.BodyBL,{children:x}):e(a,{className:y,baseTextSize:"body-baseline",children:x}):null,j?"string"==typeof j?e(n.BodyMD,{className:v,children:j}):e(a,{className:y,baseTextSize:"body-md",children:j}):null]}),!!I&&e(i,{className:p,type:"warning",children:I}),e(c,{ref:Q,fileItems:N,editableFileItems:q,descriptionRequired:O,descriptionLabel:R,fileDescriptionMaxLength:C,sortable:w,disabled:k,readOnly:A,onItemDelete:e=>{var t;$&&($(e),null===(t=Q.current)||void 0===t||t.focus())},onItemUpdate:e=>{G&&G(e)},onSort:e=>{H&&H(e)}}),U&&e(i,{className:u,type:"error",children:U}),!A&&t("div",{className:f,children:[e(o,{type:"button",sizeType:"small",styleType:"secondary",disabled:!!V||k||Y(),onClick:e=>{k||(e.preventDefault(),K.current&&K.current.openFileDialog())},className:b,children:J.uploadButton}),e(n.BodyMD,{className:h,weight:"semibold",children:"or drop them here"})]})]})})};export{g as FileUpload};
 //# sourceMappingURL=file-upload.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport * as styles from \"./file-upload.styles\";\nimport type { 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 const filesToProcess = limitIncomingFiles(files);\n\n if (!disabled && onChange && filesToProcess.length > 0) {\n onChange(filesToProcess);\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 limitIncomingFiles = (files: File[]) => {\n if (maxFiles === undefined) {\n return files;\n }\n\n const existingItemsCount = fileItems?.length ?? 0;\n const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n return files.slice(0, remainingSlots);\n };\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 <Typography.BodyBL>{title}</Typography.BodyBL>;\n }\n\n return (\n <Markup\n className={styles.markupContainer}\n baseTextSize=\"body-baseline\"\n >\n {title}\n </Markup>\n );\n };\n\n const renderDescription = () => {\n if (!description) {\n return null;\n }\n\n if (typeof description === \"string\") {\n return (\n <Typography.BodyMD className={styles.description}>\n {description}\n </Typography.BodyMD>\n );\n }\n\n return (\n <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n {description}\n </Markup>\n );\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 <div className={styles.textContainer}>\n {renderTitle()}\n {renderDescription()}\n </div>\n )}\n {!!warning && (\n <Alert className={styles.warningAlert} type=\"warning\">\n {warning}\n </Alert>\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 <Alert className={styles.errorAlert} type=\"error\">\n {errorMessage}\n </Alert>\n )}\n {!readOnly && (\n <div className={styles.uploadButtonContainer}>\n <Button\n type=\"button\"\n sizeType=\"small\"\n styleType=\"secondary\"\n disabled={\n !!activeId \|\| disabled \|\| reachedMaxFiles()\n }\n onClick={handleUploadButtonClick}\n className={styles.uploadButton}\n >\n {labels.uploadButton}\n </Button>\n <Typography.BodyMD\n className={styles.uploadButtonText}\n weight=\"semibold\"\n >\n or drop them here\n </Typography.BodyMD>\n </div>\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","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"wmBAcO,MAAMA,EAAa,EACtBC,YAAY,WACZC,YACAC,QAAKC,YACLA,EACAC,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,IA+C1BC,EAAsBC,UACxB,QAAiBC,IAAb/B,EACA,OAAO8B,EAGX,MAAME,EAAsC,QAAjBC,EAAApC,aAAS,EAATA,EAAWqC,cAAM,IAAAD,EAAAA,EAAI,EAC1CE,EAAiBC,KAAKC,IAAIrC,EAAWgC,EAAoB,GAE/D,OAAOF,EAAMQ,MAAM,EAAGH,EAAe,EAGnCI,EAAkB,OACbvC,IAAYH,IAAYA,EAAUqC,QAAUlC,EA6CvD,OACIwC,EAACC,EAAkBC,SAAQ,CAACC,MAAO,CAAEjB,WAAUC,eAAaiB,SACxDC,EAACC,EAAkB,CACfC,IAAKxB,EACLP,SAvGUc,UAClB,MAAMkB,EAAiBnB,EAAmBC,IAErCrB,GAAYO,GAAYgC,EAAed,OAAS,IACjDlB,EAASgC,GACU,QAAnBf,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EAkGQ9C,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACT4C,OAAsB,aAAdvD,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAY8B,KAAqBzB,EAAQ8B,SAAA,IAE/C9C,IAASC,IACT8C,EAAA,MAAA,CAAK3C,UAAWkD,EAAoBR,SAAA,CAtD3C9C,EAIgB,iBAAVA,EACA0C,EAACa,EAAWC,OAAM,CAAAV,SAAE9C,IAI3B0C,EAACe,EAAM,CACHrD,UAAWsD,EACXC,aAAa,yBAEZ3D,IAZE,KAkBNC,EAIsB,iBAAhBA,EAEHyC,EAACa,EAAWK,OAAM,CAACxD,UAAWyD,EAAkBf,SAC3C7C,IAMTyC,EAACe,EAAM,CAACrD,UAAWsD,EAAwBC,aAAa,mBACnD1D,IAbE,UAuCAE,GACCuC,EAACoB,EAAK,CAAC1D,UAAW2D,EAAqBC,KAAK,UAASlB,SAChD3C,IAGTuC,EAACuB,EAAQ,CACLhB,IAAKtB,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVkD,aA5HUC,UAClBhD,IACAA,EAASgD,GACU,QAAnBhC,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EAyHYgB,aA3GUC,IAClBjD,GACAA,EAAOiD,EACX,EAyGYhD,OAtGIiD,IACZjD,GACAA,EAAOiD,EACX,IAqGSvD,GACG2B,EAACoB,EAAK,CAAC1D,UAAWmE,EAAmBP,KAAK,QAAOlB,SAC5C/B,KAGPC,GACE+B,EAAA,MAAA,CAAK3C,UAAWoE,EAA4B1B,SAAA,CACxCJ,EAAC+B,EAAM,CACHT,KAAK,SACLU,SAAS,QACT5E,UAAU,YACVa,WACMiB,GAAYjB,GAAY8B,IAE9BkC,QAtIpBC,IAEKjE,IACDiE,EAAMC,iBACFpD,EAAY0B,SACZ1B,EAAY0B,QAAQ2B,iBAE5B,EAgIoB1E,UAAW2E,EAAmBjC,SAE7BxB,EAAOC,eAEZmB,EAACa,EAAWK,OAAM,CACdxD,UAAW4E,EACXC,OAAO,WAAUnC,SAAA,6BAOR"}
1	+ {"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport * as styles from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\n/** Allows user to upload images via drag-and-drop or a native file dialog. */\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 const filesToProcess = limitIncomingFiles(files);\n\n if (!disabled && onChange && filesToProcess.length > 0) {\n onChange(filesToProcess);\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 limitIncomingFiles = (files: File[]) => {\n if (maxFiles === undefined) {\n return files;\n }\n\n const existingItemsCount = fileItems?.length ?? 0;\n const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n return files.slice(0, remainingSlots);\n };\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 <Typography.BodyBL>{title}</Typography.BodyBL>;\n }\n\n return (\n <Markup\n className={styles.markupContainer}\n baseTextSize=\"body-baseline\"\n >\n {title}\n </Markup>\n );\n };\n\n const renderDescription = () => {\n if (!description) {\n return null;\n }\n\n if (typeof description === \"string\") {\n return (\n <Typography.BodyMD className={styles.description}>\n {description}\n </Typography.BodyMD>\n );\n }\n\n return (\n <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n {description}\n </Markup>\n );\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 <div className={styles.textContainer}>\n {renderTitle()}\n {renderDescription()}\n </div>\n )}\n {!!warning && (\n <Alert className={styles.warningAlert} type=\"warning\">\n {warning}\n </Alert>\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 <Alert className={styles.errorAlert} type=\"error\">\n {errorMessage}\n </Alert>\n )}\n {!readOnly && (\n <div className={styles.uploadButtonContainer}>\n <Button\n type=\"button\"\n sizeType=\"small\"\n styleType=\"secondary\"\n disabled={\n !!activeId \|\| disabled \|\| reachedMaxFiles()\n }\n onClick={handleUploadButtonClick}\n className={styles.uploadButton}\n >\n {labels.uploadButton}\n </Button>\n <Typography.BodyMD\n className={styles.uploadButtonText}\n weight=\"semibold\"\n >\n or drop them here\n </Typography.BodyMD>\n </div>\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","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"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"}

package/file-upload/file-upload.styles_9ffwcd.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.t9vodht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--fds-spacing-32);gap:var(--fds-spacing-8);}
+@layer fds{.t9vodht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--fds-spacing-32);gap:var(--fds-spacing-8);}
 .m7vp3hf{color:var(--fds-colour-text);}
 .dhybrj2{color:var(--fds-colour-text-subtler);}
 .wq1el8u{margin-bottom:var(--fds-spacing-32);}
 .u723luu{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}:where(body.fds-breakpoint-md-max) .u723luu{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
 .u7dp799{width:10rem;}:where(body.fds-breakpoint-md-max) .u7dp799{width:100%;}
 .u1rz06ff{color:var(--fds-colour-text-subtler);margin-top:var(--fds-spacing-8);width:10rem;text-align:center;}:where(body.fds-breakpoint-md-max) .u1rz06ff{display:none;visibility:hidden;}
-.emjmrml{margin-bottom:var(--fds-spacing-32);}
+.emjmrml{margin-bottom:var(--fds-spacing-32);}}

package/file-upload/types.d.ts CHANGED Viewed

@@ -1,27 +1,55 @@
+import type { FormLabelProps } from "../form/types";
+/**
+ * Represents a single file entry managed by `FileUpload`.
+ */
 export interface FileItemProps {
+    /** Unique identifier used to target delete, edit, and sort operations. */
     id: string;
-    /** The name of the file */
+    /** The display name of the file */
     name: string;
-    /** The MIME type of the file */
+    /** The MIME type of the file (e.g. `"application/pdf"`). */
     type: string;
-    /** The size of the file in bytes */
+    /** The size of the file in bytes. Displayed as formatted text when provided. */
     size: number;
     /** The alt text or description of the file */
     description?: string | undefined;
-    /** The upload progress display. Values from 0 to 1 */
+    /**
+     * Upload progress expressed as a fraction between 0 and 1.
+     * When provided, a progress indicator is rendered on the file item.
+     */
     progress?: number | undefined;
-    /** The error message display to indicate file upload error */
+    /**
+     * Error message shown on the file item to indicate an upload failure.
+     * Accepts a plain string or a React node for richer error display.
+     */
     errorMessage?: string | React.ReactNode | undefined;
-    /** The thumbnail of the file that will be rendered */
+    /**
+     * URL or data URL for a thumbnail image shown alongside the file entry.
+     * When not provided, a PDF icon is displayed for PDF files only;
+     * other file types show no default icon.
+     */
     thumbnailImageDataUrl?: string | undefined;
-    /** Indicates if text should be truncated */
+    /** Truncates long file names with an ellipsis when `true`. */
     truncateText?: boolean | undefined;
 }
+/**
+ * Visual style variant for `FileUpload`.
+ *
+ * - `"bordered"` — renders a visible border around the component.
+ * - `"no-border"` — renders the component without a border.
+ */
 export type FileUploadStyle = "bordered" | "no-border";
+/**
+ * Native file-input props forwarded to the underlying `<input type="file">` element.
+ */
 export interface FileInputProps {
     /** Defines the file types that is accepted */
     accept?: string | undefined;
-    /** Specifies which camera to use for capture of image or video data  */
+    /**
+     * Specifies which camera to use for capture of image or video data
+     *
+     * @see https://www.w3.org/TR/html-media-capture/#the-capture-attribute
+     */
     capture?: boolean | "user" | "environment" | undefined;
     /** Specifies if user is allowed to select more than one file. */
     multiple?: boolean | undefined;
@@ -31,35 +59,112 @@ export interface FileInputProps {
     "data-testid"?: string | undefined;
     name?: string | undefined;
 }
+/** Props for the `FileUpload` component. */
 export interface FileUploadProps extends FileInputProps {
-    /** Component specific */
+    /**
+     * Heading rendered at the top of the component. Accepts a plain string or a JSX
+     * element for rich formatting.
+     */
     title?: string | JSX.Element | undefined;
+    /**
+     * Supporting text rendered below `title`. Accepts a plain string or a JSX
+     * element for rich formatting.
+     */
     description?: string | JSX.Element | undefined;
-    /** The style type for the component. Values "bordered" | "no-border" */
+    /**
+     * Visual style variant for the component.
+     *
+     * @default "bordered"
+     */
     styleType?: FileUploadStyle | undefined;
+    /**
+     * Maximum number of files the component will accept.
+     * Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.
+     */
     maxFiles?: number | undefined;
+    /**
+     * Warning message rendered inside the component. Accepts a plain string
+     * or a JSX element for rich formatting.
+     */
     warning?: string | JSX.Element | undefined;
+    /**
+     * Controlled list of file items displayed in the file list.
+     * Update this array in response to `onChange`, `onDelete`, `onEdit`, and
+     * `onSort` to reflect the current upload state.
+     */
     fileItems?: FileItemProps[] | undefined;
-    /** If set, file items will have editable descriptions (only image files) */
+    /**
+     * When `true`, image file items render an editable description field.
+     * Editing triggers `onEdit` with the updated `FileItemProps`.
+     *
+     * @default false
+     */
     editableFileItems?: boolean | undefined;
-    /** The max length of the description of the file (only image files) */
+    /**
+     * Character limit for the description input on editable image file items.
+     * Only applies when `editableFileItems` is `true`.
+     */
     fileDescriptionMaxLength?: number | undefined;
-    /** Specifies if sorting is enabled for the file items */
+    /**
+     * When `false`, the save button on an editable file item is enabled even
+     * when the description field is empty.
+     *
+     * @default true
+     */
+    descriptionRequired?: boolean | undefined;
+    /**
+     * Overrides the default label and subtext for the description input field
+     * on editable file items.
+     */
+    descriptionLabel?: FormLabelProps | undefined;
+    /**
+     * When `true`, file items can be reordered via drag-and-drop.
+     * The reordered list is emitted via `onSort`.
+     *
+     * @default false
+     */
     sortable?: boolean | undefined;
-    /** The general error message for the component */
+    /**
+     * General error message rendered below the file list.
+     * Accepts a plain string or a JSX element for rich formatting.
+     */
     errorMessage?: string | JSX.Element | undefined;
-    /** Indicates if the component is in the readonly state */
+    /**
+     * When `true`, the upload button and drop zone are hidden and file items
+     * are rendered without delete or edit controls.
+     */
     readOnly?: boolean | undefined;
-    /** Specify custom label text for elements within the component */
+    /**
+     * Overrides default label text for elements within the component.
+     * Currently supports `uploadButtonLabel` to replace the "Upload files" button text.
+     */
     customLabels?: {
         uploadButtonLabel?: string | undefined;
     } | undefined;
-    /** Called when an upload happens via drag drop or click */
+    /**
+     * Called with the newly uploaded files.
+     * Receives only the files that fit within the remaining `maxFiles` slots.
+     *
+     * @param files Array of `File` objects added by the user.
+     */
     onChange?: ((files: File[]) => void) | undefined;
-    /** Called when an update to the description happens */
+    /**
+     * Called when the user saves an edited description on a file item.
+     *
+     * @param fileItem The updated `FileItemProps` with the new description.
+     */
     onEdit?: ((fileItem: FileItemProps) => void) | undefined;
-    /** Called when a file item's delete button is clicked */
+    /**
+     * Called when the user clicks the delete button on a file item.
+     *
+     * @param fileItem The item to be removed.
+     */
     onDelete?: ((fileItem: FileItemProps) => void) | undefined;
-    /** Called when a drag sort is made */
+    /**
+     * Called after the user reorders file items via drag-and-drop.
+     * Only fired when `sortable` is `true`.
+     *
+     * @param fileItems The full reordered array of `FileItemProps`.
+     */
     onSort?: ((fileItems: FileItemProps[]) => void) | undefined;
 }

package/filter/addons/filter-item-checkbox.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./filter-item-checkbox.styles_18l87i2.css";const e={item:{level:"--fds-internal-filterItemCheckbox-item-level"}},t="f1m3a5f4",i="g11488am",l="g1nnu0tt",s="i4hhc1a",f="i7vabkq",c="i4eh8j6",h="c13wglju",m="twhh8xx",o="tb2fwos",a="sbvftpe";export{h as checkbox,t as filterItem,i as group,l as groupMobileToggleMode,s as item,f as itemHidden,c as itemSelected,a as selectAllButton,m as toggle,o as toggleHidden,e as tokens};
+import"./filter-item-checkbox.styles_7degw7.css";const e={item:{level:"--fds-internal-filterItemCheckbox-item-level"}},t="f1m3a5f4",i="g11488am",l="g1nnu0tt",s="i4hhc1a",f="i7vabkq",c="i4eh8j6",h="c13wglju",m="twhh8xx",o="tb2fwos",a="sbvftpe";export{h as checkbox,t as filterItem,i as group,l as groupMobileToggleMode,s as item,f as itemHidden,c as itemSelected,a as selectAllButton,m as toggle,o as toggleHidden,e as tokens};
 //# sourceMappingURL=filter-item-checkbox.styles.js.map

package/filter/addons/filter-item-checkbox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../src/filter/addons/filter-item-checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../../theme\";\n\nexport const tokens = {\n item: {\n level: \"--fds-internal-filterItemCheckbox-item-level\",\n },\n} as const;\n\nexport const filterItem = css`\n padding: 0 0 ${Spacing[\"spacing-16\"]};\n\n [data-id=\"content-container\"] {\n position: relative; // to get the item position relative to this parent\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]} 0;\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n ${Spacing[\"spacing-8\"]};\n }\n }\n\n [data-id=\"minimise-button\"] {\n margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]} 0;\n }\n`;\n\nexport const group = css`\n display: flex;\n flex-direction: column;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 0;\n }\n`;\n\nexport const groupMobileToggleMode = css`\n ${MediaQuery.MaxWidth.lg} {\n gap: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const item = css`\n ${tokens.item.level}: 0;\n\n display: flex;\n align-items: flex-start;\n\n position: relative;\n width: 100%;\n min-height: 1.5rem;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-12\"]};\n padding-left: calc(\n ${Spacing[\"spacing-12\"]} + var(${tokens.item.level}) \n ${Spacing[\"spacing-32\"]}\n );\n\n cursor: pointer;\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-8\"]};\n padding-left: calc(\n ${Spacing[\"spacing-8\"]} + var(${tokens.item.level}) \n ${Spacing[\"spacing-32\"]}\n );\n }\n`;\n\nexport const itemHidden = css`\n display: none;\n`;\n\nexport const itemSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const checkbox = css`\n flex-shrink: 0;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const toggle = css`\n min-width: 5rem;\n`;\n\nexport const toggleHidden = css`\n visibility: hidden;\n`;\n\nexport const selectAllButton = css`\n height: fit-content;\n padding: 0;\n margin: ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-8\"]}\n ${Spacing[\"spacing-12\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n margin: 0 0 ${Spacing[\"spacing-16\"]} 0;\n }\n`;\n"],"names":["tokens","item","level","filterItem","group","groupMobileToggleMode","itemHidden","itemSelected","checkbox","toggle","toggleHidden","selectAllButton"],"mappings":"~~+EAIO~~,MAAMA,EAAS,CAClBC,KAAM,CACFC,MAAO,iDAIFC,EAAU,WAkBVC,EAAK,WAWLC,EAAqB,WAMrBJ,EAAI,UA4BJK,EAAU,UAIVC,EAAY,UAIZC,EAAQ,WAKRC,EAAM,UAINC,EAAY,UAIZC,EAAe"}
1	+ {"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../src/filter/addons/filter-item-checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../../theme\";\n\nexport const tokens = {\n item: {\n level: \"--fds-internal-filterItemCheckbox-item-level\",\n },\n} as const;\n\nexport const filterItem = css`\n padding: 0 0 ${Spacing[\"spacing-16\"]};\n\n [data-id=\"content-container\"] {\n position: relative; // to get the item position relative to this parent\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]} 0;\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n ${Spacing[\"spacing-8\"]};\n }\n }\n\n [data-id=\"minimise-button\"] {\n margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]} 0;\n }\n`;\n\nexport const group = css`\n display: flex;\n flex-direction: column;\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 0;\n }\n`;\n\nexport const groupMobileToggleMode = css`\n ${MediaQuery.MaxWidth.lg} {\n gap: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const item = css`\n ${tokens.item.level}: 0;\n\n display: flex;\n align-items: flex-start;\n\n position: relative;\n width: 100%;\n min-height: 1.5rem;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-12\"]};\n padding-left: calc(\n ${Spacing[\"spacing-12\"]} + var(${tokens.item.level}) \n ${Spacing[\"spacing-32\"]}\n );\n\n cursor: pointer;\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding: ${Spacing[\"spacing-8\"]};\n padding-left: calc(\n ${Spacing[\"spacing-8\"]} + var(${tokens.item.level}) \n ${Spacing[\"spacing-32\"]}\n );\n }\n`;\n\nexport const itemHidden = css`\n display: none;\n`;\n\nexport const itemSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const checkbox = css`\n flex-shrink: 0;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const toggle = css`\n min-width: 5rem;\n`;\n\nexport const toggleHidden = css`\n visibility: hidden;\n`;\n\nexport const selectAllButton = css`\n height: fit-content;\n padding: 0;\n margin: ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-8\"]}\n ${Spacing[\"spacing-12\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n margin: 0 0 ${Spacing[\"spacing-16\"]} 0;\n }\n`;\n"],"names":["tokens","item","level","filterItem","group","groupMobileToggleMode","itemHidden","itemSelected","checkbox","toggle","toggleHidden","selectAllButton"],"mappings":"8EAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,MAAO,iDAIFC,EAAU,WAkBVC,EAAK,WAWLC,EAAqB,WAMrBJ,EAAI,UA4BJK,EAAU,UAIVC,EAAY,UAIZC,EAAQ,WAKRC,EAAM,UAINC,EAAY,UAIZC,EAAe"}

package/{cjs/filter/addons/filter-item-checkbox.styles_18l87i2.css → filter/addons/filter-item-checkbox.styles_7degw7.css} RENAMED Viewed

@@ -1,10 +1,10 @@
-.f1m3a5f4{padding:0 0 var(--fds-spacing-16);}.f1m3a5f4 [data-id="content-container"]{position:relative;padding:var(--fds-spacing-8) var(--fds-spacing-8) 0;}:where(body.fds-breakpoint-lg-max) .f1m3a5f4 [data-id="content-container"]{padding:var(--fds-spacing-16) var(--fds-spacing-20) var(--fds-spacing-8);}.f1m3a5f4 [data-id="minimise-button"]{margin:var(--fds-spacing-8) var(--fds-spacing-20) 0;}
+@layer fds{.f1m3a5f4{padding:0 0 var(--fds-spacing-16);}.f1m3a5f4 [data-id="content-container"]{position:relative;padding:var(--fds-spacing-8) var(--fds-spacing-8) 0;}:where(body.fds-breakpoint-lg-max) .f1m3a5f4 [data-id="content-container"]{padding:var(--fds-spacing-16) var(--fds-spacing-20) var(--fds-spacing-8);}.f1m3a5f4 [data-id="minimise-button"]{margin:var(--fds-spacing-8) var(--fds-spacing-20) 0;}
 .g11488am{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-lg-max) .g11488am{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:0;}
 :where(body.fds-breakpoint-lg-max) .g1nnu0tt{gap:var(--fds-spacing-16);}
 .i4hhc1a{--fds-internal-filterItemCheckbox-item-level:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;width:100%;min-height:1.5rem;padding:var(--fds-spacing-8) var(--fds-spacing-12);padding-left:calc(
         var(--fds-spacing-12) + var(--fds-internal-filterItemCheckbox-item-level) *
             var(--fds-spacing-32)
-    );cursor:pointer;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .i4hhc1a{padding:var(--fds-spacing-8);padding-left:calc(
+    );cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .i4hhc1a{padding:var(--fds-spacing-8);padding-left:calc(
             var(--fds-spacing-8) + var(--fds-internal-filterItemCheckbox-item-level) *
                 var(--fds-spacing-32)
         );}
@@ -13,4 +13,4 @@
 .c13wglju{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:var(--fds-spacing-8);}
 .twhh8xx{min-width:5rem;}
 .tb2fwos{visibility:hidden;}
-.sbvftpe{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;margin:var(--fds-spacing-16) 0 var(--fds-spacing-8) var(--fds-spacing-12);}:where(body.fds-breakpoint-lg-max) .sbvftpe{margin:0 0 var(--fds-spacing-16) 0;}
+.sbvftpe{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;margin:var(--fds-spacing-16) 0 var(--fds-spacing-8) var(--fds-spacing-12);}:where(body.fds-breakpoint-lg-max) .sbvftpe{margin:0 0 var(--fds-spacing-16) 0;}}