@appquality/unguess-design-system 3.1.91-highlight-obs → 3.1.91-highlight

package/build/index.js

@@ -21,9 +21,9 @@ var bullet = require('@nivo/bullet');
 var web = require('@react-spring/web');
 var tooltip = require('@nivo/tooltip');
 var pie = require('@nivo/pie');
+var line = require('@nivo/line');
 var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
-var line = require('@nivo/line');
 var reactForms = require('@zendeskgarden/react-forms');
 var react = require('@tiptap/react');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
@@ -49,6 +49,10 @@ var formik = require('formik');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var reactPagination = require('@zendeskgarden/react-pagination');
 var reactTables = require('@zendeskgarden/react-tables');
+var SearchAndReplace = require('@sereneinserenade/tiptap-search-and-replace');
+var Document = require('@tiptap/extension-document');
+var Text$2 = require('@tiptap/extension-text');
+var model = require('@tiptap/pm/model');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -85,6 +89,9 @@ var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image$2);
 var Dropcursor__default = /*#__PURE__*/_interopDefaultLegacy(Dropcursor);
 var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
 var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
+var SearchAndReplace__default = /*#__PURE__*/_interopDefaultLegacy(SearchAndReplace);
+var Document__default = /*#__PURE__*/_interopDefaultLegacy(Document);
+var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text$2);
 
 /*
  * Design principles https://garden.zendesk.com/design/color (accessed 28 apr 2023)
@@ -291,7 +298,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const fontWeights = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 });
 
@@ -852,7 +864,7 @@ Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
 var _path$G;
-function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
+function _extends$T() { return _extends$T = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$T.apply(null, arguments); }
 const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
   width: 24,
   height: 24,
@@ -865,7 +877,7 @@ const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$F;
-function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+function _extends$S() { return _extends$S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$S.apply(null, arguments); }
 const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
   width: 24,
   height: 24,
@@ -878,7 +890,7 @@ const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$E;
-function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+function _extends$R() { return _extends$R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$R.apply(null, arguments); }
 const SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
   width: 24,
   height: 24,
@@ -891,7 +903,7 @@ const SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg"
 })));
 
 var _rect$4, _path$D, _path2$c, _path3$4;
-function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+function _extends$Q() { return _extends$Q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$Q.apply(null, arguments); }
 const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
   width: 24,
   height: 24,
@@ -915,7 +927,7 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
 })));
 
 var _rect$3, _path$C, _path2$b;
-function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
+function _extends$P() { return _extends$P = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$P.apply(null, arguments); }
 const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
   width: 24,
   height: 24,
@@ -940,7 +952,7 @@ const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("
 })));
 
 var _rect$2, _path$B, _path2$a;
-function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+function _extends$O() { return _extends$O = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$O.apply(null, arguments); }
 const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
   width: 24,
   height: 24,
@@ -967,7 +979,7 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
 })));
 
 var _rect$1, _path$A, _path2$9, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
-function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+function _extends$N() { return _extends$N = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$N.apply(null, arguments); }
 const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
   width: 24,
   height: 24,
@@ -1012,7 +1024,7 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
 })));
 
 var _g$c, _path$z, _path2$8, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+function _extends$M() { return _extends$M = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$M.apply(null, arguments); }
 const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
   width: 24,
   height: 24,
@@ -1082,7 +1094,7 @@ const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createEle
 })));
 
 var _g$b, _path$y;
-function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+function _extends$L() { return _extends$L = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$L.apply(null, arguments); }
 const SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
   width: 24,
   height: 24,
@@ -1198,7 +1210,7 @@ const TextDescription = (_a) => {
         : jsxRuntime.jsx(MD, Object.assign({ color: theme.palette.grey[700] }, props)));
 };
 
-const Label$2 = styled__default["default"](SM) `
+const Label$3 = styled__default["default"](SM) `
   color: ${({ theme }) => theme.palette.grey[500]};
 `;
 const Title$2 = styled__default["default"](LG) `
@@ -1222,7 +1234,7 @@ const Container$3 = styled__default["default"].div `
   `}
 `;
 const CardHeader = (props) => jsxRuntime.jsx(Container$3, Object.assign({}, props));
-CardHeader.Label = Label$2;
+CardHeader.Label = Label$3;
 CardHeader.Title = Title$2;
 CardHeader.Text = Description$2;
 
@@ -1737,59 +1749,6 @@ const BulletChart = ({ width, height, ranges, values }) => {
                 }, tooltip: CustomTooltip, rangeColors: theme.palette.grey[200], rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })) })));
 };
 
-const CenteredItem = ({ centerX, centerY, theme, radius, label, value, fontSizeMultiplier, }) => {
-    const parameter = 6;
-    const fontSizeFactor = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) / (14 * parameter);
-    const spacing = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) /
-        (parameter * 0.9);
-    const shift = -radius / (parameter * 2.5);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift + (value ? spacing : spacing / 2), fill: theme.palette.grey[600], style: {
-                        fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
-                    } }, { children: label })) }))), value && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift - (label ? spacing : spacing / 2), fill: theme.palette.blue[600], style: {
-                        fontSize: parseInt(theme.fontSizes.xxl.replace("px", "")) *
-                            fontSizeFactor,
-                        fontWeight: theme.fontWeights.semibold,
-                    } }, { children: value })) })))] }));
-};
-
-const PieChart = ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }) => {
-    var _a;
-    const themeContext = React.useContext(styled.ThemeContext);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign({}, Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { labels: Object.assign(Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: Object.assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_a = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _a === void 0 ? void 0 : _a.text) }) })), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, arcLinkLabelsThickness: 2, arcLinkLabel: (d) => labelFormatter
-                        ? labelFormatter({
-                            label: d.label,
-                            id: d.id,
-                            value: d.value,
-                            data: d.data,
-                            labelPosition: "arclink",
-                        })
-                        : (d.label || d.id).toString(), arcLinkLabelsDiagonalLength: 8, arcLinkLabelsStraightLength: 12, arcLinkLabelsTextOffset: 4, padAngle: 2, data: data, margin: Object.assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
-                        ? (node) => {
-                            const data = node.datum.data;
-                            const label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
-                            const value = data.value;
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({ label, value, data }) });
-                        }
-                        : undefined, cornerRadius: 2, innerRadius: 0.8, layers: [
-                        "arcs",
-                        "arcLabels",
-                        "arcLinkLabels",
-                        ...(centerItem
-                            ? [
-                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))),
-                            ]
-                            : []),
-                    ], activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.map((d) => labelFormatter
-                        ? labelFormatter({
-                            label: d.label,
-                            id: d.id,
-                            value: d.value,
-                            data: d,
-                            labelPosition: "legend",
-                        })
-                        : d.id.toString()) }, (typeof legend === "object" && legend)))) : undefined }))] }));
-};
-
 const AbsoluteChartContainer = styled__default["default"](ChartContainer) `
   position: absolute;
   left: 0;
@@ -1833,131 +1792,61 @@ const HalfPieChart = ({ theme, colors, width, height, data, margin, showArcLinks
                 }, mode: "back" })] })));
 };
 
-const flatten = (data) => data.reduce((acc, item) => {
-    if (item.children) {
-        return [...acc, item, ...flatten(item.children)];
-    }
-    return [...acc, item];
-}, []);
-const findChildrenByName = (data, name) => {
-    if (!data.children)
-        return undefined;
-    return flatten(data.children).find((searchedName) => searchedName.name === name);
-};
-
-const getChildrenValue = (data) => {
-    if (data.value) {
-        return data.value;
-    }
-    if (data.children) {
-        return data.children.reduce((acc, item) => {
-            return acc + getChildrenValue(item);
-        }, 0);
-    }
-    return 0;
+const CenteredItem = ({ centerX, centerY, theme, radius, label, value, fontSizeMultiplier, }) => {
+    const parameter = 6;
+    const fontSizeFactor = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) / (14 * parameter);
+    const spacing = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) /
+        (parameter * 0.9);
+    const shift = -radius / (parameter * 2.5);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift + (value ? spacing : spacing / 2), fill: theme.palette.grey[600], style: {
+                        fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
+                    } }, { children: label })) }))), value && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift - (label ? spacing : spacing / 2), fill: theme.palette.blue[600], style: {
+                        fontSize: parseInt(theme.fontSizes.xxl.replace("px", "")) *
+                            fontSizeFactor,
+                        fontWeight: theme.fontWeights.semibold,
+                    } }, { children: value })) })))] }));
 };
 
-const ResetText = styled__default["default"].text `
-  font-size: ${({ radius, theme }) => (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130}px;
-  cursor: pointer;
-
-  fill: ${({ theme }) => theme.palette.blue[500]};
-  &:hover {
-    fill: ${({ theme }) => theme.palette.blue[700]};
-  }
-`;
-const ResetButton = ({ centerX, centerY, radius, theme, onClick, }) => (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX - radius},${centerY - radius})` }, { children: jsxRuntime.jsx(ResetText, Object.assign({ onClick: onClick, radius: radius }, { children: `< Reset` })) })));
-
-const SunburstChart = ({ colors, width, height, data, centerItem, margin, onChange, tooltip, legend, }) => {
+const PieChart = ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }) => {
+    var _a;
     const themeContext = React.useContext(styled.ThemeContext);
-    const [currentData, setCurrentData] = React.useState(data);
-    const [currentColor, setCurrentColor] = React.useState();
-    const [isHovering, setIsHovering] = React.useState(false);
-    const changeDataSlice = ({ data, color, }) => {
-        setCurrentData(data);
-        setCurrentColor(color);
-    };
-    React.useEffect(() => {
-        if (onChange)
-            onChange(currentData);
-    }, [currentData]);
-    if (!data.children)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
-                        ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
-                                    padding: 0,
-                                } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
-                        ? () => currentColor
-                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, borderWidth: 4, cornerRadius: 4, onMouseEnter: (node) => {
-                        if (node.data.children) {
-                            setIsHovering(true);
-                        }
-                    }, onMouseLeave: (node) => {
-                        if (node.data.children) {
-                            setIsHovering(false);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign({}, Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { labels: Object.assign(Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: Object.assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_a = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _a === void 0 ? void 0 : _a.text) }) })), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, arcLinkLabelsThickness: 2, arcLinkLabel: (d) => labelFormatter
+                        ? labelFormatter({
+                            label: d.label,
+                            id: d.id,
+                            value: d.value,
+                            data: d.data,
+                            labelPosition: "arclink",
+                        })
+                        : (d.label || d.id).toString(), arcLinkLabelsDiagonalLength: 8, arcLinkLabelsStraightLength: 12, arcLinkLabelsTextOffset: 4, padAngle: 2, data: data, margin: Object.assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
+                        ? (node) => {
+                            const data = node.datum.data;
+                            const label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
+                            const value = data.value;
+                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({ label, value, data }) });
                         }
-                    }, tooltip: tooltip
-                        ? (node) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
-                                label: node.data.label || node.data.name,
-                                value: getChildrenValue(node.data),
-                                data: Object.assign(Object.assign({}, node.data), { children: undefined }),
-                            }) }))
-                        : undefined, layers: [
+                        : undefined, cornerRadius: 2, innerRadius: 0.8, layers: [
                         "arcs",
+                        "arcLabels",
+                        "arcLinkLabels",
                         ...(centerItem
                             ? [
-                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))),
-                            ]
-                            : []),
-                        ...(currentColor
-                            ? [
-                                (props) => (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: () => {
-                                        changeDataSlice({
-                                            data,
-                                        });
-                                    } })),
+                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))),
                             ]
                             : []),
-                    ], id: "name", value: "value", margin: Object.assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.6]] }, onClick: (clickedData) => {
-                        const foundObject = findChildrenByName(currentData, clickedData.id.toString());
-                        if (foundObject && foundObject.children) {
-                            changeDataSlice({
-                                data: foundObject,
-                                color: clickedData.color,
-                            });
-                        }
-                    } }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.children.map((d) => d.label || d.name) }, (typeof legend === "object" && legend)))) : undefined }))] }));
-};
-
-const CustomCell = ({ position, size, x, y, color, fill, opacity, borderWidth, borderColor, data, onHover, onLeave, onClick, }) => (jsxRuntime.jsx("circle", { r: size / 2, cx: x + size / 2, cy: y + size / 2, fill: fill || color, strokeWidth: borderWidth, stroke: borderColor, opacity: opacity, onMouseEnter: onHover, onMouseMove: onHover, onMouseLeave: onLeave, onClick: event => {
-        onClick({ position, color, x, y, data }, event);
-    } }));
-
-const WaffleChart = ({ height, width, data, total, tooltip, }) => {
-    return (jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: tooltip
-                ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
-                            padding: 0,
-                        } }) }) : DEFAULT_CHARTS_THEME, data: [
-                {
-                    id: "green-circles",
-                    label: data.label,
-                    value: data.value,
-                },
-                {
-                    id: "grey-circles",
-                    label: total.label,
-                    value: total.value,
-                },
-            ], tooltip: ({ value, label }) => tooltip ? tooltip({ label, value }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: `${label}: ${value}` }), fillDirection: "bottom", total: total.value, rows: 6, columns: 8, colors: CHARTS_COLOR_SCHEME_MONO, 
-            // @ts-ignore property cellComponent does not exist, but it does
-            cellComponent: (_a) => {
-                var rest = __rest(_a, ["borderWidth", "borderColor"]);
-                return (jsxRuntime.jsx(CustomCell, Object.assign({ borderWidth: 2, borderColor: "white" }, rest)));
-            } }) })));
+                    ], activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.map((d) => labelFormatter
+                        ? labelFormatter({
+                            label: d.label,
+                            id: d.id,
+                            value: d.value,
+                            data: d,
+                            labelPosition: "legend",
+                        })
+                        : d.id.toString()) }, (typeof legend === "object" && legend)))) : undefined }))] }));
 };
 
 var _g$a, _defs$4;
-function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+function _extends$K() { return _extends$K = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$K.apply(null, arguments); }
 const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
   width: 27,
   height: 26,
@@ -1981,7 +1870,7 @@ const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$9, _defs$3;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
+function _extends$J() { return _extends$J = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$J.apply(null, arguments); }
 const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
   width: 27,
   height: 26,
@@ -2005,7 +1894,7 @@ const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$8, _defs$2;
-function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
+function _extends$I() { return _extends$I = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$I.apply(null, arguments); }
 const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
   width: 27,
   height: 26,
@@ -2035,7 +1924,7 @@ const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$7, _defs$1;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+function _extends$H() { return _extends$H = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$H.apply(null, arguments); }
 const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
   width: 27,
   height: 26,
@@ -2065,7 +1954,7 @@ const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$6, _defs;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+function _extends$G() { return _extends$G = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$G.apply(null, arguments); }
 const SvgSentiment5 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
   width: 26,
   height: 26,
@@ -2294,41 +2183,164 @@ const SentimentChart = ({ data, width, height, margin, tooltip, i18n, }) => {
                 ], enableCrosshair: false, isInteractive: true, enableSlices: "x" }) })) }));
 };
 
-const ShortcutContainer = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-  font-size: ${({ theme }) => theme.fontSizes.sm};
-`;
-const Text$1 = styled__default["default"](reactTypography.SM) `
-  line-height: 1.7;
-`;
-const SendShortcut = ({ saveText }) => {
-    return (jsxRuntime.jsxs(ShortcutContainer, { children: [jsxRuntime.jsxs(reactTags.Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text$1, { children: saveText || "to save" })] }));
-};
-
-const Footer$4 = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.xs} 0px ${theme.space.sm}`};
-  align-items: center;
-  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
-  justify-content: ${({ showShortcut }) => showShortcut ? "space-between" : "flex-end"};
-  gap: ${({ theme }) => theme.space.xs};
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-const ChatFooter = ({ saveText, children, showShortcut, }) => {
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Footer$4, Object.assign({ showShortcut: showShortcut }, { children: showShortcut ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SendShortcut, { saveText: saveText }), children] })) : (children) })) }));
+const flatten = (data) => data.reduce((acc, item) => {
+    if (item.children) {
+        return [...acc, item, ...flatten(item.children)];
+    }
+    return [...acc, item];
+}, []);
+const findChildrenByName = (data, name) => {
+    if (!data.children)
+        return undefined;
+    return flatten(data.children).find((searchedName) => searchedName.name === name);
 };
 
-const ChatContext = React.createContext(null);
-const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }) => {
-    const [editor, setEditor] = React.useState();
-    const [thumbnails, setThumbnails] = React.useState([]);
-    const getMentions = (editor) => {
-        const result = [];
-        editor.state.doc.descendants((node) => {
+const getChildrenValue = (data) => {
+    if (data.value) {
+        return data.value;
+    }
+    if (data.children) {
+        return data.children.reduce((acc, item) => {
+            return acc + getChildrenValue(item);
+        }, 0);
+    }
+    return 0;
+};
+
+const ResetText = styled__default["default"].text `
+  font-size: ${({ radius, theme }) => (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130}px;
+  cursor: pointer;
+
+  fill: ${({ theme }) => theme.palette.blue[500]};
+  &:hover {
+    fill: ${({ theme }) => theme.palette.blue[700]};
+  }
+`;
+const ResetButton = ({ centerX, centerY, radius, theme, onClick, }) => (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX - radius},${centerY - radius})` }, { children: jsxRuntime.jsx(ResetText, Object.assign({ onClick: onClick, radius: radius }, { children: `< Reset` })) })));
+
+const SunburstChart = ({ colors, width, height, data, centerItem, margin, onChange, tooltip, legend, }) => {
+    const themeContext = React.useContext(styled.ThemeContext);
+    const [currentData, setCurrentData] = React.useState(data);
+    const [currentColor, setCurrentColor] = React.useState();
+    const [isHovering, setIsHovering] = React.useState(false);
+    const changeDataSlice = ({ data, color, }) => {
+        setCurrentData(data);
+        setCurrentColor(color);
+    };
+    React.useEffect(() => {
+        if (onChange)
+            onChange(currentData);
+    }, [currentData]);
+    if (!data.children)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
+                        ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
+                                    padding: 0,
+                                } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
+                        ? () => currentColor
+                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, borderWidth: 4, cornerRadius: 4, onMouseEnter: (node) => {
+                        if (node.data.children) {
+                            setIsHovering(true);
+                        }
+                    }, onMouseLeave: (node) => {
+                        if (node.data.children) {
+                            setIsHovering(false);
+                        }
+                    }, tooltip: tooltip
+                        ? (node) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
+                                label: node.data.label || node.data.name,
+                                value: getChildrenValue(node.data),
+                                data: Object.assign(Object.assign({}, node.data), { children: undefined }),
+                            }) }))
+                        : undefined, layers: [
+                        "arcs",
+                        ...(centerItem
+                            ? [
+                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))),
+                            ]
+                            : []),
+                        ...(currentColor
+                            ? [
+                                (props) => (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: () => {
+                                        changeDataSlice({
+                                            data,
+                                        });
+                                    } })),
+                            ]
+                            : []),
+                    ], id: "name", value: "value", margin: Object.assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.6]] }, onClick: (clickedData) => {
+                        const foundObject = findChildrenByName(currentData, clickedData.id.toString());
+                        if (foundObject && foundObject.children) {
+                            changeDataSlice({
+                                data: foundObject,
+                                color: clickedData.color,
+                            });
+                        }
+                    } }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.children.map((d) => d.label || d.name) }, (typeof legend === "object" && legend)))) : undefined }))] }));
+};
+
+const CustomCell = ({ position, size, x, y, color, fill, opacity, borderWidth, borderColor, data, onHover, onLeave, onClick, }) => (jsxRuntime.jsx("circle", { r: size / 2, cx: x + size / 2, cy: y + size / 2, fill: fill || color, strokeWidth: borderWidth, stroke: borderColor, opacity: opacity, onMouseEnter: onHover, onMouseMove: onHover, onMouseLeave: onLeave, onClick: event => {
+        onClick({ position, color, x, y, data }, event);
+    } }));
+
+const WaffleChart = ({ height, width, data, total, tooltip, }) => {
+    return (jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: tooltip
+                ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
+                            padding: 0,
+                        } }) }) : DEFAULT_CHARTS_THEME, data: [
+                {
+                    id: "green-circles",
+                    label: data.label,
+                    value: data.value,
+                },
+                {
+                    id: "grey-circles",
+                    label: total.label,
+                    value: total.value,
+                },
+            ], tooltip: ({ value, label }) => tooltip ? tooltip({ label, value }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: `${label}: ${value}` }), fillDirection: "bottom", total: total.value, rows: 6, columns: 8, colors: CHARTS_COLOR_SCHEME_MONO, 
+            // @ts-ignore property cellComponent does not exist, but it does
+            cellComponent: (_a) => {
+                var rest = __rest(_a, ["borderWidth", "borderColor"]);
+                return (jsxRuntime.jsx(CustomCell, Object.assign({ borderWidth: 2, borderColor: "white" }, rest)));
+            } }) })));
+};
+
+const ShortcutContainer = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  font-size: ${({ theme }) => theme.fontSizes.sm};
+`;
+const Text$1 = styled__default["default"](reactTypography.SM) `
+  line-height: 1.7;
+`;
+const SendShortcut = ({ saveText }) => {
+    return (jsxRuntime.jsxs(ShortcutContainer, { children: [jsxRuntime.jsxs(reactTags.Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text$1, { children: saveText || "to save" })] }));
+};
+
+const Footer$4 = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => `${theme.space.xs} 0px ${theme.space.sm}`};
+  align-items: center;
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
+  justify-content: ${({ showShortcut }) => showShortcut ? "space-between" : "flex-end"};
+  gap: ${({ theme }) => theme.space.xs};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+`;
+const ChatFooter = ({ saveText, children, showShortcut, }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Footer$4, Object.assign({ showShortcut: showShortcut }, { children: showShortcut ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SendShortcut, { saveText: saveText }), children] })) : (children) })) }));
+};
+
+const ChatContext = React.createContext(null);
+const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }) => {
+    const [editor, setEditor] = React.useState();
+    const [thumbnails, setThumbnails] = React.useState([]);
+    const getMentions = (editor) => {
+        const result = [];
+        editor.state.doc.descendants((node) => {
             if (node.type.name === "mention") {
                 // Add only if it's not already in the array
                 if (!result.some((r) => r.id === node.attrs.id))
@@ -2732,7 +2744,7 @@ const ChatTitle = styled__default["default"](Title$1) `
 `;
 
 var _path$x;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+function _extends$F() { return _extends$F = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$F.apply(null, arguments); }
 const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2745,7 +2757,7 @@ const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$w;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+function _extends$E() { return _extends$E = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$E.apply(null, arguments); }
 const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2761,7 +2773,7 @@ const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg"
 })));
 
 var _path$v, _path2$7;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+function _extends$D() { return _extends$D = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$D.apply(null, arguments); }
 const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2780,7 +2792,7 @@ const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _g$5;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+function _extends$C() { return _extends$C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$C.apply(null, arguments); }
 const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2808,7 +2820,7 @@ const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 var _g$4;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+function _extends$B() { return _extends$B = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$B.apply(null, arguments); }
 const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2836,7 +2848,7 @@ const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 var _g$3;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+function _extends$A() { return _extends$A = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$A.apply(null, arguments); }
 const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2864,7 +2876,7 @@ const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 const StyledIconButton = styled__default["default"](IconButton) ``;
-const MenuContainer$1 = styled__default["default"](Card) `
+const MenuContainer$2 = styled__default["default"](Card) `
   padding: ${({ theme }) => theme.space.xxs};
 
   ${StyledIconButton} {
@@ -2883,12 +2895,12 @@ const MenuContainer$1 = styled__default["default"](Card) `
     }
   }
 `;
-const FloatingMenu = (props) => {
+const FloatingMenu$1 = (props) => {
     const { editor } = props;
     if (!editor) {
         return null;
     }
-    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer$1, Object.assign({ isFloating: true }, { children: [jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isBasic: !editor.isActive("heading", { level: 1 }), isPrimary: editor.isActive("heading", { level: 1 }), isPill: false }, { children: jsxRuntime.jsx(SvgH1Fill, {}, "ug-h1-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isBasic: !editor.isActive("heading", { level: 2 }), isPrimary: editor.isActive("heading", { level: 2 }), isPill: false }, { children: jsxRuntime.jsx(SvgH2Fill, {}, "ug-h2-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBold().run(), isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleItalic().run(), isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBlockquote().run(), isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
+    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer$2, Object.assign({ isFloating: true }, { children: [jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isBasic: !editor.isActive("heading", { level: 1 }), isPrimary: editor.isActive("heading", { level: 1 }), isPill: false }, { children: jsxRuntime.jsx(SvgH1Fill, {}, "ug-h1-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isBasic: !editor.isActive("heading", { level: 2 }), isPrimary: editor.isActive("heading", { level: 2 }), isPill: false }, { children: jsxRuntime.jsx(SvgH2Fill, {}, "ug-h2-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBold().run(), isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleItalic().run(), isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBlockquote().run(), isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
 };
 
 /**
@@ -2918,7 +2930,7 @@ const Tooltip = styled__default["default"](TooltipComponent) `
 `;
 
 var _path$u;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+function _extends$z() { return _extends$z = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$z.apply(null, arguments); }
 const SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2931,7 +2943,7 @@ const SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg"
 })));
 
 var _path$t;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+function _extends$y() { return _extends$y = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$y.apply(null, arguments); }
 const SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2946,7 +2958,7 @@ const SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("sv
 })));
 
 var _path$s;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+function _extends$x() { return _extends$x = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$x.apply(null, arguments); }
 const SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -2961,7 +2973,7 @@ const SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$r;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+function _extends$w() { return _extends$w = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$w.apply(null, arguments); }
 const SvgClipboard = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -3067,7 +3079,7 @@ function useMedia() {
     return { getMedia };
 }
 
-const MenuContainer = styled__default["default"].div `
+const MenuContainer$1 = styled__default["default"].div `
   padding: ${({ theme }) => theme.space.xs} 0;
   display: flex;
   flex-direction: row;
@@ -3110,7 +3122,7 @@ const CommentBar = ({ editor, i18n, }) => {
             }
         };
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: handleBoldClick }, { children: jsxRuntime.jsx(SvgBoldStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: handleItalicClick }, { children: jsxRuntime.jsx(SvgItalicStroke, {}) })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: handleMentionClick }, { children: jsxRuntime.jsx(SvgAtStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ style: { textAlign: "center" }, content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : (jsxRuntime.jsxs("span", { children: ["Upload images and video.", " ", jsxRuntime.jsxs("span", Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [" ", jsxRuntime.jsx("br", {}), " Max size: 5GB", " "] }))] })), placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: handleAttachmentClick }, { children: jsxRuntime.jsx(SvgClipboard, {}) })) }))] })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer$1, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: handleBoldClick }, { children: jsxRuntime.jsx(SvgBoldStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: handleItalicClick }, { children: jsxRuntime.jsx(SvgItalicStroke, {}) })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: handleMentionClick }, { children: jsxRuntime.jsx(SvgAtStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ style: { textAlign: "center" }, content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : (jsxRuntime.jsxs("span", { children: ["Upload images and video.", " ", jsxRuntime.jsxs("span", Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [" ", jsxRuntime.jsx("br", {}), " Max size: 5GB", " "] }))] })), placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: handleAttachmentClick }, { children: jsxRuntime.jsx(SvgClipboard, {}) })) }))] })) }));
 };
 
 const CustomMention = Mention__default["default"].extend({
@@ -3360,7 +3372,7 @@ const editorExtensions = ({ placeholderOptions, mentionableUsers, }) => {
 };
 
 var _circle$3, _path$q, _path2$6;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+function _extends$v() { return _extends$v = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$v.apply(null, arguments); }
 const SvgRemoveMediaIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
   width: 56,
   height: 56,
@@ -3400,7 +3412,7 @@ const DeleteThumbnailX = ({ deleteThumbnail }) => {
 };
 
 var _circle$2, _path$p;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
 const SvgVideoPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
   width: 56,
   height: 56,
@@ -3603,7 +3615,7 @@ Lightbox.Footer = Footer$3;
 Lightbox.Close = reactModals.Close;
 
 var _path$o;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+function _extends$t() { return _extends$t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$t.apply(null, arguments); }
 const SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -3616,7 +3628,7 @@ const SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElemen
 })));
 
 var _path$n;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
 const SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -3847,7 +3859,7 @@ Slider.PrevButton = PrevButton;
 Slider.NextButton = NextButton;
 
 var _path$m, _path2$5;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
 const SvgVolumeMutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -3864,7 +3876,7 @@ const SvgVolumeMutedFill = props => /*#__PURE__*/React__namespace.createElement(
 })));
 
 var _path$l, _path2$4;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
 const SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -3946,7 +3958,7 @@ const useProgressContext = () => {
 };
 
 var _g$2;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
 const SvgGrip = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -4111,7 +4123,7 @@ const Bookmark = (props) => {
 };
 
 var _path$k, _path2$3, _path3$1;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+function _extends$o() { return _extends$o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$o.apply(null, arguments); }
 const SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
   width: 16,
   height: 16,
