@cgi-learning-hub/ui 1.5.0-dev.1743686462 → 1.5.0-dev.1743700044

package/dist/components/Dialog/Dialog.cjs.js

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),t=require("../../CloseRounded-D4Rf4Yq-.cjs"),c=require("@mui/material"),u=require("../../Dialog-LbgQSeqb.cjs"),a=({children:s,showCloseButton:i=!0,...e})=>{const o=()=>{var l;return(l=e.onClose)==null?void 0:l.call(e,{},"escapeKeyDown")};return n.jsxs(u.Dialog,{...e,children:[i?n.jsx(c.IconButton,{"aria-label":"close",onClick:o,sx:{position:"absolute",right:24,top:24},children:n.jsx(t.CloseRounded,{})}):null,s]})};module.exports=a;
+"use strict";const n=require("react/jsx-runtime"),s=require("../../CloseRounded-D4Rf4Yq-.cjs"),c=require("@mui/material"),a=require("../../Dialog-LbgQSeqb.cjs"),r=({children:i,showCloseButton:o=!0,...e})=>{const t=()=>{var l;return(l=e.onClose)==null?void 0:l.call(e,{},"escapeKeyDown")};return n.jsxs(a.Dialog,{...e,children:[o?n.jsx(c.IconButton,{"aria-label":"close",onClick:t,sx:{position:"absolute",right:15,top:15,color:l=>l.palette.text.primary},children:n.jsx(s.CloseRounded,{color:"inherit"})}):null,i]})};module.exports=r;

package/dist/components/Dialog/Dialog.es.js

