@availity/mui-spaces 1.0.25 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/index.js +61 -54
  3. package/dist/index.mjs +61 -54
  4. package/package.json +1 -1
  5. package/src/lib/SpacesLink/SpacesLink.tsx +13 -12
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [1.0.26](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.25...@availity/mui-spaces@1.0.26) (2025-06-13)
6
+
5
7
  ## [1.0.25](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.24...@availity/mui-spaces@1.0.25) (2025-06-11)
6
8
 
7
9
  ## [1.0.24](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.23...@availity/mui-spaces@1.0.24) (2025-06-11)
package/dist/index.js CHANGED
@@ -922,7 +922,7 @@ var useLink = (spaceOrSpaceId, options) => {
922
922
  var import_jsx_runtime6 = require("react/jsx-runtime");
923
923
  var SpacesLinkContainer = (0, import_styles.styled)(import_mui_layout2.Box, { name: "AvSpacesLink", slot: "root" })({});
924
924
  var DateInfo = (0, import_styles.styled)(import_mui_layout2.Grid, { name: "AvSpacesLink", slot: "AvDateInfo" })({});
925
- var SpacesLinkFavoriteHeart = (0, import_styles.styled)(import_mui_layout2.Grid, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
925
+ var SpacesLinkFavoriteHeart = (0, import_styles.styled)(import_mui_favorites.FavoriteHeart, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
926
926
  var IconLink = (0, import_styles.styled)(import_Link.default, { name: "AvSpacesLink", slot: "IconLink" })({});
927
927
  var getDisplayDate = (date) => (0, import_dayjs2.default)(date).format("MM/DD/YYYY");
928
928
  var getContainerTag = (propTag, variant) => {
@@ -1007,18 +1007,18 @@ var SpacesLink = (_a) => {
1007
1007
  const [linkSpace, props] = useLink(propSpace || spaceId, { clientId: propsClientId, linkAttributes });
1008
1008
  const showUrl = !(linkSpace == null ? void 0 : linkSpace.isGhosted) && ((_a2 = linkSpace == null ? void 0 : linkSpace.link) == null ? void 0 : _a2.url);
1009
1009
  const favoriteIcon = (0, import_react4.useMemo)(
1010
- () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpacesLinkFavoriteHeart, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1011
- import_mui_favorites.FavoriteHeart,
1010
+ () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1011
+ SpacesLinkFavoriteHeart,
1012
1012
  {
1013
1013
  id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1014
1014
  name: linkSpace == null ? void 0 : linkSpace.name,
1015
1015
  onChange: (_, e) => e.stopPropagation()
1016
1016
  }
1017
- ) }),
1017
+ ),
1018
1018
  [favorite, linkSpace == null ? void 0 : linkSpace.configurationId, linkSpace == null ? void 0 : linkSpace.name, idPrefix]
1019
1019
  );
1020
1020
  const dateInfo = (0, import_react4.useMemo)(
1021
- () => (showNew || showDate) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DateInfo, { textAlign: stacked ? "center" : "right", children: [
1021
+ () => (showNew || showDate) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DateInfo, { textAlign: stacked ? "center" : "right", sx: { marginTop: "8px" }, children: [
1022
1022
  showNew && (linkSpace == null ? void 0 : linkSpace.isNew) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_chip.StatusChip, { id: `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}`, label: "New!", color: "secondary" }),
1023
1023
  showDate && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1024
1024
  import_mui_typography2.Typography,
@@ -1092,13 +1092,13 @@ var SpacesLink = (_a) => {
1092
1092
  import_mui_layout2.Grid,
1093
1093
  {
1094
1094
  sx: {
1095
- alignItems: !showDescription || stacked ? "center" : "start",
1095
+ alignItems: "start",
1096
1096
  flexWrap: "nowrap"
1097
1097
  },
1098
1098
  direction: stacked ? "column" : "row",
1099
1099
  container: true,
1100
1100
  children: [
1101
- !stacked && favoriteIcon,
1101
+ !stacked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginRight: "8px" }, children: favoriteIcon }),
1102
1102
  FileIcon && (linkSpace == null ? void 0 : linkSpace.url) && ((_b2 = linkSpace == null ? void 0 : linkSpace.type) == null ? void 0 : _b2.toUpperCase()) === "FILE" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1103
1103
  IconLink,
1104
1104
  {
@@ -1109,54 +1109,61 @@ var SpacesLink = (_a) => {
1109
1109
  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileIcon, { "data-testid": "icon" })
1110
1110
  }
1111
1111
  ) : null,
1112
- children ? renderChildren() : body && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_mui_layout2.Grid, { id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`, sx: { flexGrow: 1 }, children: [
1113
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1114
- import_mui_layout2.Box,
1115
- {
1116
- sx: {
1117
- marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1118
- paddingTop: stacked ? 3 : void 0,
1119
- textAlign: stacked ? "center" : void 0
1120
- },
1121
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1122
- TitleTag,
1123
- __spreadProps(__spreadValues(__spreadValues({
1124
- id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1125
- className: titleClassName,
1126
- tabIndex: 0,
1112
+ children ? renderChildren() : body && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1113
+ import_mui_layout2.Grid,
1114
+ {
1115
+ id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1116
+ sx: { flexGrow: 1, marginTop: "8px" },
1117
+ children: [
1118
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1119
+ import_mui_layout2.Box,
1120
+ {
1121
+ sx: {
1122
+ marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1123
+ paddingTop: stacked ? 3 : void 0,
1124
+ textAlign: stacked ? "center" : void 0
1125
+ },
1126
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1127
+ TitleTag,
1128
+ __spreadProps(__spreadValues(__spreadValues({
1129
+ id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1130
+ className: titleClassName,
1131
+ tabIndex: 0,
1132
+ style: {
1133
+ cursor: showUrl ? "pointer" : "not-allowed"
1134
+ }
1135
+ }, analytics), props), {
1136
+ role: showUrl ? "link" : role,
1137
+ "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1138
+ "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1139
+ variant: "h5",
1140
+ title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1141
+ children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1142
+ })
1143
+ )
1144
+ }
1145
+ ),
1146
+ stacked && dateInfo,
1147
+ showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1148
+ TextTag,
1149
+ {
1150
+ component: "div",
1127
1151
  style: {
1128
- cursor: showUrl ? "pointer" : "not-allowed"
1129
- }
1130
- }, analytics), props), {
1131
- role: showUrl ? "link" : role,
1132
- "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1133
- "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1134
- variant: "h5",
1135
- title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1136
- children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1137
- })
1138
- )
1139
- }
1140
- ),
1141
- stacked && dateInfo,
1142
- showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1143
- TextTag,
1144
- {
1145
- component: "div",
1146
- style: {
1147
- marginTop: ".5rem",
1148
- textAlign: stacked ? "center" : void 0,
1149
- overflow: "hidden",
1150
- whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1151
- width: maxDescriptionWidth,
1152
- textOverflow: "ellipsis"
1153
- },
1154
- id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1155
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_markdown2.default, { children: linkSpace == null ? void 0 : linkSpace.description })
1156
- }
1157
- ),
1158
- variant === "card" && customBadgeDisplay
1159
- ] }),
1152
+ marginTop: ".5rem",
1153
+ textAlign: stacked ? "center" : void 0,
1154
+ overflow: "hidden",
1155
+ whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1156
+ width: maxDescriptionWidth,
1157
+ textOverflow: "ellipsis"
1158
+ },
1159
+ id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1160
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_markdown2.default, { children: linkSpace == null ? void 0 : linkSpace.description })
1161
+ }
1162
+ ),
1163
+ variant === "card" && customBadgeDisplay
1164
+ ]
1165
+ }
1166
+ ),
1160
1167
  variant !== "card" && customBadgeDisplay,
1161
1168
  !stacked && dateInfo
1162
1169
  ]
package/dist/index.mjs CHANGED
@@ -880,7 +880,7 @@ var useLink = (spaceOrSpaceId, options) => {
880
880
  import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
881
881
  var SpacesLinkContainer = styled(Box2, { name: "AvSpacesLink", slot: "root" })({});
882
882
  var DateInfo = styled(Grid2, { name: "AvSpacesLink", slot: "AvDateInfo" })({});
883
- var SpacesLinkFavoriteHeart = styled(Grid2, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
883
+ var SpacesLinkFavoriteHeart = styled(FavoriteHeart, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
884
884
  var IconLink = styled(Link, { name: "AvSpacesLink", slot: "IconLink" })({});
885
885
  var getDisplayDate = (date) => dayjs2(date).format("MM/DD/YYYY");
886
886
  var getContainerTag = (propTag, variant) => {
@@ -965,18 +965,18 @@ var SpacesLink = (_a) => {
965
965
  const [linkSpace, props] = useLink(propSpace || spaceId, { clientId: propsClientId, linkAttributes });
966
966
  const showUrl = !(linkSpace == null ? void 0 : linkSpace.isGhosted) && ((_a2 = linkSpace == null ? void 0 : linkSpace.link) == null ? void 0 : _a2.url);
967
967
  const favoriteIcon = useMemo(
968
- () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ jsx6(SpacesLinkFavoriteHeart, { children: /* @__PURE__ */ jsx6(
969
- FavoriteHeart,
968
+ () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ jsx6(
969
+ SpacesLinkFavoriteHeart,
970
970
  {
971
971
  id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.configurationId}`,
972
972
  name: linkSpace == null ? void 0 : linkSpace.name,
973
973
  onChange: (_, e) => e.stopPropagation()
974
974
  }
975
- ) }),
975
+ ),
976
976
  [favorite, linkSpace == null ? void 0 : linkSpace.configurationId, linkSpace == null ? void 0 : linkSpace.name, idPrefix]
