@microsoft/omnichannel-chat-components 1.1.13 → 1.1.15

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,154 @@
+"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 _defaultCitationPaneCloseButtonFocusedStyles = require("./common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles");
+
+var _defaultCitationPaneCloseButtonHoveredStyles = require("./common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles");
+
+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 _defaultCitationPaneTopCloseButtonFocusedStyles = require("./common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles");
+
+var _defaultCitationPaneTopCloseButtonHoveredStyles = require("./common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles");
+
+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$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps4, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$controlProps5, _props$styleProps12, _props$styleProps12$c, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps13, _props$styleProps13$c, _props$controlProps8, _props$componentOverr2, _props$styleProps14, _props$styleProps14$c, _props$controlProps9, _props$styleProps15, _props$styleProps15$c, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps16, _props$styleProps16$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]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const handleEscKeyDown = (0, _react2.useCallback)(e => {
+    if (e.key === "Escape") {
+      handleClose();
+    }
+  }, [handleClose]);
+  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),
+    rootHovered: Object.assign({}, _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.closeButtonHoveredStyleProps),
+    rootFocused: Object.assign({}, _defaultCitationPaneCloseButtonFocusedStyles.defaultCitationPaneCloseButtonFocusedStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonFocusedStyleProps),
+    rootPressed: Object.assign({}, _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps)
+  };
+  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$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
+      left: "0.5em",
+      right: "auto"
+    } : {
+      right: "0.5em",
+      left: "auto"
+    }),
+    rootHovered: Object.assign({}, _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.topCloseButtonHoveredStyleProps),
+    rootFocused: Object.assign({}, _defaultCitationPaneTopCloseButtonFocusedStyles.defaultCitationPaneTopCloseButtonFocusedStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.topCloseButtonFocusedStyleProps),
+    rootPressed: Object.assign({}, _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.topCloseButtonHoveredStyleProps)
+  };
+  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$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : (_props$styleProps12$c = _props$styleProps12.classNames) === null || _props$styleProps12$c === void 0 ? void 0 : _props$styleProps12$c.containerClassName,
+    onKeyDown: handleEscKeyDown,
+    tabIndex: -1
+  }, !((_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$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.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$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.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$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.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$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$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,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneStyleProps = void 0;
+
+var _defaultCitationPaneCloseButtonFocusedStyles = require("../defaultStyles/defaultCitationPaneCloseButtonFocusedStyles");
+
+var _defaultCitationPaneCloseButtonHoveredStyles = require("../defaultStyles/defaultCitationPaneCloseButtonHoveredStyles");
+
+var _defaultCitationPaneCloseButtonStyles = require("../defaultStyles/defaultCitationPaneCloseButtonStyles");
+
+var _defaultCitationPaneContentStyles = require("../defaultStyles/defaultCitationPaneContentStyles");
+
+var _defaultCitationPaneGeneralStyles = require("../defaultStyles/defaultCitationPaneGeneralStyles");
+
+var _defaultCitationPaneTitleStyles = require("../defaultStyles/defaultCitationPaneTitleStyles");
+
+var _defaultCitationPaneTopCloseButtonFocusedStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles");
+
+var _defaultCitationPaneTopCloseButtonHoveredStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles");
+
+var _defaultCitationPaneTopCloseButtonStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonStyles");
+
+const defaultCitationPaneStyleProps = {
+  generalStyleProps: _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles,
+  titleStyleProps: _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles,
+  contentStyleProps: _defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
+  closeButtonStyleProps: _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles,
+  closeButtonHoveredStyleProps: _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles,
+  closeButtonFocusedStyleProps: _defaultCitationPaneCloseButtonFocusedStyles.defaultCitationPaneCloseButtonFocusedStyles,
+  topCloseButtonStyleProps: _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles,
+  topCloseButtonHoveredStyleProps: _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles,
+  topCloseButtonFocusedStyleProps: _defaultCitationPaneTopCloseButtonFocusedStyles.defaultCitationPaneTopCloseButtonFocusedStyles
+};
+exports.defaultCitationPaneStyleProps = defaultCitationPaneStyleProps;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneCloseButtonFocusedStyles = void 0;
+const defaultCitationPaneCloseButtonFocusedStyles = {
+  border: "2px dotted #605e5c",
+  outline: "none"
+};
+exports.defaultCitationPaneCloseButtonFocusedStyles = defaultCitationPaneCloseButtonFocusedStyles;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneCloseButtonHoveredStyles = void 0;
+const defaultCitationPaneCloseButtonHoveredStyles = {
+  backgroundColor: "#f3f2f1",
+  color: "#323130"
+};
+exports.defaultCitationPaneCloseButtonHoveredStyles = defaultCitationPaneCloseButtonHoveredStyles;

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

@@ -0,0 +1,49 @@
+"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: "2.75em",
+  // A11Y compliant minimum height (44px at 16px base)
+  minWidth: "5.5em",
+  // A11Y compliant minimum width (88px at 16px base)
+  padding: "0.5em 1em",
+  // Scalable padding
+  // Responsive hiding at high zoom levels for better content space
+  "@media (min-resolution: 2.5dppx), (min-resolution: 240dpi)": {
+    display: "none" // Hide at 250%+ zoom to preserve content space
+
+  },
+  selectors: {
+    ":hover": {
+      backgroundColor: "#e1dfdd",
+      borderColor: "#c8c6c4"
+    },
+    ":focus": {
+      outline: "0.125em solid #0078d4",
+      // Scalable outline
+      outlineOffset: "0.125em" // Scalable offset
+
+    },
+    ":active": {
+      backgroundColor: "#d2d0ce",
+      borderColor: "#c8c6c4"
+    }
+  }
+};
+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.125em" // Reduced padding to give more space for text at high zoom (scalable)
+
+};
+exports.defaultCitationPaneContentStyles = defaultCitationPaneContentStyles;

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

