oa-componentbook 0.18.302 → 0.18.304

package/build/components/oa-component-accordion/Accordion.js

@@ -12,6 +12,13 @@ var _styles = require("./styles");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Renders a MaterialIcon that rotates depending on the state of isActive.
+ *
+ * @param {boolean} isActive - Whether the icon should be rotated or not.
+ *
+ * @returns {React.ReactElement} - A React element representing the CollapseIcon.
+ */
 function CollapseIcon(_ref) {
   let {
     isActive
@@ -25,6 +32,20 @@ function CollapseIcon(_ref) {
 CollapseIcon.propTypes = {
   isActive: _propTypes.default.bool.isRequired
 };
+
+/**
+ * Accordion component that renders a collapsible panel with the given header text, body content,
+ * and optional small text. The component is disabled if the `disabled` prop is true.
+ *
+ * @param {React.ReactNode} body - Content to be rendered in the collapsible panel.
+ * @param {string} [dataTest] - String to be used as a data-test attribute on the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} headerText - Text to be displayed as the header of the collapsible panel.
+ * @param {string} [smallText] - Optional small text to be displayed next to the header text.
+ * @param {string | number} [key] - Key to be used for the collapsible panel.
+ * @param {string | number} [defaultActiveKey] - Key of the collapsible panel that should be active by default.
+ * @param {boolean} [hasContentPadding=true] - Whether to apply content padding to the collapsible panel or not.
+ */
 function Accordion(_ref2) {
   let {
     body,

package/build/components/oa-component-auto-complete/CustomAutoComplete.js

@@ -25,6 +25,20 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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; }
+/**
+ * CustomAutoComplete is a wrapper around AntD's AutoComplete component.
+ * It applies styles (like colors and font sizes) to the component.
+ * It also takes an array of options and if the value of an option is a string or a number,
+ * it wraps the value in a Typography component with the correct color and font size.
+ *
+ * @param {{data-test: string, options: Array<Object>, [key: string]: any}} props - Props for the component.
+ * @param {string} [props.data-test] - data-test attribute for the component.
+ * @param {Array<Object>} [props.options] - Options for the AutoComplete component.
+ * Each object in the array should contain a property 'value' and can contain a property 'disabled'.
+ * If the value of an option is a string or a number, it will be wrapped in a Typography component.
+ * @param {Object} [props] - Any other props for the AutoComplete component.
+ * @return {React.ReactElement} - The rendered component.
+ */
 function CustomAutoComplete(_ref) {
   let {
       'data-test': dataTest,

package/build/components/oa-component-bar-chart/BarChart.js

@@ -22,6 +22,16 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  display: inline-block;\n  position: relative;\n  width: 100%;\n  padding-bottom: ", "%;\n  vertical-align: top;\n  overflow: hidden;\n\n  .bar-chart-svg {\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  .empty-component-container {\n    display: ", ";\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    transform: translate(-50%, -50%) scale(1.2);\n  }\n"])), props => 100 / props.$aspectRatio, props => props !== null && props !== void 0 && props.$showNoData ? 'block' : 'none', props => "calc(50% + (".concat(props.$marginTop, "px - ").concat(props.$marginBottom, "px) / 2)"), props => "calc(50% + (".concat(props.$marginLeft, "px - ").concat(props.$marginRight, "px) / 2)"));
+
+/**
+ * Function to create a curved bar path based on the provided parameters.
+ * @param {number} x - The x-coordinate of the top-left corner of the bar.
+ * @param {number} y - The y-coordinate of the top-left corner of the bar.
+ * @param {number} width - The width of the bar.
+ * @param {number} height - The height of the bar.
+ * @param {number} r - The radius of the curved corners.
+ * @returns {string} The SVG path string for the curved bar.
+ */
 function curvedBar(x, y, width, height, r) {
   // x coordinates of top of arcs
   const x0 = x + r;

package/build/components/oa-component-bread-crumb/CustomBreadCrumb.js

@@ -9,6 +9,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A custom implementation of antd's Breadcrumb component.
+ * This component provides a styled breadcrumb in accordance with the OneAssist design language.
+ * The colors used are as follows:
+ * - The color of other items in breadcrumb: --color-secondary-content
+ * - The color of last item in breadcrumb: --color-primary
+ * - The color of items that are links: --color-secondary-content
+ * - The color of items that are links, during hover: --color-primary-hover
+ * - The color of separator: --color-secondary-content
+ * - The margin of separator: 4px
+ * The background color of text on hover is set to --color-primary-background.
+ */
 function CustomBreadCrumb(props) {
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {

package/build/components/oa-component-button/CustomButton.js

@@ -16,6 +16,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
+/**
+ * CustomButton component renders a styled button with various configurations.
+ *
+ * @param {string} className - Additional class names for the button.
+ * @param {boolean} disabled - Disables the button if set to true.
+ * @param {function} onClick - Callback function to handle button click events.
+ * @param {string} htmlType - Specifies the HTML type of the button (e.g., 'button', 'submit').
+ * @param {object} iconConfig - Configuration for the button's icon, containing:
+ *   - `icon`: React node for the icon.
+ *   - `position`: Position of the icon, either 'left' or 'right'.
+ * @param {ReactNode} label - The text or content displayed on the button.
+ * @param {boolean} showEllipsis - Shows ellipsis if the label is too long.
+ * @param {string} size - Size of the button, can be 'small', 'medium', or 'large'.
+ * @param {string} type - Type of button, defining its style (e.g., 'primary', 'danger-primary').
+ * @param {string} dataTest - Data attribute for testing purposes.
+ * @param {object} domProps - Additional props to be spread onto the button element.
+ *
+ * @returns {ReactElement} A styled button component.
+ */
 function CustomButton(_ref) {
   let {
       className,

package/build/components/oa-component-checkbox/CustomCheckBox.js

@@ -17,6 +17,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
+/**
+ * Returns the theme configuration for a custom checkbox component.
+ *
+ * The theme includes the following properties:
+ * - colorTextDisabled: The color of the text when the checkbox is disabled.
+ * - colorPrimaryHover: The color of the checkbox when hovered.
+ * - colorPrimary: The primary color of the checkbox.
+ * - colorBgContainerDisabled: The background color of the checkbox when disabled.
+ * - colorBorder: The color of the checkbox border.
+ * - colorText: The color of the text associated with the checkbox.
+ * - borderRadiusSM: The small border radius applied to the checkbox.
+ * - paddingXS: The extra small padding applied to the checkbox.
+ */
 const getCheckboxTheme = () => ({
   token: {
     colorTextDisabled: _ColorVariablesMap.default['--color-disabled-button'],
@@ -29,6 +42,25 @@ const getCheckboxTheme = () => ({
     paddingXS: '12px'
   }
 });
+
+/**
+ * A custom checkbox component with an accompanying label.
+ *
+ * This component wraps around the `antd` `Checkbox` component.
+ * It provides the following features:
+ * - A themed checkbox.
+ * - A label that can be a string, number, or a node.
+ * - A `data-test` attribute to aid with testing.
+ * - A `size` prop to control the size of the label accompanying the checkbox.
+ * - All props of the `antd` `Checkbox` component are applicable here as well.
+ *
+ * @param {Object} props Component props.
+ * @param {string} [props.data-test] A unique identifier for the component for testing purposes.
+ * @param {string|number|node} [props.label] The label to be displayed next to the checkbox.
+ * @param {function} [props.onChange] The callback function to be called when the checkbox state changes.
+ * @param {string} [props.size] The size of the label accompanying the checkbox. It can be either 'large' or 'small'.
+ * @param {Object} [props.antDesignProps] The extra props to be passed to the `antd` `Checkbox` component.
+ */
 exports.getCheckboxTheme = getCheckboxTheme;
 function CustomCheckBox(_ref) {
   let {

package/build/components/oa-component-count-card/CustomCountCard.js

@@ -11,6 +11,21 @@ var _typographyOptions = require("../../global-css/typography-options");
 var _colorOptions = require("../../global-css/color-options");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A card component that displays a label, an image and a subtext.
+ * Used for displaying counts in a grid layout.
+ *
+ * @param {string} label - The label text to be displayed.
+ * @param {string} imgPath - The path to the image to be displayed.
+ * @param {string} subText - The subtext to be displayed.
+ * @param {string} labelTypography - The typography option for the label. See typographyOptions for all available options.
+ * @param {string} labelColor - The color option for the label. See colorOptions for all available options.
+ * @param {string} subTextTypography - The typography option for the subtext. See typographyOptions for all available options.
+ * @param {string} subTextColor - The color option for the subtext. See colorOptions for all available options.
+ * @param {string} imgWidth - The width of the image to be displayed.
+ *
+ * @returns {ReactElement} A React element representing the card component.
+ */
 function CustomCountCard(_ref) {
   let {
     label,

package/build/components/oa-component-datepicker/CustomDatePicker.js

@@ -22,6 +22,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+
+/**
+ * A custom datepicker component.
+ *
+ * The component includes a Material UI icon on the right side of the input field.
+ * The component is fully customizable and can be used with any of the options
+ * provided by the antd datepicker component.
+ *
+ * @param {Object} props - The props for the component
+ * @prop {string} ['data-test'] - The data-test value for the component
+ *
+ * @return {ReactElement} The rendered component
+ */
 function CustomDatePicker(_ref) {
   let {
       'data-test': dataTest

package/build/components/oa-component-demo-border-radius/BorderRadiusDemo.js

@@ -10,6 +10,17 @@ var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Import the styles from the separate file
 
+/**
+ * A component to demonstrate the various border radius values in the design system.
+ *
+ * @param {string} className - The desired border radius style from the design system.
+ *                             One of 'border-radius-xlarge', 'border-radius-large',
+ *                             'border-radius-medium', 'border-radius-small',
+ *                             'border-radius-xsmall', 'border-radius-none', or
+ *                             'border-radius-full'.
+ *
+ * @return {ReactElement} A styled <div> element with the specified border radius.
+ */
 function BorderRadiusDemo(_ref) {
   let {
     className

package/build/components/oa-component-demo-color-variables/ColorVariablesDemo.js

@@ -11,6 +11,15 @@ var _colorOptions = require("../../global-css/color-options");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Import the styles from the separate file
 
+/**
+ * Component that renders a block with a background color specified by the
+ * given color variable, and displays the name of the variable.
+ *
+ * @param {string} color - The name of the color variable to use.
+ * (e.g. 'primary', 'background-dark', 'background-info', etc.)
+ *
+ * @returns {React.ReactNode} The rendered component.
+ */
 function ColorVariablesDemo(_ref) {
   let {
     color

package/build/components/oa-component-drawer/CustomDrawer.js

@@ -24,12 +24,36 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
+/**
+ * @description
+ * A utility function to convert a string or a number into a valid drawer title.
+ * If the title is a string or a number, it will be rendered as a Typography component with type-sl1-700 and primary-content color.
+ * If it is a valid React element, it will be rendered directly.
+ * If it is anything else, it will be rendered as undefined.
+ * @param {string | number | React.ReactElement} title - The title to be rendered.
+ * @returns {React.ReactElement | undefined} - The rendered title or undefined.
+ */
 function DrawerTitle(title) {
   return ((0, _utils.isString)(title) || (0, _utils.isNumber)(title)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-sl1-700",
     color: "primary-content"
   }, title) || /*#__PURE__*/_react.default.isValidElement(title) && title || undefined;
 }
+
+/**
+ * A custom implementation of the antd Drawer component.
+ * @param {object} props - The props object.
+ * @param {Array<object>} [props.buttonConfig] - An array of button configurations to be rendered in the footer.
+ * @param {*} [props.children] - The content of the drawer.
+ * @param {boolean} [props.isBaseDrawer] - If true, the drawer is a base drawer and a close icon is rendered at the top right corner.
+ * @param {function} [props.onClose] - Called when the drawer is closed.
+ * @param {boolean} [props.open] - If true, the drawer is open.
+ * @param {string} [props.placement] - The viewport placement of the drawer. If the drawer is open on mobile, this prop will be set to 'bottom'.
+ * @param {string | number | React.ReactElement} [props.title] - The title of the drawer. If a string or a number, it will be rendered as a Typography component with type-sl1-700 and primary-content color. If a valid React element, it will be rendered directly.
+ * @param {string | number} [props.height] - The height of the drawer.
+ * @param {string | number} [props.width] - The width of the drawer.
+ * @param {string} [props.data-test] - The data-test attribute to be applied to the drawer.
+ */
 function CustomDrawer(_ref) {
   let {
       buttonConfig,

package/build/components/oa-component-dropdown/CustomDropdown.js

@@ -14,6 +14,19 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _styles = _interopRequireDefault(require("./styles"));
 require("./customClass.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * CustomDropdown is a component that renders a dropdown menu.
+ * It is styled using an Ant Design Dropdown component and can be customized with different themes.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.displayText - Text to display within the dropdown trigger.
+ * @param {Array} props.items - Array of menu items to display in the dropdown.
+ * @param {React.node} props.children - React node to render as children within the dropdown trigger.
+ * @param {boolean} props.firstLetterIcon - Flag to display the first letter of the second word in displayText as an icon.
+ * @param {Array<string>} props.trigger - Event(s) that trigger the dropdown display, e.g., 'click', 'hover'.
+ * @param {string} props.placement - Position of the dropdown relative to the trigger element.
+ * @param {string} props.type - Theme type for the dropdown style.
+ */
 function CustomDropdown(_ref) {
   var _displayText$split;
   let {

package/build/components/oa-component-form-item/CustomFormItem.js

@@ -24,6 +24,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const StyledFormItem = (0, _styledComponents.default)(_antd.Form.Item)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   label{\n      height: auto !important;\n      color: var(--color-primary-content) !important;\n      margin: 0 0 4px !important;\n    }\n    .ant-col-24.ant-form-item-label{\n      padding: 0;\n    }\n"])));
+
+/**
+ * A wrapper around Ant Design's Form.Item component that styles the label
+ * and removes the minimum height.
+ *
+ * @param {string} label - The label of the form item.
+ * @param {string} labelPosition - The position of the label. Defaults to "left".
+ * @param {string} name - The name of the form item.
+ * @param {React.ReactNode} children - The children of the form item.
+ * @param {object} props - Any additional props to pass to the Form.Item component.
+ *
+ * @returns {React.ReactElement} A styled Form.Item component.
+ */
 function CustomFormItem(_ref) {
   let {
       label,

package/build/components/oa-component-header/CustomHeader.js

@@ -16,6 +16,14 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _CustomInput = _interopRequireDefault(require("../oa-component-input/CustomInput"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const noRefCheck = () => {};
+
+/**
+ * HeaderBar is a component that displays a header bar with a back button and two different layouts for desktop and mobile.
+ * The desktop view displays the header with a search button, export button and an add button.
+ * The mobile view displays the search, export and add icons.
+ *
+ * @return {ReactElement} - the rendered component
+ */
 function HeaderBar() {
   return /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "customHeader"

package/build/components/oa-component-icons/CustomIcon.js

@@ -25,6 +25,17 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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 simple wrapper around the Ant Design Icon component,
+ * which uses SizedSvg underneath. See the documentation for
+ * SizedSvg for more information.
+ *
+ * The only prop that is not passed to SizedSvg is `style`, which
+ * is merged with the style object that is passed to Icon.
+ *
+ * @param {Object} props - all the props to pass to SizedSvg
+ * @returns {React.ReactElement} - the rendered component
+ */
 function CustomIcon(_ref) {
   let {
       alt,

package/build/components/oa-component-info/CustomInfo.js

@@ -14,6 +14,22 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _colorOptions = require("../../global-css/color-options");
 require("antd/dist/reset.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A component for displaying a single piece of information with an optional icon
+ * and/or button. The icon can be placed on either the left or right of the text.
+ * If the icon is a valid React element, its size is adjusted based on the presence
+ * of a title. If a title is not provided, the icon size is 20. If a title is
+ * provided, the icon size is 24.
+ *
+ * @param {object} buttonConfig - Configuration for the button.
+ * @param {string} color - The background color of the component.
+ * @param {string} description - The text to be displayed.
+ * @param {string} fontColor - The color of the text.
+ * @param {object} iconConfig - Configuration for the icon.
+ * @param {string} title - The title to be displayed.
+ *
+ * @returns {ReactElement} A styled component with the specified properties.
+ */
 function CustomInfo(_ref) {
   let {
     buttonConfig,
@@ -23,11 +39,25 @@ function CustomInfo(_ref) {
     iconConfig,
     title
   } = _ref;
+  /**
+   * Renders the icon based on the presence of a title.
+   * If a title is not provided and the icon is a valid React element,
+   * it returns a cloned version of the icon with a size of 20.
+   * If a title is provided and the icon is a valid React element,
+   * it returns a cloned version of the icon with a size of 24.
+   */
   const renderIcon = () => !title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
     size: 20
   }) : /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
     size: 24
   });
+
+  /**
+   * Adds a tooltip to the icon if the iconConfig has a tooltipText property.
+   * Otherwise, just renders the icon.
+   *
+   * @returns {React.ReactNode} The rendered icon with or without a tooltip.
+   */
   const conditionallyAddTooltipToIcon = () => {
     var _iconConfig$tooltipTe;
     return (iconConfig === null || iconConfig === void 0 || (_iconConfig$tooltipTe = iconConfig.tooltipText) === null || _iconConfig$tooltipTe === void 0 ? void 0 : _iconConfig$tooltipTe.length) > 0 ? /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {

package/build/components/oa-component-input/CustomInput.js

@@ -20,6 +20,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
+/**
+ * CustomInput is a component that renders an input field with customizable styling.
+ * It automatically focuses on the input field when mounted if autoFocus is set to true.
+ * The component allows customization of padding, border colors, box shadows, placeholder text color, and more.
+ */
 function CustomInput(_ref) {
   let {
       'data-test': dataTest,

package/build/components/oa-component-input-number/CustomInputNumber.js

@@ -20,6 +20,17 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
+/**
+ * CustomInputNumber is a component that renders a number input field with customizable styling.
+ * It automatically focuses on the input field when mounted if autoFocus is set to true.
+ * The component allows customization of padding, border colors, box shadows, placeholder text color, and more.
+ *
+ * @param {Object} props - The props for the component
+ * @prop {string} ['data-test'] - The data-test value for the component
+ * @prop {boolean} [autoFocus=false] - Whether to autofocus on the input field
+ *
+ * @return {ReactElement} The rendered component
+ */
 function CustomInputNumber(_ref) {
   let {
       'data-test': dataTest,

package/build/components/oa-component-lable/CustomLable.js

@@ -12,6 +12,11 @@ var _styles = require("./styles");
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const text = /*#__PURE__*/_react.default.createElement("span", null, "prompt text");
+/**
+ * CustomLabel component displays a label with optional info circle tooltip.
+ *
+ * @param {boolean} showInfoCircle - Flag to show the info circle tooltip.
+ */
 function CustomLabel(_ref) {
   let {
     showInfoCircle

package/build/components/oa-component-loader/CustomLoader.js

@@ -14,6 +14,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 loader component that extends Ant Design's Spin component.
+ *
+ * @param {React.ReactNode} children - The DOM element on which the loader should be centered.
+ * @param {string} contentHeight - The height of the content that this loader is spinning over.
+ * @param {number} delay - The delay in which the loader should be displayed.
+ * @param {string} size - The size of the loader (small, default, or large).
+ * @param {boolean} spinning - Determines whether the loader is displayed or hidden.
+ * @param {object} antDesignProps - Any additional props that should be passed to the Ant Design Spin component.
+ * @returns {ReactElement} The rendered CustomLoader component.
+ */
 function CustomLoader(_ref) {
   let {
       children,

package/build/components/oa-component-modal/CustomModal.js

@@ -19,6 +19,36 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
+/**
+   * This is a custom Modal component that extends the default antd Modal
+   * component.
+   *
+   * The open state of the modal is controlled by the parent component.
+   *
+   * The parent can also provide a callback function to be called when the
+   * cancel button is clicked.
+   *
+   * The width of the modal can be customized by providing a width prop.
+   *
+   * The buttons for the modal can be customized by providing a buttonConfig
+   * prop.
+   *
+   * The title of the modal can be provided as a string or as an image.
+   *
+   * The children of the modal can be provided as a string or a number, or as
+   * JSX elements.
+   *
+   * The typography of the title and description can be customized by providing
+   * a typographies object.
+   *
+   * The modal is centered by default.
+   *
+   * The modal is rendered with a gray background.
+   *
+   * The modal is rendered with a close button.
+   *
+   * The parent can provide additional props to the Modal component.
+   */
 function CustomModal(_ref) {
   let {
       buttonConfig,

package/build/components/oa-component-popover/CustomPopover.js

@@ -13,6 +13,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 Popover component that wraps its content in a span with a click event.
+ * This is useful for handling clicks on the content of the popover.
+ *
+ * @param {React.ReactNode} children - The element that triggers the popover.
+ * @param {React.ReactNode} content - The content of the popover.
+ * @param {Function} onContentClick - The function that is called when the content is clicked.
+ * @param {Object} props - Any other props that can be passed to the Popover component.
+ */
 function CustomPopover(_ref) {
   let {
       children,

package/build/components/oa-component-progress-bar/CustomProgressBar.js

@@ -11,6 +11,16 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Displays a progress bar indicating the current step out of the total steps.
+ *
+ * @param {number} currentStep - The current step number being displayed.
+ * @param {number} totalStep - The total number of steps in the progress.
+ * @param {string} headingColor - The color used for the step text heading.
+ * @param {string} barColor - The color used for the progress bar.
+ *
+ * @returns {React.ReactElement} A component displaying the current progress.
+ */
 function ProgressBar(_ref) {
   let {
     currentStep,

package/build/components/oa-component-radio/CustomRadio.js

@@ -16,6 +16,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
+/**
+ * Returns the theme configuration for a custom radio component.
+ *
+ * The theme includes the following properties:
+ * - token: An object containing theme-specific tokens.
+ *   - colorPrimary: The primary color of the radio component.
+ *   - colorBorder: The color of the radio component's border.
+ *   - colorTextDisabled: The color of the text when the radio component is disabled.
+ *   - colorText: The color of the text for the radio component.
+ * - components: An object containing component-specific properties.
+ *   - Radio: The configuration for the radio component.
+ *     - wrapperMarginInlineEnd: The margin applied to the end of the radio wrapper.
+ */
 const getRadioTheme = () => ({
   token: {
     colorPrimary: _ColorVariablesMap.default['--color-primary'],