oa-componentbook 0.17.63 → 0.17.64

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

@@ -15,16 +15,20 @@ function Accordion(_ref) {
     'data-test': dataTest,
     disabled,
     headerText,
-    smallText
+    smallText,
+    hasContentPadding // New prop to determine whether to apply contentPadding
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
-    theme: {
-      components: {
-        Collapse: {
-          headerBg: 'var(--color-secondary-background)'
-        }
+  const themeConfig = {
+    components: {
+      Collapse: {
+        headerBg: 'var(--color-secondary-background)',
+        contentPadding: hasContentPadding ? '20px 24px' : '0' // Adjust the value as needed
       }
     }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: themeConfig
   }, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
     expandIconPosition: "end",
     defaultActiveKey: disabled ? '-1' : '1'
@@ -45,13 +49,16 @@ Accordion.propTypes = {
   'data-test': _propTypes.default.string,
   disabled: _propTypes.default.bool,
   headerText: _propTypes.default.string.isRequired,
-  smallText: _propTypes.default.string
+  smallText: _propTypes.default.string,
+  hasContentPadding: _propTypes.default.bool // New prop for controlling contentPadding
 };
+
 Accordion.defaultProps = {
   body: '',
   'data-test': null,
   disabled: false,
-  smallText: ''
+  smallText: '',
+  hasContentPadding: true // Default value for contentPadding
 };
 var _default = Accordion;
 exports.default = _default;

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

@@ -12,5 +12,5 @@ var _default = {};
 exports.default = _default;
 const SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #E21616;\n  margin: 0 0 0 4px;\n"])));
 exports.SmallText = SmallText;
-const CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n  background: var(--color-disabled-button);\n}\n  .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  }\n  .ant-collapse-expand-icon{\n    transform: rotate(90deg);\n    padding-inline-start: 0 !important;\n  }\n  .ant-collapse-header-text{\n    color: var(--color-primary-content);\n  }\n  .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  }\n  .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse>.ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse{\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n  }\n  .ant-collapse .ant-collapse-content>.ant-collapse-content-box{\n    padding: 20px 24px;\n  }\n  .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n    padding: 12px 24px;\n  }\n"])));
+const CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n  background: var(--color-disabled-button);\n}\n  .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  }\n  .ant-collapse-expand-icon{\n    transform: rotate(90deg);\n    padding-inline-start: 0 !important;\n  }\n  .ant-collapse-header-text{\n    color: var(--color-primary-content);\n  }\n  .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  }\n  .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse>.ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse{\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n  }\n  \n  .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n    padding: 12px 24px;\n  }\n"])));
 exports.CollapseStyle = CollapseStyle;

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

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const DrawerFooter = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n"])));
 exports.DrawerFooter = DrawerFooter;
-const CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-drawer-header {\n    padding: 20px 24px;\n    background: var(--color-secondary-background);\n  }\n"])));
+const CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-drawer-header {\n    padding: 16px 24px;\n    background: var(--color-secondary-background);\n  }\n"])));
 exports.CustomStyledDrawer = CustomStyledDrawer;
 const BaseDrawerTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 exports.BaseDrawerTitle = BaseDrawerTitle;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomInput;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+require("antd/dist/reset.css");
+const _excluded = ["data-test", "disabled"];
+var _templateObject;
+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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StyledInput = (0, _styledComponents.default)(_antd.Input)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-input {\n     display: flex;\n     align-items: center;\n }\n"])));
+function CustomInput(_ref) {
+  let {
+      'data-test': dataTest,
+      disabled: inputDisabled
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Input: {
+          borderColor: inputDisabled ? _ColorVariablesMap.default['--color-divider'] : _ColorVariablesMap.default['--color-placeholder-text'],
+          borderRadius: '4px',
+          height: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? '36px' : '52px',
+          padding: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? '8px 12px' : '16px 16px'
+        }
+      },
+      token: {
+        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        lineHeight: '20px',
+        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        borderRadius: '4px',
+        controlHeight: 48,
+        controlHeightSM: 32,
+        controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
+        colorBgElevated: _ColorVariablesMap.default['--color-primary-background'],
+        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorFillSecondary: _ColorVariablesMap.default['--color-secondary-background'],
+        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        colorIcon: _ColorVariablesMap.default['--color-primary-content']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledInput, _extends({
+    "data-test": dataTest ? "".concat(dataTest, "-input") : undefined,
+    disabled: inputDisabled
+  }, props)));
+}
+CustomInput.propTypes = {
+  'data-test': _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['small', 'middle'])
+};
+CustomInput.defaultProps = {
+  'data-test': null,
+  disabled: false,
+  size: 'middle'
+};

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

@@ -23,6 +23,7 @@ function CustomModal(_ref) {
   let {
     buttonConfig,
     children,
+    'data-test': dataTest,
     imgSrc,
     // This callback function provided by parent is called upon clicking on the cancel button
     onCancel,
@@ -43,13 +44,8 @@ function CustomModal(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
-    onCancel: handleCancel,
-    title: (title || imgSrc) && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
-      src: imgSrc,
-      alt: ""
-    }), /*#__PURE__*/_react.default.isValidElement(title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      typography: typographies.title
-    }, title)),
+    centered: true,
+    "data-test": dataTest,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
       key: (0, _nanoid.nanoid)()
     }, button, {
@@ -57,9 +53,17 @@ function CustomModal(_ref) {
       label: button.label,
       onClick: button.callback,
       size: "large",
-      type: button.type
+      type: button.type,
+      "data-test": button['data-test']
     })))),
