@microsoft/omnichannel-chat-components 1.1.13 → 1.1.14

package/lib/cjs/common/Constants.js

@@ -42,6 +42,7 @@ exports.ElementType = ElementType;
   ElementType["ReconnectChatPane"] = "ReconnectChatPane";
   ElementType["ConfirmationPaneConfirmButton"] = "ConfirmationPaneConfirmButton";
   ElementType["ConfirmationPaneCancelButton"] = "ConfirmationPaneCancelButton";
+  ElementType["CitationPaneCloseButton"] = "CitationPaneCloseButton";
   ElementType["PreChatSurveySubmitButton"] = "PreChatSurveySubmitButton";
   ElementType["PreChatSurveyError"] = "PreChatSurveyError";
   ElementType["IncomingCallDeclineCallButton"] = "IncomingCallDeclineCallButton";

package/lib/cjs/components/citationpane/CitationPane.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@fluentui/react");
+
+var _Constants = require("../../common/Constants");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _BroadcastService = require("../../services/BroadcastService");
+
+var _decodeComponentString = require("../../common/decodeComponentString");
+
+var _defaultCitationPaneCloseButtonStyles = require("./common/defaultStyles/defaultCitationPaneCloseButtonStyles");
+
+var _defaultCitationPaneContentStyles = require("./common/defaultStyles/defaultCitationPaneContentStyles");
+
+var _defaultCitationPaneControlProps = require("./common/defaultProps/defaultCitationPaneControlProps");
+
+var _defaultCitationPaneGeneralStyles = require("./common/defaultStyles/defaultCitationPaneGeneralStyles");
+
+var _defaultCitationPaneTitleStyles = require("./common/defaultStyles/defaultCitationPaneTitleStyles");
+
+var _defaultCitationPaneTopCloseButtonStyles = require("./common/defaultStyles/defaultCitationPaneTopCloseButtonStyles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function CitationPane(props) {
+  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$controlProps4, _props$styleProps5, _props$controlProps5, _props$styleProps6, _props$styleProps6$cl, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps7, _props$styleProps7$cl, _props$controlProps8, _props$componentOverr2, _props$styleProps8, _props$styleProps8$cl, _props$controlProps9, _props$styleProps9, _props$styleProps9$cl, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps10, _props$styleProps10$c;
+
+  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? _defaultCitationPaneControlProps.defaultCitationPaneControlProps.id;
+  const handleClose = (0, _react2.useCallback)(() => {
+    var _props$controlProps2;
+
+    if ((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.onClose) {
+      var _props$controlProps3;
+
+      const customEvent = {
+        elementType: _Constants.ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-close",
+        eventName: _Constants.EventNames.OnClick
+      };
+
+      _BroadcastService.BroadcastService.postMessage(customEvent);
+
+      (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onClose();
+    }
+  }, [props.controlProps, elementId]);
+  const handleTopClose = (0, _react2.useCallback)(() => {
+    if (handleClose) {
+      const customEvent = {
+        elementType: _Constants.ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-top-close",
+        eventName: _Constants.EventNames.OnClick
+      };
+
+      _BroadcastService.BroadcastService.postMessage(customEvent);
+
+      handleClose();
+    }
+  }, [props.controlProps, elementId]);
+  const containerStyles = {
+    root: Object.assign({}, _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
+      position: "relative" // Ensure container is positioned for absolute positioning of top close button
+
+    })
+  };
+  const titleStyles = {
+    root: Object.assign({}, _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.titleStyleProps)
+  };
+  const contentStyles = { ..._defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
+    ...((_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.contentStyleProps)
+  };
+  const closeButtonStyles = {
+    root: Object.assign({}, _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps)
+  };
+  const topCloseButtonPosition = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.topCloseButtonPosition) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.topCloseButtonPosition;
+  const topCloseButtonStyles = {
+    root: Object.assign({}, _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
+      left: "0.5em",
+      right: "auto"
+    } : {
+      right: "0.5em",
+      left: "auto"
+    })
+  };
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+    id: elementId,
+    role: "dialog",
+    "aria-labelledby": elementId + "-title",
+    "aria-describedby": elementId + "-content",
+    dir: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.dir,
+    styles: containerStyles,
+    className: (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : (_props$styleProps6$cl = _props$styleProps6.classNames) === null || _props$styleProps6$cl === void 0 ? void 0 : _props$styleProps6$cl.containerClassName
+  }, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideTopCloseButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.topCloseButton) || /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
+    onClick: handleTopClose,
+    id: elementId + "-top-close",
+    iconProps: {
+      iconName: "ChromeClose"
+    },
+    ariaLabel: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.topCloseButtonAriaLabel) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.topCloseButtonAriaLabel,
+    styles: topCloseButtonStyles,
+    className: (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : (_props$styleProps7$cl = _props$styleProps7.classNames) === null || _props$styleProps7$cl === void 0 ? void 0 : _props$styleProps7$cl.topCloseButtonClassName
+  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
+    id: elementId + "-title",
+    styles: titleStyles,
+    className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.titleClassName
+  }, ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.titleText)), /*#__PURE__*/_react2.default.createElement("div", {
+    id: elementId + "-content",
+    style: contentStyles,
+    className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.contentClassName,
+    dangerouslySetInnerHTML: {
+      __html: ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.contentHtml) ?? ""
+    }
+  }), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideCloseButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/_react2.default.createElement(_react.DefaultButton, {
+    onClick: handleClose,
+    id: elementId + "-close",
+    text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.closeButtonText) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.closeButtonText,
+    ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.closeButtonAriaLabel) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.closeButtonAriaLabel,
+    styles: closeButtonStyles,
+    className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.closeButtonClassName
+  }))));
+}
+
+var _default = CitationPane;
+exports.default = _default;