@@ -4132,7 +4144,7 @@ const SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement(
 })));
 
 var _path$j, _path2$2, _path3;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+function _extends$n() { return _extends$n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$n.apply(null, arguments); }
 const SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
   width: 16,
   height: 16,
@@ -4153,7 +4165,7 @@ const SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createEleme
 })));
 
 var _g$1;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
 const SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -4179,7 +4191,7 @@ const SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg",
 }))));
 
 var _path$i;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
 const SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -4192,7 +4204,7 @@ const SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$h, _path2$1;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+function _extends$k() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
 const SvgPreviousFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -4279,7 +4291,7 @@ const ControlsGroupCenter = (props) => {
 };
 
 var _path$g, _circle$1;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
 const SvgTagStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -4298,7 +4310,7 @@ const SvgTagStroke = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$f;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
 const SvgPlus$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
   width: 12,
   height: 12,
@@ -4331,7 +4343,7 @@ const Cutter = ({ onCutHandler, isCutting, i18n, }) => {
 };
 
 var _path$e;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
 const SvgMaximizeStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -4346,7 +4358,7 @@ const SvgMaximizeStroke = props => /*#__PURE__*/React__namespace.createElement("
 })));
 
 var _path$d;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
 const SvgMinimizeStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -4655,7 +4667,7 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
 };
 
 var _path$c;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
 const SvgPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
   width: 70,
   height: 70,