+    onCancel: handleCancel,
     open: open,
+    title: (title || imgSrc) && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
+      src: imgSrc,
+      alt: ""
+    }), /*#__PURE__*/_react.default.isValidElement(title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: typographies.title
+    }, title)),
     width: width
   }, children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
   // The label is a string or a number
@@ -72,6 +76,7 @@ CustomModal.propTypes = {
   // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
     callback: _propTypes.default.func.isRequired,
+    'data-test': _propTypes.default.string,
     label: _propTypes.default.string,
     iconConfig: _propTypes.default.shape({
       icon: _propTypes.default.node,
@@ -81,6 +86,7 @@ CustomModal.propTypes = {
     type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only']).isRequired
   })),
   children: _propTypes.default.node,
+  'data-test': _propTypes.default.string,
   title: _propTypes.default.string,
   typographies: _propTypes.default.shape({
     title: _propTypes.default.oneOf(_Typography.typographyOptions),
@@ -94,6 +100,7 @@ CustomModal.propTypes = {
 CustomModal.defaultProps = {
   buttonConfig: [],
   children: null,
+  'data-test': null,
   imgSrc: null,
   open: true,
   title: null,

package/build/components/oa-component-notification/CustomNotification.js

@@ -62,11 +62,11 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }, /*#__PURE__*/_react.default.createElement("div", null, title)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
       color: descriptionColor,
       typography: typographies.description
-    }, description)));
+    }, /*#__PURE__*/_react.default.createElement("small", null, description))));
     api.open({
       message: customNotification,
       style: {
-        padding: '8px 16px 8px 16px',
+        padding: '8px 16px 0px 16px',
         borderRadius: '4px',
         borderLeft: "4px solid ".concat(borderColor),
         boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)'
@@ -110,7 +110,7 @@ Notification.propTypes = {
   })
 };
 Notification.defaultProps = {
-  duration: 2000,
+  duration: null,
   onClick: () => {},
   onClose: () => {},
   placement: 'topRight',

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

@@ -10,5 +10,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;  \n"])));
+const StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;  \n  align-item: center;\n  small{\n    font-size: inherit;\n    display: block;\n    padding: 4px 0 0;\n  }\n  .anticon-close{\n    color: var(--color-secondary-content);\n  }\n  \n"])));
 exports.StyledNotification = StyledNotification;

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

@@ -4,18 +4,36 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getRadioTheme = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _utils = require("../../utils");
-var _styles = require("./styles");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 const _excluded = ["label", "data-test", "disabled", "onChange", "size", "value"];
 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; }
+const getRadioTheme = () => ({
+  token: {
+    colorPrimary: _ColorVariablesMap.default['--color-primary'],
+    // color-primary
+    // colorPrimaryHover: 'orange',
+    // colorPrimaryActive: 'red',
+    // colorPrimaryBorder: 'green',
+    colorTextDisabled: _ColorVariablesMap.default['--color-disabled-button'],
+    // color-disabled-button
+    colorText: _ColorVariablesMap.default['--color-primary-content'] // color-primary-content
+  },
+
+  components: {
+    Radio: {
+      wrapperMarginInlineEnd: 12
+    }
+  }
+});
+exports.getRadioTheme = getRadioTheme;
 function CustomRadio(_ref) {
   let {
       label,
@@ -36,26 +54,27 @@ function CustomRadio(_ref) {
     onChange(event);
   };
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
-    theme: {
-      components: {
-        Radio: {
-          dotSize: '8'
-        }
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_styles.StyledRadio, _extends({
+    theme: getRadioTheme()
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, _extends({
     disabled: disabled,
     onChange: handleChange,
     value: value,
     "data-test": dataTest
   }, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement("p", {
     className: size === 'large' ? 'type-b1-400' : 'type-b2-400',
-    color: "primary-content"
-  }, label) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined)));
+    style: {
+      // paddingLeft: '12px'
+    }
+  }, label) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined));
+}
+function CustomRadioGroup(props) {
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: getRadioTheme()
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, props));
 }
 
 // This allows us referencing the Group container and Button component in our Checkbox component
-CustomRadio.Group = _antd.Radio.Group;
+CustomRadio.Group = CustomRadioGroup;
 CustomRadio.Button = CustomRadio;
 CustomRadio.propTypes = {
   'data-test': _propTypes.default.string,

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

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledRadio = exports.RadioContainer = void 0;
+exports.default = exports.RadioContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _templateObject, _templateObject2;
+var _templateObject;
 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) } })); }
 var _default = {};
 exports.default = _default;
