oa-componentbook 0.17.61 → 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-button/CustomButton.js

@@ -29,9 +29,10 @@ function CustomButton(_ref) {
       'data-test': dataTest
     } = _ref,
     domProps = _objectWithoutProperties(_ref, _excluded);
-  const buttonTypo = (0, _styles.getButtonTypography)(size);
+  const buttonTypography = (0, _styles.getButtonTypography)(size);
+  const iconSize = (0, _styles.getIconSize)(size);
   return /*#__PURE__*/_react.default.createElement(_styles.ColoredStyledButton, _extends({
-    className: "".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " ").concat(type.replace('danger-', '') === 'text-only' ? 'text-only-size' : size, " ").concat(className),
+    className: "".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " ").concat(type.replace('danger-', '') === 'text-only' ? "".concat(size, "-text-only") : size, " ").concat(className),
     disabled: disabled,
     onClick: disabled ? null : onClick,
     type: htmlType,
@@ -39,9 +40,13 @@ function CustomButton(_ref) {
     "data-test": dataTest
   }, domProps), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-container"
-  }, iconConfig.position === 'left' && iconConfig.icon, label && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: buttonTypo
-  }, label), iconConfig.position === 'right' && iconConfig.icon));
+  }, iconConfig.position === 'left' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: iconSize
+  }), label && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: buttonTypography
+  }, label), iconConfig.position === 'right' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: iconSize
+  })));
 }
 CustomButton.propTypes = {
   className: _propTypes.default.string,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColoredStyledButton = void 0;
 exports.getButtonTypography = getButtonTypography;
+exports.getIconSize = getIconSize;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -12,7 +13,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _default = {};
 exports.default = _default;
 const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px; \n    text-align: left;\n  }\n"])));
-const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 30px;\n    min-width: 80px;\n    padding: 10px 16px;\n  }\n\n  &.medium {\n    height: 36px;\n    min-width: 100px;\n    padding: 10px 16px;\n  }\n\n  &.large {\n    height: 48px;\n    min-width: 136px;\n    padding: 10px 24px;\n  }\n\n  &.text-only-size {\n    height: auto;\n    padding: 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.secondary {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: transparent;\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    color: var(--color-negative);\n    border: 1px solid var(--color-negative);\n    background: var(--color-primary-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-hover-negative);\n    border: 1px solid var(--color-hover-negative);\n    background: var(--color-primary-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: transparent;\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: transparent;\n  }\n"])));
+const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 30px;\n    min-width: 80px;\n    padding: 10px 16px;\n  }\n\n  &.medium {\n    height: 36px;\n    min-width: 100px;\n    padding: 10px 16px;\n  }\n\n  &.large {\n    height: 48px;\n    min-width: 136px;\n    padding: 10px 24px;\n  }\n\n  &.medium-text-only,\n  &.small-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 4px 0;\n  }\n\n  &.large-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 8px 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.secondary {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: transparent;\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: transparent;\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    background: transparent;\n    border: 1px solid var(--color-negative);\n    color: var(--color-negative);\n  }\n  &.danger-secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-hover-negative);\n    color: var(--color-hover-negative);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: transparent;\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: transparent;\n  }\n"])));
 exports.ColoredStyledButton = ColoredStyledButton;
 function getButtonTypography(size) {
   switch (size) {
@@ -25,4 +26,16 @@ function getButtonTypography(size) {
     default:
       return 'type-button-500';
   }
+}
+function getIconSize(size) {
+  switch (size) {
+    case 'large':
+      return 24;
+    case 'small':
+      return 16;
+    case 'medium':
+      return 20;
+    default:
+      return 20;
+  }
 }

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

@@ -23,7 +23,8 @@ const getCheckboxTheme = () => ({
     colorPrimary: _ColorVariablesMap.default['--color-primary'],
     colorBgContainerDisabled: _ColorVariablesMap.default['--color-secondary-background'],
     colorBorder: _ColorVariablesMap.default['--color-disabled-button'],
-    borderRadiusSM: '2px'
+    borderRadiusSM: '2px',
+    paddingXS: '12px'
   }
 });
 exports.getCheckboxTheme = getCheckboxTheme;

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-icons/CustomIcon.js

@@ -13,7 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = _interopRequireDefault(require("@ant-design/icons"));
 var _delete = _interopRequireDefault(require("../../images/delete.svg"));
 var _caution = _interopRequireDefault(require("../../images/caution.svg"));
