@flipdish/portal-library 8.5.6 → 8.6.0

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"@mui/material/Box/Box";import o from"@mui/material/Stack/Stack";import n from"@mui/material/styles/styled";import r from"@mui/material/Typography/Typography";import{TextField as l}from"../../../atoms/TextField/index.js";import a from"react-images-uploading";const d=n(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),p=n(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),c=n(r)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),m=n(r)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=n("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),C=n("form")({width:"100%",maxWidth:"400px"}),s=["jpg","jpeg","png","gif","bmp"],h=({selectedImage:i,onImageSelect:n,uploadingError:r,allowImageLinkUpload:h,imageLink:x,onImageLinkChange:f=()=>{},onUploadImageLink:u=()=>{}})=>{const b=e=>{e.preventDefault(),u(x)};return e(a,{acceptType:s,onChange:e=>{const t=e[0];t&&n(t)},value:i?[i]:[],children:({onImageUpload:n,dragProps:a})=>{const s=`Error occurred while uploading image: ${r?.message?r.message:""}`;return i?.dataURL?e(g,{src:i.dataURL}):t(d,{...a,children:[e(p,{children:t("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e("title",{children:"Upload icon"}),e("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),t(o,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e(c,{onClick:n,children:"Select an image"}),t(m,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",h&&" OR paste the image URL below"]}),h&&e(C,{"data-fd":"image-link-form",onSubmit:b,children:e(l,{fullWidth:!0,fdKey:"img-link",onChange:e=>f(e.target.value),placeholder:"Enter image URL",value:x})})]}),e(m,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e(m,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:r?s:""})]})}})};export{h as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"@mui/material/Box/Box";import o from"@mui/material/Stack/Stack";import n from"@mui/material/styles/styled";import r from"@mui/material/Typography/Typography";import{TextField as l}from"../../../atoms/TextField/index.js";import a from"react-images-uploading";const d=n(i)(({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}})),p=n(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),c=n(r)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),m=n(r)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=n("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),C=n("form")({width:"100%",maxWidth:"400px"}),s=["jpg","jpeg","png","gif","bmp"],h=({selectedImage:i,onImageSelect:n,uploadingError:r,allowImageLinkUpload:h,imageLink:x,onImageLinkChange:f=()=>{},onUploadImageLink:u=()=>{}})=>{const b=e=>{e.preventDefault(),u(x)};return e(a,{acceptType:s,onChange:e=>{const t=e[0];t&&n(t)},value:i?[i]:[],children:({onImageUpload:n,dragProps:a})=>{const s=`Error occurred while uploading image: ${r?.message?r.message:""}`;return i?.dataURL?e(g,{src:i.dataURL}):t(d,{...a,children:[e(p,{children:t("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e("title",{children:"Upload icon"}),e("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),t(o,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e(c,{onClick:n,children:"Select an image"}),t(m,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",h&&" OR paste the image URL below"]}),h&&e(C,{"data-fd":"image-link-form",onSubmit:b,children:e(l,{fullWidth:!0,fdKey:"img-link",onChange:e=>f(e.target.value),placeholder:"Enter image URL",value:x})})]}),e(m,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e(m,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:r?s:""})]})}})};export{h as default};
 //# sourceMappingURL=ImageDropZone.js.map

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDropZone.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport TextField from '@fd/components/atoms/TextField';\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)(({ theme }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: '12px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: '32px',\n  },\n}));\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n  textAlign: 'center',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\nconst StyledForm = styled('form')({\n  width: '100%',\n  maxWidth: '400px',\n});\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  allowImageLinkUpload: boolean;\n  imageLink: string;\n  onUploadImageLink?: (link: string) => void;\n  onImageLinkChange?: (link: string) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({\n  selectedImage,\n  onImageSelect,\n  uploadingError,\n  allowImageLinkUpload,\n  imageLink,\n  onImageLinkChange = (): void => {},\n  onUploadImageLink = (): void => {},\n}) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  const handleImageLinkUpload = (e: React.FormEvent): void => {\n    e.preventDefault();\n    onUploadImageLink(imageLink);\n  };\n\n  return (\n    <ReactImageUploading\n      acceptType={allowedFileTypes}\n      onChange={handleImageSelect}\n      value={selectedImage ? [selectedImage] : []}\n    >\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\" width=\"100%\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">\n                OR drop it here{allowImageLinkUpload && ' OR paste the image URL below'}\n              </StyledSecondaryText>\n              {allowImageLinkUpload && (\n                <StyledForm data-fd=\"image-link-form\" onSubmit={handleImageLinkUpload}>\n                  <TextField\n                    fullWidth\n                    fdKey=\"img-link\"\n                    onChange={(e) => onImageLinkChange(e.target.value)}\n                    placeholder=\"Enter image URL\"\n                    value={imageLink}\n                  />\n                </StyledForm>\n              )}\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">\n              Minimum dimensions: 1280 × 720 - up to 10 MB\n            </StyledSecondaryText>\n            <StyledSecondaryText\n              color=\"rgba(184, 0, 34, 0.80)\"\n              sx={(theme) => ({\n                overflowY: 'scroll',\n                height: '30px',\n                [theme.breakpoints.only('mobile')]: {\n                  height: '120px',\n                },\n              })}\n            >\n              {uploadingError ? uploadErrorMessage : ''}\n            </StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","theme","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","borderRadius","border","background","breakpoints","only","gap","StyledIconContainer","width","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","textAlign","StyledImageComponent","maxWidth","maxHeight","objectFit","StyledForm","allowedFileTypes","ImageDropZone","selectedImage","onImageSelect","uploadingError","allowImageLinkUpload","imageLink","onImageLinkChange","onUploadImageLink","handleImageLinkUpload","e","preventDefault","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick","onSubmit","TextField","fullWidth","fdKey","target","placeholder","sx","overflowY"],"mappings":"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"}
+{"version":3,"file":"ImageDropZone.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport TextField from '@fd/components/atoms/TextField';\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)(({ theme }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: '12px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: '32px',\n  },\n}));\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n  textAlign: 'center',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\nconst StyledForm = styled('form')({\n  width: '100%',\n  maxWidth: '400px',\n});\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  allowImageLinkUpload: boolean;\n  imageLink: string;\n  onUploadImageLink?: (link: string) => void;\n  onImageLinkChange?: (link: string) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({\n  selectedImage,\n  onImageSelect,\n  uploadingError,\n  allowImageLinkUpload,\n  imageLink,\n  onImageLinkChange = (): void => {},\n  onUploadImageLink = (): void => {},\n}) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  const handleImageLinkUpload = (e: React.FormEvent): void => {\n    e.preventDefault();\n    onUploadImageLink(imageLink);\n  };\n\n  return (\n    <ReactImageUploading\n      acceptType={allowedFileTypes}\n      onChange={handleImageSelect}\n      value={selectedImage ? [selectedImage] : []}\n    >\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\" width=\"100%\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">\n                OR drop it here{allowImageLinkUpload && ' OR paste the image URL below'}\n              </StyledSecondaryText>\n              {allowImageLinkUpload && (\n                <StyledForm data-fd=\"image-link-form\" onSubmit={handleImageLinkUpload}>\n                  <TextField\n                    fullWidth\n                    fdKey=\"img-link\"\n                    onChange={(e) => onImageLinkChange(e.target.value)}\n                    placeholder=\"Enter image URL\"\n                    value={imageLink}\n                  />\n                </StyledForm>\n              )}\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">\n              Minimum dimensions: 1280 × 720 - up to 10 MB\n            </StyledSecondaryText>\n            <StyledSecondaryText\n              color=\"rgba(184, 0, 34, 0.80)\"\n              sx={(theme) => ({\n                overflowY: 'scroll',\n                height: '30px',\n                [theme.breakpoints.only('mobile')]: {\n                  height: '120px',\n                },\n              })}\n            >\n              {uploadingError ? uploadErrorMessage : ''}\n            </StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","theme","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","borderRadius","border","background","breakpoints","only","gap","StyledIconContainer","width","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","textAlign","StyledImageComponent","maxWidth","maxHeight","objectFit","StyledForm","allowedFileTypes","ImageDropZone","selectedImage","onImageSelect","uploadingError","allowImageLinkUpload","imageLink","onImageLinkChange","onUploadImageLink","handleImageLinkUpload","e","preventDefault","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick","onSubmit","TextField","fullWidth","fdKey","target","placeholder","sx","overflowY"],"mappings":"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"}

package/dist/components/organisms/ImageUploadWidget/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("react"),n=require("@mui/material/Backdrop"),t=require("@mui/material/Box"),r=require("@mui/material/CircularProgress/CircularProgress"),a=require("@mui/material/Fade"),o=require("@mui/material/Modal"),s=require("@mui/material/Stack/Stack"),l=require("@mui/material/styles/styled"),d=require("@mui/material/Typography"),u=require("@mui/material/useMediaQuery"),c=require("../../atoms/Button/index.cjs.js");require("react-images-uploading");var m=require("./components/FlipdishFonts.cjs.js"),p=require("./components/ImageDisplay.cjs.js"),g=require("./components/ImageDropZone.cjs.js");const x=l(t)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),h=l(d)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"});module.exports=t=>{const{open:l,onClose:d,widgetTitle:j="Upload Image",imageUrl:b="",isCloudinaryAsset:y=!1,cdnCloudName:f,onUpload:C,onUploadImageLink:k,onRemove:w}=t,[v,q]=i.useState(null),[I,z]=i.useState(!1),[B,S]=i.useState(null),[K,F]=i.useState(""),U=u((e=>e.breakpoints.up("tablet"))),L=()=>{q(null),d()},R=async()=>{z(!0),S(null);try{v?.file?await C(v.file):K&&k&&await k(K)}catch(e){e instanceof Error&&S(e)}finally{z(!1),q(null),F("")}};return e.jsxs(e.Fragment,{children:[e.jsx(m,{}),e.jsx(o,{closeAfterTransition:!0,"data-fd":"image-upload-widget",disableEscapeKeyDown:!0,open:l,slotProps:{backdrop:{timeout:500}},slots:{backdrop:n},children:e.jsx(a,{in:l,children:e.jsxs(x,{children:[e.jsx(h,{children:j}),e.jsx(s,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:b?e.jsx(p,{cdnCloudName:f,isCloudinaryAsset:y,src:b}):e.jsx(g,{allowImageLinkUpload:!!k,imageLink:K,onImageLinkChange:e=>F(e),onImageSelect:e=>q(e),onUploadImageLink:()=>{R()},selectedImage:v,uploadingError:B})}),U?e.jsxs(s,{direction:"row",gap:"2px",justifyContent:"space-between",children:[e.jsx(s,{direction:"row",children:!!v&&e.jsx(c.Button,{fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e.jsxs(s,{direction:"row",gap:"16px",justifyContent:"space-between",children:[e.jsx(c.Button,{fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),b?e.jsx(c.Button,{fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"})]})]}):e.jsxs(s,{direction:"column",gap:e=>e.spacing(1),children:[b?e.jsx(c.Button,{fullWidth:!0,fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{fullWidth:!0,disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"}),!!v&&e.jsx(c.Button,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),e.jsx(c.Button,{fullWidth:!0,fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),n=require("@mui/material/Backdrop"),t=require("@mui/material/Box"),r=require("@mui/material/CircularProgress/CircularProgress"),a=require("@mui/material/Fade"),o=require("@mui/material/Modal"),s=require("@mui/material/Stack/Stack"),l=require("@mui/material/styles/styled"),d=require("@mui/material/Typography"),u=require("@mui/material/useMediaQuery"),c=require("../../atoms/Button/index.cjs.js");require("react-images-uploading");var m=require("./components/FlipdishFonts.cjs.js"),p=require("./components/ImageDisplay.cjs.js"),g=require("./components/ImageDropZone.cjs.js");const x=l(t)(({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}})),h=l(d)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"});module.exports=t=>{const{open:l,onClose:d,widgetTitle:j="Upload Image",imageUrl:b="",isCloudinaryAsset:y=!1,cdnCloudName:f,onUpload:C,onUploadImageLink:k,onRemove:w}=t,[v,q]=i.useState(null),[I,z]=i.useState(!1),[B,S]=i.useState(null),[K,F]=i.useState(""),U=u(e=>e.breakpoints.up("tablet")),L=()=>{q(null),d()},R=async()=>{z(!0),S(null);try{v?.file?await C(v.file):K&&k&&await k(K)}catch(e){e instanceof Error&&S(e)}finally{z(!1),q(null),F("")}};return e.jsxs(e.Fragment,{children:[e.jsx(m,{}),e.jsx(o,{closeAfterTransition:!0,"data-fd":"image-upload-widget",disableEscapeKeyDown:!0,open:l,slotProps:{backdrop:{timeout:500}},slots:{backdrop:n},children:e.jsx(a,{in:l,children:e.jsxs(x,{children:[e.jsx(h,{children:j}),e.jsx(s,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:b?e.jsx(p,{cdnCloudName:f,isCloudinaryAsset:y,src:b}):e.jsx(g,{allowImageLinkUpload:!!k,imageLink:K,onImageLinkChange:e=>F(e),onImageSelect:e=>q(e),onUploadImageLink:()=>{R()},selectedImage:v,uploadingError:B})}),U?e.jsxs(s,{direction:"row",gap:"2px",justifyContent:"space-between",children:[e.jsx(s,{direction:"row",children:!!v&&e.jsx(c.Button,{fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e.jsxs(s,{direction:"row",gap:"16px",justifyContent:"space-between",children:[e.jsx(c.Button,{fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),b?e.jsx(c.Button,{fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"})]})]}):e.jsxs(s,{direction:"column",gap:e=>e.spacing(1),children:[b?e.jsx(c.Button,{fullWidth:!0,fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{fullWidth:!0,disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"}),!!v&&e.jsx(c.Button,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),e.jsx(c.Button,{fullWidth:!0,fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/ImageUploadWidget/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const {\n    open,\n    onClose,\n    widgetTitle = 'Upload Image',\n    imageUrl = '',\n    isCloudinaryAsset = false,\n    cdnCloudName,\n    onUpload,\n    onUploadImageLink,\n    onRemove,\n  } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap=\"2px\" justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && (\n              <Button\n                fdKey=\"img-change-button\"\n                onClick={() => setSelectedImage(null)}\n                size=\"medium\"\n                tone=\"brand\"\n                variant=\"secondary\"\n              >\n                Change\n              </Button>\n            )}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button\n              fdKey=\"img-close-btn\"\n              onClick={handleClose}\n              size=\"medium\"\n              tone=\"neutral\"\n              variant=\"secondary\"\n            >\n              Close\n            </Button>\n            {imageUrl ? (\n              <Button\n                fdKey=\"img-remove-btn\"\n                onClick={onRemove}\n                size=\"medium\"\n                tone=\"destructive\"\n                variant=\"secondary\"\n              >\n                Remove\n              </Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={\n                  uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n                }\n                fdKey=\"img-upload-btn\"\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      );\n    }\n    return (\n      <Stack direction=\"column\" gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button\n            fullWidth\n            fdKey=\"img-remove-btn\"\n            onClick={onRemove}\n            size=\"medium\"\n            tone=\"destructive\"\n            variant=\"secondary\"\n          >\n            Remove\n          </Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey=\"img-upload-btn\"\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && (\n          <Button\n            fullWidth\n            fdKey=\"img-change-button\"\n            onClick={() => setSelectedImage(null)}\n            size=\"medium\"\n            tone=\"brand\"\n            variant=\"secondary\"\n          >\n            Change\n          </Button>\n        )}\n        <Button\n          fullWidth\n          fdKey=\"img-close-btn\"\n          onClick={handleClose}\n          size=\"medium\"\n          tone=\"neutral\"\n          variant=\"secondary\"\n        >\n          Close\n        </Button>\n      </Stack>\n    );\n  };\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-fd=\"image-upload-widget\"\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack\n              alignItems=\"center\"\n              direction=\"row\"\n              flex={1}\n              height={'calc(100% - 300px)'}\n              justifyContent=\"center\"\n            >\n              {imageUrl ? (\n                <ImageDisplay\n                  cdnCloudName={cdnCloudName}\n                  isCloudinaryAsset={isCloudinaryAsset}\n                  src={imageUrl}\n                />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const {\n    open,\n    onClose,\n    widgetTitle = 'Upload Image',\n    imageUrl = '',\n    isCloudinaryAsset = false,\n    cdnCloudName,\n    onUpload,\n    onUploadImageLink,\n    onRemove,\n  } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap=\"2px\" justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && (\n              <Button\n                fdKey=\"img-change-button\"\n                onClick={() => setSelectedImage(null)}\n                size=\"medium\"\n                tone=\"brand\"\n                variant=\"secondary\"\n              >\n                Change\n              </Button>\n            )}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button\n              fdKey=\"img-close-btn\"\n              onClick={handleClose}\n              size=\"medium\"\n              tone=\"neutral\"\n              variant=\"secondary\"\n            >\n              Close\n            </Button>\n            {imageUrl ? (\n              <Button\n                fdKey=\"img-remove-btn\"\n                onClick={onRemove}\n                size=\"medium\"\n                tone=\"destructive\"\n                variant=\"secondary\"\n              >\n                Remove\n              </Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={\n                  uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n                }\n                fdKey=\"img-upload-btn\"\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      );\n    }\n    return (\n      <Stack direction=\"column\" gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button\n            fullWidth\n            fdKey=\"img-remove-btn\"\n            onClick={onRemove}\n            size=\"medium\"\n            tone=\"destructive\"\n            variant=\"secondary\"\n          >\n            Remove\n          </Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey=\"img-upload-btn\"\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && (\n          <Button\n            fullWidth\n            fdKey=\"img-change-button\"\n            onClick={() => setSelectedImage(null)}\n            size=\"medium\"\n            tone=\"brand\"\n            variant=\"secondary\"\n          >\n            Change\n          </Button>\n        )}\n        <Button\n          fullWidth\n          fdKey=\"img-close-btn\"\n          onClick={handleClose}\n          size=\"medium\"\n          tone=\"neutral\"\n          variant=\"secondary\"\n        >\n          Close\n        </Button>\n      </Stack>\n    );\n  };\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-fd=\"image-upload-widget\"\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack\n              alignItems=\"center\"\n              direction=\"row\"\n              flex={1}\n              height={'calc(100% - 300px)'}\n              justifyContent=\"center\"\n            >\n              {imageUrl ? (\n                <ImageDisplay\n                  cdnCloudName={cdnCloudName}\n                  isCloudinaryAsset={isCloudinaryAsset}\n                  src={imageUrl}\n                />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}

package/dist/components/organisms/ImageUploadWidget/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import r from"@mui/material/Backdrop";import t from"@mui/material/Box";import a from"@mui/material/CircularProgress/CircularProgress";import l from"@mui/material/Fade";import d from"@mui/material/Modal";import m from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import c from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import{Button as u}from"../../atoms/Button/index.js";import"react-images-uploading";import g from"./components/FlipdishFonts.js";import h from"./components/ImageDisplay.js";import f from"./components/ImageDropZone.js";const b=s(t)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),y=s(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),x=t=>{const{open:s,onClose:c,widgetTitle:x="Upload Image",imageUrl:C="",isCloudinaryAsset:k=!1,cdnCloudName:w,onUpload:v,onUploadImageLink:I,onRemove:z}=t,[j,K]=n(null),[U,F]=n(!1),[S,L]=n(null),[R,W]=n(""),D=p((e=>e.breakpoints.up("tablet"))),A=()=>{K(null),c()},B=async()=>{F(!0),L(null);try{j?.file?await v(j.file):R&&I&&await I(R)}catch(e){e instanceof Error&&L(e)}finally{F(!1),K(null),W("")}};return e(i,{children:[o(g,{}),o(d,{closeAfterTransition:!0,"data-fd":"image-upload-widget",disableEscapeKeyDown:!0,open:s,slotProps:{backdrop:{timeout:500}},slots:{backdrop:r},children:o(l,{in:s,children:e(b,{children:[o(y,{children:x}),o(m,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:C?o(h,{cdnCloudName:w,isCloudinaryAsset:k,src:C}):o(f,{allowImageLinkUpload:!!I,imageLink:R,onImageLinkChange:e=>W(e),onImageSelect:e=>K(e),onUploadImageLink:()=>{B()},selectedImage:j,uploadingError:S})}),e(m,D?{direction:"row",gap:"2px",justifyContent:"space-between",children:[o(m,{direction:"row",children:!!j&&o(u,{fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e(m,{direction:"row",gap:"16px",justifyContent:"space-between",children:[o(u,{fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),o(u,C?{fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"})]})]}:{direction:"column",gap:e=>e.spacing(1),children:[o(u,C?{fullWidth:!0,fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{fullWidth:!0,disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"}),!!j&&o(u,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),o(u,{fullWidth:!0,fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};export{x as default};
+import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import r from"@mui/material/Backdrop";import t from"@mui/material/Box";import a from"@mui/material/CircularProgress/CircularProgress";import l from"@mui/material/Fade";import d from"@mui/material/Modal";import m from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import c from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import{Button as u}from"../../atoms/Button/index.js";import"react-images-uploading";import g from"./components/FlipdishFonts.js";import h from"./components/ImageDisplay.js";import f from"./components/ImageDropZone.js";const b=s(t)(({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}})),y=s(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),x=t=>{const{open:s,onClose:c,widgetTitle:x="Upload Image",imageUrl:C="",isCloudinaryAsset:k=!1,cdnCloudName:w,onUpload:v,onUploadImageLink:I,onRemove:z}=t,[j,K]=n(null),[U,F]=n(!1),[S,L]=n(null),[R,W]=n(""),D=p(e=>e.breakpoints.up("tablet")),A=()=>{K(null),c()},B=async()=>{F(!0),L(null);try{j?.file?await v(j.file):R&&I&&await I(R)}catch(e){e instanceof Error&&L(e)}finally{F(!1),K(null),W("")}};return e(i,{children:[o(g,{}),o(d,{closeAfterTransition:!0,"data-fd":"image-upload-widget",disableEscapeKeyDown:!0,open:s,slotProps:{backdrop:{timeout:500}},slots:{backdrop:r},children:o(l,{in:s,children:e(b,{children:[o(y,{children:x}),o(m,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:C?o(h,{cdnCloudName:w,isCloudinaryAsset:k,src:C}):o(f,{allowImageLinkUpload:!!I,imageLink:R,onImageLinkChange:e=>W(e),onImageSelect:e=>K(e),onUploadImageLink:()=>{B()},selectedImage:j,uploadingError:S})}),e(m,D?{direction:"row",gap:"2px",justifyContent:"space-between",children:[o(m,{direction:"row",children:!!j&&o(u,{fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e(m,{direction:"row",gap:"16px",justifyContent:"space-between",children:[o(u,{fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),o(u,C?{fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"})]})]}:{direction:"column",gap:e=>e.spacing(1),children:[o(u,C?{fullWidth:!0,fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{fullWidth:!0,disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"}),!!j&&o(u,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),o(u,{fullWidth:!0,fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};export{x as default};
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/ImageUploadWidget/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const {\n    open,\n    onClose,\n    widgetTitle = 'Upload Image',\n    imageUrl = '',\n    isCloudinaryAsset = false,\n    cdnCloudName,\n    onUpload,\n    onUploadImageLink,\n    onRemove,\n  } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap=\"2px\" justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && (\n              <Button\n                fdKey=\"img-change-button\"\n                onClick={() => setSelectedImage(null)}\n                size=\"medium\"\n                tone=\"brand\"\n                variant=\"secondary\"\n              >\n                Change\n              </Button>\n            )}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button\n              fdKey=\"img-close-btn\"\n              onClick={handleClose}\n              size=\"medium\"\n              tone=\"neutral\"\n              variant=\"secondary\"\n            >\n              Close\n            </Button>\n            {imageUrl ? (\n              <Button\n                fdKey=\"img-remove-btn\"\n                onClick={onRemove}\n                size=\"medium\"\n                tone=\"destructive\"\n                variant=\"secondary\"\n              >\n                Remove\n              </Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={\n                  uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n                }\n                fdKey=\"img-upload-btn\"\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      );\n    }\n    return (\n      <Stack direction=\"column\" gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button\n            fullWidth\n            fdKey=\"img-remove-btn\"\n            onClick={onRemove}\n            size=\"medium\"\n            tone=\"destructive\"\n            variant=\"secondary\"\n          >\n            Remove\n          </Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey=\"img-upload-btn\"\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && (\n          <Button\n            fullWidth\n            fdKey=\"img-change-button\"\n            onClick={() => setSelectedImage(null)}\n            size=\"medium\"\n            tone=\"brand\"\n            variant=\"secondary\"\n          >\n            Change\n          </Button>\n        )}\n        <Button\n          fullWidth\n          fdKey=\"img-close-btn\"\n          onClick={handleClose}\n          size=\"medium\"\n          tone=\"neutral\"\n          variant=\"secondary\"\n        >\n          Close\n        </Button>\n      </Stack>\n    );\n  };\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-fd=\"image-upload-widget\"\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack\n              alignItems=\"center\"\n              direction=\"row\"\n              flex={1}\n              height={'calc(100% - 300px)'}\n              justifyContent=\"center\"\n            >\n              {imageUrl ? (\n                <ImageDisplay\n                  cdnCloudName={cdnCloudName}\n                  isCloudinaryAsset={isCloudinaryAsset}\n                  src={imageUrl}\n                />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","ImageUploadWidget","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const {\n    open,\n    onClose,\n    widgetTitle = 'Upload Image',\n    imageUrl = '',\n    isCloudinaryAsset = false,\n    cdnCloudName,\n    onUpload,\n    onUploadImageLink,\n    onRemove,\n  } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap=\"2px\" justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && (\n              <Button\n                fdKey=\"img-change-button\"\n                onClick={() => setSelectedImage(null)}\n                size=\"medium\"\n                tone=\"brand\"\n                variant=\"secondary\"\n              >\n                Change\n              </Button>\n            )}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button\n              fdKey=\"img-close-btn\"\n              onClick={handleClose}\n              size=\"medium\"\n              tone=\"neutral\"\n              variant=\"secondary\"\n            >\n              Close\n            </Button>\n            {imageUrl ? (\n              <Button\n                fdKey=\"img-remove-btn\"\n                onClick={onRemove}\n                size=\"medium\"\n                tone=\"destructive\"\n                variant=\"secondary\"\n              >\n                Remove\n              </Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={\n                  uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n                }\n                fdKey=\"img-upload-btn\"\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      );\n    }\n    return (\n      <Stack direction=\"column\" gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button\n            fullWidth\n            fdKey=\"img-remove-btn\"\n            onClick={onRemove}\n            size=\"medium\"\n            tone=\"destructive\"\n            variant=\"secondary\"\n          >\n            Remove\n          </Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey=\"img-upload-btn\"\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && (\n          <Button\n            fullWidth\n            fdKey=\"img-change-button\"\n            onClick={() => setSelectedImage(null)}\n            size=\"medium\"\n            tone=\"brand\"\n            variant=\"secondary\"\n          >\n            Change\n          </Button>\n        )}\n        <Button\n          fullWidth\n          fdKey=\"img-close-btn\"\n          onClick={handleClose}\n          size=\"medium\"\n          tone=\"neutral\"\n          variant=\"secondary\"\n        >\n          Close\n        </Button>\n      </Stack>\n    );\n  };\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-fd=\"image-upload-widget\"\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack\n              alignItems=\"center\"\n              direction=\"row\"\n              flex={1}\n              height={'calc(100% - 300px)'}\n              justifyContent=\"center\"\n            >\n              {imageUrl ? (\n                <ImageDisplay\n                  cdnCloudName={cdnCloudName}\n                  isCloudinaryAsset={isCloudinaryAsset}\n                  src={imageUrl}\n                />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","ImageUploadWidget","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}

package/dist/components/organisms/SummaryList/components/SummaryListCell.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Box/Box"),r=require("@mui/material/styles/styled"),i=require("@mui/material/TableCell/TableCell"),l=require("@mui/material/Typography");const a=r(i)((()=>({padding:0}))),n=r(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),s=r(l)((({theme:e})=>({color:e.palette.semantic.text["text-strong"]}))),o=r(t,{shouldForwardProp:e=>"isColumn"!==e})((({theme:e,isColumn:t})=>({display:"flex",flexDirection:t?"column":"row",height:"80px",paddingRight:e.spacing(3),alignItems:t?"flex-start":"center",justifyContent:t?"center":"flex-start",gap:0,flexShrink:0})));module.exports=({type:t,title:r,description:i})=>e.jsx(a,{children:(()=>{switch(t){case"Term":return e.jsx(o,{children:e.jsx(s,{variant:"body1",children:r})});case"Description":return e.jsx(o,{children:e.jsx(n,{variant:"body1",children:i})});case"SecondaryText":return e.jsxs(o,{isColumn:!0,children:[e.jsx(s,{variant:"body1",children:r}),e.jsx(n,{variant:"body1",children:i})]});default:return null}})()});
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Box/Box"),r=require("@mui/material/styles/styled"),i=require("@mui/material/TableCell/TableCell"),l=require("@mui/material/Typography");const a=r(i)(()=>({padding:0})),n=r(l)(({theme:e})=>({color:e.palette.semantic.text["text-weak"]})),s=r(l)(({theme:e})=>({color:e.palette.semantic.text["text-strong"]})),o=r(t,{shouldForwardProp:e=>"isColumn"!==e})(({theme:e,isColumn:t})=>({display:"flex",flexDirection:t?"column":"row",height:"80px",paddingRight:e.spacing(3),alignItems:t?"flex-start":"center",justifyContent:t?"center":"flex-start",gap:0,flexShrink:0}));module.exports=({type:t,title:r,description:i})=>e.jsx(a,{children:(()=>{switch(t){case"Term":return e.jsx(o,{children:e.jsx(s,{variant:"body1",children:r})});case"Description":return e.jsx(o,{children:e.jsx(n,{variant:"body1",children:i})});case"SecondaryText":return e.jsxs(o,{isColumn:!0,children:[e.jsx(s,{variant:"body1",children:r}),e.jsx(n,{variant:"body1",children:i})]});default:return null}})()});
 //# sourceMappingURL=SummaryListCell.cjs.js.map

package/dist/components/organisms/SummaryList/components/SummaryListCell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryListCell.cjs.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport TableCell from '@mui/material/TableCell/TableCell';\n\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the SummaryListColumnItem component.\n * Supports three display types: Term (title only), Description (description only), and SecondaryText (title with description).\n */\nexport type SummaryListColumnItemProps =\n  | { type: 'Description'; description: string; title?: never }\n  | { type: 'SecondaryText'; title: string; description: string }\n  | { type: 'Term'; title: string; description?: never };\n\nconst StyledCell = styled(TableCell)(() => ({\n  padding: 0,\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledLeftLayoutContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isColumn',\n})<{ isColumn?: boolean }>(({ theme, isColumn }) => ({\n  display: 'flex',\n  flexDirection: isColumn ? 'column' : 'row',\n  height: '80px',\n  paddingRight: theme.spacing(3),\n  alignItems: isColumn ? 'flex-start' : 'center',\n  justifyContent: isColumn ? 'center' : 'flex-start',\n  gap: 0,\n  flexShrink: 0,\n}));\n\n/**\n * A cell component for the SummaryList that renders different content types.\n * Supports three variants: Term (title only), Description (description only), and SecondaryText (title with description).\n *\n * @param props - The component props\n * @returns The rendered cell component\n */\nconst SummaryListColumnItem: React.FC<SummaryListColumnItemProps> = ({ type, title, description }) => {\n  /**\n   * Returns the appropriate content based on the cell type.\n   * Renders different layouts for Term, Description, and SecondaryText types.\n   *\n   * @returns The rendered content node for the cell\n   */\n  const getContent = (): React.ReactNode => {\n    switch (type) {\n      case 'Term':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n          </StyledLeftLayoutContainer>\n        );\n      case 'Description':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      case 'SecondaryText':\n        return (\n          <StyledLeftLayoutContainer isColumn>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      default:\n        return null;\n    }\n  };\n  return <StyledCell>{getContent()}</StyledCell>;\n};\nexport default SummaryListColumnItem;\n"],"names":["StyledCell","styled","TableCell","padding","StyledDescription","Typography","theme","color","palette","semantic","text","StyledTitle","StyledLeftLayoutContainer","Box","shouldForwardProp","prop","isColumn","display","flexDirection","height","paddingRight","spacing","alignItems","justifyContent","gap","flexShrink","type","title","description","_jsx","children","variant","_jsxs","getContent"],"mappings":"iNAeA,MAAMA,EAAaC,EAAOC,EAAPD,EAAkB,KAAA,CACnCE,QAAS,MAGLC,EAAoBH,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CACrDC,MAAOD,EAAME,QAAQC,SAASC,KAAK,iBAG/BC,EAAcV,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CAC/CC,MAAOD,EAAME,QAAQC,SAASC,KAAK,mBAG/BE,EAA4BX,EAAOY,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGd,EAEP,EAAGK,QAAOU,eAAU,CAC7CC,QAAS,OACTC,cAAeF,EAAW,SAAW,MACrCG,OAAQ,OACRC,aAAcd,EAAMe,QAAQ,GAC5BC,WAAYN,EAAW,aAAe,SACtCO,eAAgBP,EAAW,SAAW,aACtCQ,IAAK,EACLC,WAAY,qBAUsD,EAAGC,OAAMC,QAAOC,iBAgC3EC,EAAAA,IAAC7B,EAAU,CAAA8B,SAzBC,MACjB,OAAQJ,GACN,IAAK,OACH,OACEG,MAACjB,EAAyB,CAAAkB,SACxBD,EAAAA,IAAClB,EAAW,CAACoB,QAAQ,QAAOD,SAAEH,MAGpC,IAAK,cACH,OACEE,MAACjB,EAAyB,CAAAkB,SACxBD,EAAAA,IAACzB,EAAiB,CAAC2B,QAAQ,QAAOD,SAAEF,MAG1C,IAAK,gBACH,OACEI,OAACpB,EAAyB,CAACI,UAAQ,EAAAc,SAAA,CACjCD,MAAClB,EAAW,CAACoB,QAAQ,QAAOD,SAAEH,IAC9BE,MAACzB,EAAiB,CAAC2B,QAAQ,QAAOD,SAAEF,OAG1C,QACE,OAAO,OAGOK"}
+{"version":3,"file":"SummaryListCell.cjs.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport TableCell from '@mui/material/TableCell/TableCell';\n\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the SummaryListColumnItem component.\n * Supports three display types: Term (title only), Description (description only), and SecondaryText (title with description).\n */\nexport type SummaryListColumnItemProps =\n  | { type: 'Description'; description: string; title?: never }\n  | { type: 'SecondaryText'; title: string; description: string }\n  | { type: 'Term'; title: string; description?: never };\n\nconst StyledCell = styled(TableCell)(() => ({\n  padding: 0,\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledLeftLayoutContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isColumn',\n})<{ isColumn?: boolean }>(({ theme, isColumn }) => ({\n  display: 'flex',\n  flexDirection: isColumn ? 'column' : 'row',\n  height: '80px',\n  paddingRight: theme.spacing(3),\n  alignItems: isColumn ? 'flex-start' : 'center',\n  justifyContent: isColumn ? 'center' : 'flex-start',\n  gap: 0,\n  flexShrink: 0,\n}));\n\n/**\n * A cell component for the SummaryList that renders different content types.\n * Supports three variants: Term (title only), Description (description only), and SecondaryText (title with description).\n *\n * @param props - The component props\n * @returns The rendered cell component\n */\nconst SummaryListColumnItem: React.FC<SummaryListColumnItemProps> = ({ type, title, description }) => {\n  /**\n   * Returns the appropriate content based on the cell type.\n   * Renders different layouts for Term, Description, and SecondaryText types.\n   *\n   * @returns The rendered content node for the cell\n   */\n  const getContent = (): React.ReactNode => {\n    switch (type) {\n      case 'Term':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n          </StyledLeftLayoutContainer>\n        );\n      case 'Description':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      case 'SecondaryText':\n        return (\n          <StyledLeftLayoutContainer isColumn>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      default:\n        return null;\n    }\n  };\n  return <StyledCell>{getContent()}</StyledCell>;\n};\nexport default SummaryListColumnItem;\n"],"names":["StyledCell","styled","TableCell","padding","StyledDescription","Typography","theme","color","palette","semantic","text","StyledTitle","StyledLeftLayoutContainer","Box","shouldForwardProp","prop","isColumn","display","flexDirection","height","paddingRight","spacing","alignItems","justifyContent","gap","flexShrink","type","title","description","_jsx","children","variant","_jsxs","getContent"],"mappings":"iNAeA,MAAMA,EAAaC,EAAOC,EAAPD,CAAkB,KAAA,CACnCE,QAAS,KAGLC,EAAoBH,EAAOI,EAAPJ,CAAmB,EAAGK,YAAO,CACrDC,MAAOD,EAAME,QAAQC,SAASC,KAAK,gBAG/BC,EAAcV,EAAOI,EAAPJ,CAAmB,EAAGK,YAAO,CAC/CC,MAAOD,EAAME,QAAQC,SAASC,KAAK,kBAG/BE,EAA4BX,EAAOY,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGd,CAEP,EAAGK,QAAOU,eAAU,CAC7CC,QAAS,OACTC,cAAeF,EAAW,SAAW,MACrCG,OAAQ,OACRC,aAAcd,EAAMe,QAAQ,GAC5BC,WAAYN,EAAW,aAAe,SACtCO,eAAgBP,EAAW,SAAW,aACtCQ,IAAK,EACLC,WAAY,oBAUsD,EAAGC,OAAMC,QAAOC,iBAgC3EC,EAAAA,IAAC7B,EAAU,CAAA8B,SAzBC,MACjB,OAAQJ,GACN,IAAK,OACH,OACEG,MAACjB,EAAyB,CAAAkB,SACxBD,EAAAA,IAAClB,EAAW,CAACoB,QAAQ,QAAOD,SAAEH,MAGpC,IAAK,cACH,OACEE,MAACjB,EAAyB,CAAAkB,SACxBD,EAAAA,IAACzB,EAAiB,CAAC2B,QAAQ,QAAOD,SAAEF,MAG1C,IAAK,gBACH,OACEI,OAACpB,EAAyB,CAACI,UAAQ,EAAAc,SAAA,CACjCD,MAAClB,EAAW,CAACoB,QAAQ,QAAOD,SAAEH,IAC9BE,MAACzB,EAAiB,CAAC2B,QAAQ,QAAOD,SAAEF,OAG1C,QACE,OAAO,OAGOK"}

package/dist/components/organisms/SummaryList/components/SummaryListCell.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"@mui/material/Box/Box";import i from"@mui/material/styles/styled";import a from"@mui/material/TableCell/TableCell";import l from"@mui/material/Typography";const n=i(a)((()=>({padding:0}))),o=i(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),m=i(l)((({theme:e})=>({color:e.palette.semantic.text["text-strong"]}))),c=i(r,{shouldForwardProp:e=>"isColumn"!==e})((({theme:e,isColumn:t})=>({display:"flex",flexDirection:t?"column":"row",height:"80px",paddingRight:e.spacing(3),alignItems:t?"flex-start":"center",justifyContent:t?"center":"flex-start",gap:0,flexShrink:0}))),s=({type:r,title:i,description:a})=>e(n,{children:(()=>{switch(r){case"Term":return e(c,{children:e(m,{variant:"body1",children:i})});case"Description":return e(c,{children:e(o,{variant:"body1",children:a})});case"SecondaryText":return t(c,{isColumn:!0,children:[e(m,{variant:"body1",children:i}),e(o,{variant:"body1",children:a})]});default:return null}})()});export{s as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"@mui/material/Box/Box";import i from"@mui/material/styles/styled";import a from"@mui/material/TableCell/TableCell";import l from"@mui/material/Typography";const n=i(a)(()=>({padding:0})),o=i(l)(({theme:e})=>({color:e.palette.semantic.text["text-weak"]})),m=i(l)(({theme:e})=>({color:e.palette.semantic.text["text-strong"]})),c=i(r,{shouldForwardProp:e=>"isColumn"!==e})(({theme:e,isColumn:t})=>({display:"flex",flexDirection:t?"column":"row",height:"80px",paddingRight:e.spacing(3),alignItems:t?"flex-start":"center",justifyContent:t?"center":"flex-start",gap:0,flexShrink:0})),s=({type:r,title:i,description:a})=>e(n,{children:(()=>{switch(r){case"Term":return e(c,{children:e(m,{variant:"body1",children:i})});case"Description":return e(c,{children:e(o,{variant:"body1",children:a})});case"SecondaryText":return t(c,{isColumn:!0,children:[e(m,{variant:"body1",children:i}),e(o,{variant:"body1",children:a})]});default:return null}})()});export{s as default};
 //# sourceMappingURL=SummaryListCell.js.map

package/dist/components/organisms/SummaryList/components/SummaryListCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryListCell.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport TableCell from '@mui/material/TableCell/TableCell';\n\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the SummaryListColumnItem component.\n * Supports three display types: Term (title only), Description (description only), and SecondaryText (title with description).\n */\nexport type SummaryListColumnItemProps =\n  | { type: 'Description'; description: string; title?: never }\n  | { type: 'SecondaryText'; title: string; description: string }\n  | { type: 'Term'; title: string; description?: never };\n\nconst StyledCell = styled(TableCell)(() => ({\n  padding: 0,\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledLeftLayoutContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isColumn',\n})<{ isColumn?: boolean }>(({ theme, isColumn }) => ({\n  display: 'flex',\n  flexDirection: isColumn ? 'column' : 'row',\n  height: '80px',\n  paddingRight: theme.spacing(3),\n  alignItems: isColumn ? 'flex-start' : 'center',\n  justifyContent: isColumn ? 'center' : 'flex-start',\n  gap: 0,\n  flexShrink: 0,\n}));\n\n/**\n * A cell component for the SummaryList that renders different content types.\n * Supports three variants: Term (title only), Description (description only), and SecondaryText (title with description).\n *\n * @param props - The component props\n * @returns The rendered cell component\n */\nconst SummaryListColumnItem: React.FC<SummaryListColumnItemProps> = ({ type, title, description }) => {\n  /**\n   * Returns the appropriate content based on the cell type.\n   * Renders different layouts for Term, Description, and SecondaryText types.\n   *\n   * @returns The rendered content node for the cell\n   */\n  const getContent = (): React.ReactNode => {\n    switch (type) {\n      case 'Term':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n          </StyledLeftLayoutContainer>\n        );\n      case 'Description':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      case 'SecondaryText':\n        return (\n          <StyledLeftLayoutContainer isColumn>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      default:\n        return null;\n    }\n  };\n  return <StyledCell>{getContent()}</StyledCell>;\n};\nexport default SummaryListColumnItem;\n"],"names":["StyledCell","styled","TableCell","padding","StyledDescription","Typography","theme","color","palette","semantic","text","StyledTitle","StyledLeftLayoutContainer","Box","shouldForwardProp","prop","isColumn","display","flexDirection","height","paddingRight","spacing","alignItems","justifyContent","gap","flexShrink","SummaryListColumnItem","type","title","description","_jsx","children","variant","_jsxs","getContent"],"mappings":"2NAeA,MAAMA,EAAaC,EAAOC,EAAPD,EAAkB,KAAA,CACnCE,QAAS,MAGLC,EAAoBH,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CACrDC,MAAOD,EAAME,QAAQC,SAASC,KAAK,iBAG/BC,EAAcV,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CAC/CC,MAAOD,EAAME,QAAQC,SAASC,KAAK,mBAG/BE,EAA4BX,EAAOY,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGd,EAEP,EAAGK,QAAOU,eAAU,CAC7CC,QAAS,OACTC,cAAeF,EAAW,SAAW,MACrCG,OAAQ,OACRC,aAAcd,EAAMe,QAAQ,GAC5BC,WAAYN,EAAW,aAAe,SACtCO,eAAgBP,EAAW,SAAW,aACtCQ,IAAK,EACLC,WAAY,MAURC,EAA8D,EAAGC,OAAMC,QAAOC,iBAgC3EC,EAAC9B,EAAU,CAAA+B,SAzBC,MACjB,OAAQJ,GACN,IAAK,OACH,OACEG,EAAClB,EAAyB,CAAAmB,SACxBD,EAACnB,EAAW,CAACqB,QAAQ,QAAOD,SAAEH,MAGpC,IAAK,cACH,OACEE,EAAClB,EAAyB,CAAAmB,SACxBD,EAAC1B,EAAiB,CAAC4B,QAAQ,QAAOD,SAAEF,MAG1C,IAAK,gBACH,OACEI,EAACrB,EAAyB,CAACI,UAAQ,EAAAe,SAAA,CACjCD,EAACnB,EAAW,CAACqB,QAAQ,QAAOD,SAAEH,IAC9BE,EAAC1B,EAAiB,CAAC4B,QAAQ,QAAOD,SAAEF,OAG1C,QACE,OAAO,OAGOK"}
+{"version":3,"file":"SummaryListCell.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport TableCell from '@mui/material/TableCell/TableCell';\n\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the SummaryListColumnItem component.\n * Supports three display types: Term (title only), Description (description only), and SecondaryText (title with description).\n */\nexport type SummaryListColumnItemProps =\n  | { type: 'Description'; description: string; title?: never }\n  | { type: 'SecondaryText'; title: string; description: string }\n  | { type: 'Term'; title: string; description?: never };\n\nconst StyledCell = styled(TableCell)(() => ({\n  padding: 0,\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledLeftLayoutContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isColumn',\n})<{ isColumn?: boolean }>(({ theme, isColumn }) => ({\n  display: 'flex',\n  flexDirection: isColumn ? 'column' : 'row',\n  height: '80px',\n  paddingRight: theme.spacing(3),\n  alignItems: isColumn ? 'flex-start' : 'center',\n  justifyContent: isColumn ? 'center' : 'flex-start',\n  gap: 0,\n  flexShrink: 0,\n}));\n\n/**\n * A cell component for the SummaryList that renders different content types.\n * Supports three variants: Term (title only), Description (description only), and SecondaryText (title with description).\n *\n * @param props - The component props\n * @returns The rendered cell component\n */\nconst SummaryListColumnItem: React.FC<SummaryListColumnItemProps> = ({ type, title, description }) => {\n  /**\n   * Returns the appropriate content based on the cell type.\n   * Renders different layouts for Term, Description, and SecondaryText types.\n   *\n   * @returns The rendered content node for the cell\n   */\n  const getContent = (): React.ReactNode => {\n    switch (type) {\n      case 'Term':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n          </StyledLeftLayoutContainer>\n        );\n      case 'Description':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      case 'SecondaryText':\n        return (\n          <StyledLeftLayoutContainer isColumn>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      default:\n        return null;\n    }\n  };\n  return <StyledCell>{getContent()}</StyledCell>;\n};\nexport default SummaryListColumnItem;\n"],"names":["StyledCell","styled","TableCell","padding","StyledDescription","Typography","theme","color","palette","semantic","text","StyledTitle","StyledLeftLayoutContainer","Box","shouldForwardProp","prop","isColumn","display","flexDirection","height","paddingRight","spacing","alignItems","justifyContent","gap","flexShrink","SummaryListColumnItem","type","title","description","_jsx","children","variant","_jsxs","getContent"],"mappings":"2NAeA,MAAMA,EAAaC,EAAOC,EAAPD,CAAkB,KAAA,CACnCE,QAAS,KAGLC,EAAoBH,EAAOI,EAAPJ,CAAmB,EAAGK,YAAO,CACrDC,MAAOD,EAAME,QAAQC,SAASC,KAAK,gBAG/BC,EAAcV,EAAOI,EAAPJ,CAAmB,EAAGK,YAAO,CAC/CC,MAAOD,EAAME,QAAQC,SAASC,KAAK,kBAG/BE,EAA4BX,EAAOY,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGd,CAEP,EAAGK,QAAOU,eAAU,CAC7CC,QAAS,OACTC,cAAeF,EAAW,SAAW,MACrCG,OAAQ,OACRC,aAAcd,EAAMe,QAAQ,GAC5BC,WAAYN,EAAW,aAAe,SACtCO,eAAgBP,EAAW,SAAW,aACtCQ,IAAK,EACLC,WAAY,KAURC,EAA8D,EAAGC,OAAMC,QAAOC,iBAgC3EC,EAAC9B,EAAU,CAAA+B,SAzBC,MACjB,OAAQJ,GACN,IAAK,OACH,OACEG,EAAClB,EAAyB,CAAAmB,SACxBD,EAACnB,EAAW,CAACqB,QAAQ,QAAOD,SAAEH,MAGpC,IAAK,cACH,OACEE,EAAClB,EAAyB,CAAAmB,SACxBD,EAAC1B,EAAiB,CAAC4B,QAAQ,QAAOD,SAAEF,MAG1C,IAAK,gBACH,OACEI,EAACrB,EAAyB,CAACI,UAAQ,EAAAe,SAAA,CACjCD,EAACnB,EAAW,CAACqB,QAAQ,QAAOD,SAAEH,IAC9BE,EAAC1B,EAAiB,CAAC4B,QAAQ,QAAOD,SAAEF,OAG1C,QACE,OAAO,OAGOK"}

package/dist/components/organisms/SummaryList/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Box/Box"),i=require("@mui/material/styles/styled"),s=require("@mui/material/Table/Table"),l=require("@mui/material/TableBody/TableBody"),o=require("./components/SummaryListCell.cjs.js"),a=require("./components/SummaryListRow.cjs.js");const d=i(t)((()=>({flex:1,overflow:"auto"}))),n=i(s,{shouldForwardProp:e=>"hideLastDivider"!==e})((({hideLastDivider:e})=>({tableLayout:"fixed",...e&&{"& tbody tr:last-child td, & tbody tr:last-child th":{borderBottom:"none"}}})));exports.SummaryListCell=o,exports.SummaryListRow=a,exports.default=({children:t,hideLastDivider:i,rows:s})=>{const u=r.useMemo((()=>s&&0!==s.length?s.map(((r,t)=>e.jsx(a,{children:r.cells.map(((r,t)=>e.jsx(o,{...r},((e,r)=>{const t="title"in e?e.title:"",i="description"in e?e.description:"";return`summary-cell-${e.type}-${t}-${i}-${r}`})(r,t))))},((e,r)=>`summary-row-${e.cells.map((e=>{const r="title"in e?e.title:"",t="description"in e?e.description:"";return`${e.type}-${r}-${t}`})).join("|")}-${r}`)(r,t)))):[]),[s]);return e.jsx(d,{children:e.jsx(n,{hideLastDivider:i,children:e.jsx(l,{children:s&&s.length>0?u:t})})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Box/Box"),i=require("@mui/material/styles/styled"),s=require("@mui/material/Table/Table"),l=require("@mui/material/TableBody/TableBody"),o=require("./components/SummaryListCell.cjs.js"),a=require("./components/SummaryListRow.cjs.js");const d=i(t)(()=>({flex:1,overflow:"auto"})),n=i(s,{shouldForwardProp:e=>"hideLastDivider"!==e})(({hideLastDivider:e})=>({tableLayout:"fixed",...e&&{"& tbody tr:last-child td, & tbody tr:last-child th":{borderBottom:"none"}}}));exports.SummaryListCell=o,exports.SummaryListRow=a,exports.default=({children:t,hideLastDivider:i,rows:s})=>{const u=r.useMemo(()=>s&&0!==s.length?s.map((r,t)=>e.jsx(a,{children:r.cells.map((r,t)=>e.jsx(o,{...r},((e,r)=>{const t="title"in e?e.title:"",i="description"in e?e.description:"";return`summary-cell-${e.type}-${t}-${i}-${r}`})(r,t)))},((e,r)=>`summary-row-${e.cells.map(e=>{const r="title"in e?e.title:"",t="description"in e?e.description:"";return`${e.type}-${r}-${t}`}).join("|")}-${r}`)(r,t))):[],[s]);return e.jsx(d,{children:e.jsx(n,{hideLastDivider:i,children:e.jsx(l,{children:s&&s.length>0?u:t})})})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/SummaryList/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/SummaryList/index.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport Table from '@mui/material/Table/Table';\nimport TableBody from '@mui/material/TableBody/TableBody';\n\nimport SummaryListCell, { type SummaryListColumnItemProps } from './components/SummaryListCell';\nimport SummaryListRow from './components/SummaryListRow';\n\nconst StyledBox = styled(Box)(() => ({\n  flex: 1,\n  overflow: 'auto',\n}));\n\nconst StyledTable = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'hideLastDivider',\n})<{ hideLastDivider?: boolean }>(({ hideLastDivider }) => ({\n  tableLayout: 'fixed',\n  ...(hideLastDivider && {\n    '& tbody tr:last-child td, & tbody tr:last-child th': {\n      borderBottom: 'none',\n    },\n  }),\n}));\n\n/**\n * Data structure for a single row in the SummaryList.\n */\nexport interface SummaryListRowData {\n  /** Array of cell data for this row. */\n  cells: SummaryListColumnItemProps[];\n}\n\n/**\n * Props for the SummaryList component.\n */\nexport interface SummaryListProps {\n  /** The row components to render within the list. Used when rows prop is not provided. */\n  children?: React.ReactNode;\n  /** Hides the bottom border of the last row when true. */\n  hideLastDivider?: boolean;\n  /** Array of row data to render. Takes precedence over children when provided. */\n  rows?: SummaryListRowData[];\n}\n\n/**\n * A summary list component that displays data in a structured table format.\n * Supports optional hiding of the last row divider for cleaner visual presentation.\n * Can be used with either a `rows` prop for data-driven rendering or `children` for custom rendering.\n *\n * @param props - The component props\n * @returns The rendered summary list component\n */\nconst SummaryList: React.FC<SummaryListProps> = ({ children, hideLastDivider, rows }) => {\n  /**\n   * Generates a unique key for a row based on its content.\n   *\n   * @param row - The row data\n   * @param rowIndex - The index of the row in the array\n   * @returns A unique key string\n   */\n  const getRowKey = (row: SummaryListRowData, rowIndex: number): string => {\n    // Create a key from the row's cell content\n    const cellContent = row.cells\n      .map((cell) => {\n        const title = 'title' in cell ? cell.title : '';\n        const description = 'description' in cell ? cell.description : '';\n        return `${cell.type}-${title}-${description}`;\n      })\n      .join('|');\n    // Include index as fallback for uniqueness, but base it on content first\n    return `summary-row-${cellContent}-${rowIndex}`;\n  };\n\n  /**\n   * Generates a unique key for a cell based on its content.\n   *\n   * @param cell - The cell data\n   * @param cellIndex - The index of the cell in the row\n   * @returns A unique key string\n   */\n  const getCellKey = (cell: SummaryListColumnItemProps, cellIndex: number): string => {\n    const title = 'title' in cell ? cell.title : '';\n    const description = 'description' in cell ? cell.description : '';\n    // Base key on content, with index as fallback\n    return `summary-cell-${cell.type}-${title}-${description}-${cellIndex}`;\n  };\n\n  /**\n   * Renders rows from the rows prop data.\n   * Maps over the rows array and creates SummaryListRow and SummaryListCell components.\n   *\n   * @returns Array of rendered row components\n   */\n  const renderedRows = useMemo((): React.ReactNode[] => {\n    if (!rows || rows.length === 0) {\n      return [];\n    }\n\n    return rows.map((row, rowIndex) => (\n      <SummaryListRow key={getRowKey(row, rowIndex)}>\n        {row.cells.map((cell, cellIndex) => (\n          <SummaryListCell key={getCellKey(cell, cellIndex)} {...cell} />\n        ))}\n      </SummaryListRow>\n    ));\n  }, [rows]);\n\n  /**\n   * Determines what content to render in the table body.\n   * If rows are provided and have length > 0, render from rows.\n   * Otherwise, render children (existing pattern).\n   *\n   * @returns The content to render in the table body\n   */\n  const renderContent = (): React.ReactNode => {\n    if (rows && rows.length > 0) {\n      return renderedRows;\n    }\n\n    return children;\n  };\n\n  return (\n    <StyledBox>\n      <StyledTable hideLastDivider={hideLastDivider}>\n        <TableBody>{renderContent()}</TableBody>\n      </StyledTable>\n    </StyledBox>\n  );\n};\n\nexport default SummaryList;\nexport { SummaryListCell, SummaryListRow };\n"],"names":["StyledBox","styled","Box","flex","overflow","StyledTable","Table","shouldForwardProp","prop","hideLastDivider","tableLayout","borderBottom","children","rows","renderedRows","useMemo","length","map","row","rowIndex","_jsx","SummaryListRow","cells","cell","cellIndex","SummaryListCell","title","description","type","getCellKey","join","getRowKey","TableBody"],"mappings":"6XAUA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,KAAA,CAC5BE,KAAM,EACNC,SAAU,WAGNC,EAAcJ,EAAOK,EAAO,CAChCC,kBAAoBC,GAAkB,oBAATA,GADXP,EAEc,EAAGQ,sBAAiB,CACpDC,YAAa,WACTD,GAAmB,CACrB,qDAAsD,CACpDE,aAAc,gFAiC4B,EAAGC,WAAUH,kBAAiBI,WAQ5E,MAiCMC,EAAeC,EAAAA,SAAQ,IACtBF,GAAwB,IAAhBA,EAAKG,OAIXH,EAAKI,KAAI,CAACC,EAAKC,IACpBC,EAAAA,IAACC,EAAc,CAAAT,SACZM,EAAII,MAAML,KAAI,CAACM,EAAMC,IACpBJ,MAACK,EAAe,IAAuCF,GArB5C,EAACA,EAAkCC,KACpD,MAAME,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAE/D,MAAO,gBAAgBJ,EAAKK,QAAQF,KAASC,KAAeH,KAiBhCK,CAAWN,EAAMC,OAzC7B,EAACN,EAAyBC,IAUnC,eARaD,EAAII,MACrBL,KAAKM,IACJ,MAAMG,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAC/D,MAAO,GAAGJ,EAAKK,QAAQF,KAASC,OAEjCG,KAAK,QAE6BX,IA6BdY,CAAUb,EAAKC,MAJ7B,IAUR,CAACN,IAiBJ,OACEO,EAAAA,IAACpB,EAAS,CAAAY,SACRQ,EAAAA,IAACf,EAAW,CAACI,gBAAiBA,WAC5BW,EAAAA,IAACY,YAVDnB,GAAQA,EAAKG,OAAS,EACjBF,EAGFF"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/SummaryList/index.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport Table from '@mui/material/Table/Table';\nimport TableBody from '@mui/material/TableBody/TableBody';\n\nimport SummaryListCell, { type SummaryListColumnItemProps } from './components/SummaryListCell';\nimport SummaryListRow from './components/SummaryListRow';\n\nconst StyledBox = styled(Box)(() => ({\n  flex: 1,\n  overflow: 'auto',\n}));\n\nconst StyledTable = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'hideLastDivider',\n})<{ hideLastDivider?: boolean }>(({ hideLastDivider }) => ({\n  tableLayout: 'fixed',\n  ...(hideLastDivider && {\n    '& tbody tr:last-child td, & tbody tr:last-child th': {\n      borderBottom: 'none',\n    },\n  }),\n}));\n\n/**\n * Data structure for a single row in the SummaryList.\n */\nexport interface SummaryListRowData {\n  /** Array of cell data for this row. */\n  cells: SummaryListColumnItemProps[];\n}\n\n/**\n * Props for the SummaryList component.\n */\nexport interface SummaryListProps {\n  /** The row components to render within the list. Used when rows prop is not provided. */\n  children?: React.ReactNode;\n  /** Hides the bottom border of the last row when true. */\n  hideLastDivider?: boolean;\n  /** Array of row data to render. Takes precedence over children when provided. */\n  rows?: SummaryListRowData[];\n}\n\n/**\n * A summary list component that displays data in a structured table format.\n * Supports optional hiding of the last row divider for cleaner visual presentation.\n * Can be used with either a `rows` prop for data-driven rendering or `children` for custom rendering.\n *\n * @param props - The component props\n * @returns The rendered summary list component\n */\nconst SummaryList: React.FC<SummaryListProps> = ({ children, hideLastDivider, rows }) => {\n  /**\n   * Generates a unique key for a row based on its content.\n   *\n   * @param row - The row data\n   * @param rowIndex - The index of the row in the array\n   * @returns A unique key string\n   */\n  const getRowKey = (row: SummaryListRowData, rowIndex: number): string => {\n    // Create a key from the row's cell content\n    const cellContent = row.cells\n      .map((cell) => {\n        const title = 'title' in cell ? cell.title : '';\n        const description = 'description' in cell ? cell.description : '';\n        return `${cell.type}-${title}-${description}`;\n      })\n      .join('|');\n    // Include index as fallback for uniqueness, but base it on content first\n    return `summary-row-${cellContent}-${rowIndex}`;\n  };\n\n  /**\n   * Generates a unique key for a cell based on its content.\n   *\n   * @param cell - The cell data\n   * @param cellIndex - The index of the cell in the row\n   * @returns A unique key string\n   */\n  const getCellKey = (cell: SummaryListColumnItemProps, cellIndex: number): string => {\n    const title = 'title' in cell ? cell.title : '';\n    const description = 'description' in cell ? cell.description : '';\n    // Base key on content, with index as fallback\n    return `summary-cell-${cell.type}-${title}-${description}-${cellIndex}`;\n  };\n\n  /**\n   * Renders rows from the rows prop data.\n   * Maps over the rows array and creates SummaryListRow and SummaryListCell components.\n   *\n   * @returns Array of rendered row components\n   */\n  const renderedRows = useMemo((): React.ReactNode[] => {\n    if (!rows || rows.length === 0) {\n      return [];\n    }\n\n    return rows.map((row, rowIndex) => (\n      <SummaryListRow key={getRowKey(row, rowIndex)}>\n        {row.cells.map((cell, cellIndex) => (\n          <SummaryListCell key={getCellKey(cell, cellIndex)} {...cell} />\n        ))}\n      </SummaryListRow>\n    ));\n  }, [rows]);\n\n  /**\n   * Determines what content to render in the table body.\n   * If rows are provided and have length > 0, render from rows.\n   * Otherwise, render children (existing pattern).\n   *\n   * @returns The content to render in the table body\n   */\n  const renderContent = (): React.ReactNode => {\n    if (rows && rows.length > 0) {\n      return renderedRows;\n    }\n\n    return children;\n  };\n\n  return (\n    <StyledBox>\n      <StyledTable hideLastDivider={hideLastDivider}>\n        <TableBody>{renderContent()}</TableBody>\n      </StyledTable>\n    </StyledBox>\n  );\n};\n\nexport default SummaryList;\nexport { SummaryListCell, SummaryListRow };\n"],"names":["StyledBox","styled","Box","flex","overflow","StyledTable","Table","shouldForwardProp","prop","hideLastDivider","tableLayout","borderBottom","children","rows","renderedRows","useMemo","length","map","row","rowIndex","_jsx","SummaryListRow","cells","cell","cellIndex","SummaryListCell","title","description","type","getCellKey","join","getRowKey","TableBody"],"mappings":"6XAUA,MAAMA,EAAYC,EAAOC,EAAPD,CAAY,KAAA,CAC5BE,KAAM,EACNC,SAAU,UAGNC,EAAcJ,EAAOK,EAAO,CAChCC,kBAAoBC,GAAkB,oBAATA,GADXP,CAEc,EAAGQ,sBAAiB,CACpDC,YAAa,WACTD,GAAmB,CACrB,qDAAsD,CACpDE,aAAc,+EAiC4B,EAAGC,WAAUH,kBAAiBI,WAQ5E,MAiCMC,EAAeC,EAAAA,QAAQ,IACtBF,GAAwB,IAAhBA,EAAKG,OAIXH,EAAKI,IAAI,CAACC,EAAKC,IACpBC,EAAAA,IAACC,EAAc,CAAAT,SACZM,EAAII,MAAML,IAAI,CAACM,EAAMC,IACpBJ,MAACK,EAAe,IAAuCF,GArB5C,EAACA,EAAkCC,KACpD,MAAME,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAE/D,MAAO,gBAAgBJ,EAAKK,QAAQF,KAASC,KAAeH,KAiBhCK,CAAWN,EAAMC,MAzC7B,EAACN,EAAyBC,IAUnC,eARaD,EAAII,MACrBL,IAAKM,IACJ,MAAMG,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAC/D,MAAO,GAAGJ,EAAKK,QAAQF,KAASC,MAEjCG,KAAK,QAE6BX,IA6BdY,CAAUb,EAAKC,KAJ7B,GAUR,CAACN,IAiBJ,OACEO,EAAAA,IAACpB,EAAS,CAAAY,SACRQ,EAAAA,IAACf,EAAW,CAACI,gBAAiBA,WAC5BW,EAAAA,IAACY,YAVDnB,GAAQA,EAAKG,OAAS,EACjBF,EAGFF"}

package/dist/components/organisms/SummaryList/index.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{useMemo as r}from"react";import i from"@mui/material/Box/Box";import e from"@mui/material/styles/styled";import o from"@mui/material/Table/Table";import m from"@mui/material/TableBody/TableBody";import l from"./components/SummaryListCell.js";import a from"./components/SummaryListRow.js";const s=e(i)((()=>({flex:1,overflow:"auto"}))),d=e(o,{shouldForwardProp:t=>"hideLastDivider"!==t})((({hideLastDivider:t})=>({tableLayout:"fixed",...t&&{"& tbody tr:last-child td, & tbody tr:last-child th":{borderBottom:"none"}}}))),n=({children:i,hideLastDivider:e,rows:o})=>{const n=r((()=>o&&0!==o.length?o.map(((r,i)=>t(a,{children:r.cells.map(((r,i)=>t(l,{...r},((t,r)=>{const i="title"in t?t.title:"",e="description"in t?t.description:"";return`summary-cell-${t.type}-${i}-${e}-${r}`})(r,i))))},((t,r)=>`summary-row-${t.cells.map((t=>{const r="title"in t?t.title:"",i="description"in t?t.description:"";return`${t.type}-${r}-${i}`})).join("|")}-${r}`)(r,i)))):[]),[o]);return t(s,{children:t(d,{hideLastDivider:e,children:t(m,{children:o&&o.length>0?n:i})})})};export{l as SummaryListCell,a as SummaryListRow,n as default};
+import{jsx as t}from"react/jsx-runtime";import{useMemo as r}from"react";import i from"@mui/material/Box/Box";import e from"@mui/material/styles/styled";import o from"@mui/material/Table/Table";import m from"@mui/material/TableBody/TableBody";import l from"./components/SummaryListCell.js";import a from"./components/SummaryListRow.js";const s=e(i)(()=>({flex:1,overflow:"auto"})),d=e(o,{shouldForwardProp:t=>"hideLastDivider"!==t})(({hideLastDivider:t})=>({tableLayout:"fixed",...t&&{"& tbody tr:last-child td, & tbody tr:last-child th":{borderBottom:"none"}}})),n=({children:i,hideLastDivider:e,rows:o})=>{const n=r(()=>o&&0!==o.length?o.map((r,i)=>t(a,{children:r.cells.map((r,i)=>t(l,{...r},((t,r)=>{const i="title"in t?t.title:"",e="description"in t?t.description:"";return`summary-cell-${t.type}-${i}-${e}-${r}`})(r,i)))},((t,r)=>`summary-row-${t.cells.map(t=>{const r="title"in t?t.title:"",i="description"in t?t.description:"";return`${t.type}-${r}-${i}`}).join("|")}-${r}`)(r,i))):[],[o]);return t(s,{children:t(d,{hideLastDivider:e,children:t(m,{children:o&&o.length>0?n:i})})})};export{l as SummaryListCell,a as SummaryListRow,n as default};
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/SummaryList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SummaryList/index.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport Table from '@mui/material/Table/Table';\nimport TableBody from '@mui/material/TableBody/TableBody';\n\nimport SummaryListCell, { type SummaryListColumnItemProps } from './components/SummaryListCell';\nimport SummaryListRow from './components/SummaryListRow';\n\nconst StyledBox = styled(Box)(() => ({\n  flex: 1,\n  overflow: 'auto',\n}));\n\nconst StyledTable = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'hideLastDivider',\n})<{ hideLastDivider?: boolean }>(({ hideLastDivider }) => ({\n  tableLayout: 'fixed',\n  ...(hideLastDivider && {\n    '& tbody tr:last-child td, & tbody tr:last-child th': {\n      borderBottom: 'none',\n    },\n  }),\n}));\n\n/**\n * Data structure for a single row in the SummaryList.\n */\nexport interface SummaryListRowData {\n  /** Array of cell data for this row. */\n  cells: SummaryListColumnItemProps[];\n}\n\n/**\n * Props for the SummaryList component.\n */\nexport interface SummaryListProps {\n  /** The row components to render within the list. Used when rows prop is not provided. */\n  children?: React.ReactNode;\n  /** Hides the bottom border of the last row when true. */\n  hideLastDivider?: boolean;\n  /** Array of row data to render. Takes precedence over children when provided. */\n  rows?: SummaryListRowData[];\n}\n\n/**\n * A summary list component that displays data in a structured table format.\n * Supports optional hiding of the last row divider for cleaner visual presentation.\n * Can be used with either a `rows` prop for data-driven rendering or `children` for custom rendering.\n *\n * @param props - The component props\n * @returns The rendered summary list component\n */\nconst SummaryList: React.FC<SummaryListProps> = ({ children, hideLastDivider, rows }) => {\n  /**\n   * Generates a unique key for a row based on its content.\n   *\n   * @param row - The row data\n   * @param rowIndex - The index of the row in the array\n   * @returns A unique key string\n   */\n  const getRowKey = (row: SummaryListRowData, rowIndex: number): string => {\n    // Create a key from the row's cell content\n    const cellContent = row.cells\n      .map((cell) => {\n        const title = 'title' in cell ? cell.title : '';\n        const description = 'description' in cell ? cell.description : '';\n        return `${cell.type}-${title}-${description}`;\n      })\n      .join('|');\n    // Include index as fallback for uniqueness, but base it on content first\n    return `summary-row-${cellContent}-${rowIndex}`;\n  };\n\n  /**\n   * Generates a unique key for a cell based on its content.\n   *\n   * @param cell - The cell data\n   * @param cellIndex - The index of the cell in the row\n   * @returns A unique key string\n   */\n  const getCellKey = (cell: SummaryListColumnItemProps, cellIndex: number): string => {\n    const title = 'title' in cell ? cell.title : '';\n    const description = 'description' in cell ? cell.description : '';\n    // Base key on content, with index as fallback\n    return `summary-cell-${cell.type}-${title}-${description}-${cellIndex}`;\n  };\n\n  /**\n   * Renders rows from the rows prop data.\n   * Maps over the rows array and creates SummaryListRow and SummaryListCell components.\n   *\n   * @returns Array of rendered row components\n   */\n  const renderedRows = useMemo((): React.ReactNode[] => {\n    if (!rows || rows.length === 0) {\n      return [];\n    }\n\n    return rows.map((row, rowIndex) => (\n      <SummaryListRow key={getRowKey(row, rowIndex)}>\n        {row.cells.map((cell, cellIndex) => (\n          <SummaryListCell key={getCellKey(cell, cellIndex)} {...cell} />\n        ))}\n      </SummaryListRow>\n    ));\n  }, [rows]);\n\n  /**\n   * Determines what content to render in the table body.\n   * If rows are provided and have length > 0, render from rows.\n   * Otherwise, render children (existing pattern).\n   *\n   * @returns The content to render in the table body\n   */\n  const renderContent = (): React.ReactNode => {\n    if (rows && rows.length > 0) {\n      return renderedRows;\n    }\n\n    return children;\n  };\n\n  return (\n    <StyledBox>\n      <StyledTable hideLastDivider={hideLastDivider}>\n        <TableBody>{renderContent()}</TableBody>\n      </StyledTable>\n    </StyledBox>\n  );\n};\n\nexport default SummaryList;\nexport { SummaryListCell, SummaryListRow };\n"],"names":["StyledBox","styled","Box","flex","overflow","StyledTable","Table","shouldForwardProp","prop","hideLastDivider","tableLayout","borderBottom","SummaryList","children","rows","renderedRows","useMemo","length","map","row","rowIndex","_jsx","SummaryListRow","cells","cell","cellIndex","SummaryListCell","title","description","type","getCellKey","join","getRowKey","TableBody"],"mappings":"+UAUA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,KAAA,CAC5BE,KAAM,EACNC,SAAU,WAGNC,EAAcJ,EAAOK,EAAO,CAChCC,kBAAoBC,GAAkB,oBAATA,GADXP,EAEc,EAAGQ,sBAAiB,CACpDC,YAAa,WACTD,GAAmB,CACrB,qDAAsD,CACpDE,aAAc,aAiCdC,EAA0C,EAAGC,WAAUJ,kBAAiBK,WAQ5E,MAiCMC,EAAeC,GAAQ,IACtBF,GAAwB,IAAhBA,EAAKG,OAIXH,EAAKI,KAAI,CAACC,EAAKC,IACpBC,EAACC,EAAc,CAAAT,SACZM,EAAII,MAAML,KAAI,CAACM,EAAMC,IACpBJ,EAACK,EAAe,IAAuCF,GArB5C,EAACA,EAAkCC,KACpD,MAAME,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAE/D,MAAO,gBAAgBJ,EAAKK,QAAQF,KAASC,KAAeH,KAiBhCK,CAAWN,EAAMC,OAzC7B,EAACN,EAAyBC,IAUnC,eARaD,EAAII,MACrBL,KAAKM,IACJ,MAAMG,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAC/D,MAAO,GAAGJ,EAAKK,QAAQF,KAASC,OAEjCG,KAAK,QAE6BX,IA6BdY,CAAUb,EAAKC,MAJ7B,IAUR,CAACN,IAiBJ,OACEO,EAACrB,EAAS,CAAAa,SACRQ,EAAChB,EAAW,CAACI,gBAAiBA,WAC5BY,EAACY,YAVDnB,GAAQA,EAAKG,OAAS,EACjBF,EAGFF"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SummaryList/index.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport Table from '@mui/material/Table/Table';\nimport TableBody from '@mui/material/TableBody/TableBody';\n\nimport SummaryListCell, { type SummaryListColumnItemProps } from './components/SummaryListCell';\nimport SummaryListRow from './components/SummaryListRow';\n\nconst StyledBox = styled(Box)(() => ({\n  flex: 1,\n  overflow: 'auto',\n}));\n\nconst StyledTable = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'hideLastDivider',\n})<{ hideLastDivider?: boolean }>(({ hideLastDivider }) => ({\n  tableLayout: 'fixed',\n  ...(hideLastDivider && {\n    '& tbody tr:last-child td, & tbody tr:last-child th': {\n      borderBottom: 'none',\n    },\n  }),\n}));\n\n/**\n * Data structure for a single row in the SummaryList.\n */\nexport interface SummaryListRowData {\n  /** Array of cell data for this row. */\n  cells: SummaryListColumnItemProps[];\n}\n\n/**\n * Props for the SummaryList component.\n */\nexport interface SummaryListProps {\n  /** The row components to render within the list. Used when rows prop is not provided. */\n  children?: React.ReactNode;\n  /** Hides the bottom border of the last row when true. */\n  hideLastDivider?: boolean;\n  /** Array of row data to render. Takes precedence over children when provided. */\n  rows?: SummaryListRowData[];\n}\n\n/**\n * A summary list component that displays data in a structured table format.\n * Supports optional hiding of the last row divider for cleaner visual presentation.\n * Can be used with either a `rows` prop for data-driven rendering or `children` for custom rendering.\n *\n * @param props - The component props\n * @returns The rendered summary list component\n */\nconst SummaryList: React.FC<SummaryListProps> = ({ children, hideLastDivider, rows }) => {\n  /**\n   * Generates a unique key for a row based on its content.\n   *\n   * @param row - The row data\n   * @param rowIndex - The index of the row in the array\n   * @returns A unique key string\n   */\n  const getRowKey = (row: SummaryListRowData, rowIndex: number): string => {\n    // Create a key from the row's cell content\n    const cellContent = row.cells\n      .map((cell) => {\n        const title = 'title' in cell ? cell.title : '';\n        const description = 'description' in cell ? cell.description : '';\n        return `${cell.type}-${title}-${description}`;\n      })\n      .join('|');\n    // Include index as fallback for uniqueness, but base it on content first\n    return `summary-row-${cellContent}-${rowIndex}`;\n  };\n\n  /**\n   * Generates a unique key for a cell based on its content.\n   *\n   * @param cell - The cell data\n   * @param cellIndex - The index of the cell in the row\n   * @returns A unique key string\n   */\n  const getCellKey = (cell: SummaryListColumnItemProps, cellIndex: number): string => {\n    const title = 'title' in cell ? cell.title : '';\n    const description = 'description' in cell ? cell.description : '';\n    // Base key on content, with index as fallback\n    return `summary-cell-${cell.type}-${title}-${description}-${cellIndex}`;\n  };\n\n  /**\n   * Renders rows from the rows prop data.\n   * Maps over the rows array and creates SummaryListRow and SummaryListCell components.\n   *\n   * @returns Array of rendered row components\n   */\n  const renderedRows = useMemo((): React.ReactNode[] => {\n    if (!rows || rows.length === 0) {\n      return [];\n    }\n\n    return rows.map((row, rowIndex) => (\n      <SummaryListRow key={getRowKey(row, rowIndex)}>\n        {row.cells.map((cell, cellIndex) => (\n          <SummaryListCell key={getCellKey(cell, cellIndex)} {...cell} />\n        ))}\n      </SummaryListRow>\n    ));\n  }, [rows]);\n\n  /**\n   * Determines what content to render in the table body.\n   * If rows are provided and have length > 0, render from rows.\n   * Otherwise, render children (existing pattern).\n   *\n   * @returns The content to render in the table body\n   */\n  const renderContent = (): React.ReactNode => {\n    if (rows && rows.length > 0) {\n      return renderedRows;\n    }\n\n    return children;\n  };\n\n  return (\n    <StyledBox>\n      <StyledTable hideLastDivider={hideLastDivider}>\n        <TableBody>{renderContent()}</TableBody>\n      </StyledTable>\n    </StyledBox>\n  );\n};\n\nexport default SummaryList;\nexport { SummaryListCell, SummaryListRow };\n"],"names":["StyledBox","styled","Box","flex","overflow","StyledTable","Table","shouldForwardProp","prop","hideLastDivider","tableLayout","borderBottom","SummaryList","children","rows","renderedRows","useMemo","length","map","row","rowIndex","_jsx","SummaryListRow","cells","cell","cellIndex","SummaryListCell","title","description","type","getCellKey","join","getRowKey","TableBody"],"mappings":"+UAUA,MAAMA,EAAYC,EAAOC,EAAPD,CAAY,KAAA,CAC5BE,KAAM,EACNC,SAAU,UAGNC,EAAcJ,EAAOK,EAAO,CAChCC,kBAAoBC,GAAkB,oBAATA,GADXP,CAEc,EAAGQ,sBAAiB,CACpDC,YAAa,WACTD,GAAmB,CACrB,qDAAsD,CACpDE,aAAc,YAiCdC,EAA0C,EAAGC,WAAUJ,kBAAiBK,WAQ5E,MAiCMC,EAAeC,EAAQ,IACtBF,GAAwB,IAAhBA,EAAKG,OAIXH,EAAKI,IAAI,CAACC,EAAKC,IACpBC,EAACC,EAAc,CAAAT,SACZM,EAAII,MAAML,IAAI,CAACM,EAAMC,IACpBJ,EAACK,EAAe,IAAuCF,GArB5C,EAACA,EAAkCC,KACpD,MAAME,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAE/D,MAAO,gBAAgBJ,EAAKK,QAAQF,KAASC,KAAeH,KAiBhCK,CAAWN,EAAMC,MAzC7B,EAACN,EAAyBC,IAUnC,eARaD,EAAII,MACrBL,IAAKM,IACJ,MAAMG,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAC/D,MAAO,GAAGJ,EAAKK,QAAQF,KAASC,MAEjCG,KAAK,QAE6BX,IA6BdY,CAAUb,EAAKC,KAJ7B,GAUR,CAACN,IAiBJ,OACEO,EAACrB,EAAS,CAAAa,SACRQ,EAAChB,EAAW,CAACI,gBAAiBA,WAC5BY,EAACY,YAVDnB,GAAQA,EAAKG,OAAS,EACjBF,EAGFF"}

package/dist/custom-hooks/useMicroFrontendAttributes.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react");const e=["org-id","app-id",{key:"is-flipdish-staff",type:"boolean"}],n=(t,e)=>t||"boolean"===e?"boolean"===e?"true"===t:"number"===e?Number(t):t:null,r=t=>[...e.map((t=>"string"==typeof t?t:t.key)),...t.map((t=>"string"==typeof t?t:t.key))];module.exports=(o=[])=>{const[s,i]=t.useState((()=>(t=>{const e=r(t),n={};return e.forEach((t=>{const e="string"==typeof t?t:t.key;n[e]=null})),n})(o)));return t.useEffect((()=>{const t=document.getElementById("flipdish-micro-frontend");if(!t)return void console.warn("Micro-frontend div not found");const s=r(o),u=[...e,...o],c=()=>{i((e=>{const r={...e};let o=!1;return s.forEach((e=>{const{value:s,key:i}=((t,e,r)=>{const o=((t,e)=>e.find((e=>"string"==typeof e?e===t:e.key===t)))(t,r),s=(t=>t&&"string"!=typeof t&&"type"in t?t.type??"string":"string")(o),i="string"==typeof t?t:t.key,u=(void 0)[`VITE_${i.toUpperCase()}_OVERRIDE`],c=`data-${i}`,a=e.getAttribute(c);return{value:n(u?u.toString():a,s),key:i}})(e,t,u);r[i]!==s&&(r[i]=s,o=!0)})),o?r:e}))};c();const a=new MutationObserver(c);return a.observe(t,{attributes:!0}),()=>a.disconnect()}),[o]),s};
+"use strict";var t=require("react");const e=["org-id","app-id",{key:"is-flipdish-staff",type:"boolean"}],n=(t,e)=>t||"boolean"===e?"boolean"===e?"true"===t:"number"===e?Number(t):t:null,r=t=>[...e.map(t=>"string"==typeof t?t:t.key),...t.map(t=>"string"==typeof t?t:t.key)];module.exports=(o=[])=>{const[s,i]=t.useState(()=>(t=>{const e=r(t),n={};return e.forEach(t=>{const e="string"==typeof t?t:t.key;n[e]=null}),n})(o));return t.useEffect(()=>{const t=document.getElementById("flipdish-micro-frontend");if(!t)return void console.warn("Micro-frontend div not found");const s=r(o),u=[...e,...o],c=()=>{i(e=>{const r={...e};let o=!1;return s.forEach(e=>{const{value:s,key:i}=((t,e,r)=>{const o=((t,e)=>e.find(e=>"string"==typeof e?e===t:e.key===t))(t,r),s=(t=>t&&"string"!=typeof t&&"type"in t?t.type??"string":"string")(o),i="string"==typeof t?t:t.key,u=(void 0)[`VITE_${i.toUpperCase()}_OVERRIDE`],c=`data-${i}`,a=e.getAttribute(c);return{value:n(u?u.toString():a,s),key:i}})(e,t,u);r[i]!==s&&(r[i]=s,o=!0)}),o?r:e})};c();const a=new MutationObserver(c);return a.observe(t,{attributes:!0}),()=>a.disconnect()},[o]),s};
 //# sourceMappingURL=useMicroFrontendAttributes.cjs.js.map

package/dist/custom-hooks/useMicroFrontendAttributes.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMicroFrontendAttributes.cjs.js","sources":["../../src/custom-hooks/useMicroFrontendAttributes.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ntype KeyType = 'boolean' | 'number' | 'string';\n\ninterface KeyConfig {\n  key: string;\n  type?: KeyType; // type is optional, defaults to 'string'\n}\n\nconst ALWAYS_RETURN_KEYS: (KeyConfig | string)[] = [\n  'org-id',\n  'app-id',\n  { key: 'is-flipdish-staff', type: 'boolean' },\n] as const;\n\ntype AlwaysReturnKeys = (typeof ALWAYS_RETURN_KEYS)[number] extends KeyConfig\n  ? (typeof ALWAYS_RETURN_KEYS)[number]['key']\n  : (typeof ALWAYS_RETURN_KEYS)[number];\n\ntype ExtractKey<T> = T extends KeyConfig ? T['key'] : T;\n\ntype AttributeValue = boolean | number | string | null;\n\n// Utility functions moved outside\ntype KeyArg<T> = AlwaysReturnKeys | T | string;\nconst getKeyConfig = <T extends KeyConfig | string>(key: KeyArg<T>, allConfigs: (KeyConfig | string)[]) => {\n  return allConfigs.find((config) => (typeof config === 'string' ? config === key : config.key === key));\n};\n\nconst getValueType = (keyConfig: KeyConfig | string | undefined): KeyType => {\n  return keyConfig && typeof keyConfig !== 'string' && 'type' in keyConfig\n    ? (keyConfig.type ?? 'string')\n    : 'string';\n};\n\nconst parseValue = (value: string | null, type: KeyType): AttributeValue => {\n  if (!value && type !== 'boolean') return null;\n  if (type === 'boolean') return value === 'true';\n  if (type === 'number') return Number(value);\n  return value;\n};\n\nconst getAllKeys = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): (AlwaysReturnKeys | T | string)[] => {\n  return [\n    ...ALWAYS_RETURN_KEYS.map((key) => (typeof key === 'string' ? key : key.key)),\n    ...customKeys.map((key) => (typeof key === 'string' ? key : key.key)),\n  ];\n};\n\nconst getInitialState = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const allKeys = getAllKeys(customKeys);\n  const initialState = {} as Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue>;\n  allKeys.forEach((key) => {\n    const typedKey = (typeof key === 'string' ? key : key.key) as ExtractKey<AlwaysReturnKeys | T>;\n    initialState[typedKey] = null;\n  });\n  return initialState;\n};\n\nconst processAttribute = <T extends KeyConfig | string>(\n  key: AlwaysReturnKeys | T | string,\n  microFrontendDiv: HTMLElement,\n  allConfigs: (KeyConfig | string)[],\n): { value: AttributeValue; key: ExtractKey<AlwaysReturnKeys | T> } => {\n  const keyConfig = getKeyConfig(key, allConfigs);\n  const type = getValueType(keyConfig);\n  const keyString = typeof key === 'string' ? key : key.key;\n\n  const envVar = import.meta.env[`VITE_${keyString.toUpperCase()}_OVERRIDE`] as string | null | undefined;\n  const attributeKey = `data-${keyString}`;\n  const domValue = microFrontendDiv.getAttribute(attributeKey);\n\n  const value = envVar ? parseValue(envVar.toString(), type) : parseValue(domValue, type);\n  return { value, key: keyString as ExtractKey<AlwaysReturnKeys | T> };\n};\n\n/**\n * Custom hook to manage micro-frontend attributes.\n *\n * This hook initializes and updates a set of attributes based on a combination of predefined keys (ALWAYS_RETURN_KEYS)\n * and custom keys provided as arguments. The attributes are fetched from environment variables or DOM attributes\n * and are updated dynamically using a MutationObserver.\n *\n * @template T - The type of custom keys, which can be either a string or a KeyConfig object.\n *\n * @param {Array<T | KeyConfig>} [customKeys=[]] - An array of custom keys or KeyConfig objects to be included in the attributes.\n *\n * @returns {Record<ExtractKey<AlwaysReturnKeys | T>, string | boolean | number | null>} - A record of attributes with their values.\n *\n * @example\n * const attributes = useMicroFrontendAttributes(['customKey1', { key: 'customKey2', type: 'boolean' }]);\n * console.log(attributes);\n */\nconst useMicroFrontendAttributes = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[] = [],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const [attributes, setAttributes] = useState(() => getInitialState(customKeys));\n\n  useEffect(() => {\n    const microFrontendDiv = document.getElementById('flipdish-micro-frontend');\n    if (!microFrontendDiv) {\n      console.warn('Micro-frontend div not found');\n      return;\n    }\n\n    const allKeys = getAllKeys(customKeys);\n    const allConfigs = [...ALWAYS_RETURN_KEYS, ...customKeys];\n\n    const updateValues = () => {\n      setAttributes((prev) => {\n        const newAttributes = { ...prev };\n        let isChanged = false;\n\n        allKeys.forEach((key) => {\n          const { value, key: typedKey } = processAttribute(key, microFrontendDiv, allConfigs);\n          if (newAttributes[typedKey] !== value) {\n            newAttributes[typedKey] = value;\n            isChanged = true;\n          }\n        });\n\n        return isChanged ? newAttributes : prev;\n      });\n    };\n\n    updateValues();\n\n    const observer = new MutationObserver(updateValues);\n    observer.observe(microFrontendDiv, { attributes: true });\n\n    return () => observer.disconnect();\n  }, [customKeys]);\n\n  return attributes;\n};\n\nexport default useMicroFrontendAttributes;\n"],"names":["ALWAYS_RETURN_KEYS","key","type","parseValue","value","Number","getAllKeys","customKeys","map","attributes","setAttributes","useState","allKeys","initialState","forEach","typedKey","getInitialState","useEffect","microFrontendDiv","document","getElementById","console","warn","allConfigs","updateValues","prev","newAttributes","isChanged","keyConfig","find","config","getKeyConfig","getValueType","keyString","envVar","undefined","toUpperCase","attributeKey","domValue","getAttribute","toString","processAttribute","observer","MutationObserver","observe","disconnect"],"mappings":"oCASA,MAAMA,EAA6C,CACjD,SACA,SACA,CAAEC,IAAK,oBAAqBC,KAAM,YAuB9BC,EAAa,CAACC,EAAsBF,IACnCE,GAAkB,YAATF,EACD,YAATA,EAAqC,SAAVE,EAClB,WAATF,EAA0BG,OAAOD,GAC9BA,EAHkC,KAMrCE,EACJC,GAEO,IACFP,EAAmBQ,KAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,SACrEM,EAAWC,KAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,sBAkDjC,CACjCM,EAAgC,MAEhC,MAAOE,EAAYC,GAAiBC,EAAAA,UAAS,IAjDvB,CACtBJ,IAEA,MAAMK,EAAUN,EAAWC,GACrBM,EAAe,CAAA,EAKrB,OAJAD,EAAQE,SAASb,IACf,MAAMc,EAA2B,iBAARd,EAAmBA,EAAMA,EAAIA,IACtDY,EAAaE,GAAY,QAEpBF,GAwC4CG,CAAgBT,KAqCnE,OAnCAU,EAAAA,WAAU,KACR,MAAMC,EAAmBC,SAASC,eAAe,2BACjD,IAAKF,EAEH,YADAG,QAAQC,KAAK,gCAIf,MAAMV,EAAUN,EAAWC,GACrBgB,EAAa,IAAIvB,KAAuBO,GAExCiB,EAAe,KACnBd,GAAee,IACb,MAAMC,EAAgB,IAAKD,GAC3B,IAAIE,GAAY,EAUhB,OARAf,EAAQE,SAASb,IACf,MAAMG,MAAEA,EAAOH,IAAKc,GAvDL,EACvBd,EACAiB,EACAK,KAEA,MAAMK,EA3Ca,EAA+B3B,EAAgBsB,IAC3DA,EAAWM,MAAMC,GAA8B,iBAAXA,EAAsBA,IAAW7B,EAAM6B,EAAO7B,MAAQA,IA0C/E8B,CAAa9B,EAAKsB,GAC9BrB,EAxCa,CAAC0B,GACbA,GAAkC,iBAAdA,GAA0B,SAAUA,EAC1DA,EAAU1B,MAAQ,SACnB,SAqCS8B,CAAaJ,GACpBK,EAA2B,iBAARhC,EAAmBA,EAAMA,EAAIA,IAEhDiC,QAASC,GAAgB,QAAQF,EAAUG,0BAC3CC,EAAe,QAAQJ,IACvBK,EAAWpB,EAAiBqB,aAAaF,GAG/C,MAAO,CAAEjC,MADcD,EAAT+B,EAAoBA,EAAOM,WAA+BF,EAAnBpC,GACrCD,IAAKgC,IAyCoBQ,CAAiBxC,EAAKiB,EAAkBK,GACrEG,EAAcX,KAAcX,IAC9BsB,EAAcX,GAAYX,EAC1BuB,GAAY,MAITA,EAAYD,EAAgBD,MAIvCD,IAEA,MAAMkB,EAAW,IAAIC,iBAAiBnB,GAGtC,OAFAkB,EAASE,QAAQ1B,EAAkB,CAAET,YAAY,IAE1C,IAAMiC,EAASG,eACrB,CAACtC,IAEGE"}
+{"version":3,"file":"useMicroFrontendAttributes.cjs.js","sources":["../../src/custom-hooks/useMicroFrontendAttributes.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ntype KeyType = 'boolean' | 'number' | 'string';\n\ninterface KeyConfig {\n  key: string;\n  type?: KeyType; // type is optional, defaults to 'string'\n}\n\nconst ALWAYS_RETURN_KEYS: (KeyConfig | string)[] = [\n  'org-id',\n  'app-id',\n  { key: 'is-flipdish-staff', type: 'boolean' },\n] as const;\n\ntype AlwaysReturnKeys = (typeof ALWAYS_RETURN_KEYS)[number] extends KeyConfig\n  ? (typeof ALWAYS_RETURN_KEYS)[number]['key']\n  : (typeof ALWAYS_RETURN_KEYS)[number];\n\ntype ExtractKey<T> = T extends KeyConfig ? T['key'] : T;\n\ntype AttributeValue = boolean | number | string | null;\n\n// Utility functions moved outside\ntype KeyArg<T> = AlwaysReturnKeys | T | string;\nconst getKeyConfig = <T extends KeyConfig | string>(key: KeyArg<T>, allConfigs: (KeyConfig | string)[]) => {\n  return allConfigs.find((config) => (typeof config === 'string' ? config === key : config.key === key));\n};\n\nconst getValueType = (keyConfig: KeyConfig | string | undefined): KeyType => {\n  return keyConfig && typeof keyConfig !== 'string' && 'type' in keyConfig\n    ? (keyConfig.type ?? 'string')\n    : 'string';\n};\n\nconst parseValue = (value: string | null, type: KeyType): AttributeValue => {\n  if (!value && type !== 'boolean') return null;\n  if (type === 'boolean') return value === 'true';\n  if (type === 'number') return Number(value);\n  return value;\n};\n\nconst getAllKeys = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): (AlwaysReturnKeys | T | string)[] => {\n  return [\n    ...ALWAYS_RETURN_KEYS.map((key) => (typeof key === 'string' ? key : key.key)),\n    ...customKeys.map((key) => (typeof key === 'string' ? key : key.key)),\n  ];\n};\n\nconst getInitialState = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const allKeys = getAllKeys(customKeys);\n  const initialState = {} as Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue>;\n  allKeys.forEach((key) => {\n    const typedKey = (typeof key === 'string' ? key : key.key) as ExtractKey<AlwaysReturnKeys | T>;\n    initialState[typedKey] = null;\n  });\n  return initialState;\n};\n\nconst processAttribute = <T extends KeyConfig | string>(\n  key: AlwaysReturnKeys | T | string,\n  microFrontendDiv: HTMLElement,\n  allConfigs: (KeyConfig | string)[],\n): { value: AttributeValue; key: ExtractKey<AlwaysReturnKeys | T> } => {\n  const keyConfig = getKeyConfig(key, allConfigs);\n  const type = getValueType(keyConfig);\n  const keyString = typeof key === 'string' ? key : key.key;\n\n  const envVar = import.meta.env[`VITE_${keyString.toUpperCase()}_OVERRIDE`] as string | null | undefined;\n  const attributeKey = `data-${keyString}`;\n  const domValue = microFrontendDiv.getAttribute(attributeKey);\n\n  const value = envVar ? parseValue(envVar.toString(), type) : parseValue(domValue, type);\n  return { value, key: keyString as ExtractKey<AlwaysReturnKeys | T> };\n};\n\n/**\n * Custom hook to manage micro-frontend attributes.\n *\n * This hook initializes and updates a set of attributes based on a combination of predefined keys (ALWAYS_RETURN_KEYS)\n * and custom keys provided as arguments. The attributes are fetched from environment variables or DOM attributes\n * and are updated dynamically using a MutationObserver.\n *\n * @template T - The type of custom keys, which can be either a string or a KeyConfig object.\n *\n * @param {Array<T | KeyConfig>} [customKeys=[]] - An array of custom keys or KeyConfig objects to be included in the attributes.\n *\n * @returns {Record<ExtractKey<AlwaysReturnKeys | T>, string | boolean | number | null>} - A record of attributes with their values.\n *\n * @example\n * const attributes = useMicroFrontendAttributes(['customKey1', { key: 'customKey2', type: 'boolean' }]);\n * console.log(attributes);\n */\nconst useMicroFrontendAttributes = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[] = [],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const [attributes, setAttributes] = useState(() => getInitialState(customKeys));\n\n  useEffect(() => {\n    const microFrontendDiv = document.getElementById('flipdish-micro-frontend');\n    if (!microFrontendDiv) {\n      console.warn('Micro-frontend div not found');\n      return;\n    }\n\n    const allKeys = getAllKeys(customKeys);\n    const allConfigs = [...ALWAYS_RETURN_KEYS, ...customKeys];\n\n    const updateValues = () => {\n      setAttributes((prev) => {\n        const newAttributes = { ...prev };\n        let isChanged = false;\n\n        allKeys.forEach((key) => {\n          const { value, key: typedKey } = processAttribute(key, microFrontendDiv, allConfigs);\n          if (newAttributes[typedKey] !== value) {\n            newAttributes[typedKey] = value;\n            isChanged = true;\n          }\n        });\n\n        return isChanged ? newAttributes : prev;\n      });\n    };\n\n    updateValues();\n\n    const observer = new MutationObserver(updateValues);\n    observer.observe(microFrontendDiv, { attributes: true });\n\n    return () => observer.disconnect();\n  }, [customKeys]);\n\n  return attributes;\n};\n\nexport default useMicroFrontendAttributes;\n"],"names":["ALWAYS_RETURN_KEYS","key","type","parseValue","value","Number","getAllKeys","customKeys","map","attributes","setAttributes","useState","allKeys","initialState","forEach","typedKey","getInitialState","useEffect","microFrontendDiv","document","getElementById","console","warn","allConfigs","updateValues","prev","newAttributes","isChanged","keyConfig","find","config","getKeyConfig","getValueType","keyString","envVar","undefined","toUpperCase","attributeKey","domValue","getAttribute","toString","processAttribute","observer","MutationObserver","observe","disconnect"],"mappings":"oCASA,MAAMA,EAA6C,CACjD,SACA,SACA,CAAEC,IAAK,oBAAqBC,KAAM,YAuB9BC,EAAa,CAACC,EAAsBF,IACnCE,GAAkB,YAATF,EACD,YAATA,EAAqC,SAAVE,EAClB,WAATF,EAA0BG,OAAOD,GAC9BA,EAHkC,KAMrCE,EACJC,GAEO,IACFP,EAAmBQ,IAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,QACrEM,EAAWC,IAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,qBAkDjC,CACjCM,EAAgC,MAEhC,MAAOE,EAAYC,GAAiBC,EAAAA,SAAS,IAjDvB,CACtBJ,IAEA,MAAMK,EAAUN,EAAWC,GACrBM,EAAe,CAAA,EAKrB,OAJAD,EAAQE,QAASb,IACf,MAAMc,EAA2B,iBAARd,EAAmBA,EAAMA,EAAIA,IACtDY,EAAaE,GAAY,OAEpBF,GAwC4CG,CAAgBT,IAqCnE,OAnCAU,EAAAA,UAAU,KACR,MAAMC,EAAmBC,SAASC,eAAe,2BACjD,IAAKF,EAEH,YADAG,QAAQC,KAAK,gCAIf,MAAMV,EAAUN,EAAWC,GACrBgB,EAAa,IAAIvB,KAAuBO,GAExCiB,EAAe,KACnBd,EAAee,IACb,MAAMC,EAAgB,IAAKD,GAC3B,IAAIE,GAAY,EAUhB,OARAf,EAAQE,QAASb,IACf,MAAMG,MAAEA,EAAOH,IAAKc,GAvDL,EACvBd,EACAiB,EACAK,KAEA,MAAMK,EA3Ca,EAA+B3B,EAAgBsB,IAC3DA,EAAWM,KAAMC,GAA8B,iBAAXA,EAAsBA,IAAW7B,EAAM6B,EAAO7B,MAAQA,GA0C/E8B,CAAa9B,EAAKsB,GAC9BrB,EAxCa,CAAC0B,GACbA,GAAkC,iBAAdA,GAA0B,SAAUA,EAC1DA,EAAU1B,MAAQ,SACnB,SAqCS8B,CAAaJ,GACpBK,EAA2B,iBAARhC,EAAmBA,EAAMA,EAAIA,IAEhDiC,QAASC,GAAgB,QAAQF,EAAUG,0BAC3CC,EAAe,QAAQJ,IACvBK,EAAWpB,EAAiBqB,aAAaF,GAG/C,MAAO,CAAEjC,MADcD,EAAT+B,EAAoBA,EAAOM,WAA+BF,EAAnBpC,GACrCD,IAAKgC,IAyCoBQ,CAAiBxC,EAAKiB,EAAkBK,GACrEG,EAAcX,KAAcX,IAC9BsB,EAAcX,GAAYX,EAC1BuB,GAAY,KAITA,EAAYD,EAAgBD,KAIvCD,IAEA,MAAMkB,EAAW,IAAIC,iBAAiBnB,GAGtC,OAFAkB,EAASE,QAAQ1B,EAAkB,CAAET,YAAY,IAE1C,IAAMiC,EAASG,cACrB,CAACtC,IAEGE"}

package/dist/custom-hooks/useMicroFrontendAttributes.js

@@ -1,2 +1,2 @@
-import{useState as t,useEffect as e}from"react";const n=["org-id","app-id",{key:"is-flipdish-staff",type:"boolean"}],o=(t,e)=>t||"boolean"===e?"boolean"===e?"true"===t:"number"===e?Number(t):t:null,r=t=>[...n.map((t=>"string"==typeof t?t:t.key)),...t.map((t=>"string"==typeof t?t:t.key))],i=(i=[])=>{const[s,a]=t((()=>(t=>{const e=r(t),n={};return e.forEach((t=>{const e="string"==typeof t?t:t.key;n[e]=null})),n})(i)));return e((()=>{const t=document.getElementById("flipdish-micro-frontend");if(!t)return void console.warn("Micro-frontend div not found");const e=r(i),s=[...n,...i],p=()=>{a((n=>{const r={...n};let i=!1;return e.forEach((e=>{const{value:n,key:a}=((t,e,n)=>{const r=((t,e)=>e.find((e=>"string"==typeof e?e===t:e.key===t)))(t,n),i=(t=>t&&"string"!=typeof t&&"type"in t?t.type??"string":"string")(r),s="string"==typeof t?t:t.key,a=import.meta.env[`VITE_${s.toUpperCase()}_OVERRIDE`],p=`data-${s}`,c=e.getAttribute(p);return{value:o(a?a.toString():c,i),key:s}})(e,t,s);r[a]!==n&&(r[a]=n,i=!0)})),i?r:n}))};p();const c=new MutationObserver(p);return c.observe(t,{attributes:!0}),()=>c.disconnect()}),[i]),s};export{i as default};
+import{useState as t,useEffect as e}from"react";const n=["org-id","app-id",{key:"is-flipdish-staff",type:"boolean"}],o=(t,e)=>t||"boolean"===e?"boolean"===e?"true"===t:"number"===e?Number(t):t:null,r=t=>[...n.map(t=>"string"==typeof t?t:t.key),...t.map(t=>"string"==typeof t?t:t.key)],i=(i=[])=>{const[s,a]=t(()=>(t=>{const e=r(t),n={};return e.forEach(t=>{const e="string"==typeof t?t:t.key;n[e]=null}),n})(i));return e(()=>{const t=document.getElementById("flipdish-micro-frontend");if(!t)return void console.warn("Micro-frontend div not found");const e=r(i),s=[...n,...i],p=()=>{a(n=>{const r={...n};let i=!1;return e.forEach(e=>{const{value:n,key:a}=((t,e,n)=>{const r=((t,e)=>e.find(e=>"string"==typeof e?e===t:e.key===t))(t,n),i=(t=>t&&"string"!=typeof t&&"type"in t?t.type??"string":"string")(r),s="string"==typeof t?t:t.key,a=import.meta.env[`VITE_${s.toUpperCase()}_OVERRIDE`],p=`data-${s}`,c=e.getAttribute(p);return{value:o(a?a.toString():c,i),key:s}})(e,t,s);r[a]!==n&&(r[a]=n,i=!0)}),i?r:n})};p();const c=new MutationObserver(p);return c.observe(t,{attributes:!0}),()=>c.disconnect()},[i]),s};export{i as default};
 //# sourceMappingURL=useMicroFrontendAttributes.js.map

package/dist/custom-hooks/useMicroFrontendAttributes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMicroFrontendAttributes.js","sources":["../../src/custom-hooks/useMicroFrontendAttributes.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ntype KeyType = 'boolean' | 'number' | 'string';\n\ninterface KeyConfig {\n  key: string;\n  type?: KeyType; // type is optional, defaults to 'string'\n}\n\nconst ALWAYS_RETURN_KEYS: (KeyConfig | string)[] = [\n  'org-id',\n  'app-id',\n  { key: 'is-flipdish-staff', type: 'boolean' },\n] as const;\n\ntype AlwaysReturnKeys = (typeof ALWAYS_RETURN_KEYS)[number] extends KeyConfig\n  ? (typeof ALWAYS_RETURN_KEYS)[number]['key']\n  : (typeof ALWAYS_RETURN_KEYS)[number];\n\ntype ExtractKey<T> = T extends KeyConfig ? T['key'] : T;\n\ntype AttributeValue = boolean | number | string | null;\n\n// Utility functions moved outside\ntype KeyArg<T> = AlwaysReturnKeys | T | string;\nconst getKeyConfig = <T extends KeyConfig | string>(key: KeyArg<T>, allConfigs: (KeyConfig | string)[]) => {\n  return allConfigs.find((config) => (typeof config === 'string' ? config === key : config.key === key));\n};\n\nconst getValueType = (keyConfig: KeyConfig | string | undefined): KeyType => {\n  return keyConfig && typeof keyConfig !== 'string' && 'type' in keyConfig\n    ? (keyConfig.type ?? 'string')\n    : 'string';\n};\n\nconst parseValue = (value: string | null, type: KeyType): AttributeValue => {\n  if (!value && type !== 'boolean') return null;\n  if (type === 'boolean') return value === 'true';\n  if (type === 'number') return Number(value);\n  return value;\n};\n\nconst getAllKeys = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): (AlwaysReturnKeys | T | string)[] => {\n  return [\n    ...ALWAYS_RETURN_KEYS.map((key) => (typeof key === 'string' ? key : key.key)),\n    ...customKeys.map((key) => (typeof key === 'string' ? key : key.key)),\n  ];\n};\n\nconst getInitialState = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const allKeys = getAllKeys(customKeys);\n  const initialState = {} as Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue>;\n  allKeys.forEach((key) => {\n    const typedKey = (typeof key === 'string' ? key : key.key) as ExtractKey<AlwaysReturnKeys | T>;\n    initialState[typedKey] = null;\n  });\n  return initialState;\n};\n\nconst processAttribute = <T extends KeyConfig | string>(\n  key: AlwaysReturnKeys | T | string,\n  microFrontendDiv: HTMLElement,\n  allConfigs: (KeyConfig | string)[],\n): { value: AttributeValue; key: ExtractKey<AlwaysReturnKeys | T> } => {\n  const keyConfig = getKeyConfig(key, allConfigs);\n  const type = getValueType(keyConfig);\n  const keyString = typeof key === 'string' ? key : key.key;\n\n  const envVar = import.meta.env[`VITE_${keyString.toUpperCase()}_OVERRIDE`] as string | null | undefined;\n  const attributeKey = `data-${keyString}`;\n  const domValue = microFrontendDiv.getAttribute(attributeKey);\n\n  const value = envVar ? parseValue(envVar.toString(), type) : parseValue(domValue, type);\n  return { value, key: keyString as ExtractKey<AlwaysReturnKeys | T> };\n};\n\n/**\n * Custom hook to manage micro-frontend attributes.\n *\n * This hook initializes and updates a set of attributes based on a combination of predefined keys (ALWAYS_RETURN_KEYS)\n * and custom keys provided as arguments. The attributes are fetched from environment variables or DOM attributes\n * and are updated dynamically using a MutationObserver.\n *\n * @template T - The type of custom keys, which can be either a string or a KeyConfig object.\n *\n * @param {Array<T | KeyConfig>} [customKeys=[]] - An array of custom keys or KeyConfig objects to be included in the attributes.\n *\n * @returns {Record<ExtractKey<AlwaysReturnKeys | T>, string | boolean | number | null>} - A record of attributes with their values.\n *\n * @example\n * const attributes = useMicroFrontendAttributes(['customKey1', { key: 'customKey2', type: 'boolean' }]);\n * console.log(attributes);\n */\nconst useMicroFrontendAttributes = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[] = [],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const [attributes, setAttributes] = useState(() => getInitialState(customKeys));\n\n  useEffect(() => {\n    const microFrontendDiv = document.getElementById('flipdish-micro-frontend');\n    if (!microFrontendDiv) {\n      console.warn('Micro-frontend div not found');\n      return;\n    }\n\n    const allKeys = getAllKeys(customKeys);\n    const allConfigs = [...ALWAYS_RETURN_KEYS, ...customKeys];\n\n    const updateValues = () => {\n      setAttributes((prev) => {\n        const newAttributes = { ...prev };\n        let isChanged = false;\n\n        allKeys.forEach((key) => {\n          const { value, key: typedKey } = processAttribute(key, microFrontendDiv, allConfigs);\n          if (newAttributes[typedKey] !== value) {\n            newAttributes[typedKey] = value;\n            isChanged = true;\n          }\n        });\n\n        return isChanged ? newAttributes : prev;\n      });\n    };\n\n    updateValues();\n\n    const observer = new MutationObserver(updateValues);\n    observer.observe(microFrontendDiv, { attributes: true });\n\n    return () => observer.disconnect();\n  }, [customKeys]);\n\n  return attributes;\n};\n\nexport default useMicroFrontendAttributes;\n"],"names":["ALWAYS_RETURN_KEYS","key","type","parseValue","value","Number","getAllKeys","customKeys","map","useMicroFrontendAttributes","attributes","setAttributes","useState","allKeys","initialState","forEach","typedKey","getInitialState","useEffect","microFrontendDiv","document","getElementById","console","warn","allConfigs","updateValues","prev","newAttributes","isChanged","keyConfig","find","config","getKeyConfig","getValueType","keyString","envVar","env","toUpperCase","attributeKey","domValue","getAttribute","toString","processAttribute","observer","MutationObserver","observe","disconnect"],"mappings":"gDASA,MAAMA,EAA6C,CACjD,SACA,SACA,CAAEC,IAAK,oBAAqBC,KAAM,YAuB9BC,EAAa,CAACC,EAAsBF,IACnCE,GAAkB,YAATF,EACD,YAATA,EAAqC,SAAVE,EAClB,WAATF,EAA0BG,OAAOD,GAC9BA,EAHkC,KAMrCE,EACJC,GAEO,IACFP,EAAmBQ,KAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,SACrEM,EAAWC,KAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,OAkD9DQ,EAA6B,CACjCF,EAAgC,MAEhC,MAAOG,EAAYC,GAAiBC,GAAS,IAjDvB,CACtBL,IAEA,MAAMM,EAAUP,EAAWC,GACrBO,EAAe,CAAA,EAKrB,OAJAD,EAAQE,SAASd,IACf,MAAMe,EAA2B,iBAARf,EAAmBA,EAAMA,EAAIA,IACtDa,EAAaE,GAAY,QAEpBF,GAwC4CG,CAAgBV,KAqCnE,OAnCAW,GAAU,KACR,MAAMC,EAAmBC,SAASC,eAAe,2BACjD,IAAKF,EAEH,YADAG,QAAQC,KAAK,gCAIf,MAAMV,EAAUP,EAAWC,GACrBiB,EAAa,IAAIxB,KAAuBO,GAExCkB,EAAe,KACnBd,GAAee,IACb,MAAMC,EAAgB,IAAKD,GAC3B,IAAIE,GAAY,EAUhB,OARAf,EAAQE,SAASd,IACf,MAAMG,MAAEA,EAAOH,IAAKe,GAvDL,EACvBf,EACAkB,EACAK,KAEA,MAAMK,EA3Ca,EAA+B5B,EAAgBuB,IAC3DA,EAAWM,MAAMC,GAA8B,iBAAXA,EAAsBA,IAAW9B,EAAM8B,EAAO9B,MAAQA,IA0C/E+B,CAAa/B,EAAKuB,GAC9BtB,EAxCa,CAAC2B,GACbA,GAAkC,iBAAdA,GAA0B,SAAUA,EAC1DA,EAAU3B,MAAQ,SACnB,SAqCS+B,CAAaJ,GACpBK,EAA2B,iBAARjC,EAAmBA,EAAMA,EAAIA,IAEhDkC,cAAqBC,IAAI,QAAQF,EAAUG,0BAC3CC,EAAe,QAAQJ,IACvBK,EAAWpB,EAAiBqB,aAAaF,GAG/C,MAAO,CAAElC,MADcD,EAATgC,EAAoBA,EAAOM,WAA+BF,EAAnBrC,GACrCD,IAAKiC,IAyCoBQ,CAAiBzC,EAAKkB,EAAkBK,GACrEG,EAAcX,KAAcZ,IAC9BuB,EAAcX,GAAYZ,EAC1BwB,GAAY,MAITA,EAAYD,EAAgBD,MAIvCD,IAEA,MAAMkB,EAAW,IAAIC,iBAAiBnB,GAGtC,OAFAkB,EAASE,QAAQ1B,EAAkB,CAAET,YAAY,IAE1C,IAAMiC,EAASG,eACrB,CAACvC,IAEGG"}
+{"version":3,"file":"useMicroFrontendAttributes.js","sources":["../../src/custom-hooks/useMicroFrontendAttributes.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ntype KeyType = 'boolean' | 'number' | 'string';\n\ninterface KeyConfig {\n  key: string;\n  type?: KeyType; // type is optional, defaults to 'string'\n}\n\nconst ALWAYS_RETURN_KEYS: (KeyConfig | string)[] = [\n  'org-id',\n  'app-id',\n  { key: 'is-flipdish-staff', type: 'boolean' },\n] as const;\n\ntype AlwaysReturnKeys = (typeof ALWAYS_RETURN_KEYS)[number] extends KeyConfig\n  ? (typeof ALWAYS_RETURN_KEYS)[number]['key']\n  : (typeof ALWAYS_RETURN_KEYS)[number];\n\ntype ExtractKey<T> = T extends KeyConfig ? T['key'] : T;\n\ntype AttributeValue = boolean | number | string | null;\n\n// Utility functions moved outside\ntype KeyArg<T> = AlwaysReturnKeys | T | string;\nconst getKeyConfig = <T extends KeyConfig | string>(key: KeyArg<T>, allConfigs: (KeyConfig | string)[]) => {\n  return allConfigs.find((config) => (typeof config === 'string' ? config === key : config.key === key));\n};\n\nconst getValueType = (keyConfig: KeyConfig | string | undefined): KeyType => {\n  return keyConfig && typeof keyConfig !== 'string' && 'type' in keyConfig\n    ? (keyConfig.type ?? 'string')\n    : 'string';\n};\n\nconst parseValue = (value: string | null, type: KeyType): AttributeValue => {\n  if (!value && type !== 'boolean') return null;\n  if (type === 'boolean') return value === 'true';\n  if (type === 'number') return Number(value);\n  return value;\n};\n\nconst getAllKeys = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): (AlwaysReturnKeys | T | string)[] => {\n  return [\n    ...ALWAYS_RETURN_KEYS.map((key) => (typeof key === 'string' ? key : key.key)),\n    ...customKeys.map((key) => (typeof key === 'string' ? key : key.key)),\n  ];\n};\n\nconst getInitialState = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const allKeys = getAllKeys(customKeys);\n  const initialState = {} as Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue>;\n  allKeys.forEach((key) => {\n    const typedKey = (typeof key === 'string' ? key : key.key) as ExtractKey<AlwaysReturnKeys | T>;\n    initialState[typedKey] = null;\n  });\n  return initialState;\n};\n\nconst processAttribute = <T extends KeyConfig | string>(\n  key: AlwaysReturnKeys | T | string,\n  microFrontendDiv: HTMLElement,\n  allConfigs: (KeyConfig | string)[],\n): { value: AttributeValue; key: ExtractKey<AlwaysReturnKeys | T> } => {\n  const keyConfig = getKeyConfig(key, allConfigs);\n  const type = getValueType(keyConfig);\n  const keyString = typeof key === 'string' ? key : key.key;\n\n  const envVar = import.meta.env[`VITE_${keyString.toUpperCase()}_OVERRIDE`] as string | null | undefined;\n  const attributeKey = `data-${keyString}`;\n  const domValue = microFrontendDiv.getAttribute(attributeKey);\n\n  const value = envVar ? parseValue(envVar.toString(), type) : parseValue(domValue, type);\n  return { value, key: keyString as ExtractKey<AlwaysReturnKeys | T> };\n};\n\n/**\n * Custom hook to manage micro-frontend attributes.\n *\n * This hook initializes and updates a set of attributes based on a combination of predefined keys (ALWAYS_RETURN_KEYS)\n * and custom keys provided as arguments. The attributes are fetched from environment variables or DOM attributes\n * and are updated dynamically using a MutationObserver.\n *\n * @template T - The type of custom keys, which can be either a string or a KeyConfig object.\n *\n * @param {Array<T | KeyConfig>} [customKeys=[]] - An array of custom keys or KeyConfig objects to be included in the attributes.\n *\n * @returns {Record<ExtractKey<AlwaysReturnKeys | T>, string | boolean | number | null>} - A record of attributes with their values.\n *\n * @example\n * const attributes = useMicroFrontendAttributes(['customKey1', { key: 'customKey2', type: 'boolean' }]);\n * console.log(attributes);\n */\nconst useMicroFrontendAttributes = <T extends KeyConfig | string>(\n  customKeys: (KeyConfig | T)[] = [],\n): Record<ExtractKey<AlwaysReturnKeys | T>, AttributeValue> => {\n  const [attributes, setAttributes] = useState(() => getInitialState(customKeys));\n\n  useEffect(() => {\n    const microFrontendDiv = document.getElementById('flipdish-micro-frontend');\n    if (!microFrontendDiv) {\n      console.warn('Micro-frontend div not found');\n      return;\n    }\n\n    const allKeys = getAllKeys(customKeys);\n    const allConfigs = [...ALWAYS_RETURN_KEYS, ...customKeys];\n\n    const updateValues = () => {\n      setAttributes((prev) => {\n        const newAttributes = { ...prev };\n        let isChanged = false;\n\n        allKeys.forEach((key) => {\n          const { value, key: typedKey } = processAttribute(key, microFrontendDiv, allConfigs);\n          if (newAttributes[typedKey] !== value) {\n            newAttributes[typedKey] = value;\n            isChanged = true;\n          }\n        });\n\n        return isChanged ? newAttributes : prev;\n      });\n    };\n\n    updateValues();\n\n    const observer = new MutationObserver(updateValues);\n    observer.observe(microFrontendDiv, { attributes: true });\n\n    return () => observer.disconnect();\n  }, [customKeys]);\n\n  return attributes;\n};\n\nexport default useMicroFrontendAttributes;\n"],"names":["ALWAYS_RETURN_KEYS","key","type","parseValue","value","Number","getAllKeys","customKeys","map","useMicroFrontendAttributes","attributes","setAttributes","useState","allKeys","initialState","forEach","typedKey","getInitialState","useEffect","microFrontendDiv","document","getElementById","console","warn","allConfigs","updateValues","prev","newAttributes","isChanged","keyConfig","find","config","getKeyConfig","getValueType","keyString","envVar","env","toUpperCase","attributeKey","domValue","getAttribute","toString","processAttribute","observer","MutationObserver","observe","disconnect"],"mappings":"gDASA,MAAMA,EAA6C,CACjD,SACA,SACA,CAAEC,IAAK,oBAAqBC,KAAM,YAuB9BC,EAAa,CAACC,EAAsBF,IACnCE,GAAkB,YAATF,EACD,YAATA,EAAqC,SAAVE,EAClB,WAATF,EAA0BG,OAAOD,GAC9BA,EAHkC,KAMrCE,EACJC,GAEO,IACFP,EAAmBQ,IAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,QACrEM,EAAWC,IAAKP,GAAwB,iBAARA,EAAmBA,EAAMA,EAAIA,MAkD9DQ,EAA6B,CACjCF,EAAgC,MAEhC,MAAOG,EAAYC,GAAiBC,EAAS,IAjDvB,CACtBL,IAEA,MAAMM,EAAUP,EAAWC,GACrBO,EAAe,CAAA,EAKrB,OAJAD,EAAQE,QAASd,IACf,MAAMe,EAA2B,iBAARf,EAAmBA,EAAMA,EAAIA,IACtDa,EAAaE,GAAY,OAEpBF,GAwC4CG,CAAgBV,IAqCnE,OAnCAW,EAAU,KACR,MAAMC,EAAmBC,SAASC,eAAe,2BACjD,IAAKF,EAEH,YADAG,QAAQC,KAAK,gCAIf,MAAMV,EAAUP,EAAWC,GACrBiB,EAAa,IAAIxB,KAAuBO,GAExCkB,EAAe,KACnBd,EAAee,IACb,MAAMC,EAAgB,IAAKD,GAC3B,IAAIE,GAAY,EAUhB,OARAf,EAAQE,QAASd,IACf,MAAMG,MAAEA,EAAOH,IAAKe,GAvDL,EACvBf,EACAkB,EACAK,KAEA,MAAMK,EA3Ca,EAA+B5B,EAAgBuB,IAC3DA,EAAWM,KAAMC,GAA8B,iBAAXA,EAAsBA,IAAW9B,EAAM8B,EAAO9B,MAAQA,GA0C/E+B,CAAa/B,EAAKuB,GAC9BtB,EAxCa,CAAC2B,GACbA,GAAkC,iBAAdA,GAA0B,SAAUA,EAC1DA,EAAU3B,MAAQ,SACnB,SAqCS+B,CAAaJ,GACpBK,EAA2B,iBAARjC,EAAmBA,EAAMA,EAAIA,IAEhDkC,cAAqBC,IAAI,QAAQF,EAAUG,0BAC3CC,EAAe,QAAQJ,IACvBK,EAAWpB,EAAiBqB,aAAaF,GAG/C,MAAO,CAAElC,MADcD,EAATgC,EAAoBA,EAAOM,WAA+BF,EAAnBrC,GACrCD,IAAKiC,IAyCoBQ,CAAiBzC,EAAKkB,EAAkBK,GACrEG,EAAcX,KAAcZ,IAC9BuB,EAAcX,GAAYZ,EAC1BwB,GAAY,KAITA,EAAYD,EAAgBD,KAIvCD,IAEA,MAAMkB,EAAW,IAAIC,iBAAiBnB,GAGtC,OAFAkB,EAASE,QAAQ1B,EAAkB,CAAET,YAAY,IAE1C,IAAMiC,EAASG,cACrB,CAACvC,IAEGG"}