977
977
  );
978
978
  const dateInfo = useMemo(
979
- () => (showNew || showDate) && /* @__PURE__ */ jsxs3(DateInfo, { textAlign: stacked ? "center" : "right", children: [
979
+ () => (showNew || showDate) && /* @__PURE__ */ jsxs3(DateInfo, { textAlign: stacked ? "center" : "right", sx: { marginTop: "8px" }, children: [
980
980
  showNew && (linkSpace == null ? void 0 : linkSpace.isNew) && /* @__PURE__ */ jsx6(StatusChip, { id: `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}`, label: "New!", color: "secondary" }),
981
981
  showDate && /* @__PURE__ */ jsx6(
982
982
  Typography2,
@@ -1050,13 +1050,13 @@ var SpacesLink = (_a) => {
1050
1050
  Grid2,
1051
1051
  {
1052
1052
  sx: {
1053
- alignItems: !showDescription || stacked ? "center" : "start",
1053
+ alignItems: "start",
1054
1054
  flexWrap: "nowrap"
1055
1055
  },
1056
1056
  direction: stacked ? "column" : "row",
1057
1057
  container: true,
1058
1058
  children: [
1059
- !stacked && favoriteIcon,
1059
+ !stacked && /* @__PURE__ */ jsx6("div", { style: { marginRight: "8px" }, children: favoriteIcon }),
1060
1060
  FileIcon && (linkSpace == null ? void 0 : linkSpace.url) && ((_b2 = linkSpace == null ? void 0 : linkSpace.type) == null ? void 0 : _b2.toUpperCase()) === "FILE" ? /* @__PURE__ */ jsx6(
1061
1061
  IconLink,
1062
1062
  {
@@ -1067,54 +1067,61 @@ var SpacesLink = (_a) => {
1067
1067
  children: /* @__PURE__ */ jsx6(FileIcon, { "data-testid": "icon" })
1068
1068
  }
1069
1069
  ) : null,
1070
- children ? renderChildren() : body && /* @__PURE__ */ jsxs3(Grid2, { id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`, sx: { flexGrow: 1 }, children: [
1071
- /* @__PURE__ */ jsx6(
1072
- Box2,
1073
- {
1074
- sx: {
1075
- marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1076
- paddingTop: stacked ? 3 : void 0,
1077
- textAlign: stacked ? "center" : void 0
1078
- },
1079
- children: /* @__PURE__ */ jsx6(
1080
- TitleTag,
1081
- __spreadProps(__spreadValues(__spreadValues({
1082
- id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1083
- className: titleClassName,
1084
- tabIndex: 0,
1070
+ children ? renderChildren() : body && /* @__PURE__ */ jsxs3(
1071
+ Grid2,
1072
+ {
1073
+ id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1074
+ sx: { flexGrow: 1, marginTop: "8px" },
1075
+ children: [
1076
+ /* @__PURE__ */ jsx6(
1077
+ Box2,
1078
+ {
1079
+ sx: {
1080
+ marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1081
+ paddingTop: stacked ? 3 : void 0,
1082
+ textAlign: stacked ? "center" : void 0
1083
+ },
1084
+ children: /* @__PURE__ */ jsx6(
1085
+ TitleTag,
1086
+ __spreadProps(__spreadValues(__spreadValues({
1087
+ id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1088
+ className: titleClassName,
1089
+ tabIndex: 0,
1090
+ style: {
1091
+ cursor: showUrl ? "pointer" : "not-allowed"
1092
+ }
1093
+ }, analytics), props), {
1094
+ role: showUrl ? "link" : role,
1095
+ "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1096
+ "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1097
+ variant: "h5",
1098
+ title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1099
+ children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1100
+ })
1101
+ )
1102
+ }
1103
+ ),
1104
+ stacked && dateInfo,
1105
+ showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ jsx6(
1106
+ TextTag,
1107
+ {
1108
+ component: "div",
1085
1109
  style: {
1086
- cursor: showUrl ? "pointer" : "not-allowed"
1087
- }
1088
- }, analytics), props), {
1089
- role: showUrl ? "link" : role,
1090
- "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1091
- "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1092
- variant: "h5",
1093
- title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1094
- children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1095
- })
1096
- )
1097
- }
1098
- ),
1099
- stacked && dateInfo,
1100
- showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ jsx6(
1101
- TextTag,
1102
- {
1103
- component: "div",
1104
- style: {
1105
- marginTop: ".5rem",
1106
- textAlign: stacked ? "center" : void 0,
1107
- overflow: "hidden",
1108
- whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1109
- width: maxDescriptionWidth,
1110
- textOverflow: "ellipsis"
1111
- },
1112
- id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1113
- children: /* @__PURE__ */ jsx6(ReactMarkdown2, { children: linkSpace == null ? void 0 : linkSpace.description })
1114
- }
1115
- ),
1116
- variant === "card" && customBadgeDisplay
1117
- ] }),
1110
+ marginTop: ".5rem",
1111
+ textAlign: stacked ? "center" : void 0,
1112
+ overflow: "hidden",
1113
+ whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1114
+ width: maxDescriptionWidth,
1115
+ textOverflow: "ellipsis"
1116
+ },
1117
+ id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1118
+ children: /* @__PURE__ */ jsx6(ReactMarkdown2, { children: linkSpace == null ? void 0 : linkSpace.description })
1119
+ }
1120
+ ),
1121
+ variant === "card" && customBadgeDisplay
1122
+ ]
1123
+ }
1124
+ ),
1118
1125
  variant !== "card" && customBadgeDisplay,
1119
1126
  !stacked && dateInfo
1120
1127
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-spaces",
3
- "version": "1.0.25",
3
+ "version": "1.0.26",
4
4
  "description": "Availity MUI Spaces Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
package/src/lib/SpacesLink/SpacesLink.tsx CHANGED
@@ -19,7 +19,7 @@ import { isFunction } from '../helpers';
19
19
 
20
20
  const SpacesLinkContainer = styled(Box, { name: 'AvSpacesLink', slot: 'root' })({}) as typeof MuiBox;
21
21
  const DateInfo = styled(Grid, { name: 'AvSpacesLink', slot: 'AvDateInfo' })({});
22
- const SpacesLinkFavoriteHeart = styled(Grid, { name: 'AvSpacesLink', slot: 'AvFavoriteHeart' })({});
22
+ const SpacesLinkFavoriteHeart = styled(FavoriteHeart, { name: 'AvSpacesLink', slot: 'AvFavoriteHeart' })({});
23
23
  const IconLink = styled(Link, { name: 'AvSpacesLink', slot: 'IconLink' })({});
24
24
 
25
25
  const getDisplayDate = (date: string | null | undefined) => dayjs(date).format('MM/DD/YYYY');
@@ -98,13 +98,11 @@ export const SpacesLink = ({
98
98
  () =>
99
99
  linkSpace?.configurationId &&
100
100
  favorite && (
101
- <SpacesLinkFavoriteHeart>
102
- <FavoriteHeart
103
- id={`${idPrefix}${linkSpace?.configurationId}`}
104
- name={linkSpace?.name}
105
- onChange={(_, e) => e.stopPropagation()}
106
- />
107
- </SpacesLinkFavoriteHeart>
101
+ <SpacesLinkFavoriteHeart
102
+ id={`${idPrefix}${linkSpace?.configurationId}`}
103
+ name={linkSpace?.name}
104
+ onChange={(_, e) => e.stopPropagation()}
105
+ />
108
106
  ),
109
107
  [favorite, linkSpace?.configurationId, linkSpace?.name, idPrefix]
110
108
  );
@@ -112,7 +110,7 @@ export const SpacesLink = ({
112
110
  const dateInfo = useMemo(
113
111
  () =>
114
112
  (showNew || showDate) && (
115
- <DateInfo textAlign={stacked ? 'center' : 'right'}>
113
+ <DateInfo textAlign={stacked ? 'center' : 'right'} sx={{ marginTop: '8px' }}>
116
114
  {showNew && linkSpace?.isNew && (
117
115
  <StatusChip id={`${idPrefix}app-new-badge-${linkSpace?.configurationId}`} label="New!" color="secondary" />
118
116
  )}
@@ -199,13 +197,13 @@ export const SpacesLink = ({
199
197
  <BodyTag style={{ width: '100%' }}>
200
198
  <Grid
201
199
  sx={{
202
- alignItems: !showDescription || stacked ? 'center' : 'start',
200
+ alignItems: 'start',
203
201
  flexWrap: 'nowrap',
204
202
  }}
205
203
  direction={stacked ? 'column' : 'row'}
206
204
  container
207
205
  >
208
- {!stacked && favoriteIcon}
206
+ {!stacked && <div style={{ marginRight: '8px' }}>{favoriteIcon}</div>}
209
207
  {FileIcon && linkSpace?.url && linkSpace?.type?.toUpperCase() === 'FILE' ? (
210
208
  <IconLink
211
209
  target="_blank"
@@ -219,7 +217,10 @@ export const SpacesLink = ({
219
217
  {children
220
218
  ? renderChildren()
221
219
  : body && (
222
- <Grid id={`${idPrefix}${linkSpace?.type}-${linkSpace?.configurationId}`} sx={{ flexGrow: 1 }}>
220
+ <Grid
221
+ id={`${idPrefix}${linkSpace?.type}-${linkSpace?.configurationId}`}
222
+ sx={{ flexGrow: 1, marginTop: '8px' }}
223
+ >
223
224
  <Box
224
225
  sx={{
225
226
  marginBottom: