synapse-react-client 4.0.26 → 4.0.27

package/dist/components/EntitySidebar/EntitySidebar.js

@@ -1,32 +1,40 @@
-import { entityTypeToFriendlyName as e } from "../../utils/functions/EntityTypeUtils.js";
-import t from "../../utils/hooks/useGetEntityMetadata.js";
-import { useGetEntityTitleBarProperties as n } from "../entity/page/title_bar/useGetEntityTitleBarProperties.js";
-import r from "./EntitySidebar.module.js";
-import { useState as i } from "react";
-import { Box as a, Button as o, Collapse as s, Divider as c, Stack as l, Typography as u, useMediaQuery as d, useTheme as f } from "@mui/material";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import h from "@mui/icons-material/KeyboardDoubleArrowRight";
-import g from "@mui/icons-material/KeyboardDoubleArrowLeft";
+import { ENTITY_SIDEBAR_STATE_LOCALSTORAGE_KEY as e } from "../../utils/SynapseConstants.js";
+import { entityTypeToFriendlyName as t } from "../../utils/functions/EntityTypeUtils.js";
+import n from "../../utils/hooks/useGetEntityMetadata.js";
+import { useGetEntityTitleBarProperties as r } from "../entity/page/title_bar/useGetEntityTitleBarProperties.js";
+import i from "./EntitySidebar.module.js";
+import { useEffect as a, useState as o } from "react";
+import { Box as s, Button as c, Collapse as l, Divider as u, Stack as d, Typography as f, useMediaQuery as p, useTheme as m } from "@mui/material";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "@mui/icons-material/KeyboardDoubleArrowRight";
+import v from "@mui/icons-material/KeyboardDoubleArrowLeft";
 //#region src/components/EntitySidebar/EntitySidebar.tsx