package/lib/cjs/components/citationpane/ScalingTest.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CitationPaneScalingTest = void 0;
+
+var _CitationPane = _interopRequireDefault(require("./CitationPane"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+const CitationPaneScalingTest = () => {
+  const baseProps = {
+    controlProps: {
+      id: "scaling-test-citation",
+      titleText: "Scaling Test Citation",
+      contentHtml: `
+                <div>
+                    <p>This citation pane is designed to scale properly from 50% to 400% zoom levels.</p>
+                    <p><strong>Key improvements for scaling:</strong></p>
+                    <ul>
+                        <li>Uses <code>em</code> units instead of <code>px</code> for dimensions</li>
+                        <li>Scalable padding, margins, and positioning</li>
+                        <li>Relative font sizes throughout</li>
+                        <li>Container-relative maximum height instead of viewport-based</li>
+                    </ul>
+                    <p><strong>Test Instructions:</strong></p>
+                    <ol>
+                        <li>Use your browser's zoom controls (Ctrl/Cmd + or -)</li>
+                        <li>Test zoom levels: 50%, 75%, 100%, 150%, 200%, 300%, 400%</li>
+                        <li>Verify all elements remain proportional and usable</li>
+                        <li>Check that buttons remain clickable and text remains readable</li>
+                    </ol>
+                </div>
+            `,
+      closeButtonText: "Close Test",
+      onClose: () => {
+        console.log("Scaling test close button clicked at current zoom level");
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: "2em",
+      backgroundColor: "#f5f5f5",
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: "600px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    style: {
+      marginBottom: "1em",
+      textAlign: "center"
+    }
+  }, "CitationPane Scaling Test"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: "2em",
+      textAlign: "center",
+      fontSize: "0.9em"
+    }
+  }, "Test this component at browser zoom levels from 50% to 400%"), /*#__PURE__*/_react.default.createElement(_CitationPane.default, baseProps)));
+};
+
+exports.CitationPaneScalingTest = CitationPaneScalingTest;
+var _default = CitationPaneScalingTest;
+exports.default = _default;

package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneControlProps.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneControlProps = void 0;
+const defaultCitationPaneControlProps = {
+  id: "ocw-citation-pane",
+  dir: "ltr",
+  hideTitle: false,
+  titleText: "Citation",
+  hideCloseButton: false,
+  closeButtonText: "Close",
+  closeButtonAriaLabel: "Close citation",
+  hideTopCloseButton: false,
+  topCloseButtonAriaLabel: "Close",
+  topCloseButtonPosition: "topRight",
+  onClose: () => {
+    console.log("Citation pane close");
+  }
+};
+exports.defaultCitationPaneControlProps = defaultCitationPaneControlProps;