@@ -4780,6 +4792,79 @@ const StyledDiv = styled__default["default"].div `
 `;
 const VideoSpinner = () => (jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(Spinner, { size: "50", color: "white" }) }));
 
+const usePictureInPicture = (videoRef, pipMode, onPipChange) => {
+    const getObserver = (videoRef, isVideoPlaying) => {
+        return new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting && isVideoPlaying()) {
+                    videoRef.requestPictureInPicture();
+                }
+                if (document.pictureInPictureElement &&
+                    entry.isIntersecting &&
+                    !isVideoPlaying()) {
+                    document.exitPictureInPicture();
+                }
+            });
+        }, { threshold: 0.5 });
+    };
+    const handleManualPipMode = (videoRef, pipMode) => {
+        if (pipMode) {
+            videoRef.requestPictureInPicture();
+        }
+        if (!pipMode && document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        }
+    };
+    React.useEffect(() => {
+        // bail out if pipMode is not defined or videoRef is not defined or pip is not supported
+        if (typeof pipMode === "undefined")
+            return;
+        if (!document.pictureInPictureEnabled) {
+            console.warn("Picture-in-Picture is not supported in this browser");
+            return;
+        }
+        if (!videoRef)
+            return;
+        // if pipMode is auto, we will enter picture in picture mode when the video is not in view
+        if (pipMode === "auto") {
+            const isVideoPlaying = () => videoRef.currentTime > 0 &&
+                !videoRef.paused &&
+                !videoRef.ended &&
+                videoRef.readyState > 2;
+            const observer = getObserver(videoRef, isVideoPlaying);
+            observer.observe(videoRef);
+            return () => {
+                observer.disconnect();
+            };
+        }
+        else if (typeof pipMode === "boolean") {
+            handleManualPipMode(videoRef, pipMode);
+        }
+        else {
+            handleManualPipMode(videoRef, pipMode());
+        }
+    }, [pipMode, videoRef]);
+    React.useEffect(() => {
+        if (!document.pictureInPictureEnabled) {
+            return;
+        }
+        document.addEventListener("enterpictureinpicture", () => {
+            onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(true);
+        });
+        document.addEventListener("leavepictureinpicture", () => {
+            onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(false);
+        });
+        return () => {
+            document.removeEventListener("enterpictureinpicture", () => {
+                onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(true);
+            });
+            document.removeEventListener("leavepictureinpicture", () => {
+                onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(false);
+            });
+        };
+    }, [onPipChange]);
+};
+
 /**
  * The Player is a styled media tag with custom controls
  * <hr>
@@ -4790,11 +4875,14 @@ const Player = React.forwardRef((props, forwardRef) => (jsxRuntime.jsx(Video__de
 const PlayerCore = React.forwardRef((props, forwardRef) => {
     var _a;
     const { context, togglePlay, setIsPlaying } = Video.useVideoContext();
-    const { onCutHandler, bookmarks, isCutting } = props;
+    const { onCutHandler, bookmarks, isCutting, pipMode, onPipChange } = props;
     const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
     const isLoaded = !!videoRef;
     const containerRef = React.useRef(null);
-    React.useImperativeHandle(forwardRef, () => videoRef, [videoRef]);
+    React.useImperativeHandle(forwardRef, () => videoRef, [
+        videoRef,
+    ]);
+    usePictureInPicture(videoRef, pipMode, onPipChange);
     React.useEffect(() => {
         if (videoRef) {
             videoRef.addEventListener("pause", () => {
@@ -4809,8 +4897,10 @@ const PlayerCore = React.forwardRef((props, forwardRef) => {
             }
         };
     }, [setIsPlaying, videoRef]);
-    return (jsxRuntime.jsxs(Container$1, Object.assign({ isLoaded: isLoaded, isPlaying: context.isPlaying, ref: containerRef, showControls: props.showControls }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: context.isPlaying, showControls: props.showControls, onClick: togglePlay })), jsxRuntime.jsx(Video__default["default"].Player, { className: "player-container" }), jsxRuntime.jsx(ProgressContextProvider, { children: jsxRuntime.jsx(Controls, { container: containerRef.current, onCutHandler: onCutHandler, bookmarks: bookmarks, isCutting: isCutting, onBookMarkUpdated: props.handleBookmarkUpdate, i18n: props.i18n, showControls: props.showControls }) })] })));
-});
+    return (jsxRuntime.jsxs(Container$1, Object.assign({ isLoaded: isLoaded, isPlaying: context.isPlaying, ref: containerRef }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: context.isPlaying, onClick: togglePlay })), jsxRuntime.jsx(Video__default["default"].Player, { className: "player-container" }), jsxRuntime.jsx(ProgressContextProvider, { children: jsxRuntime.jsx(Controls, { container: containerRef.current, onCutHandler: onCutHandler, bookmarks: bookmarks, isCutting: isCutting, onBookMarkUpdated: props.handleBookmarkUpdate, i18n: props.i18n }) })] })));
+});
+const PlayerProvider = (props) => (jsxRuntime.jsx(Video__default["default"], Object.assign({ src: props.url }, props, { children: props.children })));
+PlayerProvider.Core = PlayerCore;
 
 const MediaLightBox = ({ header, onClose, slideChange, selectedImageIndex, thumbnails, videoRefs, isOpen, details }) => {
     if (!isOpen) {
@@ -4895,7 +4985,7 @@ const CommentBox = (_a) => {
         return null;
     ed.on("create", ({ editor }) => setEditor(editor));
     ed.on("update", ({ editor }) => setEditor(editor));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: (_b = thumbnails[selectedImageIndex]) === null || _b === void 0 ? void 0 : _b.name, onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: thumbnails, videoRefs: videoRefs }), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: (_b = thumbnails[selectedImageIndex]) === null || _b === void 0 ? void 0 : _b.name, onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: thumbnails, videoRefs: videoRefs }), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu$1, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
 };
 
 const UgGrid = styled__default["default"](reactGrid.Grid) `
@@ -4995,6 +5085,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
                                 handleClickThumbnail(index);
                             } }) }), index))) })) }), jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })), onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: media, videoRefs: videoRefs, details: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
                         avatar: author.avatar,
+                        avatarType: author.avatarType,
                         name: author.name,
                     }, date: date, message: message }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("br", {}) }) })) }), jsxRuntime.jsx(Footer$2, { children: children })] }));
 };
@@ -5018,7 +5109,7 @@ Chat.Input = CommentBox;
 Chat.Footer = ChatFooter;
 
 var _circle;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
 const SvgCircleFullFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -5101,6 +5192,79 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
 Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
 Drawer.Close = reactModals.DrawerModal.Close;
 
+const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
+  width: 100%;
+`;
+/**
+ * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
+ * <hr>
+ * Used for this:
+    - To filter down a large list of options
+    - To quickly find a known option
+ * Not for this:
+    - To make more than one selection, use Multiselect instead
+ */
+const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
+
+const StyledMenu = styled__default["default"](reactDropdowns.Menu) `
+  width: auto !important;
+`;
+/**
+ * A Menu is a wrapper for items elements
+ **/
+const Menu = (props) => jsxRuntime.jsx(StyledMenu, Object.assign({}, props));
+// Extras
+const PreviousItem = (props) => (jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props)));
+const Separator = (props) => (jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props)));
+const NextItem = (props) => jsxRuntime.jsx(reactDropdowns.NextItem, Object.assign({}, props));
+const ItemMeta = (props) => (jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props)));
+const MediaBody = (props) => (jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props)));
+const MediaFigure = (props) => (jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props)));
+const MediaItem = (props) => (jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props)));
+
+const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
+/**
+ * A Label is used to specify a title for an input.
+ * <hr>
+ **/
+const Label$2 = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
+
+const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
+
+const UgSelect = styled__default["default"](reactDropdowns.Select) `
+  ${(props) => props.isPrimary &&
+    `
+      background-color: ${props.theme.palette.blue[600]};
+      color: white;
+      & svg[data-garden-id="forms.media_figure"] {
+         color: white;
+      }
+   `}
+`;
+/**
+ * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
+ * <hr>
+ * Used for this:
+    - To make a selection from a list of options
+ * Not for this:
+    - To filter a large list of options, use Autocomplete instead
+    - To make multiple selections from a list, use Multiselect instead
+    - To select from a list on mobile, use a native Select instead
+ */
+const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
+const StyledDropdown = styled__default["default"].div `
+  ${StyledLabel$2} {
+    display: block;
+  }
+`;
+const StyledMenuHeaderItem = styled__default["default"](MenuHeaderItem) `
+  pointer-events: none;
+`;
+const Dropdown = (props) => (jsxRuntime.jsx(StyledDropdown, { children: jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)) }));
+const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
+Dropdown.HeaderItem = StyledMenuHeaderItem;
+Dropdown.Separator = Separator;
+
 const Field$1 = styled__default["default"](reactDropdowns.Field) ``;
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -5132,120 +5296,6 @@ const UgItem = styled__default["default"](reactDropdowns.Item) `
 `;
 const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
 