@@ -1,25 +1,25 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { C as s } from "../../CloseRounded-DXBTbQ8P.js";
-import { IconButton as t } from "@mui/material";
-import { D as c } from "../../Dialog-BdWhnP_F.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { C as a } from "../../CloseRounded-DXBTbQ8P.js";
+import { IconButton as s } from "@mui/material";
+import { D as r } from "../../Dialog-BdWhnP_F.js";
 const f = ({
-  children: e,
-  showCloseButton: a = !0,
-  ...l
-}) => /* @__PURE__ */ i(c, { ...l, children: [
-  a ? /* @__PURE__ */ n(
-    t,
+  children: i,
+  showCloseButton: n = !0,
+  ...o
+}) => /* @__PURE__ */ t(r, { ...o, children: [
+  n ? /* @__PURE__ */ e(
+    s,
     {
       "aria-label": "close",
       onClick: () => {
-        var o;
-        return (o = l.onClose) == null ? void 0 : o.call(l, {}, "escapeKeyDown");
+        var l;
+        return (l = o.onClose) == null ? void 0 : l.call(o, {}, "escapeKeyDown");
       },
-      sx: { position: "absolute", right: 24, top: 24 },
-      children: /* @__PURE__ */ n(s, {})
+      sx: { position: "absolute", right: 15, top: 15, color: (l) => l.palette.text.primary },
+      children: /* @__PURE__ */ e(a, { color: "inherit" })
     }
   ) : null,
-  e
+  i
 ] });
 export {
   f as default

package/dist/components/FolderCard/FolderCard.cjs.js

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),h=require("../../Folder-NcfJgwuN.cjs"),m=require("../../MoreVert-RHtym60m.cjs"),s=require("@mui/material"),p=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),n=require("./styles.cjs.js"),d=require("../ResourceCard/style.cjs.js"),c=require("./types.cjs.js"),f=({isSelected:o=!1,onSelect:l=()=>{},title:x,subtitle:a,width:y="320px",onClick:t=()=>{},iconSize:u="2rem"})=>{const i=e=>e.key==="Enter"||e.key===" ";return r.jsx(s.Box,{sx:{width:y},children:r.jsxs(d.StyledCard,{selected:o,onClick:t,onKeyDown:e=>{i(e)&&(e.preventDefault(),t==null||t())},role:"button",tabIndex:0,"aria-labelledby":"folder-title folder-subtitle","aria-pressed":o,children:[r.jsx(d.SelectedIcon,{onClick:e=>{e.preventDefault(),e.stopPropagation(),l()},onKeyDown:e=>{i(e)&&(e.preventDefault(),e.stopPropagation(),l())},className:"selected-icon",selected:o,role:"button",tabIndex:0,"aria-label":o?"Unselect folder":"Select folder","aria-pressed":o,children:r.jsx(m.MoreVertIcon,{})}),r.jsxs(s.CardContent,{sx:n.FolderBodyStyle,children:[r.jsx(s.Box,{fontSize:u,sx:n.IconContainerStyle,children:r.jsx(h.FolderIcon,{color:"primary",sx:n.FolderIconStyle,"aria-hidden":"true"})}),r.jsxs(s.Box,{sx:n.TextContainerStyle,children:[r.jsx(p,{typographyProps:c.titleTypographyProps,tooltipProps:{placement:"bottom",arrow:!0},children:x}),a&&r.jsx(p,{typographyProps:c.subtitleTypographyProps,tooltipProps:{placement:"bottom",arrow:!0},children:a})]})]})]})})};module.exports=f;
+"use strict";const r=require("react/jsx-runtime"),m=require("../../Folder-NcfJgwuN.cjs"),f=require("../../MoreVert-RHtym60m.cjs"),s=require("@mui/material"),p=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),d=require("../ResourceCard/style.cjs.js"),n=require("./styles.cjs.js"),c=require("./types.cjs.js"),j=({isSelected:o=!1,onSelect:l=()=>{},title:x,subtitle:a,width:y="320px",onClick:t=()=>{},iconSize:u="2rem",hasNoButtonOnFocus:h=!1})=>{const i=e=>e.key==="Enter"||e.key===" ";return r.jsx(s.Box,{sx:{width:y},children:r.jsxs(d.StyledCard,{selected:o,onClick:t,onKeyDown:e=>{i(e)&&(e.preventDefault(),t==null||t())},role:"button",tabIndex:0,"aria-labelledby":"folder-title folder-subtitle","aria-pressed":o,children:[r.jsx(d.SelectedIcon,{onClick:e=>{e.preventDefault(),e.stopPropagation(),l()},onKeyDown:e=>{i(e)&&(e.preventDefault(),e.stopPropagation(),l())},className:"selected-icon",selected:o,role:"button",tabIndex:0,"aria-label":o?"Unselect folder":"Select folder","aria-pressed":o,hasNoButtonOnFocus:h,children:r.jsx(f.MoreVertIcon,{})}),r.jsxs(s.CardContent,{sx:n.FolderBodyStyle,children:[r.jsx(s.Box,{fontSize:u,sx:n.IconContainerStyle,children:r.jsx(m.FolderIcon,{color:"primary",sx:n.FolderIconStyle,"aria-hidden":"true"})}),r.jsxs(s.Box,{sx:n.TextContainerStyle,children:[r.jsx(p,{typographyProps:c.titleTypographyProps,tooltipProps:{placement:"bottom",arrow:!0},children:x}),a&&r.jsx(p,{typographyProps:c.subtitleTypographyProps,tooltipProps:{placement:"bottom",arrow:!0},children:a})]})]})]})})};module.exports=j;

package/dist/components/FolderCard/FolderCard.d.ts

@@ -6,6 +6,7 @@ export type FolderCardProps = {
     width?: string;
     onClick?: () => void;
     iconSize?: string;
+    hasNoButtonOnFocus?: boolean;
 };
 declare const FolderCard: React.FunctionComponent<FolderCardProps>;
 export default FolderCard;

package/dist/components/FolderCard/FolderCard.es.js

@@ -1,12 +1,12 @@
 import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { F as f } from "../../Folder-DbtkTNEB.js";
