oa-componentbook 1.0.1-stage.44 → 1.0.1-stage.440

package/build/components/oa-component-tabs/CustomTabs.js

@@ -46,7 +46,7 @@ function CustomTabs(_ref) {
       type
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
-  const items = data.tabs.map(_ref2 => {
+  const items = data.tabs && data.tabs.map(_ref2 => {
     let {
         body,
         disabled: isTabDisabed,

package/build/components/oa-component-tag/CustomTag.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); } /* eslint-disable */
 /**
  * A simple tag component that displays a label.
  *
@@ -21,28 +23,44 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function CustomTag(_ref) {
   let {
-    'data-test': dataTest,
+    "data-test": dataTest,
     label,
     type,
-    visible
+    visible,
+    bgColor,
+    borderColor,
+    textColor,
+    style
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, _extends({
     "data-test": dataTest,
     type: type,
-    visible: visible
-  }, /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    visible: visible,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    textColor: textColor
+  }, style && {
+    style
+  }), /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-button-500"
   }, label)));
 }
 CustomTag.propTypes = {
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   label: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['success', 'pending', 'failed', 'recommended']),
-  visible: _propTypes.default.bool
+  type: _propTypes.default.oneOf(["success", "pending", "failed", "recommended", "primary", "blue", "custom"]),
+  visible: _propTypes.default.bool,
+  bgColor: _propTypes.default.string,
+  borderColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  style: _propTypes.default.object
 };
 CustomTag.defaultProps = {
-  'data-test': null,
-  type: '',
-  visible: true
+  "data-test": null,
+  type: "",
+  visible: true,
+  bgColor: "",
+  borderColor: "",
+  textColor: ""
 };
 var _default = exports.default = CustomTag;

package/build/components/oa-component-tag/styles.js

@@ -8,7 +8,13 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const getColorStyles = type => {
+const getColorStyles = props => {
+  const {
+    type,
+    bgColor,
+    borderColor,
+    textColor
+  } = props;
   if (type === 'success') {
     return {
       backgroundColor: 'var(--color-background-positive)',
@@ -16,6 +22,13 @@ const getColorStyles = type => {
       textColor: 'var(--color-positive)'
     };
   }
+  if (type === 'primary') {
+    return {
+      backgroundColor: 'var(--color-divider)',
+      borderColor: 'var(--color-placeholder-text)',
+      textColor: 'var(--color-primary-content)'
+    };
+  }
   if (type === 'pending') {
     return {
       backgroundColor: 'var(--color-background-warning)',
@@ -37,6 +50,20 @@ const getColorStyles = type => {
       textColor: 'var(--color-negative)'
     };
   }
+  if (type === 'blue') {
+    return {
+      backgroundColor: 'var(--color-background-info)',
+      borderColor: 'var(--color-primary)',
+      textColor: 'var(--color-primary)'
+    };
+  }
+  if (type === 'custom') {
+    return {
+      backgroundColor: bgColor,
+      borderColor,
+      textColor
+    };
+  }
   return {
     backgroundColor: '#CCCCCC',
     borderColor: 'var(--color-primary-content)',
@@ -44,5 +71,5 @@ const getColorStyles = type => {
   };
 };
 var _default = exports.default = {};
-const StyledTag = exports.StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 1px 12px;\n  \n  color: ", ";\n  \n  background-color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: 4px;\n  \n  visibility: ", ";\n"])), props => getColorStyles(props.type).textColor, props => getColorStyles(props.type).backgroundColor, props => getColorStyles(props.type).borderColor, props => props.visible ? 'visible' : 'hidden');
-const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+const StyledTag = exports.StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 1px 12px;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: 4px;\n\n  visibility: ", ";\n"])), props => getColorStyles(props).textColor, props => getColorStyles(props).backgroundColor, props => getColorStyles(props).borderColor, props => props.visible ? 'visible' : 'hidden');
+const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex; white-space: nowrap;\n"])));

package/build/components/oa-component-textarea/CustomTextArea.js

@@ -0,0 +1,161 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _SendRounded = _interopRequireDefault(require("@material-ui/icons/SendRounded"));
+var _styles = _interopRequireWildcard(require("./styles"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _constants = require("./constants");
+const _excluded = ["rows", "placeholder", "maxLength", "className", "variant"],
+  _excluded2 = ["minRows", "maxRows", "sendIconConfig", "onSend", "value", "onChange", "disabled"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * A custom text area component.
+ *
+ * The component includes the following properties:
+ * - `rows`: The number of rows for the text area (used for default variant).
+ * - `placeholder`: The placeholder text for the text area.
+ * - `maxLength`: The maximum length of the input value.
+ * - `className`: Additional CSS class to apply to the text area.
+ * - `variant`: 'default' or 'gradient' - determines the styling variant.
+ * - `minRows`: Initial line height for gradient variant (default: 1).
+ * - `maxRows`: Maximum rows before scrolling starts for gradient variant (default: null for unlimited).
+ * - `sendIconConfig`: Object with `show` (boolean, default: false) and `disabled` (boolean, default: false) for gradient variant only.
+ * - `onSend`: Callback function called when send icon is clicked (gradient variant only).
+ * - `antDesignProps`: Any other props to pass to the antd Input.TextArea component.
+ *
+ * The component will apply the following styles:
+ * - A dark grey background when the component is disabled.
+ * - A dark grey text color when the component is disabled.
+ * - A custom style class of `custom-textarea` to the outer element.
+ * - Gradient border and auto-growing height for gradient variant.
+ *
+ * The component will also apply the following props to the antd Input.TextArea component:
+ * - `rows` (for default variant) or `minRows`/`maxRows` (for gradient variant)
+ * - `placeholder`
+ * - `maxLength`
+ * - `className` (appended to the outer element)
+ * - Any other props passed in the `antDesignProps` object
+ */
+function CustomTextArea(_ref) {
+  let {
+      rows,
+      placeholder,
+      maxLength,
+      className,
+      variant = 'default'
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  // Render gradient variant
+  if (variant === 'gradient') {
+    // Extract gradient-specific props from antDesignProps
+    const _ref2 = antDesignProps || {},
+      {
+        minRows = _constants.DEFAULT_MIN_ROWS,
+        maxRows = _constants.DEFAULT_MAX_ROWS,
+        sendIconConfig = _constants.DEFAULT_SEND_ICON_CONFIG,
+        onSend,
+        value,
+        onChange,
+        disabled
+      } = _ref2,
+      restAntDesignProps = _objectWithoutProperties(_ref2, _excluded2);
+
+    // Handle send icon click - gradient variant only
+    // Use value prop directly - no internal state management
+    const handleSendClick = () => {
+      const currentValue = value || '';
+      // Only allow click if textarea is enabled, icon config is not disabled, and has content
+      if (onSend && !disabled && !sendIconConfig.disabled && currentValue.trim()) {
+        onSend(currentValue);
+      }
+    };
+
+    // Determine if send icon should be enabled - gradient variant only
+    // Icon is enabled if: textarea is enabled AND config says it's not disabled AND there's content
+    // Use value prop directly - no internal state
+    const currentValue = value || '';
+    const isSendEnabled = !disabled && !sendIconConfig.disabled && currentValue.trim().length > 0;
+
+    // Determine if icon should be shown - only for gradient variant
+    // Hidden by default, only show when explicitly requested via sendIconConfig.show
+    const shouldShowIcon = sendIconConfig.show;
+    return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+      theme: {
+        token: {
+          colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+          colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content']
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_styles.TextAreaWrapper, {
+      className: className,
+      $disabled: disabled
+    }, /*#__PURE__*/_react.default.createElement(_styles.default, _extends({
+      placeholder: placeholder,
+      maxLength: maxLength,
+      className: "custom-textarea-gradient",
+      value: value,
+      onChange: onChange,
+      disabled: disabled,
+      autoSize: maxRows ? {
+        minRows,
+        maxRows
+      } : {
+        minRows
+      }
+    }, restAntDesignProps)), shouldShowIcon && /*#__PURE__*/_react.default.createElement(_styles.SendIconWrapper, {
+      className: disabled || sendIconConfig.disabled || !isSendEnabled ? 'icon-disabled' : 'icon-enabled'
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _SendRounded.default,
+      size: 24,
+      color: isSendEnabled ? 'primary' : 'placeholder-text',
+      onClick: handleSendClick
+    }))));
+  }
+
+  // Render default variant (existing behavior - completely unchanged)
+  // All props including value, onChange pass through naturally via antDesignProps
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, _extends({
+    rows: rows,
+    placeholder: placeholder,
+    maxLength: maxLength,
+    className: "custom-textarea ".concat(className)
+  }, antDesignProps)));
+}
+CustomTextArea.propTypes = {
+  rows: _propTypes.default.number,
+  placeholder: _propTypes.default.string,
+  maxLength: _propTypes.default.number,
+  className: _propTypes.default.string,
+  variant: _propTypes.default.oneOf(['default', 'gradient'])
+};
+CustomTextArea.defaultProps = {
+  rows: _constants.DEFAULT_ROWS,
+  placeholder: null,
+  maxLength: 5000,
+  className: '',
+  variant: 'default'
+};
+var _default = exports.default = CustomTextArea;

package/build/components/oa-component-textarea/constants.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEXTAREA_SHADOW = exports.TEXTAREA_BORDER_RADIUS = exports.SEND_ICON_SIZE = exports.GRADIENT_BORDER_COLORS = exports.DEFAULT_SEND_ICON_CONFIG = exports.DEFAULT_ROWS = exports.DEFAULT_MIN_ROWS = exports.DEFAULT_MAX_ROWS = void 0;
+/**
+ * Constants for CustomTextArea component
+ */
+
+// Default values for textarea configuration
+const DEFAULT_MIN_ROWS = exports.DEFAULT_MIN_ROWS = 1;
+const DEFAULT_MAX_ROWS = exports.DEFAULT_MAX_ROWS = null; // null means unlimited growth
+const DEFAULT_ROWS = exports.DEFAULT_ROWS = 2;
+
+// Gradient border colors
+const GRADIENT_BORDER_COLORS = exports.GRADIENT_BORDER_COLORS = {
+  top: '#0098FF',
+  // Blue
+  middle: '#9A6CFF',
+  // Purple
+  bottom: '#FB6252' // Coral/Orange-Red
+};
+
+// Shadow styles
+const TEXTAREA_SHADOW = exports.TEXTAREA_SHADOW = '0px 2px 10px rgba(0, 0, 0, 0.14)';
+
+// Border radius
+const TEXTAREA_BORDER_RADIUS = exports.TEXTAREA_BORDER_RADIUS = '12px';
+
+// Icon sizes
+const SEND_ICON_SIZE = exports.SEND_ICON_SIZE = 24;
+
+// Default send icon configuration
+const DEFAULT_SEND_ICON_CONFIG = exports.DEFAULT_SEND_ICON_CONFIG = {
+  show: false,
+  // Hidden by default - only show when explicitly requested
+  disabled: false
+};

package/build/components/oa-component-textarea/styles.js

@@ -3,14 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TextAreaWrapper = exports.SendIconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _templateObject;
+var _constants = require("./constants");
+var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const {
   TextArea: AntdTextArea
 } = _antd.Input;
-const StyledTextArea = (0, _styledComponents.default)(AntdTextArea)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.custom-textarea {\n    padding: 16px;\n    resize: none;\n    border-radius: 4px;\n    max-height: 92px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n  &.custom-textarea:hover {\n    border: 1px solid var(--color-primary);\n  }\n  &.custom-textarea:focus-within {\n     box-shadow: 0px 0px 4px 0px rgba(1, 79, 197, 0.90);\n  }\n"])));
+
+// Default textarea styles (existing)
+const StyledTextArea = (0, _styledComponents.default)(AntdTextArea)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.custom-textarea {\n    padding: 16px;\n    resize: none;\n    border-radius: 4px;\n    max-height: 92px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n  &.custom-textarea:hover {\n    border: 1px solid var(--color-primary);\n  }\n  &.custom-textarea:focus-within {\n     box-shadow: 0px 0px 4px 0px rgba(1, 79, 197, 0.90);\n  }\n\n  /* Gradient variant styles */\n  &.custom-textarea-gradient {\n    padding: 16px 48px 16px 16px;\n    resize: none;\n    border-radius: calc(", " - 2px);\n    border: none;\n    background: var(--color-primary-background);\n    font-size: 16px;\n    line-height: 24px;\n    color: var(--color-primary-content);\n    min-height: auto !important;\n    box-shadow: none;\n    width: 100%;\n  }\n\n  &.custom-textarea-gradient::placeholder {\n    color: var(--color-secondary-content);\n  }\n\n  &.custom-textarea-gradient:hover {\n    box-shadow: none;\n  }\n\n  &.custom-textarea-gradient:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  &.custom-textarea-gradient:focus-within {\n    box-shadow: none;\n  }\n"])), _constants.TEXTAREA_BORDER_RADIUS);
+
+// Wrapper for gradient variant with gradient border
+const TextAreaWrapper = exports.TextAreaWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n  width: 100%;\n  border-radius: ", ";\n  padding: 2px;\n  background: ", ";\n  box-shadow: ", ";\n  opacity: ", ";\n"])), _constants.TEXTAREA_BORDER_RADIUS, props => props.$disabled ? 'var(--color-divider)' : "linear-gradient(\n      135deg,\n      ".concat(_constants.GRADIENT_BORDER_COLORS.top, " 0%,\n      ").concat(_constants.GRADIENT_BORDER_COLORS.middle, " 50%,\n      ").concat(_constants.GRADIENT_BORDER_COLORS.bottom, " 100%\n    )"), props => props.$disabled ? 'none' : _constants.TEXTAREA_SHADOW, props => props.$disabled ? 0.6 : 1);
+
+// Send icon wrapper positioned absolutely
+const SendIconWrapper = exports.SendIconWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 18px;\n  right: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10;\n  pointer-events: none;\n\n  button,\n  svg {\n    pointer-events: auto;\n  }\n\n  /* Icon disabled state */\n  &.icon-disabled {\n    opacity: 0.5;\n    \n    button,\n    svg {\n      cursor: not-allowed;\n    }\n  }\n\n  /* Icon enabled state */\n  &.icon-enabled {\n    opacity: 1;\n    \n    button,\n    svg {\n      cursor: pointer;\n    }\n  }\n"])));
 var _default = exports.default = StyledTextArea;

package/build/components/oa-component-tooltip/CustomTooltip.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _tooltipPlacementOption = require("../../global-css/tooltip-placement-option");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
-const _excluded = ["title", "placement", "children", "data-test"];
+const _excluded = ["title", "placement", "children", "mode", "data-test"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -30,6 +30,7 @@ function CustomTooltip(_ref) {
       title,
       placement,
       children,
+      mode,
       'data-test': dataTest
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
@@ -49,18 +50,21 @@ function CustomTooltip(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, _extends({
     title: title,
     placement: placement,
-    "data-test": dataTest
+    "data-test": dataTest,
+    overlayClassName: mode === 'light' ? 'customLightTooltip' : ''
   }, antDesignProps), children));
 }
 CustomTooltip.propTypes = {
   title: _propTypes.default.node.isRequired,
   placement: _propTypes.default.oneOf(_tooltipPlacementOption.tooltipPlacementOptions),
   children: _propTypes.default.node,
-  'data-test': _propTypes.default.string
+  'data-test': _propTypes.default.string,
+  mode: _propTypes.default.oneOf(['light', 'dark'])
 };
 CustomTooltip.defaultProps = {
   placement: 'top',
   children: null,
-  'data-test': null
+  'data-test': null,
+  mode: 'dark'
 };
 var _default = exports.default = CustomTooltip;