-const Container = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-`;
-const MetaContainer$1 = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-`;
-const ThumbContainer = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${({ theme }) => theme.space.sm};
-  width: 100%;
-  max-width: ${({ theme }) => theme.components.autocomplete.thumbSize};
-
-  > div {
-    height: 100%;
-  }
-`;
-const Label$1 = styled__default["default"](MD) `
-  font-weight: ${({ theme }) => theme.fontWeights.medium};
-  color: ${({ theme }) => theme.palette.grey[800]};
-`;
-const Description$1 = styled__default["default"](SM) `
-  color: ${({ theme }) => theme.palette.grey[600]};
-`;
-const Image$1 = React.memo(({ src }) => {
-    return jsxRuntime.jsx("img", { src: src });
-});
-const ItemContent = (props) => {
-    const { thumbSrc, description, label } = props;
-    return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
-};
-
-const StyledMenu = styled__default["default"](reactDropdowns.Menu) `
-  width: auto !important;
-`;
-/**
- * A Menu is a wrapper for items elements
- **/
-const Menu = (props) => jsxRuntime.jsx(StyledMenu, Object.assign({}, props));
-// Extras
-const PreviousItem = (props) => (jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props)));
-const Separator = (props) => (jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props)));
-const NextItem = (props) => jsxRuntime.jsx(reactDropdowns.NextItem, Object.assign({}, props));
-const ItemMeta = (props) => (jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props)));
-const MediaBody = (props) => (jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props)));
-const MediaFigure = (props) => (jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props)));
-const MediaItem = (props) => (jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props)));
-
-const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
-  width: 100%;
-`;
-/**
- * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
- * <hr>
- * Used for this:
-    - To filter down a large list of options
-    - To quickly find a known option
- * Not for this:
-    - To make more than one selection, use Multiselect instead
- */
-const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
-
-const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
-/**
- * A Label is used to specify a title for an input.
- * <hr>
- **/
-const Label = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
-
-const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
-
-const UgSelect = styled__default["default"](reactDropdowns.Select) `
-  ${(props) => props.isPrimary &&
-    `
-      background-color: ${props.theme.palette.blue[600]};
-      color: white;
-      & svg[data-garden-id="forms.media_figure"] {
-         color: white;
-      }
-   `}
-`;
-/**
- * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
- * <hr>
- * Used for this:
-    - To make a selection from a list of options
- * Not for this:
-    - To filter a large list of options, use Autocomplete instead
-    - To make multiple selections from a list, use Multiselect instead
-    - To select from a list on mobile, use a native Select instead
- */
-const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
-const StyledDropdown = styled__default["default"].div `
-  ${StyledLabel$2} {
-    display: block;
-  }
-`;
-const StyledMenuHeaderItem = styled__default["default"](MenuHeaderItem) `
-  pointer-events: none;
-`;
-const Dropdown = (props) => (jsxRuntime.jsx(StyledDropdown, { children: jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)) }));
-const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
-Dropdown.HeaderItem = StyledMenuHeaderItem;
-Dropdown.Separator = Separator;
-
 const StyledAutocomplete = styled__default["default"](Autocomplete) `
   ${(props) => props.hasSelectedItems &&
     `