-const RadioContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-radio-wrapper-disabled p{\n  color: var(--color-disabled-button);\n}\n.ant-radio-disabled {\n  color: var(--color-disabled-button);\n}\n.ant-radio-wrapper-disabled {\n  color: var(--color-disabled-button);\n}\n.ant-radio-wrapper span.ant-radio+*{\n  padding-inline-start: 12px;\n}\n"])));
-exports.RadioContainer = RadioContainer;
-const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  p{\n    color: var(--color-primary-content);\n  }\n  .ant-radio-checked .ant-radio-inner {\n    background: var(--color-primary-background);\n    border:1px solid var(--color-primary);\n  }\n\n  .ant-radio-inner::after {\n    background: var(--color-primary);\n  }\n\n  .ant-radio-inner:hover {\n    color: var(--color-primary);\n  }  \n \n  .ant-radio-inner {\n    border-color: var(--color-secondary-content);\n  }\n"])));
-exports.StyledRadio = StyledRadio;
+const RadioContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* .ant-radio-wrapper span.ant-radio+*{\n  padding-inline-start: 12px;\n} */\n"])));
+exports.RadioContainer = RadioContainer;

package/build/components/oa-component-select/CustomSelect.js

@@ -0,0 +1,129 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomSelect;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../../utils");
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+require("antd/dist/reset.css");
+const _excluded = ["data-test", "disabled", "options"],
+  _excluded2 = ["label", "disabled"];
+var _templateObject;
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-select-selection-item {\n      display: flex;\n      align-items: center;\n  }\n"])));
+function CustomSelect(_ref) {
+  let {
+      'data-test': dataTest,
+      disabled: selectDisabled,
+      options
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const actualOptions = options.map(option => {
+    const {
+        label,
+        disabled
+      } = option,
+      otherProperties = _objectWithoutProperties(option, _excluded2);
+    if ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) {
+      return _objectSpread({
+        label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: disabled || selectDisabled ? 'placeholder-text' : undefined,
+          typography: "type-b2-400",
+          "data-test": dataTest ? "".concat(dataTest, "-(").concat(label, ")") : undefined
+        }, label),
+        disabled
+      }, otherProperties);
+    }
+    if ( /*#__PURE__*/_react.default.isValidElement(label)) {
+      return _objectSpread({
+        label: /*#__PURE__*/_react.default.cloneElement(label, {
+          'data-test': dataTest ? "".concat(dataTest, "-(").concat(label, ")") : undefined
+        }),
+        disabled
+      }, otherProperties);
+    }
+    return option;
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Select: {
+          optionHeight: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? '36px' : '52px',
+          optionSelectedBg: _ColorVariablesMap.default['--color-primary-background'],
+          optionSelectedColor: _ColorVariablesMap.default['--color-primary'],
+          optionPadding: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? '8px 12px' : '16px 16px'
+        }
+      },
+      token: {
+        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        lineHeight: '20px',
+        // Same as type-b2-400
+        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        // for active color of select
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        // for hover color of select
+        borderRadius: '4px',
+        // For border radius of select text field.
+        borderRadiusLG: '4px',
+        // For border radius of dropdown
+        controlHeight: 48,
+        // height of text field (tag height is half of this, i.e. 24px)
+        controlHeightSM: 32,
+        // height of small text field
+        controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
+        // hover color of items
+        colorBgElevated: _ColorVariablesMap.default['--color-primary-background'],
+        // multipleItemHeight: 100,
+        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        // background color of disabled select
+        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorFillSecondary: _ColorVariablesMap.default['--color-secondary-background'],
+        // background color for tags
+        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        // Text color of unselected options in dropdown
+        colorIcon: _ColorVariablesMap.default['--color-primary-content'] // Color of cross icon
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledSelect, _extends({
+    "data-test": dataTest ? "".concat(dataTest, "-select") : undefined,
+    options: actualOptions,
+    dropdownStyle: {
+      padding: '0px'
+    },
+    maxTagCount: "responsive",
+    disabled: selectDisabled
+  }, props)));
+}
+CustomSelect.propTypes = {
+  'data-test': _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['small', 'middle']),
+  options: _propTypes.default.arrayOf(
+  // Checked from antd's github
+  _propTypes.default.shape({
+    label: _propTypes.default.node.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  })).isRequired
+};
+CustomSelect.defaultProps = {
+  'data-test': null,
+  disabled: false,
+  size: 'middle'
+};

package/build/components/oa-component-table/CustomTable.js

@@ -13,7 +13,7 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 require("antd/dist/reset.css");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _utils = require("../../utils");
-const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size"],
+const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "tableBorder"],
   _excluded2 = ["title"];
 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); }
@@ -30,7 +30,8 @@ function CustomTable(_ref) {
       dataSource,
       pagination,
       rowKey,
-      size
+      size,
+      tableBorder
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
   const uppercaseColumns = columns.map(column => {
@@ -38,15 +39,28 @@ function CustomTable(_ref) {
         title
       } = column,
       otherColumnProperties = _objectWithoutProperties(column, _excluded2);
-    if ((0, _utils.isString)(title)) {
-      return _objectSpread({
-        title: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-          typography: "type-sl1-700"
-        }, title)
-      }, otherColumnProperties);
-    }
-    return column;
+    const titleComponent = (0, _utils.isString)(title) || (0, _utils.isNumber)(title) ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-sl1-700"
+    }, title) : title;
+    return _objectSpread({
+      title: titleComponent,
+      render: text => {
+        if ((0, _utils.isString)(text) || (0, _utils.isNumber)(text)) {
+          return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+            typography: "type-b2-400"
+          }, text);
+        }
+        return text;
+      }
+    }, otherColumnProperties);
   });