-import { M as c } from "../../MoreVert-WFvQcAf-.js";
-import { Box as l, CardContent as h } from "@mui/material";
+import { F as c } from "../../Folder-DbtkTNEB.js";
+import { M as h } from "../../MoreVert-WFvQcAf-.js";
+import { Box as l, CardContent as x } from "@mui/material";
 import i from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
-import { FolderBodyStyle as x, IconContainerStyle as u, FolderIconStyle as b, TextContainerStyle as P } from "./styles.es.js";
-import { StyledCard as I, SelectedIcon as g } from "../ResourceCard/style.es.js";
-import { titleTypographyProps as D, subtitleTypographyProps as F } from "./types.es.js";
-const E = ({
+import { StyledCard as u, SelectedIcon as b } from "../ResourceCard/style.es.js";
+import { FolderBodyStyle as P, IconContainerStyle as I, FolderIconStyle as g, TextContainerStyle as D } from "./styles.es.js";
+import { titleTypographyProps as F, subtitleTypographyProps as w } from "./types.es.js";
+const M = ({
   isSelected: e = !1,
   onSelect: p = () => {
   },
@@ -15,11 +15,12 @@ const E = ({
   width: m = "320px",
   onClick: t = () => {
   },
-  iconSize: y = "2rem"
+  iconSize: f = "2rem",
+  hasNoButtonOnFocus: y = !1
 }) => {
   const s = (r) => r.key === "Enter" || r.key === " ";
   return /* @__PURE__ */ o(l, { sx: { width: m }, children: /* @__PURE__ */ a(
-    I,
+    u,
     {
       selected: e,
       onClick: t,
@@ -32,7 +33,7 @@ const E = ({
       "aria-pressed": e,
       children: [
         /* @__PURE__ */ o(
-          g,
+          b,
           {
             onClick: (r) => {
               r.preventDefault(), r.stopPropagation(), p();
@@ -46,16 +47,24 @@ const E = ({
             tabIndex: 0,
             "aria-label": e ? "Unselect folder" : "Select folder",
             "aria-pressed": e,
-            children: /* @__PURE__ */ o(c, {})
+            hasNoButtonOnFocus: y,
+            children: /* @__PURE__ */ o(h, {})
           }
         ),
-        /* @__PURE__ */ a(h, { sx: x, children: [
-          /* @__PURE__ */ o(l, { fontSize: y, sx: u, children: /* @__PURE__ */ o(f, { color: "primary", sx: b, "aria-hidden": "true" }) }),
-          /* @__PURE__ */ a(l, { sx: P, children: [
+        /* @__PURE__ */ a(x, { sx: P, children: [
+          /* @__PURE__ */ o(l, { fontSize: f, sx: I, children: /* @__PURE__ */ o(
+            c,
+            {
+              color: "primary",
+              sx: g,
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ a(l, { sx: D, children: [
             /* @__PURE__ */ o(
               i,
               {
-                typographyProps: D,
+                typographyProps: F,
                 tooltipProps: { placement: "bottom", arrow: !0 },
                 children: d
               }
@@ -63,7 +72,7 @@ const E = ({
             n && /* @__PURE__ */ o(
               i,
               {
-                typographyProps: F,
+                typographyProps: w,
                 tooltipProps: { placement: "bottom", arrow: !0 },
                 children: n
               }
@@ -75,5 +84,5 @@ const E = ({
   ) });
 };
 export {
-  E as default
+  M as default
 };

package/dist/components/ResourceCard/ResourceCard.cjs.js

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),b=require("../../MoreVert-RHtym60m.cjs"),d=require("@mui/material"),m=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),o=require("./style.cjs.js"),j=({isSelected:s=!1,onSelect:u=()=>{},image:x,title:c,defaultImage:h,propertyItems:p=[],infoIcons:l=[],size:t="md",width:i,onClick:n=()=>{}})=>(l=l.slice(0,3),r.jsx(d.Box,{sx:{width:i&&t==="md"?i:"320px"},children:r.jsxs(o.StyledCard,{selected:s,size:t,onClick:n,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),n==null||n())},role:"button",tabIndex:0,"aria-label":`Resource card for ${c}`,children:[r.jsx(o.SelectedIcon,{onClick:e=>{e.preventDefault(),e.stopPropagation(),u()},onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),u())},className:"selected-icon",selected:s,role:"button",tabIndex:0,"aria-label":s?"Unselect card":"Select card",children:r.jsx(b.MoreVertIcon,{})}),r.jsx(d.Stack,{sx:{width:t=="sm"?110:"100%",display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},children:r.jsx(o.ResourceCardImage,{image:x,defaultImage:h,size:t,role:"img","aria-label":`Image for ${c}`})}),r.jsxs(o.ResourceCardBody,{size:t,children:[r.jsx(m,{typographyProps:{variant:"h4",component:"p"},tooltipProps:{placement:"bottom",arrow:!0},children:c}),p.length>0&&p.map((e,a)=>r.jsxs(o.ResourcePropertyItem,{size:t,role:"group","aria-label":`Property ${a}`,children:[e.icon,r.jsx(o.ResourcePropertyText,{isLast:a===p.length-1,size:t,width:i,children:e.text})]},`property-${a}`)),r.jsx(o.PublicIconWrapper,{size:t,children:l.length>0&&l.map((e,a)=>r.jsx(d.Tooltip,{title:e.text,placement:"top",arrow:!0,children:r.jsx(o.ResourceIconItem,{size:t,role:"button",tabIndex:0,"aria-label":e.text,children:e.icon})},`info-${a}`))})]})]})}));module.exports=j;
+"use strict";const r=require("react/jsx-runtime"),m=require("../../MoreVert-RHtym60m.cjs"),d=require("@mui/material"),j=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),o=require("./style.cjs.js"),y=({isSelected:s=!1,onSelect:u=()=>{},image:x,title:c,defaultImage:h,propertyItems:p=[],infoIcons:l=[],size:t="md",width:i,onClick:n=()=>{},hasNoButtonOnFocus:b=!1})=>(l=l.slice(0,3),r.jsx(d.Box,{sx:{width:i&&t==="md"?i:"320px"},children:r.jsxs(o.StyledCard,{selected:s,size:t,onClick:n,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),n==null||n())},role:"button",tabIndex:0,"aria-label":`Resource card for ${c}`,children:[r.jsx(o.SelectedIcon,{onClick:e=>{e.preventDefault(),e.stopPropagation(),u()},onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),u())},className:"selected-icon",selected:s,role:"button",tabIndex:0,"aria-label":s?"Unselect card":"Select card",hasNoButtonOnFocus:b,children:r.jsx(m.MoreVertIcon,{})}),r.jsx(d.Stack,{sx:{width:t=="sm"?110:"100%",display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},children:r.jsx(o.ResourceCardImage,{image:x,defaultImage:h,size:t,role:"img","aria-label":`Image for ${c}`})}),r.jsxs(o.ResourceCardBody,{size:t,children:[r.jsx(j,{typographyProps:{variant:"h4",component:"p"},tooltipProps:{placement:"bottom",arrow:!0},children:c}),p.length>0&&p.map((e,a)=>r.jsxs(o.ResourcePropertyItem,{size:t,role:"group","aria-label":`Property ${a}`,children:[e.icon,r.jsx(o.ResourcePropertyText,{isLast:a===p.length-1,size:t,width:i,children:e.text})]},`property-${a}`)),r.jsx(o.PublicIconWrapper,{size:t,children:l.length>0&&l.map((e,a)=>r.jsx(d.Tooltip,{title:e.text,placement:"top",arrow:!0,children:r.jsx(o.ResourceIconItem,{size:t,role:"button",tabIndex:0,"aria-label":e.text,children:e.icon})},`info-${a}`))})]})]})}));module.exports=y;

package/dist/components/ResourceCard/ResourceCard.d.ts

@@ -19,6 +19,7 @@ export type ResourceCardProps = {
     size?: ResourceCardSize;
     width?: string;
     onClick?: () => void;
+    hasNoButtonOnFocus?: boolean;
 };
 declare const ResourceCard: React.FunctionComponent<ResourceCardProps>;
 export default ResourceCard;

package/dist/components/ResourceCard/ResourceCard.es.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { M as h } from "../../MoreVert-WFvQcAf-.js";
-import { Box as b, Stack as x, Tooltip as y } from "@mui/material";
-import f from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
-import { StyledCard as g, SelectedIcon as P, ResourceCardImage as R, ResourceCardBody as D, ResourcePropertyItem as I, ResourcePropertyText as $, PublicIconWrapper as v, ResourceIconItem as w } from "./style.es.js";
-const M = ({
+import { M as b } from "../../MoreVert-WFvQcAf-.js";
+import { Box as x, Stack as f, Tooltip as y } from "@mui/material";
+import g from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
+import { StyledCard as P, SelectedIcon as R, ResourceCardImage as D, ResourceCardBody as I, ResourcePropertyItem as $, ResourcePropertyText as v, PublicIconWrapper as w, ResourceIconItem as j } from "./style.es.js";
+const S = ({
   isSelected: n = !1,
   onSelect: m = () => {
   },
@@ -15,9 +15,10 @@ const M = ({
   size: t = "md",
   width: d,
   onClick: l = () => {
-  }
-}) => (a = a.slice(0, 3), /* @__PURE__ */ r(b, { sx: { width: d && t === "md" ? d : "320px" }, children: /* @__PURE__ */ i(
-  g,
+  },
+  hasNoButtonOnFocus: h = !1
+}) => (a = a.slice(0, 3), /* @__PURE__ */ r(x, { sx: { width: d && t === "md" ? d : "320px" }, children: /* @__PURE__ */ i(
+  P,
   {
     selected: n,
     size: t,
@@ -30,7 +31,7 @@ const M = ({
     "aria-label": `Resource card for ${c}`,
     children: [
       /* @__PURE__ */ r(
-        P,
+        R,
         {
           onClick: (e) => {
             e.preventDefault(), e.stopPropagation(), m();
@@ -43,11 +44,12 @@ const M = ({
           role: "button",
           tabIndex: 0,
           "aria-label": n ? "Unselect card" : "Select card",
-          children: /* @__PURE__ */ r(h, {})
+          hasNoButtonOnFocus: h,
+          children: /* @__PURE__ */ r(b, {})
         }
       ),
       /* @__PURE__ */ r(
-        x,
+        f,
         {
           sx: {
             width: t == "sm" ? 110 : "100%",
@@ -57,7 +59,7 @@ const M = ({
             boxSizing: "border-box"
           },
           children: /* @__PURE__ */ r(
-            R,
+            D,
             {
               image: s,
               defaultImage: u,
@@ -68,9 +70,9 @@ const M = ({
           )
         }
       ),
-      /* @__PURE__ */ i(D, { size: t, children: [
+      /* @__PURE__ */ i(I, { size: t, children: [
         /* @__PURE__ */ r(
-          f,
+          g,
           {
             typographyProps: { variant: "h4", component: "p" },
             tooltipProps: { placement: "bottom", arrow: !0 },
@@ -78,7 +80,7 @@ const M = ({
           }
         ),
         p.length > 0 && p.map((e, o) => /* @__PURE__ */ i(
-          I,
+          $,
           {
             size: t,
             role: "group",
@@ -86,7 +88,7 @@ const M = ({
             children: [
               e.icon,
               /* @__PURE__ */ r(
-                $,
+                v,
                 {
                   isLast: o === p.length - 1,
                   size: t,
@@ -98,14 +100,14 @@ const M = ({
           },
           `property-${o}`
         )),
-        /* @__PURE__ */ r(v, { size: t, children: a.length > 0 && a.map((e, o) => /* @__PURE__ */ r(
+        /* @__PURE__ */ r(w, { size: t, children: a.length > 0 && a.map((e, o) => /* @__PURE__ */ r(
           y,
           {
             title: e.text,
             placement: "top",
             arrow: !0,
             children: /* @__PURE__ */ r(
-              w,
+              j,
               {
                 size: t,
                 role: "button",
@@ -122,5 +124,5 @@ const M = ({
   }
 ) }));
 export {
-  M as default
+  S as default
 };

package/dist/components/ResourceCard/style.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),i=t.styled(t.Card)(({theme:e,selected:o,size:r})=>({boxShadow:"0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",borderRadius:"0.5rem",height:"auto",border:"2px solid transparent",transition:"border-color 0.2s ease-in-out",position:"relative",...r==="sm"&&{display:"flex",width:"100%"},...o&&{borderColor:e.palette.primary.light},"&:hover":{"& .MuiBox-root.selected-icon":{opacity:1,visibility:"visible"}}})),a=t.styled(t.Box)(({theme:e,selected:o})=>({position:"absolute",top:0,right:0,width:"2rem",height:"2rem",background:e.palette.common.white,display:"flex",justifyContent:"center",alignItems:"center",padding:".8rem",borderRadius:".5rem",visibility:"visible",opacity:0,cursor:"pointer",transition:"opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",...o&&{background:e.palette.primary.lighter,opacity:1,visibility:"visible"},"&:hover, &:focus":{background:e.palette.primary.lighter,opacity:1},"& .MuiSvgIcon-root":{color:e.palette.primary.main}})),s=t.styled(t.CardMedia)(({size:e,image:o,defaultImage:r})=>({height:e=="sm"?85:180,width:e=="sm"?85:"calc(100% - 2rem)",objectFit:"cover",margin:e=="sm"?"0 10px":"1rem",borderRadius:"0.5rem",...!o&&e==="md"&&{backgroundImage:`url(${r})`,backgroundRepeat:"repeat",backgroundSize:"20% 20%",backgroundPosition:"center",opacity:"0.7"}})),n=t.styled(t.CardContent)(({size:e})=>({padding:e=="sm"?".7rem 5px .7rem 0 !important":"0 16px 16px 16px !important",width:e==="sm"?"calc(100% - 110px)":"100%"})),p=t.styled(t.Box)(({size:e})=>({display:"flex",alignItems:"center",marginTop:"0.5rem",...e==="sm"&&{svg:{width:".8em",height:".8em"}}})),c=t.styled(t.Box)(({size:e,width:o,isLast:r})=>({marginLeft:e==="sm"?".3rem":".5rem",fontSize:e==="sm"?"12px":"15px","& .MuiTypography-root":{paddingTop:"2px",fontSize:e==="sm"?"12px":"15px"},...r&&!o&&{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden",maxWidth:e==="sm"?"110px":"172px"}})),d=t.styled(t.Box)(({size:e})=>({display:"inline-flex",alignItems:"center",justifyContent:"center",width:"fit-content",height:"fit-content",...e==="sm"&&{svg:{width:".8em",height:".8em"}}})),l=t.styled(t.Box)(({size:e})=>({position:"absolute",bottom:e==="sm"?".65rem":"16px",right:e==="sm"?"8px":"16px",display:"flex",gap:".2rem"}));exports.PublicIconWrapper=l;exports.ResourceCardBody=n;exports.ResourceCardImage=s;exports.ResourceIconItem=d;exports.ResourcePropertyItem=p;exports.ResourcePropertyText=c;exports.SelectedIcon=a;exports.StyledCard=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),i=t.styled(t.Card)(({theme:e,selected:r,size:o})=>({boxShadow:"0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",borderRadius:"0.5rem",height:"auto",border:"2px solid transparent",transition:"border-color 0.2s ease-in-out",position:"relative",...o==="sm"&&{display:"flex",width:"100%"},...r&&{borderColor:e.palette.primary.light},"&:hover":{"& .MuiBox-root.selected-icon":{opacity:1,visibility:"visible"}}})),a=t.styled(t.Box)(({theme:e,selected:r,hasNoButtonOnFocus:o})=>({position:"absolute",top:0,right:0,width:"2rem",height:"2rem",background:e.palette.common.white,display:"flex",justifyContent:"center",alignItems:"center",padding:".8rem",borderRadius:".5rem",visibility:"visible",opacity:0,cursor:"pointer",transition:"opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",...r&&{background:e.palette.primary.lighter,opacity:1,visibility:"visible"},...o?{"&:hover":{background:e.palette.primary.lighter,opacity:1}}:{"&:hover, &:focus":{background:e.palette.primary.lighter,opacity:1}},"& .MuiSvgIcon-root":{color:e.palette.primary.main}})),s=t.styled(t.CardMedia)(({size:e,image:r,defaultImage:o})=>({height:e=="sm"?85:180,width:e=="sm"?85:"calc(100% - 2rem)",objectFit:"cover",margin:e=="sm"?"0 10px":"1rem",borderRadius:"0.5rem",...!r&&e==="md"&&{backgroundImage:`url(${o})`,backgroundRepeat:"repeat",backgroundSize:"20% 20%",backgroundPosition:"center",opacity:"0.7"}})),n=t.styled(t.CardContent)(({size:e})=>({padding:e=="sm"?".7rem 5px .7rem 0 !important":"0 16px 16px 16px !important",width:e==="sm"?"calc(100% - 110px)":"100%"})),p=t.styled(t.Box)(({size:e})=>({display:"flex",alignItems:"center",marginTop:"0.5rem",...e==="sm"&&{svg:{width:".8em",height:".8em"}}})),c=t.styled(t.Box)(({size:e,width:r,isLast:o})=>({marginLeft:e==="sm"?".3rem":".5rem",fontSize:e==="sm"?"12px":"15px","& .MuiTypography-root":{paddingTop:"2px",fontSize:e==="sm"?"12px":"15px"},...o&&!r&&{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden",maxWidth:e==="sm"?"110px":"172px"}})),d=t.styled(t.Box)(({size:e})=>({display:"inline-flex",alignItems:"center",justifyContent:"center",width:"fit-content",height:"fit-content",...e==="sm"&&{svg:{width:".8em",height:".8em"}}})),l=t.styled(t.Box)(({size:e})=>({position:"absolute",bottom:e==="sm"?".65rem":"16px",right:e==="sm"?"8px":"16px",display:"flex",gap:".2rem"}));exports.PublicIconWrapper=l;exports.ResourceCardBody=n;exports.ResourceCardImage=s;exports.ResourceIconItem=d;exports.ResourcePropertyItem=p;exports.ResourcePropertyText=c;exports.SelectedIcon=a;exports.StyledCard=i;

package/dist/components/ResourceCard/style.es.js

@@ -1,12 +1,12 @@
-import { styled as t, Card as a, Box as r, CardMedia as p, CardContent as n } from "@mui/material";
-const c = t(a)(({ theme: e, selected: o, size: i }) => ({
+import { styled as t, Card as a, Box as i, CardMedia as p, CardContent as n } from "@mui/material";
+const c = t(a)(({ theme: e, selected: o, size: r }) => ({
   boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",
   borderRadius: "0.5rem",
   height: "auto",
   border: "2px solid transparent",
   transition: "border-color 0.2s ease-in-out",
   position: "relative",
-  ...i === "sm" && {
+  ...r === "sm" && {
     display: "flex",
     width: "100%"
   },
@@ -19,44 +19,49 @@ const c = t(a)(({ theme: e, selected: o, size: i }) => ({
       visibility: "visible"
     }
   }
-})), m = t(r)(
-  ({ theme: e, selected: o }) => ({
-    position: "absolute",
-    top: 0,
-    right: 0,
-    width: "2rem",
-    height: "2rem",
-    background: e.palette.common.white,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: ".8rem",
-    borderRadius: ".5rem",
-    visibility: "visible",
-    opacity: 0,
-    cursor: "pointer",
-    transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
-    ...o && {
+})), m = t(i)(({ theme: e, selected: o, hasNoButtonOnFocus: r }) => ({
+  position: "absolute",
+  top: 0,
+  right: 0,
+  width: "2rem",
+  height: "2rem",
+  background: e.palette.common.white,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: ".8rem",
+  borderRadius: ".5rem",
+  visibility: "visible",
+  opacity: 0,
+  cursor: "pointer",
+  transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
+  ...o && {
+    background: e.palette.primary.lighter,
+    opacity: 1,
+    visibility: "visible"
+  },
+  ...r ? {
+    "&:hover": {
       background: e.palette.primary.lighter,
-      opacity: 1,
-      visibility: "visible"
-    },
+      opacity: 1
+    }
+  } : {
     "&:hover, &:focus": {
       background: e.palette.primary.lighter,
       opacity: 1
-    },
-    "& .MuiSvgIcon-root": {
-      color: e.palette.primary.main
     }
-  })
-), d = t(p)(({ size: e, image: o, defaultImage: i }) => ({
+  },
+  "& .MuiSvgIcon-root": {
+    color: e.palette.primary.main
+  }
+})), d = t(p)(({ size: e, image: o, defaultImage: r }) => ({
   height: e == "sm" ? 85 : 180,
   width: e == "sm" ? 85 : "calc(100% - 2rem)",
   objectFit: "cover",
   margin: e == "sm" ? "0 10px" : "1rem",
   borderRadius: "0.5rem",
   ...!o && e === "md" && {
-    backgroundImage: `url(${i})`,
+    backgroundImage: `url(${r})`,
     backgroundRepeat: "repeat",
     backgroundSize: "20% 20%",
     backgroundPosition: "center",
@@ -65,7 +70,7 @@ const c = t(a)(({ theme: e, selected: o, size: i }) => ({
 })), l = t(n)(({ size: e }) => ({
   padding: e == "sm" ? ".7rem 5px .7rem 0 !important" : "0 16px 16px 16px !important",
   width: e === "sm" ? "calc(100% - 110px)" : "100%"
-})), g = t(r)(
+})), g = t(i)(
   ({ size: e }) => ({
     display: "flex",
     alignItems: "center",
@@ -77,20 +82,20 @@ const c = t(a)(({ theme: e, selected: o, size: i }) => ({
       }
     }
   })
-), x = t(r)(({ size: e, width: o, isLast: i }) => ({
+), x = t(i)(({ size: e, width: o, isLast: r }) => ({
   marginLeft: e === "sm" ? ".3rem" : ".5rem",
   fontSize: e === "sm" ? "12px" : "15px",
   "& .MuiTypography-root": {
     paddingTop: "2px",
     fontSize: e === "sm" ? "12px" : "15px"
   },
-  ...i && !o && {
+  ...r && !o && {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     overflow: "hidden",
     maxWidth: e === "sm" ? "110px" : "172px"
   }
-})), u = t(r)(
+})), u = t(i)(
   ({ size: e }) => ({
     display: "inline-flex",
     alignItems: "center",
@@ -104,7 +109,7 @@ const c = t(a)(({ theme: e, selected: o, size: i }) => ({
       }
     }
   })
-), h = t(r)(
+), h = t(i)(
   ({ size: e }) => ({
     position: "absolute",
     bottom: e === "sm" ? ".65rem" : "16px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.5.0-dev.1743686462",
+  "version": "1.5.0-dev.1743700044",
   "private": false,
   "author": "CGI Learning-hub Team",
   "description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",