@@ -5283,13 +5333,54 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
             }, onStateChange: (changes) => {
                 if (changes.isOpen === false)
                     setInputValue("");
-            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
+            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label$2, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
                                 ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
                                     ? i18n.counterText(selectedItems.length)
                                     : `Items (${selectedItems.length})`
                                 : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(Item$1, Object.assign({ value: option }, option, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.itemId)))) }))] })) }));
 };
 
+const Container = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+`;
+const MetaContainer$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`;
+const ThumbContainer = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ theme }) => theme.space.sm};
+  width: 100%;
+  max-width: ${({ theme }) => theme.components.autocomplete.thumbSize};
+
+  > div {
+    height: 100%;
+  }
+`;
+const Label$1 = styled__default["default"](MD) `
+  font-weight: ${({ theme }) => theme.fontWeights.medium};
+  color: ${({ theme }) => theme.palette.grey[800]};
+`;
+const Description$1 = styled__default["default"](SM) `
+  color: ${({ theme }) => theme.palette.grey[600]};
+`;
+const Image$1 = React.memo(({ src }) => {
+    return jsxRuntime.jsx("img", { src: src });
+});
+const ItemContent = (props) => {
+    const { thumbSrc, description, label } = props;
+    return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
+};
+
 const Header$1 = styled__default["default"].div `
   display: flex;
   flex-direction: column;
@@ -5393,7 +5484,7 @@ const Editor = (_a) => {
     }
     // Add here because we want to keep also the listener from the props.
     ed.on("update", ({ editor }) => setActiveEditor(editor));