+  const tableStyle = {
+    borderTop: '1px solid var(--color-divider)',
+    borderRight: tableBorder ? '1px solid var(--color-divider)' : '0',
+    borderBottom: tableBorder ? '1px solid var(--color-divider)' : '0',
+    borderLeft: tableBorder ? '1px solid var(--color-divider)' : '0',
+    borderRadius: tableBorder ? '4px' : '0'
+  };
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {
@@ -54,6 +68,7 @@ function CustomTable(_ref) {
           borderColor: _ColorVariablesMap.default['--color-divider'],
           headerColor: _ColorVariablesMap.default['--color-secondary-content'],
           headerBg: _ColorVariablesMap.default['--color-secondary-background'],
+          rowHoverBg: _ColorVariablesMap.default['--color-secondary-background'],
           headerBorderRadius: '0',
           headerSplitColor: _ColorVariablesMap.default['--color-secondary-background'],
           footerColor: _ColorVariablesMap.default['--color-primary-content'],
@@ -66,21 +81,18 @@ function CustomTable(_ref) {
           cellFontSize: '14px',
           cellFontSizeMD: '14px',
           cellFontSizeSM: '14px',
-          selectionColumnWidth: '54px'
+          selectionColumnWidth: '54px',
+          colorText: _ColorVariablesMap.default['--color-primary-content']
         }
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Table, _extends({
-    style: {
-      border: '1px solid var(--color-divider)',
-      borderRadius: '4px'
-    },
+    style: tableStyle,
     columns: uppercaseColumns,
     dataSource: dataSource,
     pagination: pagination,
     rowKey: rowKey,
     size: size
-    // This allows for all ant design props to be supported.
   }, antDesignProps)));
 }
 CustomTable.propTypes = {
@@ -88,14 +100,16 @@ CustomTable.propTypes = {
   dataSource: _propTypes.default.array,
   pagination: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
   rowKey: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'middle', 'large'])
+  size: _propTypes.default.oneOf(['small', 'middle', 'large']),
+  tableBorder: _propTypes.default.bool
 };
 CustomTable.defaultProps = {
   dataSource: [],
   columns: [],
   pagination: false,
   rowKey: '',
-  size: 'middle'
+  size: 'middle',
+  tableBorder: true
 };
 var _default = CustomTable;
 exports.default = _default;

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

@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\n  }\n  .ant-tabs-top >.ant-tabs-nav::before{\n    border-bottom: 1px solid var(--color-divider)\n  }\n  .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n    color: var(--color-primary);\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n  }\n  .ant-tabs .ant-tabs-tab:hover{\n    color: var(--color-primary-hover);\n  }\n  .ant-tabs .ant-tabs-ink-bar{\n    background: var(--color-primary);\n  }\n"])));
+const StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\n    padding: 12px;\n  }\n  .ant-tabs .ant-tabs-tab+.ant-tabs-tab{\n    margin: 0;\n  }\n  .ant-tabs-top >.ant-tabs-nav::before{\n    border-bottom: 1px solid var(--color-divider)\n  }\n  .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n    color: var(--color-primary);\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n  }\n  .ant-tabs .ant-tabs-tab:hover{\n    color: var(--color-primary-hover);\n  }\n  .ant-tabs .ant-tabs-ink-bar{\n    background: var(--color-primary);\n  }\n"])));
 exports.StyledTabs = StyledTabs;

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

@@ -13,6 +13,6 @@ var _default = {};
 exports.default = _default;
 const StyleTimeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-steps .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title,.ant-steps .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title{\n  color: var(--color-primary-content);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px; \n}\n.ant-steps .ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title{\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n}\n.ant-steps .ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {\n  color: var(--color-disabled-button);\n}\n"])));
 exports.StyleTimeline = StyleTimeline;