package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneProps = void 0;
+
+var _defaultCitationPaneControlProps = require("./defaultCitationPaneControlProps");
+
+var _defaultCitationPaneStyleProps = require("./defaultCitationPaneStyleProps");
+
+const defaultCitationPaneProps = {
+  controlProps: _defaultCitationPaneControlProps.defaultCitationPaneControlProps,
+  styleProps: _defaultCitationPaneStyleProps.defaultCitationPaneStyleProps
+};
+exports.defaultCitationPaneProps = defaultCitationPaneProps;

package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneStyleProps = void 0;
+
+var _defaultCitationPaneCloseButtonStyles = require("../defaultStyles/defaultCitationPaneCloseButtonStyles");
+
+var _defaultCitationPaneContentStyles = require("../defaultStyles/defaultCitationPaneContentStyles");
+
+var _defaultCitationPaneGeneralStyles = require("../defaultStyles/defaultCitationPaneGeneralStyles");
+
+var _defaultCitationPaneTitleStyles = require("../defaultStyles/defaultCitationPaneTitleStyles");
+
+var _defaultCitationPaneTopCloseButtonStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonStyles");
+
+const defaultCitationPaneStyleProps = {
+  generalStyleProps: _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles,
+  titleStyleProps: _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles,
+  contentStyleProps: _defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
+  closeButtonStyleProps: _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles,
+  topCloseButtonStyleProps: _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles
+};
+exports.defaultCitationPaneStyleProps = defaultCitationPaneStyleProps;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneCloseButtonStyles = void 0;
+const defaultCitationPaneCloseButtonStyles = {
+  marginTop: "1em",
+  // Space between content and close button (scalable)
+  alignSelf: "center",
+  // Center the button horizontally
+  backgroundColor: "#f3f2f1",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  color: "#323130",
+  cursor: "pointer",
+  fontSize: "1em",
+  // Use relative font size for better scaling
+  fontWeight: "500",
+  minHeight: "2em",
+  // Scalable minimum height
+  minWidth: "5em",
+  // Scalable minimum width
+  padding: "0.5em 1em",
+  // Scalable padding
+  selectors: {
+    ":hover": {
+      backgroundColor: "#e1dfdd",
+      borderColor: "#c8c6c4"
+    },
+    ":focus": {
+      outline: "0.125em solid #0078d4",
+      // Scalable outline
+      outlineOffset: "0.125em" // Scalable offset
+
+    }
+  }
+};
+exports.defaultCitationPaneCloseButtonStyles = defaultCitationPaneCloseButtonStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneContentStyles = void 0;
+const defaultCitationPaneContentStyles = {
+  fontSize: "1em",
+  // Use relative units for better scaling
+  lineHeight: "1.5",
+  // Already relative, good for scaling
+  marginBottom: "0",
+  // No bottom margin since close button has top margin
+  flex: "1",
+  // Allow content to grow and push close button to bottom
+  overflow: "auto",
+  // Enable scrolling for long content
+  paddingRight: "0.25em" // Small padding to prevent scrollbar from touching border (scalable)
+
+};
+exports.defaultCitationPaneContentStyles = defaultCitationPaneContentStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneGeneralStyles = void 0;
+const defaultCitationPaneGeneralStyles = {
+  position: "relative",
+  // Required for absolute positioning of top close button
+  paddingTop: "2.5em",
+  // Space for top close button to prevent overlap (scalable)
+  padding: "1em",
+  // Scalable padding using em units
+  backgroundColor: "#ffffff",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.5em",
+  // Scalable border radius
+  boxShadow: "0px 0.125em 0.25em rgba(0, 0, 0, 0.1)",
+  // Scalable shadow
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "7.5em",
+  // Minimum height to ensure proper layout (scalable)
+  maxHeight: "30em",
+  // Container-relative height instead of viewport-based
+  overflow: "hidden" // Hide overflow on container, let content area handle scrolling
+
+};
+exports.defaultCitationPaneGeneralStyles = defaultCitationPaneGeneralStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTitleStyles.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneTitleStyles = void 0;
+const defaultCitationPaneTitleStyles = {};
+exports.defaultCitationPaneTitleStyles = defaultCitationPaneTitleStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonStyles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneTopCloseButtonStyles = void 0;
+const defaultCitationPaneTopCloseButtonStyles = {
+  position: "absolute",
+  top: "0.5em",
+  // Scalable positioning
+  right: "0.5em",
+  // Scalable positioning
+  minWidth: "2em",
+  // Scalable minimum width
+  height: "2em",
+  // Scalable height
+  padding: "0",
+  fontSize: "1em",
+  // Scalable font size
+  fontWeight: "bold",
+  color: "#605e5c",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  cursor: "pointer",
+  zIndex: 1000,
+  ":hover": {
+    backgroundColor: "#f3f2f1",
+    color: "#323130"
+  },
+  ":active": {
+    backgroundColor: "#edebe9",
+    color: "#201f1e"
+  },
+  ":focus": {
+    outline: "0.125em solid #605e5c",
+    // Scalable outline
+    outlineOffset: "0.125em" // Scalable offset
+
+  }
+};
+exports.defaultCitationPaneTopCloseButtonStyles = defaultCitationPaneTopCloseButtonStyles;