-    return (jsxRuntime.jsxs(EditorContainer, Object.assign({ editable: isEditable, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
+    return (jsxRuntime.jsxs(EditorContainer, Object.assign({ editable: isEditable, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu$1, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
 };
 
 const UgCheckbox = styled__default["default"](reactForms.Checkbox) ``;
@@ -5409,7 +5500,7 @@ const UgCheckbox = styled__default["default"](reactForms.Checkbox) ``;
    **/
 const Checkbox = (props) => jsxRuntime.jsx(UgCheckbox, Object.assign({}, props));
 
-const StyledLabel$1 = styled__default["default"](Label) `
+const StyledLabel$1 = styled__default["default"](Label$2) `
   margin: ${({ theme }) => theme.space.base}px auto;
 `;
 const CheckboxCard = (props) => {
@@ -5446,7 +5537,7 @@ const Hint = styled__default["default"](reactForms.Hint) ``;
 const Input = React.forwardRef((props, ref) => jsxRuntime.jsx(UgInput, Object.assign({ ref: ref }, props)));
 
 var _g;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
 const SvgNotesStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -5479,7 +5570,7 @@ const StyledInput = styled__default["default"](Input) `
     transition: border-color 0.2s ease-in-out 0.1s;
   }
 `;
-const StyledLabel = styled__default["default"](Label) `
+const StyledLabel = styled__default["default"](Label$2) `
   padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xxs} 0`};
   transition: opacity 0.2s ease-in-out;
 `;
@@ -5566,7 +5657,7 @@ const UgRadio = styled__default["default"](reactForms.Radio) ``;
 const Radio = (props) => jsxRuntime.jsx(UgRadio, Object.assign({}, props));
 
 var _path$b;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
 const SvgCheckLg = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
   width: 16,
   height: 16,
@@ -5688,12 +5779,15 @@ const StyledWord = styled__default["default"].div `
 
   ${({ observations, theme }) => {
     var _a;
-    return observations && observations.length > 0 &&
+    return observations &&
+        observations.length > 0 &&
         `
       color: ${(_a = observations[observations.length - 1].color) !== null && _a !== void 0 ? _a : theme.palette.grey[600]};
       box-sizing: border-box;
-      font-weight: ${getFocusedObs(observations) ? theme.fontWeights.extrabold : theme.fontWeights.semibold};
-      font-style: ${getFocusedObs(observations) ? 'italic' : 'normal'};
+      font-weight: ${getFocusedObs(observations)
+            ? theme.fontWeights.extrabold
+            : theme.fontWeights.semibold};
+      font-style: ${getFocusedObs(observations) ? "italic" : "normal"};
       z-index: 1;
       &:focus {
         outline: none;
@@ -5723,6 +5817,23 @@ const Layer = styled__default["default"].div `
   z-index: 0;
   background-color: ${({ color }) => getColor(color, undefined, undefined, 0.2)};
 `;
+const textFromSelection = (selection) => {
+    if (!selection || !selection.toString().length)
+        return "";
+    if (selection.anchorNode === null || selection.focusNode === null)
+        return "";
+    var range = selection.getRangeAt(0);
+    var tempDiv = document.createElement("div");
+    tempDiv.appendChild(range.cloneContents());
+    var items = tempDiv.querySelectorAll("div");
+    items.forEach(function (item) {
+        if (item.getAttribute("data-unselectable")) {
+            item.remove();
+        }
+    });
+    var filteredText = tempDiv.textContent || tempDiv.innerText;
+    return filteredText.length ? filteredText.trim() : selection.toString();
+};
 /**
  *  Use Highlight to use highlight interation on any text element
  */
@@ -5734,26 +5845,12 @@ const Highlight = (props) => {
     const [position, setPosition] = React.useState();
     const [selection, setSelection] = React.useState();
     const activeSelection = document.getSelection();
-    const extractText = (selection) => {
-        if (selection.anchorNode === null || selection.focusNode === null)
-            return "";
-        var range = selection.getRangeAt(0);
-        var tempDiv = document.createElement("div");
-        tempDiv.appendChild(range.cloneContents());
-        var items = tempDiv.querySelectorAll("div");
-        items.forEach(function (item) {
-            if (item.getAttribute("data-unselectable")) {
-                item.remove();
-            }
-        });
-        var filteredText = tempDiv.textContent || tempDiv.innerText;
-        return filteredText.length ? filteredText.trim() : selection.toString();
-    };
+    const extractText = React.useMemo(() => textFromSelection(activeSelection), [activeSelection]);
     const handleSelectionChange = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (activeSelection && activeSelection.toString().length > 0) {
             // Extract the text from the selection cleaning unselectable items
-            const text = extractText(activeSelection);
+            const text = extractText;
             if (!text)
                 return;
             const anchorNode = (_a = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -5768,9 +5865,7 @@ const Highlight = (props) => {
                     const range = activeSelection.getRangeAt(0);
                     const rects = range.getClientRects();
                     const lastRect = rects[rects.length - 1];
-                    const containerRect = ref && ref.current
-                        ? ref.current.getBoundingClientRect()
-                        : null;
+                    const containerRect = ref && ref.current ? ref.current.getBoundingClientRect() : null;
                     if (!lastRect || !containerRect)
                         return;
                     const relativeY = lastRect.bottom - containerRect.top + ref.current.scrollTop;
@@ -5798,7 +5893,7 @@ const Highlight = (props) => {
         else {
             setIsSelecting(false);
         }
-    }, [onSelectionButtonClick, activeSelection]);
+    }, [activeSelection, extractText, onSelectionButtonClick]);
     React.useEffect(() => {
         if (ref.current === null)
             return;
@@ -5812,7 +5907,7 @@ const Highlight = (props) => {
                     y: 0,
                 }, onClick: () => onSelectionButtonClick(selection) }, { children: [jsxRuntime.jsx(CreateObservationButton.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), (_a = i18n === null || i18n === void 0 ? void 0 : i18n.selectionButtonLabel) !== null && _a !== void 0 ? _a : "Create observation"] })))] })));
 };
-const Word = (props) => {
+const Word$1 = (props) => {
     const isActive = props.currentTime &&
         props.currentTime >= props.start &&
         props.currentTime < props.end;
@@ -5821,16 +5916,17 @@ const Word = (props) => {
         var _a, _b;
         return (_b = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.filter((obs) => props.start >= obs.start && props.end <= obs.end)) !== null && _b !== void 0 ? _b : [];
     }, [props.observations, props.start, props.end]);
-    const ObsWord = React.useMemo(() => (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: foundObservations.length > 0 ? "highlighted" : "" }, (foundObservations && { observations: foundObservations }), { children: [foundObservations.length > 0 && foundObservations.map((obs) => {
-                var _a;
-                return (jsxRuntime.jsx(Layer, { color: (_a = obs.hue) !== null && _a !== void 0 ? _a : theme.palette.grey[600] }, obs.id));
-            }), isActive ? (jsxRuntime.jsx(ActiveWord, Object.assign({ "data-start": props.start, "data-end": props.end }, { children: jsxRuntime.jsx(Searchable, { text: props.text }) }))) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
+    const ObsWord = React.useMemo(() => (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: foundObservations.length > 0 ? "highlighted" : "" }, (foundObservations && { observations: foundObservations }), { children: [foundObservations.length > 0 &&
+                foundObservations.map((obs) => {
+                    var _a;
+                    return (jsxRuntime.jsx(Layer, { color: (_a = obs.hue) !== null && _a !== void 0 ? _a : theme.palette.grey[600] }, obs.id));
+                }), isActive ? (jsxRuntime.jsx(ActiveWord, Object.assign({ "data-start": props.start, "data-end": props.end }, { children: jsxRuntime.jsx(Searchable, { text: props.text }) }))) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
     if (props.tooltipContent !== undefined && foundObservations.length > 0) {
         return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(foundObservations), isTransparent: true }, { children: ObsWord })));
     }
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: ObsWord });
 };
-Highlight.Word = Word;
+Highlight.Word = Word$1;
 
 /**
  * The Dots loader communicates ongoing activity after a user takes an action.
@@ -5905,7 +6001,7 @@ const Logo = (props) => {
 };
 
 var _path$a;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
 const SvgPlus = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
   width: 16,
   height: 16,
@@ -5953,7 +6049,7 @@ const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuH
         setMatchingOptions(matchedOptions);
     }, [inputValue, options]);
     return (jsxRuntime.jsxs(Dropdown, Object.assign({ inputValue: inputValue, selectedItems: options.filter((option) => option.selected), onSelect: (items) => onChange &&
-            onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [jsxRuntime.jsx(Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", renderShowMore: i18n === null || i18n === void 0 ? void 0 : i18n.showMore, isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => onChange &&
+            onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", renderShowMore: i18n === null || i18n === void 0 ? void 0 : i18n.showMore, isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => onChange &&
                                         onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: o.selected && o.id !== value.id })))) })] }))) })] }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
                                 const items = options
                                     .filter((o) => o.selected)
@@ -6014,18 +6110,18 @@ ModalFullScreen.Footer = StyledFooter$1;
 ModalFullScreen.Close = StyledModalClose;
 ModalFullScreen.FooterItem = FooterItem;
 
-const UgBody = styled__default["default"](reactChrome.Body) `
-  background-color: ${({ theme }) => theme.palette.white};
-`;
-/**
- * A Body defines the main content of an HTML document which displays on the browser
- */
-const Body$1 = (props) => jsxRuntime.jsx(UgBody, Object.assign({}, props));
-
-/**
- * A Content defines the main content of an HTML document which displays on the browser
- */
-const Content = (props) => jsxRuntime.jsx(reactChrome.Content, Object.assign({}, props));
+var _path$9;
+function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
+const SvgChevronDownStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+})));
 
 const UgHeaderItem = styled__default["default"](reactChrome.HeaderItem) `
   ${(props) => props.hasLogo && `border-right: none`};
@@ -6043,15 +6139,15 @@ const HeaderItemText = (props) => jsxRuntime.jsx(UgHeaderItemText, Object.assign
 
 const HeaderItemIcon = (props) => (jsxRuntime.jsx(reactChrome.HeaderItemIcon, Object.assign({}, props)));
 
-var _path$9;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
-const SvgMenuStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+var _path$8;
+function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
+const SvgMenuStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -6133,19 +6229,6 @@ Header.HeaderItem = HeaderItem;
 Header.HeaderItemText = HeaderItemText;
 Header.HeaderItemIcon = HeaderItemIcon;
 
-var _path$8;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
-const SvgChevronDownStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 16,
-  height: 16,
-  focusable: "false",
-  viewBox: "0 0 16 16"
-}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-})));
-
 const HeaderSkeleton = () => {
     return (jsxRuntime.jsxs(Header, Object.assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, Object.assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, Object.assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: window.matchMedia(`only screen and (min-width: 576px)`).matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: theme.space.sm } })) })), jsxRuntime.jsx(HeaderItem, Object.assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
 };