-const CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    padding: 20px 0 56px;\n  .ant-steps-item-tail{\n    left: -30px;\n  }\n  .ant-steps-item-content{\n    width: auto !important;\n    text-align: left !important;\n\n  }\n  .ant-steps-item:fist-child .ant-steps-item-content{\n\n  }\n    .ant-steps-item-icon {\n      width: 16px !important;\n      height: 16px !important;\n      margin-inline-start: 20px!important;\n      margin-inline-end: 68px;\n    }\n    \n    .ant-steps-item-tail {\n      top: 6px !important;\n    }\n    \n    .ant-steps-icon-dot {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-tail::after {\n      height: 2px !important;\n      width: 100% !important;\n      margin-inline-start: -8px !important;\n    }\n    \n    .ant-steps-item-finish .ant-steps-item-tail::after {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-process .ant-steps-item-tail::after {\n      background-color: rgba(5, 5, 5, 0.06) !important;\n    }\n    \n    .ant-steps-item-wait .ant-steps-icon-dot {\n      background-color: rgb(240 240 240)!important;\n    }\n    \n    .ant-steps-item-content {\n      margin-top: 8px !important;\n    }\n    .ant-steps-item-description {\n      display: none;\n    }\n"])));
+const CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    padding: 20px 0 56px;\n  .ant-steps-item-tail{\n    left: 6px;\n  }\n  .ant-steps-item-content{\n    width: auto !important;\n  }\n  .ant-steps-item:fist-child .ant-steps-item-content{\n\n  }\n    .ant-steps-item-icon {\n      width: 16px !important;\n      height: 16px !important;\n      margin-inline-end: 68px;\n    }\n    \n    .ant-steps-item-tail {\n      top: 6px !important;\n    }\n    \n    .ant-steps-icon-dot {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-tail::after {\n      height: 2px !important;\n      width: 100% !important;\n      margin-inline-start: -8px !important;\n    }\n    \n    .ant-steps-item-finish .ant-steps-item-tail::after {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-process .ant-steps-item-tail::after {\n      background-color: rgba(5, 5, 5, 0.06) !important;\n    }\n    \n    .ant-steps-item-wait .ant-steps-icon-dot {\n      background-color: rgb(240 240 240)!important;\n    }\n    \n    .ant-steps-item-content {\n      margin-top: 8px !important;\n    }\n    .ant-steps-item-description {\n      display: none;\n    }\n"])));
 exports.CustomSteps = CustomSteps;
 CustomSteps.Step = _antd.Steps.Step;

package/build/images/CautionSvg.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CautionSvg;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CautionSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11.8723 4.0809C11.6825 3.75226 11.4096 3.47936 11.0809 3.28962C10.7523 3.09989 10.3795 3 10 3C9.62051 3 9.2477 3.09989 8.91905 3.28962C8.59039 3.47936 8.31747 3.75226 8.1277 4.0809L2.2896 14.1929C2.09987 14.5216 1.99999 14.8944 2 15.2739C2.00001 15.6534 2.09991 16.0262 2.28966 16.3548C2.4794 16.6835 2.75231 16.9564 3.08096 17.1461C3.4096 17.3359 3.7824 17.4358 4.16189 17.4358H15.8381C16.2176 17.4358 16.5904 17.3359 16.919 17.1461C17.2477 16.9564 17.5206 16.6835 17.7103 16.3548C17.9001 16.0262 18 15.6534 18 15.2739C18 14.8944 17.9001 14.5216 17.7104 14.1929L11.8723 4.0809ZM10 15.6848C9.83506 15.6848 9.67383 15.6359 9.5367 15.5443C9.39956 15.4526 9.29267 15.3224 9.22956 15.17C9.16644 15.0176 9.14993 14.8499 9.1821 14.6882C9.21428 14.5264 9.29371 14.3778 9.41033 14.2612C9.52696 14.1446 9.67555 14.0651 9.83732 14.033C9.99908 14.0008 10.1668 14.0173 10.3191 14.0804C10.4715 14.1435 10.6018 14.2504 10.6934 14.3876C10.785 14.5247 10.8339 14.6859 10.8339 14.8509C10.8339 14.9604 10.8124 15.0688 10.7704 15.17C10.7285 15.2712 10.6671 15.3631 10.5897 15.4405C10.5122 15.518 10.4203 15.5794 10.3191 15.6213C10.218 15.6632 10.1095 15.6848 10 15.6848ZM11.1774 7.31731L10.8829 12.3245C10.8696 12.5497 10.7708 12.7613 10.6067 12.916C10.4426 13.0708 10.2255 13.157 9.99997 13.157C9.77439 13.157 9.55734 13.0708 9.39322 12.916C9.2291 12.7613 9.13031 12.5497 9.11707 12.3245L8.82253 7.31731C8.81309 7.15686 8.83654 6.99618 8.89144 6.84513C8.94635 6.69407 9.03155 6.55583 9.14181 6.43889C9.25207 6.32196 9.38507 6.22879 9.53264 6.1651C9.68021 6.10142 9.83924 6.06858 9.99996 6.06858C10.1607 6.06858 10.3197 6.10142 10.4673 6.1651C10.6149 6.22879 10.7478 6.32196 10.8581 6.43889C10.9684 6.55583 11.0536 6.69407 11.1085 6.84513C11.1634 6.99618 11.1868 7.15686 11.1774 7.31731Z",
+    fill: "currentColor"
+  }));
+}

package/build/images/DeleteSvg.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DeleteSvg;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function DeleteSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("mask", {
+    id: "mask0_2670_1928",
+    style: {
+      maskType: 'alpha'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "-1",
+    width: "24",
+    height: "25"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    y: "-0.000274658",
+    width: "24",
+    height: "24",
+    fill: "#D9D9D9"
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#mask0_2670_1928)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6.9577 20.4997C6.56443 20.4997 6.22573 20.3576 5.9416 20.0735C5.65747 19.7893 5.5154 19.4506 5.5154 19.0574V5.45167H5.0673C4.90625 5.45167 4.77144 5.39694 4.66287 5.28749C4.55429 5.17804 4.5 5.04215 4.5 4.87982C4.5 4.71747 4.55429 4.58308 4.66287 4.47667C4.77144 4.37027 4.90625 4.31707 5.0673 4.31707H8.7769C8.7769 4.11963 8.84561 3.95329 8.98303 3.81804C9.12044 3.68278 9.28571 3.61514 9.47883 3.61514H14.5211C14.7142 3.61514 14.8795 3.68385 15.0169 3.82127C15.1543 3.9587 15.2231 4.12397 15.2231 4.31707H18.9327C19.0937 4.31707 19.2285 4.37179 19.3371 4.48124C19.4457 4.59068 19.5 4.72657 19.5 4.88892C19.5 5.05127 19.4457 5.18564 19.3371 5.29204C19.2285 5.39846 19.0937 5.45167 18.9327 5.45167H18.4846V19.0574C18.4846 19.4506 18.3425 19.7893 18.0584 20.0735C17.7742 20.3576 17.4355 20.4997 17.0423 20.4997H6.9577ZM17.35 5.45167H6.64998V19.0574C6.64998 19.1471 6.68042 19.2208 6.74132 19.2785C6.80224 19.3362 6.87437 19.3651 6.9577 19.3651H17.0423C17.1256 19.3651 17.1977 19.3362 17.2586 19.2785C17.3195 19.2208 17.35 19.1471 17.35 19.0574V5.45167ZM9.53078 17.2536H10.6654V7.53819H9.53078V17.2536ZM13.3346 17.2536H14.4692V7.53819H13.3346V17.2536Z",
+    fill: "currentColor"
+  })));
+}