package/lib/cjs/components/citationpane/interfaces/ICitationPaneClassNames.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneComponentOverrides.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneControlProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneStyleProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "ChatReconnectIconBase64", {
     return _Icons.ChatReconnectIconBase64;
   }
 });
+Object.defineProperty(exports, "CitationPane", {
+  enumerable: true,
+  get: function () {
+    return _CitationPane.default;
+  }
+});
 Object.defineProperty(exports, "CloseChatButtonIconBase64", {
   enumerable: true,
   get: function () {
@@ -262,6 +268,8 @@ var _Footer = _interopRequireDefault(require("./components/footer/Footer"));
 
 var _ConfirmationPane = _interopRequireDefault(require("./components/confirmationpane/ConfirmationPane"));
 
+var _CitationPane = _interopRequireDefault(require("./components/citationpane/CitationPane"));
+
 var _ChatButton = _interopRequireDefault(require("./components/chatbutton/ChatButton"));
 
 var _InputValidationPane = _interopRequireDefault(require("./components/inputvalidationpane/InputValidationPane"));

package/lib/esm/common/Constants.js

@@ -30,6 +30,7 @@ export let ElementType;
   ElementType["ReconnectChatPane"] = "ReconnectChatPane";
   ElementType["ConfirmationPaneConfirmButton"] = "ConfirmationPaneConfirmButton";
   ElementType["ConfirmationPaneCancelButton"] = "ConfirmationPaneCancelButton";
+  ElementType["CitationPaneCloseButton"] = "CitationPaneCloseButton";
   ElementType["PreChatSurveySubmitButton"] = "PreChatSurveySubmitButton";
   ElementType["PreChatSurveyError"] = "PreChatSurveyError";
   ElementType["IncomingCallDeclineCallButton"] = "IncomingCallDeclineCallButton";

package/lib/esm/components/citationpane/CitationPane.js

@@ -0,0 +1,106 @@
+import { DefaultButton, IconButton, Label, Stack } from "@fluentui/react";
+import { ElementType, EventNames } from "../../common/Constants";
+import React, { useCallback } from "react";
+import { BroadcastService } from "../../services/BroadcastService";
+import { decodeComponentString } from "../../common/decodeComponentString";
+import { defaultCitationPaneCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonStyles";
+import { defaultCitationPaneContentStyles } from "./common/defaultStyles/defaultCitationPaneContentStyles";
+import { defaultCitationPaneControlProps } from "./common/defaultProps/defaultCitationPaneControlProps";
+import { defaultCitationPaneGeneralStyles } from "./common/defaultStyles/defaultCitationPaneGeneralStyles";
+import { defaultCitationPaneTitleStyles } from "./common/defaultStyles/defaultCitationPaneTitleStyles";
+import { defaultCitationPaneTopCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonStyles";
+
+function CitationPane(props) {
+  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$controlProps4, _props$styleProps5, _props$controlProps5, _props$styleProps6, _props$styleProps6$cl, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps7, _props$styleProps7$cl, _props$controlProps8, _props$componentOverr2, _props$styleProps8, _props$styleProps8$cl, _props$controlProps9, _props$styleProps9, _props$styleProps9$cl, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps10, _props$styleProps10$c;
+
+  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultCitationPaneControlProps.id;
+  const handleClose = useCallback(() => {
+    var _props$controlProps2;
+
+    if ((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.onClose) {
+      var _props$controlProps3;
+
+      const customEvent = {
+        elementType: ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-close",
+        eventName: EventNames.OnClick
+      };
+      BroadcastService.postMessage(customEvent);
+      (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onClose();
+    }
+  }, [props.controlProps, elementId]);
+  const handleTopClose = useCallback(() => {
+    if (handleClose) {
+      const customEvent = {
+        elementType: ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-top-close",
+        eventName: EventNames.OnClick
+      };
+      BroadcastService.postMessage(customEvent);
+      handleClose();
+    }
+  }, [props.controlProps, elementId]);
+  const containerStyles = {
+    root: Object.assign({}, defaultCitationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
+      position: "relative" // Ensure container is positioned for absolute positioning of top close button
+
+    })
+  };
+  const titleStyles = {
+    root: Object.assign({}, defaultCitationPaneTitleStyles, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.titleStyleProps)
+  };
+  const contentStyles = { ...defaultCitationPaneContentStyles,
+    ...((_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.contentStyleProps)
+  };
+  const closeButtonStyles = {
+    root: Object.assign({}, defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps)
+  };
+  const topCloseButtonPosition = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.topCloseButtonPosition) || defaultCitationPaneControlProps.topCloseButtonPosition;
+  const topCloseButtonStyles = {
+    root: Object.assign({}, defaultCitationPaneTopCloseButtonStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
+      left: "0.5em",
+      right: "auto"
+    } : {
+      right: "0.5em",
+      left: "auto"
+    })
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+    id: elementId,
+    role: "dialog",
+    "aria-labelledby": elementId + "-title",
+    "aria-describedby": elementId + "-content",
+    dir: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) || defaultCitationPaneControlProps.dir,
+    styles: containerStyles,
+    className: (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : (_props$styleProps6$cl = _props$styleProps6.classNames) === null || _props$styleProps6$cl === void 0 ? void 0 : _props$styleProps6$cl.containerClassName
+  }, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideTopCloseButton) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.topCloseButton) || /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleTopClose,
+    id: elementId + "-top-close",
+    iconProps: {
+      iconName: "ChromeClose"
+    },
+    ariaLabel: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.topCloseButtonAriaLabel) || defaultCitationPaneControlProps.topCloseButtonAriaLabel,
+    styles: topCloseButtonStyles,
+    className: (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : (_props$styleProps7$cl = _props$styleProps7.classNames) === null || _props$styleProps7$cl === void 0 ? void 0 : _props$styleProps7$cl.topCloseButtonClassName
+  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideTitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/React.createElement(Label, {
+    id: elementId + "-title",
+    styles: titleStyles,
+    className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.titleClassName
+  }, ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) || defaultCitationPaneControlProps.titleText)), /*#__PURE__*/React.createElement("div", {
+    id: elementId + "-content",
+    style: contentStyles,
+    className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.contentClassName,
+    dangerouslySetInnerHTML: {
+      __html: ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.contentHtml) ?? ""
+    }
+  }), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideCloseButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/React.createElement(DefaultButton, {
+    onClick: handleClose,
+    id: elementId + "-close",
+    text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.closeButtonText) || defaultCitationPaneControlProps.closeButtonText,
+    ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.closeButtonAriaLabel) || defaultCitationPaneControlProps.closeButtonAriaLabel,
+    styles: closeButtonStyles,
+    className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.closeButtonClassName
+  }))));
+}
+
+export default CitationPane;