@@ -0,0 +1,33 @@
+"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: "2em",
+  // Reduced space for top close button (scalable)
+  paddingLeft: "0.75em",
+  // Reduced left padding (scalable)
+  paddingRight: "0.75em",
+  // Reduced right padding (scalable)
+  paddingBottom: "0.75em",
+  // Reduced bottom padding (scalable)
+  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/defaultCitationPaneStyles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneStyles = void 0;
+
+var _defaultCitationPaneCloseButtonFocusedStyles = require("./defaultCitationPaneCloseButtonFocusedStyles");
+
+var _defaultCitationPaneCloseButtonHoveredStyles = require("./defaultCitationPaneCloseButtonHoveredStyles");
+
+var _defaultCitationPaneCloseButtonStyles = require("./defaultCitationPaneCloseButtonStyles");
+
+var _defaultCitationPaneContentStyles = require("./defaultCitationPaneContentStyles");
+
+var _defaultCitationPaneGeneralStyles = require("./defaultCitationPaneGeneralStyles");
+
+var _defaultCitationPaneTitleStyles = require("./defaultCitationPaneTitleStyles");
+
+var _defaultCitationPaneTopCloseButtonFocusedStyles = require("./defaultCitationPaneTopCloseButtonFocusedStyles");
+
+var _defaultCitationPaneTopCloseButtonHoveredStyles = require("./defaultCitationPaneTopCloseButtonHoveredStyles");
+
+var _defaultCitationPaneTopCloseButtonStyles = require("./defaultCitationPaneTopCloseButtonStyles");
+
+const defaultCitationPaneStyles = {
+  generalStyleProps: _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles,
+  titleStyleProps: _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles,
+  contentStyleProps: _defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
+  closeButtonStyleProps: _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles,
+  closeButtonHoveredStyleProps: _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles,
+  closeButtonFocusedStyleProps: _defaultCitationPaneCloseButtonFocusedStyles.defaultCitationPaneCloseButtonFocusedStyles,
+  topCloseButtonStyleProps: _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles,
+  topCloseButtonHoveredStyleProps: _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles,
+  topCloseButtonFocusedStyleProps: _defaultCitationPaneTopCloseButtonFocusedStyles.defaultCitationPaneTopCloseButtonFocusedStyles
+};
+exports.defaultCitationPaneStyles = defaultCitationPaneStyles;

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/defaultCitationPaneTopCloseButtonFocusedStyles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneTopCloseButtonFocusedStyles = void 0;
+const defaultCitationPaneTopCloseButtonFocusedStyles = {
+  border: "2px dotted #605e5c",
+  outline: "none"
+};
+exports.defaultCitationPaneTopCloseButtonFocusedStyles = defaultCitationPaneTopCloseButtonFocusedStyles;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneTopCloseButtonHoveredStyles = void 0;
+const defaultCitationPaneTopCloseButtonHoveredStyles = {
+  backgroundColor: "#f3f2f1",
+  color: "#323130"
+};
+exports.defaultCitationPaneTopCloseButtonHoveredStyles = defaultCitationPaneTopCloseButtonHoveredStyles;

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";