-function _(_) {
-	let { entityId: v, versionNumber: y } = _, b = d(f().breakpoints.down("lg")), { entityBundle: x } = t(v, y), S = x ? e(x.entityType) : "", C = n(v, y), [w, T] = i(!0), E = /* @__PURE__ */ m(a, {
-		className: r.content,
+function y(y) {
+	let { entityId: b, versionNumber: x } = y, S = p(m().breakpoints.down("lg")), { entityBundle: C } = n(b, x), w = C ? t(C.entityType) : "", T = r(b, x), [E, D] = o(() => {
+		let t = localStorage.getItem(e);
+		return t === null ? !0 : t === "true";
+	});
+	a(() => {
+		localStorage.setItem(e, String(E));
+	}, [E]);
+	let O = /* @__PURE__ */ g(s, {
+		className: i.content,
 		children: [
-			/* @__PURE__ */ m(u, {
+			/* @__PURE__ */ g(f, {
 				variant: "overline",
-				className: r.sidebarHeader,
-				children: ["About this ", S]
+				className: i.sidebarHeader,
+				children: ["About this ", w]
 			}),
-			/* @__PURE__ */ p(c, { className: r.divider }),
-			/* @__PURE__ */ p(l, {
-				className: r.propertiesContainer,
-				children: C.map((e) => /* @__PURE__ */ m(l, {
-					className: r.propertyRow,
-					children: [/* @__PURE__ */ p(u, {
-						className: r.propertyTitle,
+			/* @__PURE__ */ h(u, { className: i.divider }),
+			/* @__PURE__ */ h(d, {
+				className: i.propertiesContainer,
+				children: T.map((e) => /* @__PURE__ */ g(d, {
+					className: i.propertyRow,
+					children: [/* @__PURE__ */ h(f, {
+						className: i.propertyTitle,
 						children: e.title
-					}), /* @__PURE__ */ p(u, {
-						className: r.propertyValue,
+					}), /* @__PURE__ */ h(f, {
+						className: i.propertyValue,
 						variant: "smallText1",
 						component: "div",
 						children: e.value
@@ -35,28 +43,28 @@ function _(_) {
 			})
 		]
 	});
-	return /* @__PURE__ */ m(a, {
-		className: r.panel,
-		children: [/* @__PURE__ */ m(o, {
-			onClick: () => T((e) => !e),
-			className: r.toggleButton,
-			children: [/* @__PURE__ */ m(u, {
+	return /* @__PURE__ */ g(s, {
+		className: i.panel,
+		children: [/* @__PURE__ */ g(c, {
+			onClick: () => D((e) => !e),
+			className: i.toggleButton,
+			children: [/* @__PURE__ */ g(f, {
 				variant: "smallText1",
-				className: r.toggleButtonText,
-				children: [w ? "Collapse" : "Expand", " Sidebar"]
-			}), p(w ? h : g, { className: r.icon })]
-		}), /* @__PURE__ */ p(s, {
-			in: w,
-			orientation: b ? "vertical" : "horizontal",
+				className: i.toggleButtonText,
+				children: [E ? "Collapse" : "Expand", " Sidebar"]
+			}), h(E ? _ : v, { className: i.icon })]
+		}), /* @__PURE__ */ h(l, {
+			in: E,
+			orientation: S ? "vertical" : "horizontal",
 			timeout: {
 				enter: 200,
 				exit: 200
 			},
-			children: E
-		})]
+			children: O
+		}, S ? "vertical" : "horizontal")]
 	});
 }
 //#endregion
-export { _ as default };
+export { y as default };
 
 //# sourceMappingURL=EntitySidebar.js.map

package/dist/components/EntitySidebar/EntitySidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitySidebar.js","names":[],"sources":["../../../src/components/EntitySidebar/EntitySidebar.tsx"],"sourcesContent":["import { useState } from 'react'\nimport KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'\nimport KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'\nimport {\n  Box,\n  Button,\n  Divider,\n  Collapse,\n  Stack,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport { useGetEntityTitleBarProperties } from '@/components/entity/page/title_bar/useGetEntityTitleBarProperties'\nimport styles from './EntitySidebar.module.scss'\nimport useGetEntityMetadata from '@/utils/hooks/useGetEntityMetadata'\nimport { entityTypeToFriendlyName } from '@/utils/functions/EntityTypeUtils'\n\ntype EntitySidebarProps = {\n  entityId: string\n  versionNumber?: number\n}\n\nexport default function EntitySidebar(props: EntitySidebarProps) {\n  const { entityId, versionNumber } = props\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('lg'))\n\n  const { entityBundle } = useGetEntityMetadata(entityId, versionNumber)\n\n  const friendlyName = entityBundle\n    ? entityTypeToFriendlyName(entityBundle.entityType)\n    : ''\n\n  const properties = useGetEntityTitleBarProperties(entityId, versionNumber)\n\n  const [open, setOpen] = useState(true)\n\n  const sidebarContent = (\n    <Box className={styles.content}>\n      <Typography variant=\"overline\" className={styles.sidebarHeader}>\n        About this {friendlyName}\n      </Typography>\n      <Divider className={styles.divider} />\n      <Stack className={styles.propertiesContainer}>\n        {properties.map(property => (\n          <Stack key={property.key} className={styles.propertyRow}>\n            <Typography className={styles.propertyTitle}>\n              {property.title}\n            </Typography>\n            <Typography\n              className={styles.propertyValue}\n              variant=\"smallText1\"\n              component=\"div\"\n            >\n              {property.value}\n            </Typography>\n          </Stack>\n        ))}\n      </Stack>\n    </Box>\n  )\n\n  return (\n    <Box className={styles.panel}>\n      <Button\n        onClick={() => setOpen(prev => !prev)}\n        className={styles.toggleButton}\n      >\n        <Typography variant=\"smallText1\" className={styles.toggleButtonText}>\n          {open ? 'Collapse' : 'Expand'} Sidebar\n        </Typography>\n        {open ? (\n          <KeyboardDoubleArrowRightIcon className={styles.icon} />\n        ) : (\n          <KeyboardDoubleArrowLeftIcon className={styles.icon} />\n        )}\n      </Button>\n      <Collapse\n        in={open}\n        orientation={isMobile ? 'vertical' : 'horizontal'}\n        timeout={{ enter: 200, exit: 200 }}\n      >\n        {sidebarContent}\n      </Collapse>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAwB,EAAc,GAA2B;CAC/D,IAAM,EAAE,aAAU,qBAAkB,GAG9B,IAAW,EADH,EACiB,EAAM,YAAY,KAAK,IAAI,CAAC,GAErD,EAAE,oBAAiB,EAAqB,GAAU,CAAa,GAE/D,IAAe,IACjB,EAAyB,EAAa,UAAU,IAChD,IAEE,IAAa,EAA+B,GAAU,CAAa,GAEnE,CAAC,GAAM,KAAW,EAAS,EAAI,GAE/B,IACJ,kBAAC,GAAD;EAAK,WAAW,EAAO;YAAvB;GACE,kBAAC,GAAD;IAAY,SAAQ;IAAW,WAAW,EAAO;cAAjD,CAAgE,eAClD,CACF;;GACZ,kBAAC,GAAD,EAAS,WAAW,EAAO,QAAU,CAAA;GACrC,kBAAC,GAAD;IAAO,WAAW,EAAO;cACtB,EAAW,KAAI,MACd,kBAAC,GAAD;KAA0B,WAAW,EAAO;eAA5C,CACE,kBAAC,GAAD;MAAY,WAAW,EAAO;gBAC3B,EAAS;KACA,CAAA,GACZ,kBAAC,GAAD;MACE,WAAW,EAAO;MAClB,SAAQ;MACR,WAAU;gBAET,EAAS;KACA,CAAA,CACP;OAXK,EAAS,GAWd,CACR;GACI,CAAA;EACJ;;CAGP,OACE,kBAAC,GAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,GAAD;GACE,eAAe,GAAQ,MAAQ,CAAC,CAAI;GACpC,WAAW,EAAO;aAFpB,CAIE,kBAAC,GAAD;IAAY,SAAQ;IAAa,WAAW,EAAO;cAAnD,CACG,IAAO,aAAa,UAAS,UACpB;OAEV,EADD,IACE,IAEA,GAFD,EAA8B,WAAW,EAAO,KAAO,CAED,CAElD;MACR,kBAAC,GAAD;GACE,IAAI;GACJ,aAAa,IAAW,aAAa;GACrC,SAAS;IAAE,OAAO;IAAK,MAAM;GAAI;aAEhC;EACO,CAAA,CACP;;AAET"}
+{"version":3,"file":"EntitySidebar.js","names":[],"sources":["../../../src/components/EntitySidebar/EntitySidebar.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'\nimport KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'\nimport {\n  Box,\n  Button,\n  Divider,\n  Collapse,\n  Stack,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport { useGetEntityTitleBarProperties } from '@/components/entity/page/title_bar/useGetEntityTitleBarProperties'\nimport styles from './EntitySidebar.module.scss'\nimport useGetEntityMetadata from '@/utils/hooks/useGetEntityMetadata'\nimport { entityTypeToFriendlyName } from '@/utils/functions/EntityTypeUtils'\nimport { ENTITY_SIDEBAR_STATE_LOCALSTORAGE_KEY } from '@/utils/SynapseConstants'\n\ntype EntitySidebarProps = {\n  entityId: string\n  versionNumber?: number\n}\n\nexport default function EntitySidebar(props: EntitySidebarProps) {\n  const { entityId, versionNumber } = props\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('lg'))\n\n  const { entityBundle } = useGetEntityMetadata(entityId, versionNumber)\n\n  const friendlyName = entityBundle\n    ? entityTypeToFriendlyName(entityBundle.entityType)\n    : ''\n\n  const properties = useGetEntityTitleBarProperties(entityId, versionNumber)\n\n  const [open, setOpen] = useState(() => {\n    const savedState = localStorage.getItem(\n      ENTITY_SIDEBAR_STATE_LOCALSTORAGE_KEY,\n    )\n    return savedState !== null ? savedState === 'true' : true\n  })\n\n  useEffect(() => {\n    localStorage.setItem(ENTITY_SIDEBAR_STATE_LOCALSTORAGE_KEY, String(open))\n  }, [open])\n\n  const sidebarContent = (\n    <Box className={styles.content}>\n      <Typography variant=\"overline\" className={styles.sidebarHeader}>\n        About this {friendlyName}\n      </Typography>\n      <Divider className={styles.divider} />\n      <Stack className={styles.propertiesContainer}>\n        {properties.map(property => (\n          <Stack key={property.key} className={styles.propertyRow}>\n            <Typography className={styles.propertyTitle}>\n              {property.title}\n            </Typography>\n            <Typography\n              className={styles.propertyValue}\n              variant=\"smallText1\"\n              component=\"div\"\n            >\n              {property.value}\n            </Typography>\n          </Stack>\n        ))}\n      </Stack>\n    </Box>\n  )\n\n  return (\n    <Box className={styles.panel}>\n      <Button\n        onClick={() => setOpen(prev => !prev)}\n        className={styles.toggleButton}\n      >\n        <Typography variant=\"smallText1\" className={styles.toggleButtonText}>\n          {open ? 'Collapse' : 'Expand'} Sidebar\n        </Typography>\n        {open ? (\n          <KeyboardDoubleArrowRightIcon className={styles.icon} />\n        ) : (\n          <KeyboardDoubleArrowLeftIcon className={styles.icon} />\n        )}\n      </Button>\n      <Collapse\n        key={isMobile ? 'vertical' : 'horizontal'}\n        in={open}\n        orientation={isMobile ? 'vertical' : 'horizontal'}\n        timeout={{ enter: 200, exit: 200 }}\n      >\n        {sidebarContent}\n      </Collapse>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAwBA,SAAwB,EAAc,GAA2B;CAC/D,IAAM,EAAE,aAAU,qBAAkB,GAG9B,IAAW,EADH,EACiB,EAAM,YAAY,KAAK,IAAI,CAAC,GAErD,EAAE,oBAAiB,EAAqB,GAAU,CAAa,GAE/D,IAAe,IACjB,EAAyB,EAAa,UAAU,IAChD,IAEE,IAAa,EAA+B,GAAU,CAAa,GAEnE,CAAC,GAAM,KAAW,QAAe;EACrC,IAAM,IAAa,aAAa,QAC9B,CACF;EACA,OAAO,MAAe,OAA+B,KAAxB,MAAe;CAC9C,CAAC;CAED,QAAgB;EACd,aAAa,QAAQ,GAAuC,OAAO,CAAI,CAAC;CAC1E,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IACJ,kBAAC,GAAD;EAAK,WAAW,EAAO;YAAvB;GACE,kBAAC,GAAD;IAAY,SAAQ;IAAW,WAAW,EAAO;cAAjD,CAAgE,eAClD,CACF;;GACZ,kBAAC,GAAD,EAAS,WAAW,EAAO,QAAU,CAAA;GACrC,kBAAC,GAAD;IAAO,WAAW,EAAO;cACtB,EAAW,KAAI,MACd,kBAAC,GAAD;KAA0B,WAAW,EAAO;eAA5C,CACE,kBAAC,GAAD;MAAY,WAAW,EAAO;gBAC3B,EAAS;KACA,CAAA,GACZ,kBAAC,GAAD;MACE,WAAW,EAAO;MAClB,SAAQ;MACR,WAAU;gBAET,EAAS;KACA,CAAA,CACP;OAXK,EAAS,GAWd,CACR;GACI,CAAA;EACJ;;CAGP,OACE,kBAAC,GAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,GAAD;GACE,eAAe,GAAQ,MAAQ,CAAC,CAAI;GACpC,WAAW,EAAO;aAFpB,CAIE,kBAAC,GAAD;IAAY,SAAQ;IAAa,WAAW,EAAO;cAAnD,CACG,IAAO,aAAa,UAAS,UACpB;OAEV,EADD,IACE,IAEA,GAFD,EAA8B,WAAW,EAAO,KAAO,CAED,CAElD;MACR,kBAAC,GAAD;GAEE,IAAI;GACJ,aAAa,IAAW,aAAa;GACrC,SAAS;IAAE,OAAO;IAAK,MAAM;GAAI;aAEhC;EACO,GANH,IAAW,aAAa,YAMrB,CACP;;AAET"}

package/dist/components/EntitySidebar/EntitySidebar.module.js

@@ -1,15 +1,15 @@
 import './EntitySidebar.css';var e = {
-	panel: "_panel_1l7xd_1",
-	content: "_content_1l7xd_7",
-	sidebarHeader: "_sidebarHeader_1l7xd_20",
-	divider: "_divider_1l7xd_27",
-	propertyValue: "_propertyValue_1l7xd_32",
-	propertyTitle: "_propertyTitle_1l7xd_39",
-	propertiesContainer: "_propertiesContainer_1l7xd_45",
-	propertyRow: "_propertyRow_1l7xd_50",
-	toggleButton: "_toggleButton_1l7xd_54",
-	toggleButtonText: "_toggleButtonText_1l7xd_74",
-	icon: "_icon_1l7xd_80"
+	panel: "_panel_63bk5_1",
+	content: "_content_63bk5_7",
+	sidebarHeader: "_sidebarHeader_63bk5_20",
+	divider: "_divider_63bk5_27",
+	propertyValue: "_propertyValue_63bk5_32",
+	propertyTitle: "_propertyTitle_63bk5_39",
+	propertiesContainer: "_propertiesContainer_63bk5_45",
+	propertyRow: "_propertyRow_63bk5_50",
+	toggleButton: "_toggleButton_63bk5_54",
+	toggleButtonText: "_toggleButtonText_63bk5_74",
+	icon: "_icon_63bk5_80"
 };
 //#endregion
 export { e as default };

package/dist/components/EntitySidebar/EntitySidebar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitySidebar.module.js","names":[],"sources":["../../../src/components/EntitySidebar/EntitySidebar.module.scss"],"sourcesContent":["$sidebar-text-primary: #616972;\n$sidebar-property-title-color: #747d88;\n$sidebar-property-value-color: #4d535a;\n@use 'sass:map';\n@use '../../style/abstracts/variables' as SrcVariables;\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.content {\n  width: 320px;\n  margin-top: 40px;\n  padding: 0 32px 0 0;\n\n  @media (max-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    width: 100%;\n    margin-top: 10px;\n    padding: 10px 32px 0 32px;\n  }\n}\n\n.sidebarHeader:global(.MuiTypography-root) {\n  font-size: 14px;\n  color: $sidebar-text-primary;\n  font-weight: 540;\n  line-height: 20px; /* 142.857% */\n}\n\n.divider {\n  margin-top: 8px;\n  margin-bottom: 16px;\n}\n\n.propertyValue:global(.MuiTypography-root) {\n  color: $sidebar-property-value-color;\n  font-style: normal;\n  font-weight: 440;\n  line-height: 20px; /* 142.857% */\n}\n\n.propertyTitle:global(.MuiTypography-root) {\n  color: $sidebar-property-title-color;\n  font-size: 12px;\n  line-height: 12px; /* 100% */\n}\n\n.propertiesContainer {\n  padding: 12px 0;\n  gap: 12px;\n}\n\n.propertyRow {\n  gap: 4px;\n}\n\n.toggleButton:global(.MuiButtonBase-root) {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  top: 0;\n  right: 0;\n  white-space: nowrap;\n  align-self: flex-start;\n  position: absolute;\n\n  @media (max-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    position: static;\n    margin: 10px 0 0 20px;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n.toggleButtonText:global(.MuiTypography-root) {\n  color: $sidebar-text-primary;\n  font-weight: 440;\n  line-height: 20px; /* 142.857% */\n}\n\n.icon {\n  color: $sidebar-text-primary;\n}\n"],"mappings":""}
+{"version":3,"file":"EntitySidebar.module.js","names":[],"sources":["../../../src/components/EntitySidebar/EntitySidebar.module.scss"],"sourcesContent":["$sidebar-text-primary: #616972;\n$sidebar-property-title-color: #747d88;\n$sidebar-property-value-color: #4d535a;\n// MUI `lg` breakpoint\n$sidebar-collapse-breakpoint: 1200px;\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.content {\n  width: 320px;\n  margin-top: 40px;\n  padding: 0 32px 0 0;\n\n  @media (max-width: $sidebar-collapse-breakpoint) {\n    width: 100%;\n    margin-top: 10px;\n    padding: 10px 32px 0 32px;\n  }\n}\n\n.sidebarHeader:global(.MuiTypography-root) {\n  font-size: 14px;\n  color: $sidebar-text-primary;\n  font-weight: 540;\n  line-height: 20px; /* 142.857% */\n}\n\n.divider {\n  margin-top: 8px;\n  margin-bottom: 16px;\n}\n\n.propertyValue:global(.MuiTypography-root) {\n  color: $sidebar-property-value-color;\n  font-style: normal;\n  font-weight: 440;\n  line-height: 20px; /* 142.857% */\n}\n\n.propertyTitle:global(.MuiTypography-root) {\n  color: $sidebar-property-title-color;\n  font-size: 12px;\n  line-height: 12px; /* 100% */\n}\n\n.propertiesContainer {\n  padding: 12px 0;\n  gap: 12px;\n}\n\n.propertyRow {\n  gap: 4px;\n}\n\n.toggleButton:global(.MuiButtonBase-root) {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  top: 0;\n  right: 32px;\n  white-space: nowrap;\n  align-self: flex-start;\n  position: absolute;\n\n  @media (max-width: $sidebar-collapse-breakpoint) {\n    position: static;\n    margin: 10px 0 0 32px;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n.toggleButtonText:global(.MuiTypography-root) {\n  color: $sidebar-text-primary;\n  font-weight: 440;\n  line-height: 20px; /* 142.857% */\n}\n\n.icon {\n  color: $sidebar-text-primary;\n}\n"],"mappings":""}

package/dist/components/EntitySidebar/EntitySidebar.module.scss

@@ -1,8 +1,8 @@
 $sidebar-text-primary: #616972;
 $sidebar-property-title-color: #747d88;
 $sidebar-property-value-color: #4d535a;
-@use 'sass:map';
-@use '../../style/abstracts/variables' as SrcVariables;
+// MUI `lg` breakpoint
+$sidebar-collapse-breakpoint: 1200px;
 
 .panel {
   display: flex;
@@ -15,7 +15,7 @@ $sidebar-property-value-color: #4d535a;
   margin-top: 40px;
   padding: 0 32px 0 0;
 
-  @media (max-width: map.get(SrcVariables.$breakpoints, 'large')) {
+  @media (max-width: $sidebar-collapse-breakpoint) {
     width: 100%;
     margin-top: 10px;
     padding: 10px 32px 0 32px;
@@ -61,14 +61,14 @@ $sidebar-property-value-color: #4d535a;
   flex-direction: row;
   gap: 8px;
   top: 0;
-  right: 0;
+  right: 32px;
   white-space: nowrap;
   align-self: flex-start;
   position: absolute;
 
-  @media (max-width: map.get(SrcVariables.$breakpoints, 'large')) {
+  @media (max-width: $sidebar-collapse-breakpoint) {
     position: static;
-    margin: 10px 0 0 20px;
+    margin: 10px 0 0 32px;
   }
 
   &:hover {

package/dist/components/FieldDescription/FieldDescription.css

@@ -0,0 +1 @@
+._description_eydtl_1{text-wrap:wrap;color:var(--synapse-gray-600);margin-top:6px;font-weight:500;display:block}

package/dist/components/FieldDescription/FieldDescription.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type FieldDescriptionProps = {
+    /** Neutral supplementary text shown below a field's label. */
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * Neutral supplementary text shown below a field's label and above its input, matching the
+ * Sage Design System (SDS) input fields. Always rendered in a neutral color regardless of form state.
+ *
+ * Rendered as a `<span>` so it can be composed inside a MUI `InputLabel` (which is a `<label>`)
+ * as well as used standalone. For error or status messages, use a field's `helperText` instead.
+ */
+export default function FieldDescription({ children, className, }: FieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldDescription.d.ts.map

package/dist/components/FieldDescription/FieldDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDescription.d.ts","sourceRoot":"","sources":["../../../src/components/FieldDescription/FieldDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,MAAM,qBAAqB,GAAG;IAClC,8DAA8D;IAC9D,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,2CAUvB"}

package/dist/components/FieldDescription/FieldDescription.js

@@ -0,0 +1,13 @@
+import e from "./FieldDescription.module.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/FieldDescription/FieldDescription.tsx
+function n({ children: n, className: r }) {
+	return /* @__PURE__ */ t("span", {
+		className: r ? `${e.description} ${r}` : e.description,
+		children: n
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=FieldDescription.js.map

package/dist/components/FieldDescription/FieldDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDescription.js","names":[],"sources":["../../../src/components/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport styles from './FieldDescription.module.scss'\n\nexport type FieldDescriptionProps = {\n  /** Neutral supplementary text shown below a field's label. */\n  children: ReactNode\n  className?: string\n}\n\n/**\n * Neutral supplementary text shown below a field's label and above its input, matching the\n * Sage Design System (SDS) input fields. Always rendered in a neutral color regardless of form state.\n *\n * Rendered as a `<span>` so it can be composed inside a MUI `InputLabel` (which is a `<label>`)\n * as well as used standalone. For error or status messages, use a field's `helperText` instead.\n */\nexport default function FieldDescription({\n  children,\n  className,\n}: FieldDescriptionProps) {\n  return (\n    <span\n      className={\n        className ? `${styles.description} ${className}` : styles.description\n      }\n    >\n      {children}\n    </span>\n  )\n}\n"],"mappings":";;;AAgBA,SAAwB,EAAiB,EACvC,aACA,gBACwB;CACxB,OACE,kBAAC,QAAD;EACE,WACE,IAAY,GAAG,EAAO,YAAY,GAAG,MAAc,EAAO;EAG3D;CACG,CAAA;AAEV"}

package/dist/components/FieldDescription/FieldDescription.module.js

@@ -0,0 +1,5 @@
+import './FieldDescription.css';var e = { description: "_description_eydtl_1" };
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=FieldDescription.module.js.map

package/dist/components/FieldDescription/FieldDescription.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDescription.module.js","names":[],"sources":["../../../src/components/FieldDescription/FieldDescription.module.scss"],"sourcesContent":[".description {\n  display: block;\n  font-weight: 500;\n  text-wrap: wrap;\n  // Explicit color prevents inheriting error/focused color from a parent label.\n  color: var(--synapse-gray-600);\n  margin-top: 6px;\n}\n"],"mappings":""}

package/dist/components/FieldDescription/FieldDescription.module.scss

@@ -0,0 +1,8 @@
+.description {
+  display: block;
+  font-weight: 500;
+  text-wrap: wrap;
+  // Explicit color prevents inheriting error/focused color from a parent label.
+  color: var(--synapse-gray-600);
+  margin-top: 6px;
+}

package/dist/components/FieldDescription/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './FieldDescription';
+export * from './FieldDescription';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FieldDescription/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldDescription/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,cAAc,oBAAoB,CAAA"}

package/dist/components/FieldDescription/index.js

@@ -0,0 +1,2 @@
+import e from "./FieldDescription.js";
+export { e as default };

package/dist/components/IconSvg/IconSvg.d.ts

@@ -1,6 +1,6 @@
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { EntityType } from '@sage-bionetworks/synapse-client';
-export declare const IconStrings: readonly ["accessOpen", "accessPending", "accessPendingCloud", "accessClosed", "actionKey", "arrowBack", "arrowForward", "arrowDropUp", "arrowDropDown", "article", "cards", "check", "clear", "cart", "clock", "code", "columns", "columnsOutlined", "openInNewWindow", "dashboard", "dashboardOutlined", "delete", "deleteSweep", "filter", "addToCart", "addCircleOutline", "addCircleTwoTone", "reload", "team", "photoCamera", "info", "favTwoTone", "favOutline", "fav", "peopleTwoTone", "challengesTwoTone", "download", "searchOutlined", "search", "history", "time", "login", "helpChatBubble", "helpOutlined", "helpOutlineTwoTone", "expandLess", "expandMore", "rat", "chromatin", "clinical", "contentCopy", "contentCopyRounded", "data", "dataLocked", "geneExpression", "geneVariants", "github", "imaging", "inSilicoModel", "modelSystem", "bioChemicalPhysical", "computationalTool", "spatialProfiling", "dataReuse", "lineGraph", "kinomics", "proteomics", "packagableFile", "unpackagableFile", "other", "wiki", "file", "fileOutlined", "folder", "folderOutlined", "link", "linkOff", "linkOutlined", "table", "tableOutlined", "tableRows", "share", "public", "people", "entityview", "submissionview", "submissionviewOutlined", "challenge", "discussion", "dataset", "datasetcollection", "docker", "accountCertified", "accountRegistered", "accountValidated", "warningOutlined", "removeCircle", "replyTwoTone", "chatTwoTone", "accessManagement", "chevronRight", "chevronLeft", "database", "close", "cross", "verticalEllipsis", "support", "sync", "clipboard", "clipboardCheck", "add", "warning", "circle", "block", "checkCircle", "errorOutlined", "phone", "pushpin", "addBoxOutline", "minusBoxOutline", "italic", "bold", "title", "visibility", "visibilityOff", "strikethrough", "subscript", "superscript", "latex", "image", "edit", "tag", "restore", "label", "upload", "flag", "newFolder", "createVersion", "email", "addConditions", "sortUp", "sortDown", "orcid", "tasks", "google24", "openInFull", "tableview", "tableviewOutlined", "fileWithShield", "baseline", "rosetteRibbon", "starTrophy", "awardScroll", "clappingHands", "podium", "openBook", "handWithMoney", "threeStars", "multiFile", "publicVisibility", "openVisibility", "privateVisibility"];
+export declare const IconStrings: readonly ["accessOpen", "accessPending", "accessPendingCloud", "accessClosed", "actionKey", "arrowBack", "arrowForward", "arrowDropUp", "arrowDropDown", "article", "cards", "check", "clear", "cart", "clock", "code", "columns", "columnsOutlined", "openInNewWindow", "dashboard", "dashboardOutlined", "delete", "deleteSweep", "filter", "addToCart", "addCircleOutline", "addCircleTwoTone", "reload", "team", "photoCamera", "info", "favTwoTone", "favOutline", "fav", "peopleTwoTone", "challengesTwoTone", "download", "searchOutlined", "search", "history", "time", "login", "helpChatBubble", "helpOutlined", "helpOutlineTwoTone", "expandLess", "expandMore", "rat", "chromatin", "clinical", "contentCopy", "contentCopyRounded", "fileCopy", "data", "dataLocked", "geneExpression", "geneVariants", "github", "imaging", "inSilicoModel", "modelSystem", "bioChemicalPhysical", "computationalTool", "spatialProfiling", "dataReuse", "lineGraph", "kinomics", "proteomics", "packagableFile", "unpackagableFile", "other", "wiki", "file", "fileOutlined", "folder", "folderOutlined", "link", "linkOff", "linkOutlined", "table", "tableOutlined", "tableRows", "share", "public", "people", "entityview", "submissionview", "submissionviewOutlined", "challenge", "discussion", "dataset", "datasetcollection", "docker", "accountCertified", "accountRegistered", "accountValidated", "warningOutlined", "removeCircle", "replyTwoTone", "chatTwoTone", "accessManagement", "chevronRight", "chevronLeft", "database", "close", "cross", "verticalEllipsis", "support", "sync", "clipboard", "clipboardCheck", "add", "warning", "circle", "block", "checkCircle", "errorOutlined", "phone", "pushpin", "addBoxOutline", "minusBoxOutline", "italic", "bold", "title", "visibility", "visibilityOff", "strikethrough", "subscript", "superscript", "latex", "image", "edit", "tag", "restore", "label", "upload", "flag", "newFolder", "createVersion", "email", "addConditions", "sortUp", "sortDown", "nih", "orcid", "tasks", "google24", "openInFull", "tableview", "tableviewOutlined", "fileWithShield", "baseline", "rosetteRibbon", "starTrophy", "awardScroll", "clappingHands", "podium", "openBook", "handWithMoney", "threeStars", "multiFile", "publicVisibility", "openVisibility", "privateVisibility"];
 export type IconName = (typeof IconStrings)[number];
 export type IconSvgProps = {
     icon: IconName;

package/dist/components/IconSvg/IconSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconSvg.d.ts","sourceRoot":"","sources":["../../../src/components/IconSvg/IconSvg.tsx"],"names":[],"mappings":"AA6JA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAG7D,eAAO,MAAM,WAAW,4rEAmKd,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,QAAQ,CAAA;IAEd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,GAAG,YAAY,CAAA;AA2VhB,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CA2CnC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,CAezD,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,CAejE,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"IconSvg.d.ts","sourceRoot":"","sources":["../../../src/components/IconSvg/IconSvg.tsx"],"names":[],"mappings":"AA+JA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAG7D,eAAO,MAAM,WAAW,+sEAsKd,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,QAAQ,CAAA;IAEd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,GAAG,YAAY,CAAA;AA+VhB,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CA2CnC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,CAezD,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,CAejE,CAAA;AAED,eAAe,OAAO,CAAA"}