@@ -6164,6 +6247,27 @@ const AppHeader = (_a) => {
     return isLoading ? (jsxRuntime.jsx(HeaderSkeleton, {})) : (jsxRuntime.jsxs(Header, Object.assign({}, args, { style: Object.assign(Object.assign({}, style), { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) || theme.levels.front }) }, { children: [jsxRuntime.jsx(BrandItem, Object.assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, Object.assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, Object.assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, Object.assign({}, avatar)), jsxRuntime.jsx(ChevronButton, Object.assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
 };
 
+const UgBody = styled__default["default"](reactChrome.Body) `
+  background-color: ${({ theme }) => theme.palette.white};
+`;
+/**
+ * A Body defines the main content of an HTML document which displays on the browser
+ */
+const Body$1 = (props) => jsxRuntime.jsx(UgBody, Object.assign({}, props));
+
+/**
+ * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+const Chrome = (props) => jsxRuntime.jsx(reactChrome.Chrome, Object.assign({}, props));
+
+/**
+ * A Content defines the main content of an HTML document which displays on the browser
+ */
+const Content = (props) => jsxRuntime.jsx(reactChrome.Content, Object.assign({}, props));
+
 const UgMain = styled__default["default"](reactChrome.Main) `
   @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
     margin: ${({ theme }) => theme.space.xxl}
@@ -6315,14 +6419,6 @@ NavAccordionItem.Panel = AccordionItemPanel;
 NavAccordionItem.Header = AccordionItemHeader;
 NavAccordionItem.Label = AccordionItemLabel;
 
-/**
- * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
- * <br>
- * Used for this:
-    - To give a consistent dashboard and navigation experience
- */
-const Chrome = (props) => jsxRuntime.jsx(reactChrome.Chrome, Object.assign({}, props));
-
 const UgPagination = styled__default["default"](reactPagination.Pagination) ``;
 /**
  * Pagination separates content into pages and allows users to navigate between those pages.
@@ -6449,7 +6545,7 @@ PageHeader.Meta = MainMeta;
 PageHeader.Footer = StyledFooter;
 
 var _path$7, _path2;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 const SvgExit = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -6467,7 +6563,7 @@ const SvgExit = props => /*#__PURE__*/React__namespace.createElement("svg", _ext
 })));
 
 var _path$6;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 const SvgThumbsUp = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
   width: 16,
   height: 16,
@@ -6482,7 +6578,7 @@ const SvgThumbsUp = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _rect, _path$5;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 const SvgLockLockedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -6609,7 +6705,7 @@ const MenuItem = (_a) => {
 };
 
 var _path$4;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 const SvgQuestionMark = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
   width: 16,
   height: 16,
@@ -6623,7 +6719,7 @@ const SvgQuestionMark = props => /*#__PURE__*/React__namespace.createElement("sv
 })));
 
 var _path$3;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 const SvgCopy = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
   width: 12,
   height: 16,
@@ -6638,7 +6734,7 @@ const SvgCopy = props => /*#__PURE__*/React__namespace.createElement("svg", _ext
 })));
 
 var _path$2;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 const SvgInfoFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
   width: 16,
   height: 16,
@@ -6670,7 +6766,7 @@ const UgParagraph = styled__default["default"](reactTypography.Paragraph) `
 /**
  *  Use Paragraph to render blocks of text with Garden styling.
  */
-const Paragraph = (props) => jsxRuntime.jsx(UgParagraph, Object.assign({}, props));
+const Paragraph$1 = (props) => jsxRuntime.jsx(UgParagraph, Object.assign({}, props));
 
 const getInitials = (name) => {
     const names = name.split(" ");
@@ -6698,7 +6794,7 @@ const StyledBody$3 = styled__default["default"].div `
   margin: ${({ theme }) => theme.space.base * 6}px
     ${({ theme }) => theme.space.base * 4}px;
 `;
-const StyledParagraph = styled__default["default"](Paragraph) `
+const StyledParagraph = styled__default["default"](Paragraph$1) `
   margin-top: ${({ theme }) => theme.space.base * 4}px;
 `;
 const Footer = styled__default["default"].div `
@@ -6726,15 +6822,15 @@ const HelpItem = (props) => {
     if (email.length > 24) {
         csmEmailCut = `${email.substring(0, 21)}...`;
     }
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$3, { children: [jsxRuntime.jsx(Paragraph, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton, Object.assign({ isBasic: true, onClick: () => {
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$3, { children: [jsxRuntime.jsx(Paragraph$1, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton, Object.assign({ isBasic: true, onClick: () => {
                                             var _a;
                                             copyToClipBoard();
                                             (_a = props.onCopyEmail) === null || _a === void 0 ? void 0 : _a.call(props);
-                                        }, size: "small" }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), props.chatSupport && (jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] }))] }));
+                                        }, size: "small" }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), props.chatSupport && (jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] }))] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { color: theme.palette.blue[600] }) }, { children: props.title })) }));
 };
 
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 const SvgEmpty = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
   width: 16,
   height: 16,
@@ -6744,7 +6840,7 @@ const SvgEmpty = props => /*#__PURE__*/React__namespace.createElement("svg", _ex
 }, props));
 
 var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 const SvgTranslationExists = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
   width: 16,
   height: 16,
@@ -6795,7 +6891,7 @@ const UserContainer = (props) => {
 };
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgGearFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: 16,
   height: 16,
@@ -6832,7 +6928,7 @@ const SettingsItem = (props) => {
         setValue(value);
         props.onSetSettings && props.onSetSettings(value);
     };
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: (_a = props.i18n) === null || _a === void 0 ? void 0 : _a.settingsTitle })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$1, { children: [props.i18n && props.i18n.settingsIntroText && (jsxRuntime.jsx(SettingsIntroText, { children: jsxRuntime.jsx(SM, { children: props.i18n.settingsIntroText }) })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(TriggerTitle, Object.assign({ isBold: true }, { children: (_c = (_b = props.i18n) === null || _b === void 0 ? void 0 : _b.settingsToggle) === null || _c === void 0 ? void 0 : _c.title })), jsxRuntime.jsx(Toggle, Object.assign({ checked: value === 1, onChange: () => onToggleSettings(value === 1 ? 0 : 1) }, { children: jsxRuntime.jsx(Label, { children: value === 1
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: (_a = props.i18n) === null || _a === void 0 ? void 0 : _a.settingsTitle })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$1, { children: [props.i18n && props.i18n.settingsIntroText && (jsxRuntime.jsx(SettingsIntroText, { children: jsxRuntime.jsx(SM, { children: props.i18n.settingsIntroText }) })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(TriggerTitle, Object.assign({ isBold: true }, { children: (_c = (_b = props.i18n) === null || _b === void 0 ? void 0 : _b.settingsToggle) === null || _c === void 0 ? void 0 : _c.title })), jsxRuntime.jsx(Toggle, Object.assign({ checked: value === 1, onChange: () => onToggleSettings(value === 1 ? 0 : 1) }, { children: jsxRuntime.jsx(Label$2, { children: value === 1
                                         ? (_e = (_d = props.i18n) === null || _d === void 0 ? void 0 : _d.settingsToggle) === null || _e === void 0 ? void 0 : _e.on
                                         : (_g = (_f = props.i18n) === null || _f === void 0 ? void 0 : _f.settingsToggle) === null || _g === void 0 ? void 0 : _g.off }) }))] }), props.i18n && props.i18n.settingsOutroText && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(SettingsOutroText, { children: [jsxRuntime.jsx(SM, { children: props.i18n.settingsOutroText.paragraph_1 }), jsxRuntime.jsx(SM, { children: props.i18n.settingsOutroText.paragraph_2 })] }), jsxRuntime.jsx(SettingsOutroText, { children: jsxRuntime.jsx(SM, { children: props.i18n.settingsOutroText.paragraph_3 }) })] }))] })] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgGearFill, { color: theme.palette.blue[600] }) }, { children: (_h = props.i18n) === null || _h === void 0 ? void 0 : _h.settingsTitle })) }));