-const _excluded = ["component", "componentProps", "size", "style"];
+var _SizedSvg = _interopRequireDefault(require("./SizedSvg"));
+const _excluded = ["alt", "color", "hoverColor", "size", "src", "style"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + 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); }
@@ -24,74 +25,58 @@ 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; }
-function SizedSvg(_ref) {
+function CustomIcon(_ref) {
   let {
-    alt,
-    size,
-    src
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("img", {
-    src: src,
-    alt: alt,
-    height: "".concat(size, "px"),
-    width: "".concat(size, "px")
-  });
-}
-SizedSvg.propTypes = {
-  alt: _propTypes.default.string,
-  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  src: _propTypes.default.string.isRequired
-};
-SizedSvg.defaultProps = {
-  alt: 'random icon',
-  size: '20'
-};
-function CustomIcon(_ref2) {
-  let {
-      component: _component,
-      componentProps,
+      alt,
+      color,
+      hoverColor,
       size,
+      src,
       style
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_icons.default, _extends({
     style: _objectSpread({
       height: "".concat(size, "px"),
       width: "".concat(size, "px")
     }, style),
-    component: () => _component(_objectSpread({
-      size
-    }, componentProps))
+    component:
+    // We need to give an uninstantiated component
+    () => (0, _SizedSvg.default)({
+      alt,
+      color,
+      hoverColor,
+      size,
+      src
+    })
   }, props));
 }
 CustomIcon.propTypes = {
-  component: _propTypes.default.node.isRequired,
-  componentProps: _propTypes.default.object,
+  alt: _propTypes.default.string,
+  color: _propTypes.default.string,
+  hoverColor: _propTypes.default.string,
   size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  src: _propTypes.default.string.isRequired,
   style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]))
 };
 CustomIcon.defaultProps = {
-  componentProps: {},
+  alt: '',
+  color: null,
+  hoverColor: null,
   size: '20',
   style: {}
 };
-function DeleteIcon(_ref3) {
-  let props = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
+function DeleteIcon(_ref2) {
+  let props = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return /*#__PURE__*/_react.default.createElement(CustomIcon, _extends({
-    component: SizedSvg,
-    componentProps: {
-      alt: 'Delete icon.',
-      src: _delete.default
-    }
+    alt: "Delete icon.",
+    src: _delete.default
   }, props));
 }
-function WarningIcon(_ref4) {
-  let props = Object.assign({}, (_objectDestructuringEmpty(_ref4), _ref4));
+function WarningIcon(_ref3) {
+  let props = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
   return /*#__PURE__*/_react.default.createElement(CustomIcon, _extends({
-    component: SizedSvg,
-    componentProps: {
-      alt: 'Warning icon.',
-      src: _caution.default
-    }
+    alt: "Warning icon.",
+    src: _caution.default
   }, props));
 }

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SizedSvg;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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) } })); }
+function SizedSvg(_ref) {
+  var _ref2;
+  let {
+    alt,
+    color,
+    hoverColor,
+    size,
+    src
+  } = _ref;
+  const Img = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /* color: ", ";\n    fill: currentColor;\n\n    &:hover {\n      color: ", ";\n      fill: currentColor;\n    } */\n  "])), color !== null && color !== void 0 ? color : 'inherit', (_ref2 = hoverColor !== null && hoverColor !== void 0 ? hoverColor : color) !== null && _ref2 !== void 0 ? _ref2 : 'inherit');
+  return /*#__PURE__*/_react.default.createElement(Img, {
+    alt: alt,
+    src: src,
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
+  });
+}
+SizedSvg.propTypes = {
+  alt: _propTypes.default.string,
+  color: _propTypes.default.string,
+  hoverColor: _propTypes.default.string,
+  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  src: _propTypes.default.string.isRequired
+};
+SizedSvg.defaultProps = {
+  alt: 'random icon',
+  color: null,
+  hoverColor: null,
+  size: '20'
+};

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

@@ -21,7 +21,7 @@ function CustomInfo(_ref) {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
     $color: color
-  }, iconConfig.position === 'left' && (!title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && (!title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
     size: 20,
     style: {
       alignSelf: 'start'
@@ -42,10 +42,11 @@ function CustomInfo(_ref) {
     }
   }) : /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
     size: 24,
+    color: 'red',
     style: {
       alignSelf: 'start'
     }
-  })), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
+  }))), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
 }
 CustomInfo.propTypes = {
   buttonConfig: _propTypes.default.shape({
@@ -59,7 +60,7 @@ CustomInfo.propTypes = {
     onClick: _propTypes.default.func,
     type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
   }),
-  color: _propTypes.default.oneOf([['primary', 'background-dark', 'background-info', 'primary-hover', 'positive', 'background-positive', 'warning', 'background-warning', 'negative', 'background-negative', 'primary-content', 'secondary-content', 'placeholder-text', 'disabled-button', 'divider', 'secondary-background', 'primary-background', 'background-overlay', 'tags']]),
+  color: _propTypes.default.oneOf(['primary', 'background-dark', 'background-info', 'primary-hover', 'positive', 'background-positive', 'warning', 'background-warning', 'negative', 'background-negative', 'primary-content', 'secondary-content', 'placeholder-text', 'disabled-button', 'divider', 'secondary-background', 'primary-background', 'background-overlay', 'tags']),
   description: _propTypes.default.string,
   iconConfig: _propTypes.default.shape({
     icon: _propTypes.default.node,

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

@@ -14,5 +14,5 @@ const ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObje
 exports.ColFlex = ColFlex;
 const InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
   as: 'section'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px;\n  align-items: center;\n  border-radius: 8px;\n  gap: 8px;\n  background-color: var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  };\n"])), props => props.$color);
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  \n  button {\n    margin-left: 8px;\n  };\n"])), props => props.$color);
 exports.InfoContainer = InfoContainer;

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