package/lib/esm/components/citationpane/ScalingTest.js

@@ -0,0 +1,64 @@
+import CitationPane from "./CitationPane";
+import React from "react";
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+
+export const CitationPaneScalingTest = () => {
+  const baseProps = {
+    controlProps: {
+      id: "scaling-test-citation",
+      titleText: "Scaling Test Citation",
+      contentHtml: `
+                <div>
+                    <p>This citation pane is designed to scale properly from 50% to 400% zoom levels.</p>
+                    <p><strong>Key improvements for scaling:</strong></p>
+                    <ul>
+                        <li>Uses <code>em</code> units instead of <code>px</code> for dimensions</li>
+                        <li>Scalable padding, margins, and positioning</li>
+                        <li>Relative font sizes throughout</li>
+                        <li>Container-relative maximum height instead of viewport-based</li>
+                    </ul>
+                    <p><strong>Test Instructions:</strong></p>
+                    <ol>
+                        <li>Use your browser's zoom controls (Ctrl/Cmd + or -)</li>
+                        <li>Test zoom levels: 50%, 75%, 100%, 150%, 200%, 300%, 400%</li>
+                        <li>Verify all elements remain proportional and usable</li>
+                        <li>Check that buttons remain clickable and text remains readable</li>
+                    </ol>
+                </div>
+            `,
+      closeButtonText: "Close Test",
+      onClose: () => {
+        console.log("Scaling test close button clicked at current zoom level");
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "2em",
+      backgroundColor: "#f5f5f5",
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "600px"
+    }
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: {
+      marginBottom: "1em",
+      textAlign: "center"
+    }
+  }, "CitationPane Scaling Test"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: "2em",
+      textAlign: "center",
+      fontSize: "0.9em"
+    }
+  }, "Test this component at browser zoom levels from 50% to 400%"), /*#__PURE__*/React.createElement(CitationPane, baseProps)));
+};
+export default CitationPaneScalingTest;