@@ -7046,7 +7142,7 @@ const UgGroupRow = styled__default["default"](reactTables.GroupRow) `
 const GroupRow = (props) => jsxRuntime.jsx(UgGroupRow, Object.assign({}, props));
 const GroupRowComponent = (props) => {
     return (jsxRuntime.jsx(GroupRow, Object.assign({}, (props && props.group.items.length === 0 && { className: "empty" }), (props &&
-        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: { transform: props.open ? "rotate(180deg)" : "none" } }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
+        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label$2, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: { transform: props.open ? "rotate(180deg)" : "none" } }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
 };
 const AnimatedRow = styled__default["default"](Row) `
   &.render {
@@ -7250,10 +7346,377 @@ OrderedList.Item = UgOrderedList.Item;
 const UnorderedList = (props) => jsxRuntime.jsx(UgUnorderedList, Object.assign({}, props));
 UnorderedList.Item = UgUnorderedList.Item;
 
+const MenuContainer = styled__default["default"].div `
+  box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
+  display: flex;
+`;
+const FloatingMenu = (props) => {
+    const { editor, onClick } = props;
+    const shouldShow = (props) => {
+        // At least a word selected?", props.from !== props.to);
+        return props.from !== props.to;
+    };
+    if (!editor) {
+        return null;
+    }
+    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({ editor: editor, shouldShow: shouldShow }, { children: jsxRuntime.jsx(MenuContainer, Object.assign({ className: "bubble-menu" }, { children: jsxRuntime.jsxs(Button, Object.assign({ isAccent: true, isPrimary: true, onClick: () => onClick(editor) }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), "Create Observation"] })) })) })));
+};
+
+const Search = ({ editor }) => {
+    const [search, setSearch] = React.useState("");
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { type: "text", onChange: (e) => {
+                    setSearch(e.target.value);
+                } }), jsxRuntime.jsx("button", Object.assign({ onClick: () => {
+                    editor.commands.setSearchTerm(search);
+                } }, { children: "Search" }))] }));
+};
+const SearchStyle = styled.css `
+  .search-result {
+    background-color: rgba(255, 217, 0, 0.5);
+
+    &-current {
+      background-color: rgba(13, 255, 0, 0.5);
+    }
+  }
+`;
+Search.Style = SearchStyle;
+
+const Active = ({ onSetCurrentTime, }) => core.Node.create({
+    name: "Active",
+    content: "inline*",
+    inline: true,
+    parseHTML() {
+        return [
+            {
+                tag: "span",
+            },
+        ];
+    },
+    renderHTML({ node }) {
+        return [
+            "active",
+            {
+                style: "background-color: #ff0000;",
+            },
+            0,
+        ];
+    },
+    addCommands() {
+        return {
+            setCurrentTime: (start) => () => {
+                if (onSetCurrentTime)
+                    onSetCurrentTime(start);
+                return true;
+            },
+            updateCurrentActive: ({ currentWord }) => ({ state, view }) => {
+                const { tr } = state;
+                // trova il nodo "active"
+                state.doc.descendants((node, pos) => {
+                    if (node.type.name === "Word") {
+                        // check if the node has an "active" descendant
+                        let hasActiveDescendant = false;
+                        node.descendants((child) => {
+                            hasActiveDescendant =
+                                hasActiveDescendant || child.type.name === "Active";
+                        });
+                        if (hasActiveDescendant) {
+                            // remove the "active" descendant
+                            function removeActiveDescendant(n) {
+                                var _a;
+                                if (((_a = n.firstChild) === null || _a === void 0 ? void 0 : _a.type.name) === "Active") {
+                                    const textContent = n.textContent;
+                                    const textNode = state.schema.text(textContent);
+                                    return n.copy(model.Fragment.from(textNode));
+                                }
+                                let updatedContent = model.Fragment.empty;
+                                n.content.forEach((child) => {
+                                    updatedContent = updatedContent.addToEnd(removeActiveDescendant(child));
+                                });
+                                return n.copy(updatedContent);
+                            }
+                            tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos + node.nodeSize), removeActiveDescendant(node));
+                        }
+                    }
+                    if (node.type.name === "Word" &&
+                        node.attrs["data-start"] === currentWord.start &&
+                        node.attrs["data-end"] === currentWord.end) {
+                        function getUpdatedNode(n) {
+                            var _a;
+                            if (((_a = n.firstChild) === null || _a === void 0 ? void 0 : _a.type.name) === "text" &&
+                                n.type.name !== "Active") {
+                                return n.copy(model.Fragment.from(state.schema.nodes.Active.create({}, n.content.firstChild)));
+                            }
+                            let updatedContent = model.Fragment.empty;
+                            n.content.forEach((child, index) => {
+                                updatedContent = updatedContent.addToEnd(getUpdatedNode(child));
+                            });
+                            return n.copy(updatedContent);
+                        }
+                        tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos + node.nodeSize), getUpdatedNode(node));
+                    }
+                });
+                view.updateState(view.state.apply(view.state.tr));
+                return true;
+            },
+        };
+    },
+});
+
+const useTypeSpec = (type) => {
+    switch (type) {
+        default:
+            return {
+                background: "rgba(144,144,144,0.3)",
+            };
+    }
+};
+const Component$1 = ({ node, editor, }) => {
+    const { background } = useTypeSpec(node.attrs["type"]);
+    return (jsxRuntime.jsx(react.NodeViewWrapper, Object.assign({ as: "span", className: "react-component" }, { children: jsxRuntime.jsx("span", Object.assign({ style: { background } }, { children: jsxRuntime.jsx(Tooltip, Object.assign({ content: node.attrs["title"] || "" }, { children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(react.NodeViewContent, { as: "span", className: "content is-editable" }) }) })) })) })));
+};
+
+const Observation = core.Node.create({
+    name: "Observation",
+    content: "inline*",
+    inline: true,
+    addAttributes() {
+        return {
+            type: {
+                default: "",
+            },
+            title: {
+                default: "",
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "observation",
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            addObservation: (type, title) => ({ tr, state, view }) => {
+                const { from, to } = state.selection;
+                state.doc.nodesBetween(from, to, (node, pos) => {
+                    // Controlla se il nodo è del tipo che vuoi sostituire (ad esempio "word")
+                    if (node.type.name === "Word") {
+                        // Crea il nodo "active"
+                        const annotationNode = state.schema.nodes.Observation.create({
+                            title: "Ciao",
+                        }, node.content);
+                        // Crea il nodo "word" aggiornato con "active" come figlio
+                        const updatedNode = node.copy(model.Fragment.from(annotationNode));
+                        // Sostituisci il nodo originale con quello aggiornato
+                        tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos + node.nodeSize), updatedNode);
+                    }
+                });
+                view.updateState(view.state.apply(view.state.tr));
+                return true;
+            },
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["observation", react.mergeAttributes(HTMLAttributes), 0];
+    },
+    addNodeView() {
+        return react.ReactNodeViewRenderer(Component$1);
+    },
+});
+
+const Label = styled__default["default"].p `
+  user-select: none;
+  margin: 24px 0 12px;
+`;
+const formatTime = (seconds) => {
+    const date = new Date(0);
+    date.setSeconds(seconds);
+    if (seconds < 3600)
+        return date.toISOString().substring(14, 19);
+    return date.toISOString().substring(11, 19);
+};
+const Component = ({ node, editor, }) => {
+    return (jsxRuntime.jsxs(react.NodeViewWrapper, Object.assign({ className: "react-component" }, { children: [jsxRuntime.jsxs(Label, Object.assign({ onClick: () => {
+                    let currentWord = null;
+                    node.descendants((child) => {
+                        if (currentWord !== null)
+                            return false;
+                        if (child.type.name === "Word") {
+                            currentWord = child;
+                        }
+                    });
+                    if (!currentWord)
+                        return;
+                    const word = currentWord;
+                    editor.commands.setCurrentTime(word.attrs["data-start"]);
+                }, contentEditable: false }, { children: [node.attrs.speakername, " (", formatTime(node.attrs.start), " -", " ", formatTime(node.attrs.end), ")"] })), jsxRuntime.jsx(react.NodeViewContent, { className: "content is-editable" })] })));
+};
+
+const Paragraph = core.Node.create({
+    name: "Paragraph",
+    group: "block",
+    atom: false,
+    content: "inline*",
+    addAttributes() {
+        return {
+            speakername: {
+                default: "Speaker",
+            },
+            start: {
+                default: 0,
+            },
+            end: {
+                default: 0,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "speaker-paragraph",
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["speaker-paragraph", core.mergeAttributes(HTMLAttributes), 0];
+    },
+    addNodeView() {
+        return react.ReactNodeViewRenderer(Component);
+    },
+});
+
+const Word = core.Node.create({
+    name: "Word",
+    group: "inline",
+    content: "inline*",
+    inline: true,
+    addAttributes() {
+        return {
+            "data-start": {
+                default: null,
+            },
+            "data-end": {
+                default: null,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "span[data-start][data-end]",
+            },
+        ];
+    },
+    renderHTML({ node }) {
+        return [
+            "span",
+            {
+                "data-start": node.attrs["data-start"],
+                "data-end": node.attrs["data-end"],
+                style: "",
+            },
+            0,
+        ];
+    },
+});
+
+const useEditor = ({ content, currentTime, onSetCurrentTime, }, deps) => {
+    const ed = react.useEditor({
+        extensions: [
+            Document__default["default"],
+            Paragraph,
+            Text__default["default"],
+            Word,
+            SearchAndReplace__default["default"].configure(),
+            Active({
+                onSetCurrentTime,
+            }),
+            Observation,
+        ],
+        editorProps: {
+            handlePaste: () => true,
+        },
+        content: {
+            type: "doc",
+            content: content
+                ? content.map((paragraph) => ({
+                    type: "Paragraph",
+                    attrs: {
+                        speakername: `Speaker ${paragraph.speaker}`,
+                        start: paragraph.start,
+                        end: paragraph.end,
+                    },
+                    content: paragraph.words.map((word) => ({
+                        type: "Word",
+                        attrs: {
+                            "data-start": word.start,
+                            "data-end": word.end,
+                        },
+                        content: [
+                            {
+                                type: "text",
+                                text: `${word.word} `,
+                            },
+                        ],
+                    })),
+                }))
+                : undefined,
+        },
+    }, deps);
+    React.useEffect(() => {
+        if (!currentTime)
+            return;
+        if (!ed)
+            return;
+        const currentParagraph = content === null || content === void 0 ? void 0 : content.find((paragraph) => paragraph.words.some((word) => word.start * 1000 <= currentTime && word.end * 1000 >= currentTime));
+        if (!currentParagraph)
+            return;
+        const currentWord = currentParagraph.words.find((word) => word.start * 1000 <= currentTime && word.end * 1000 >= currentTime);
+        if (!currentWord)
+            return;
+        ed.commands.updateCurrentActive({ currentWord });
+    }, [currentTime, content, ed]);
+    return ed;
+};
+
+const EditorWrapper = styled__default["default"].div `
+  ${Search.Style}
+`;
+const EditorWithHighlight = ({ editor }) => {
+    const ref = React.useRef(null);
+    const handleDragStart = React.useCallback((event) => {
+        const selection = window.getSelection();
+        if (selection && selection.toString()) {
+            event.preventDefault();
+        }
+    }, []);
+    React.useEffect(() => {
+        const currentRef = ref.current;
+        if (!currentRef)
+            return;
+        currentRef.addEventListener("dragstart", handleDragStart);
+        return () => {
+            currentRef.removeEventListener("dragstart", handleDragStart);
+        };
+    }, [handleDragStart]);
+    if (!editor)
+        return null;
+    return (jsxRuntime.jsx(EditorWrapper, { children: jsxRuntime.jsx(react.EditorContent, { ref: ref, editor: editor }) }));
+};
+EditorWithHighlight.useEditor = useEditor;
+EditorWithHighlight.Search = Search;
+EditorWithHighlight.FloatingMenu = FloatingMenu;
+
 Object.defineProperty(exports, 'ModalClose', {
   enumerable: true,
   get: function () { return reactModals.Close; }
 });
+Object.defineProperty(exports, 'useVideoContext', {
+  enumerable: true,
+  get: function () { return Video.useVideoContext; }
+});
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Anchor = Anchor;
@@ -7294,6 +7757,7 @@ exports.Drawer = Drawer;
 exports.Dropdown = Dropdown;
 exports.DropdownField = index$1;
 exports.Editor = Editor;
+exports.EditorWithHighlight = EditorWithHighlight;
 exports.Ellipsis = Ellipsis;
 exports.FooterItem = FooterItem;
 exports.FormField = index;
@@ -7319,7 +7783,7 @@ exports.Item = Item$1;
 exports.ItemContent = ItemContent;
 exports.ItemMeta = ItemMeta;
 exports.LG = LG;
-exports.Label = Label;
+exports.Label = Label$2;
 exports.Lightbox = Lightbox;
 exports.LoginForm = LoginForm;
 exports.Logo = Logo;
@@ -7348,9 +7812,10 @@ exports.Notification = Notification;
 exports.OrderedList = OrderedList;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
-exports.Paragraph = Paragraph;
+exports.Paragraph = Paragraph$1;
 exports.PieChart = PieChart;
 exports.Player = Player;
+exports.PlayerProvider = PlayerProvider;
 exports.PreviousItem = PreviousItem;
 exports.ProductCard = ProductCard;
 exports.ProfileModal = ProfileModal;