package/build/index.js

@@ -113,6 +113,12 @@ Object.defineProperty(exports, "CustomRadio", {
     return _CustomRadio.default;
   }
 });
+Object.defineProperty(exports, "CustomSelect", {
+  enumerable: true,
+  get: function get() {
+    return _CustomSelect.default;
+  }
+});
 Object.defineProperty(exports, "CustomTable", {
   enumerable: true,
   get: function get() {
@@ -191,7 +197,7 @@ Object.defineProperty(exports, "SendPaymentLinkWidget", {
     return _SendPaymentLinkWidget.default;
   }
 });
-Object.defineProperty(exports, "SpacingScales", {
+Object.defineProperty(exports, "SpacingDemo", {
   enumerable: true,
   get: function get() {
     return _SpacingScales.default;
@@ -269,6 +275,18 @@ Object.defineProperty(exports, "colorOptions", {
     return _ColorVariablesDemo.colorOptions;
   }
 });
+Object.defineProperty(exports, "getCheckboxTheme", {
+  enumerable: true,
+  get: function get() {
+    return _CustomCheckBox.getCheckboxTheme;
+  }
+});
+Object.defineProperty(exports, "getRadioTheme", {
+  enumerable: true,
+  get: function get() {
+    return _CustomRadio.getRadioTheme;
+  }
+});
 Object.defineProperty(exports, "typographyOptions", {
   enumerable: true,
   get: function get() {
@@ -279,15 +297,15 @@ var _Accordion = _interopRequireDefault(require("./components/oa-component-accor
 var _ColorVariablesDemo = _interopRequireWildcard(require("./components/oa-component-demo-color-variables/ColorVariablesDemo"));
 var _BorderRadiusDemo = _interopRequireDefault(require("./components/oa-component-demo-border-radius/BorderRadiusDemo"));
 var _CustomButton = _interopRequireDefault(require("./components/oa-component-button/CustomButton"));
-var _CustomCheckBox = _interopRequireDefault(require("./components/oa-component-checkbox/CustomCheckBox"));
+var _CustomCheckBox = _interopRequireWildcard(require("./components/oa-component-checkbox/CustomCheckBox"));
 var _CustomDrawer = _interopRequireDefault(require("./components/oa-component-drawer/CustomDrawer"));
 var _CustomIcon = _interopRequireWildcard(require("./components/oa-component-icons/CustomIcon"));
 var _CustomInfo = _interopRequireDefault(require("./components/oa-component-info/CustomInfo"));
 var _CustomLoader = _interopRequireDefault(require("./components/oa-component-loader/CustomLoader"));
 var _CustomModal = _interopRequireDefault(require("./components/oa-component-modal/CustomModal"));
 var _CustomNotification = _interopRequireDefault(require("./components/oa-component-notification/CustomNotification"));
-var _CustomRadio = _interopRequireDefault(require("./components/oa-component-radio/CustomRadio"));
-var _SpacingScales = _interopRequireDefault(require("./components/oa-component-spacingScales/SpacingScales"));
+var _CustomRadio = _interopRequireWildcard(require("./components/oa-component-radio/CustomRadio"));
+var _CustomSelect = _interopRequireDefault(require("./components/oa-component-select/CustomSelect"));
 var _CustomTable = _interopRequireDefault(require("./components/oa-component-table/CustomTable"));
 var _CustomTabs = _interopRequireDefault(require("./components/oa-component-tabs/CustomTabs"));
 var _CustomTag = _interopRequireDefault(require("./components/oa-component-tag/CustomTag"));
@@ -296,6 +314,7 @@ var _CustomToggle = _interopRequireDefault(require("./components/oa-component-to
 var _ElevationDemo = _interopRequireDefault(require("./components/oa-component-demo-elevation/ElevationDemo"));
 var _TextArea = _interopRequireDefault(require("./components/oa-component-textarea/TextArea"));
 var _Typography = _interopRequireWildcard(require("./components/oa-component-typography/Typography"));
+var _SpacingScales = _interopRequireDefault(require("./components/oa-component-demo-spacing/SpacingScales"));
 var _BorderRadius = _interopRequireDefault(require("./global-css/BorderRadius"));
 var _ColorVariables = _interopRequireDefault(require("./global-css/ColorVariables"));
 var _Elevation = _interopRequireDefault(require("./global-css/Elevation"));

package/build/widgets/oa-widget-close-claim/CloseClaimWidget.js

@@ -13,6 +13,7 @@ var _CustomRadio = _interopRequireDefault(require("../../components/oa-component
 var _styles = require("./styles");
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
 const _excluded = ["visible", "onCancel", "onConfirm", "fraudReasons", "closingClaimReasons", "serviceRequestData", "data-test"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -98,17 +99,14 @@ function CloseClaimWidget(_ref) {
     labelCol: {
       span: 24
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+  }, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
     placeholder: "Select",
-    style: {
-      minHeight: '48px'
-    },
-    "data-test": dataTest ? "".concat(dataTest, "--rejection-reason-select") : undefined
-  }, closingClaimReasons === null || closingClaimReasons === void 0 ? void 0 : closingClaimReasons.map(row => /*#__PURE__*/_react.default.createElement(Option, {
-    key: row.key,
-    value: row.key,
-    "data-test": dataTest ? "".concat(dataTest, "--rejection-reason-(").concat(row.value, ")") : undefined
-  }, row.value)))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    "data-test": dataTest ? "".concat(dataTest, "--rejection-reason") : undefined,
+    options: closingClaimReasons === null || closingClaimReasons === void 0 ? void 0 : closingClaimReasons.map(row => ({
+      value: row.key,
+      label: row.value
+    }))
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
     name: "isCustomerFraudCase",
     rules: [{
       required: true,
@@ -147,19 +145,19 @@ function CloseClaimWidget(_ref) {
     labelCol: {
       span: 24
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+  }, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
     mode: "multiple",
     placeholder: "Select",
-    "data-test": dataTest ? "".concat(dataTest, "--fraud-reason-select") : undefined
-  }, /*#__PURE__*/_react.default.createElement(Option, {
-    value: true,
-    disabled: true,
-    "data-test": dataTest ? "".concat(dataTest, "--fraud-reason-placeholder") : undefined
-  }, "Select one or more..."), fraudReasons.map(row => /*#__PURE__*/_react.default.createElement(Option, {
-    key: row.key,
-    value: row.key,
-    "data-test": dataTest ? "".concat(dataTest, "--fraud-reason-(").concat(row.value, ")") : undefined
-  }, row.value)))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    "data-test": dataTest ? "".concat(dataTest, "--fraud-reason") : undefined,
+    options: [{
+      value: 'placeholder',
+      label: 'Select one or more...',
+      disabled: true
+    }, ...fraudReasons.map(row => ({
+      value: row.key,
+      label: row.value
+    }))]
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
     label: "Remarks",
     labelCol: {
       span: 24

package/build/widgets/oa-widget-close-claim/styles.js

@@ -10,5 +10,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const AsideContainer = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  h1 {\n    padding: 0 0 10px;\n    margin: 0;\n    color: var(--color-primary-content);\n  }\n\n  small {\n    padding: 0 0 32px;\n    margin: 0;\n    display: block;\n    color: var(--color-primary-content);\n  }\n\n  .ant-radio-group {\n    display: flex;\n  }\n\n  .ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {\n    position: absolute;\n    right:0;\n    color: var(--color-negative);\n    padding: 0;\n  }\n  .ant-form-item {\n    margin-bottom: 36px;\n  }\n\n  textarea {\n    min-height: 108px;\n    resize: none;\n    border-radius: 4px;\n    padding: 12px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n  ::-ms-input-placeholder { \n    color: var(--color-placeholder-text);\n  }\n  .type-r1-400 {\n    color: var(--color-negative);\n  }\n  .ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {\n    border-start-start-radius: 0px;\n  }\n  .ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {\n    border-start-end-radius: 0px;\n  }\n  ::placeholder,.ant-select-selection-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  .ant-select:not(.ant-select-customize-input) .ant-select-selector{\n    border: 1px solid var(--color-placeholder-text);\n  }\n\n  .ant-form-item .ant-form-item-label {\n    padding: 0;\n  }\n\n  label {\n    padding: 0 0 4px;\n    height: auto !important;\n    color: var(--color-primary-content) !important;\n  }\n\n  .ant-select-selector {\n    min-height: 48px;\n    height: 100%;\n  }\n\n  form .ant-radio-wrapper {\n    width: 140px;\n  }\n"])));
+const AsideContainer = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  h1 {\n    padding: 0 0 10px;\n    margin: 0;\n    color: var(--color-primary-content);\n  }\n\n  small {\n    padding: 0 0 32px;\n    margin: 0;\n    display: block;\n    color: var(--color-primary-content);\n  }\n\n  .ant-radio-group {\n    display: flex;\n  }\n\n  .ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {\n    position: absolute;\n    right:0;\n    color: var(--color-negative);\n    padding: 0;\n  }\n  .ant-form-item {\n    margin-bottom: 36px;\n  }\n\n  textarea {\n    min-height: 108px;\n    resize: none;\n    border-radius: 4px;\n    padding: 12px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n  ::-ms-input-placeholder { \n    color: var(--color-placeholder-text);\n  }\n  .type-r1-400 {\n    color: var(--color-negative);\n  }\n\n  .ant-form-item .ant-form-item-label {\n    padding: 0;\n  }\n\n  label {\n    padding: 0 0 4px;\n    height: auto !important;\n    color: var(--color-primary-content) !important;\n  }\n\n  form .ant-radio-wrapper {\n    width: 140px;\n  }\n"])));
 exports.AsideContainer = AsideContainer;

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -55,7 +55,7 @@ function NotesWidget(_ref) {
       if (!disabled && index === 0) {
         return /*#__PURE__*/_react.default.createElement(_antd.Input, {
           "data-test": dataTest,
-          size: "small",
+          size: "medium",
           value: noteInputValue,
           onChange: event => setNoteInputValue(event.target.value),
           onBlur: handleBlur,
@@ -79,10 +79,8 @@ function NotesWidget(_ref) {
     dataSource: mutatedRecords,
     pagination: false,
     style: {
-      /*
-      If the component has no pre-existing notes and it is disabled,
-      we show a message instead of a table
-      */
+      border: '1px solid var(--color-divider)',
+      borderRadius: '4px',
       display: !(records.length > 0) && disabled ? 'none' : undefined
     },
     size: "small"

package/build/widgets/oa-widget-notes/styles.js

@@ -10,5 +10,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"])));
+const NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  input{\n    height: 30px;\n  }\n"])));
 exports.NoNotesMessage = NoNotesMessage;

package/build/widgets/oa-widget-upload-download/UploadDownloadWidget.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
 var _nanoid = require("nanoid");
-var _delete = _interopRequireDefault(require("../../images/delete.svg"));
+var _CustomIcon = require("../../components/oa-component-icons/CustomIcon");
 var _styles = require("./styles");
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
@@ -106,10 +106,7 @@ function UploadDownloadWidget(_ref) {
       "data-test": dataTest ? "".concat(dataTest, "--delete-button-").concat(index) : undefined,
       iconConfig: {
         position: 'left',
-        icon: /*#__PURE__*/_react.default.createElement("img", {
-          src: _delete.default,
-          alt: "img"
-        })
+        icon: /*#__PURE__*/_react.default.createElement(_CustomIcon.DeleteIcon, null)
       },
       onClick: (_uploadedDocument$onD2 = uploadedDocument.onDelete) !== null && _uploadedDocument$onD2 !== void 0 ? _uploadedDocument$onD2 : () => {},
       type: "danger-text-only"

package/build/widgets/oa-widget-upload-download/styles.js

@@ -9,7 +9,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 StyledSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  .anticon-delete {\n    margin: 0 0 0 4px;\n  }\n  .text-container img:hover{\n    opacity: 0.4;\n  }\n  .ant-btn-link{\n    display: flex;\n    padding: 0!important;\n    height: auto !important;\n    align-items: center;\n  }\n\n  .ant-btn >.anticon+span {\n    margin-inline-start: 4px;\n  }\n"])));
+const StyledSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 4px;\n\n  .text-container img:hover{\n    opacity: 0.4;\n  }\n  .ant-btn-link{\n    display: flex;\n    padding: 0!important;\n    height: auto !important;\n    align-items: center;\n  }\n\n  .ant-btn >.anticon+span {\n    margin-inline-start: 4px;\n  }\n"])));
 exports.StyledSection = StyledSection;
 const EllipsisLabel = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  \n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 102px;\n"])));
 exports.EllipsisLabel = EllipsisLabel;

package/build/widgets/oa-widget-view-history/ViewHistoryWidget.js

@@ -89,16 +89,18 @@ function ViewHistoryWidget(_ref) {
     placement: "right",
     title: "VIEW HISTORY",
     width: "860"
-  }, props), /*#__PURE__*/_react.default.createElement(_styles.ViewHistoryPara, {
-    className: "type-b1-400"
+  }, props), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-b1-400"
   }, name ? "".concat(name, ": ") : null, "Current File"), /*#__PURE__*/_react.default.createElement(_styles.TableContainer, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
     columns: columns,
     dataSource: currentDocument !== null && currentDocument !== void 0 && (_currentDocument$docD = currentDocument.docDetails) !== null && _currentDocument$docD !== void 0 && (_currentDocument$docD = _currentDocument$docD.uploadedDocuments) !== null && _currentDocument$docD !== void 0 && (_currentDocument$docD = _currentDocument$docD[0]) !== null && _currentDocument$docD !== void 0 && _currentDocument$docD.name && currentDocument !== null && currentDocument !== void 0 && (_currentDocument$docD2 = currentDocument.docDetails) !== null && _currentDocument$docD2 !== void 0 && (_currentDocument$docD2 = _currentDocument$docD2.uploadedDocuments) !== null && _currentDocument$docD2 !== void 0 && (_currentDocument$docD2 = _currentDocument$docD2[0]) !== null && _currentDocument$docD2 !== void 0 && _currentDocument$docD2.onDownload ? [currentDocument] : [],
     rowKey: "key",
     size: "middle",
     pagination: false
-  })), /*#__PURE__*/_react.default.createElement(_styles.ViewHistoryPara, {
-    className: "type-b1-400"
+  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-b1-400"
   }, "History"), /*#__PURE__*/_react.default.createElement(_styles.TableContainer, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
     columns: columns,
     dataSource: copyOfPreviousDocuments,

package/build/widgets/oa-widget-view-history/styles.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ViewHistoryPara = exports.TableContainer = void 0;
+exports.default = exports.TableContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
+var _templateObject;
 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) } })); }
 var _default = {};
 exports.default = _default;
-const TableContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px 0 36px;\n"])));
-exports.TableContainer = TableContainer;
-const ViewHistoryPara = _styledComponents.default.h3(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: var(--color-primary-content);\n"])));
-exports.ViewHistoryPara = ViewHistoryPara;
+const TableContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px 0 32px;\n"])));
+exports.TableContainer = TableContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.63",
+  "version": "0.17.64",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",