package/lib/esm/components/citationpane/common/defaultProps/defaultCitationPaneControlProps.js

@@ -0,0 +1,15 @@
+export const defaultCitationPaneControlProps = {
+  id: "ocw-citation-pane",
+  dir: "ltr",
+  hideTitle: false,
+  titleText: "Citation",
+  hideCloseButton: false,
+  closeButtonText: "Close",
+  closeButtonAriaLabel: "Close citation",
+  hideTopCloseButton: false,
+  topCloseButtonAriaLabel: "Close",
+  topCloseButtonPosition: "topRight",
+  onClose: () => {
+    console.log("Citation pane close");
+  }
+};

package/lib/esm/components/citationpane/common/defaultProps/defaultCitationPaneProps.js

@@ -0,0 +1,6 @@
+import { defaultCitationPaneControlProps } from "./defaultCitationPaneControlProps";
+import { defaultCitationPaneStyleProps } from "./defaultCitationPaneStyleProps";
+export const defaultCitationPaneProps = {
+  controlProps: defaultCitationPaneControlProps,
+  styleProps: defaultCitationPaneStyleProps
+};

package/lib/esm/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js

@@ -0,0 +1,12 @@
+import { defaultCitationPaneCloseButtonStyles } from "../defaultStyles/defaultCitationPaneCloseButtonStyles";
+import { defaultCitationPaneContentStyles } from "../defaultStyles/defaultCitationPaneContentStyles";
+import { defaultCitationPaneGeneralStyles } from "../defaultStyles/defaultCitationPaneGeneralStyles";
+import { defaultCitationPaneTitleStyles } from "../defaultStyles/defaultCitationPaneTitleStyles";
+import { defaultCitationPaneTopCloseButtonStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonStyles";
+export const defaultCitationPaneStyleProps = {
+  generalStyleProps: defaultCitationPaneGeneralStyles,
+  titleStyleProps: defaultCitationPaneTitleStyles,
+  contentStyleProps: defaultCitationPaneContentStyles,
+  closeButtonStyleProps: defaultCitationPaneCloseButtonStyles,
+  topCloseButtonStyleProps: defaultCitationPaneTopCloseButtonStyles
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js

@@ -0,0 +1,33 @@
+export const defaultCitationPaneCloseButtonStyles = {
+  marginTop: "1em",
+  // Space between content and close button (scalable)
+  alignSelf: "center",
+  // Center the button horizontally
+  backgroundColor: "#f3f2f1",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  color: "#323130",
+  cursor: "pointer",
+  fontSize: "1em",
+  // Use relative font size for better scaling
+  fontWeight: "500",
+  minHeight: "2em",
+  // Scalable minimum height
+  minWidth: "5em",
+  // Scalable minimum width
+  padding: "0.5em 1em",
+  // Scalable padding
+  selectors: {
+    ":hover": {
+      backgroundColor: "#e1dfdd",
+      borderColor: "#c8c6c4"
+    },
+    ":focus": {
+      outline: "0.125em solid #0078d4",
+      // Scalable outline
+      outlineOffset: "0.125em" // Scalable offset
+
+    }
+  }
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js

@@ -0,0 +1,14 @@
+export const defaultCitationPaneContentStyles = {
+  fontSize: "1em",
+  // Use relative units for better scaling
+  lineHeight: "1.5",
+  // Already relative, good for scaling
+  marginBottom: "0",
+  // No bottom margin since close button has top margin
+  flex: "1",
+  // Allow content to grow and push close button to bottom
+  overflow: "auto",
+  // Enable scrolling for long content
+  paddingRight: "0.25em" // Small padding to prevent scrollbar from touching border (scalable)
+
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js

@@ -0,0 +1,22 @@
+export const defaultCitationPaneGeneralStyles = {
+  position: "relative",
+  // Required for absolute positioning of top close button
+  paddingTop: "2.5em",
+  // Space for top close button to prevent overlap (scalable)
+  padding: "1em",
+  // Scalable padding using em units
+  backgroundColor: "#ffffff",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.5em",
+  // Scalable border radius
+  boxShadow: "0px 0.125em 0.25em rgba(0, 0, 0, 0.1)",
+  // Scalable shadow
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "7.5em",
+  // Minimum height to ensure proper layout (scalable)
+  maxHeight: "30em",
+  // Container-relative height instead of viewport-based
+  overflow: "hidden" // Hide overflow on container, let content area handle scrolling
+
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTitleStyles.js

@@ -0,0 +1 @@
+export const defaultCitationPaneTitleStyles = {};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonStyles.js

@@ -0,0 +1,36 @@
+export const defaultCitationPaneTopCloseButtonStyles = {
+  position: "absolute",
+  top: "0.5em",
+  // Scalable positioning
+  right: "0.5em",
+  // Scalable positioning
+  minWidth: "2em",
+  // Scalable minimum width
+  height: "2em",
+  // Scalable height
+  padding: "0",
+  fontSize: "1em",
+  // Scalable font size
+  fontWeight: "bold",
+  color: "#605e5c",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  cursor: "pointer",
+  zIndex: 1000,
+  ":hover": {
+    backgroundColor: "#f3f2f1",
+    color: "#323130"
+  },
+  ":active": {
+    backgroundColor: "#edebe9",
+    color: "#201f1e"
+  },
+  ":focus": {
+    outline: "0.125em solid #605e5c",
+    // Scalable outline
+    outlineOffset: "0.125em" // Scalable offset
+
+  }
+};

package/lib/esm/components/citationpane/interfaces/ICitationPaneClassNames.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/citationpane/interfaces/ICitationPaneComponentOverrides.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/citationpane/interfaces/ICitationPaneControlProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/citationpane/interfaces/ICitationPaneProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/citationpane/interfaces/ICitationPaneStyleProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/index.js

@@ -1,6 +1,7 @@
 export { default as Header } from "./components/header/Header";
 export { default as Footer } from "./components/footer/Footer";
 export { default as ConfirmationPane } from "./components/confirmationpane/ConfirmationPane";
+export { default as CitationPane } from "./components/citationpane/CitationPane";
 export { default as ChatButton } from "./components/chatbutton/ChatButton";
 export { default as InputValidationPane } from "./components/inputvalidationpane/InputValidationPane";
 export { default as ProactiveChatPane } from "./components/proactivechatpane/ProactiveChatPane";

package/lib/types/common/Constants.d.ts

@@ -31,6 +31,7 @@ export declare enum ElementType {
     ReconnectChatPane = "ReconnectChatPane",
     ConfirmationPaneConfirmButton = "ConfirmationPaneConfirmButton",
     ConfirmationPaneCancelButton = "ConfirmationPaneCancelButton",
+    CitationPaneCloseButton = "CitationPaneCloseButton",
     PreChatSurveySubmitButton = "PreChatSurveySubmitButton",
     PreChatSurveyError = "PreChatSurveyError",
     IncomingCallDeclineCallButton = "IncomingCallDeclineCallButton",

package/lib/types/components/citationpane/CitationPane.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ICitationPaneProps } from "./interfaces/ICitationPaneProps";
+declare function CitationPane(props: ICitationPaneProps): React.JSX.Element;
+export default CitationPane;

package/lib/types/components/citationpane/ScalingTest.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+export declare const CitationPaneScalingTest: React.FC;
+export default CitationPaneScalingTest;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneControlProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneControlProps } from "../../interfaces/ICitationPaneControlProps";
+export declare const defaultCitationPaneControlProps: ICitationPaneControlProps;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneProps } from "../../interfaces/ICitationPaneProps";
+export declare const defaultCitationPaneProps: ICitationPaneProps;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneStyleProps } from "../../interfaces/ICitationPaneStyleProps";
+export declare const defaultCitationPaneStyleProps: ICitationPaneStyleProps;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneCloseButtonStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneContentStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneGeneralStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTitleStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTitleStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTopCloseButtonStyles: IStyle;

package/lib/types/components/citationpane/interfaces/ICitationPaneClassNames.d.ts

@@ -0,0 +1,7 @@
+export interface ICitationPaneClassNames {
+    containerClassName?: string;
+    titleClassName?: string;
+    contentClassName?: string;
+    closeButtonClassName?: string;
+    topCloseButtonClassName?: string;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneComponentOverrides.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface ICitationPaneComponentOverrides {
+    title?: ReactNode | string;
+    subtitle?: ReactNode | string;
+    closeButton?: ReactNode | string;
+    topCloseButton?: ReactNode | string;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneControlProps.d.ts

@@ -0,0 +1,16 @@
+export interface ICitationPaneControlProps {
+    id?: string;
+    dir?: "ltr" | "rtl" | "auto";
+    hideCitationPane?: boolean;
+    hideTitle?: boolean;
+    titleText?: string;
+    contentHtml?: string;
+    hideCloseButton?: boolean;
+    closeButtonText?: string;
+    closeButtonAriaLabel?: string;
+    hideTopCloseButton?: boolean;
+    topCloseButtonAriaLabel?: string;
+    topCloseButtonPosition?: "topLeft" | "topRight";
+    brightnessValueOnDim?: string;
+    onClose?: () => void;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneProps.d.ts

@@ -0,0 +1,8 @@
+import { ICitationPaneComponentOverrides } from "./ICitationPaneComponentOverrides";
+import { ICitationPaneControlProps } from "./ICitationPaneControlProps";
+import { ICitationPaneStyleProps } from "./ICitationPaneStyleProps";
+export interface ICitationPaneProps {
+    controlProps?: ICitationPaneControlProps;
+    styleProps?: ICitationPaneStyleProps;
+    componentOverrides?: ICitationPaneComponentOverrides;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneStyleProps.d.ts

@@ -0,0 +1,10 @@
+import { ICitationPaneClassNames } from "./ICitationPaneClassNames";
+import { IStyle } from "@fluentui/react";
+export interface ICitationPaneStyleProps {
+    generalStyleProps?: IStyle;
+    titleStyleProps?: IStyle;
+    contentStyleProps?: IStyle;
+    closeButtonStyleProps?: IStyle;
+    topCloseButtonStyleProps?: IStyle;
+    classNames?: ICitationPaneClassNames;
+}

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Header } from "./components/header/Header";
 export { default as Footer } from "./components/footer/Footer";
 export { default as ConfirmationPane } from "./components/confirmationpane/ConfirmationPane";
+export { default as CitationPane } from "./components/citationpane/CitationPane";
 export { default as ChatButton } from "./components/chatbutton/ChatButton";
 export { default as InputValidationPane } from "./components/inputvalidationpane/InputValidationPane";
 export { default as ProactiveChatPane } from "./components/proactivechatpane/ProactiveChatPane";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-components",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Microsoft Omnichannel Chat Components",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",