oa-componentbook 0.17.9 → 0.17.11

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

@@ -31,7 +31,8 @@ function CustomButton(_ref) {
     className: "\n        ".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " \n        ").concat(className, "\n      "),
     disabled: disabled,
     onClick: disabled ? null : onClick,
-    type: "button"
+    type: "button",
+    size: size
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "text-container"
   }, iconConfig.position === 'left' && iconConfig.icon, /*#__PURE__*/_react.default.createElement(_Typography.default, {

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

@@ -17,22 +17,22 @@ const getSizeStyles = size => {
   switch (size) {
     case 'small':
       {
-        return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        min-width: 80px;\n        padding: 10px 16px;\n      "])));
+        return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: 1.875rem;\n        min-width: 80px;\n        padding: 0.625rem 1rem;\n      "])));
       }
     case 'medium':
       {
-        return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        min-width: 100px;\n        padding: 10px 16px;   \n      "])));
+        return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        height: 2.25rem;\n        min-width: 100px;\n        padding: 0.625rem 1rem;\n      "])));
       }
     case 'large':
       {
-        return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        min-width: 136px;\n        padding: 10px 24px;\n      "])));
+        return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        height: 3rem;\n        min-width: 136px;\n        padding: 0.625rem 1.5rem;\n      "])));
       }
     default:
       {
-        return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        min-width: 100px;\n        padding: 10px 16px;   \n      "])));
+        return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        height: 2.25rem;\n        min-width: 100px;\n        padding: 0.625rem 1rem;\n      "])));
       }
   }
 };
-const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px; \n  }\n"])));
+const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _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  }\n"])));
 const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n  ", "\n\n  &.primary {\n    background: var(--color-blue-CTA);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-white-background);\n  }\n  &.primary:hover {\n    background: var(--color-blue-hover);\n    border: 1px solid var(--color-blue-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-grey2-disabled);\n    cursor: not-allowed;\n    color: var(--color-white-background);\n  }\n\n  &.secondary {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-blue-CTA);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-blue-hover);\n    color: var(--color-blue-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-grey2-disabled);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n\n  &.text-only {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-blue-CTA);\n  }\n  &.text-only:hover {\n    color: var(--color-blue-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-red-error);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-error);\n  }\n  &.danger-primary:hover {\n    background: var(--color-red-hover);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-hover);\n  }\n\n  &.danger-secondary {\n    color: var(--color-red-error);\n    border: 1px solid var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-red-hover);\n    border: 1px solid var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n"])), props => getSizeStyles(props.size));
 exports.ColoredStyledButton = ColoredStyledButton;

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

@@ -34,10 +34,9 @@ function CustomDrawer(_ref) {
   we attempt to close the drawer.
   */
   const handleClose = () => {
+    // Call to `onClose` callback received from props.
     onClose();
-    // console.log('`handleClose` callback of CustomDrawer component called.');
   };
-
   const drawerTitle = /*#__PURE__*/_react.default.createElement(_styles.CustomDrawerTitle, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-sl1-700"
   }, title), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
@@ -52,7 +51,7 @@ function CustomDrawer(_ref) {
     height: height,
     width: width,
     footer: buttonConfig && /*#__PURE__*/_react.default.createElement(_styles.DrawerFooter, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-      key: button,
+      key: button.label,
       label: button.label,
       onClick: button.callback,
       size: "large",
@@ -67,8 +66,8 @@ CustomDrawer.propTypes = {
     label: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['secondary', 'primary']).isRequired
   })),
-  children: _propTypes.default.node.isRequired,
-  onClose: _propTypes.default.func.isRequired,
+  children: _propTypes.default.node,
+  onClose: _propTypes.default.func,
   open: _propTypes.default.bool,
   placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
   title: _propTypes.default.node,
@@ -77,6 +76,8 @@ CustomDrawer.propTypes = {
 };
 CustomDrawer.defaultProps = {
   buttonConfig: null,
+  children: null,
+  onClose: () => {},
   open: false,
   placement: 'right',
   title: null,

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

@@ -36,11 +36,15 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   const handleClick = (0, _react.useCallback)(() => {
     // console.log('`handleClick` in Notification component');
-    onClick(); // Calling the provided `onClick` callback.
+
+    // Call to `onClick` callback received from props.
+    onClick();
   }, [onClick]);
   const handleClose = (0, _react.useCallback)(() => {
     // console.log('`handleClose` in Notification component');
-    onClose(); // Calling the provided `onClose` callback.
+
+    // Call to `onClose` callback received from props.
+    onClose();
   }, [onClose]);
   const openNotification = (0, _react.useCallback)(_ref2 => {
     let {

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

@@ -1,56 +1,66 @@
 "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 = void 0;
-require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 require("antd/dist/reset.css");
+const _excluded = ["data", "defaultActiveKey", "disabled", "style", "tabPosition", "type"]; // Keeping a static import in this component so that styling is picked up appropriately
 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); } // Keeping a static import in this component so that styling is picked up appropriately
-const {
-  TabPane
-} = _antd.Tabs;
+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 CustomTabs(_ref) {
   let {
-    data,
-    defaultActiveKey,
-    disabled,
-    style,
-    tabPosition,
-    type
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
+      data,
+      defaultActiveKey,
+      disabled,
+      style,
+      tabPosition,
+      type
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const items = data.tabs.map(tab => ({
+    children: tab.body,
+    disabled: tab.disabled,
+    key: tab.key,
+    label: tab.label
+  }));
+  return /*#__PURE__*/_react.default.createElement(_antd.Tabs, _extends({
     defaultActiveKey: defaultActiveKey,
+    disabled: true,
+    items: items,
     style: _objectSpread({}, style),
     tabPosition: tabPosition,
     type: type
-  }, data.tabs.length > 0 && data.tabs.map((item, i) => /*#__PURE__*/_react.default.createElement(TabPane, {
-    disabled: item.disabled,
-    key: item.key,
-    tab: item.label
-  }, item.body))));
+  }, antDesignProps));
 }
 CustomTabs.propTypes = {
   data: _propTypes.default.shape({
     tabs: _propTypes.default.arrayOf({
+      body: _propTypes.default.node.isRequired,
+      disabled: _propTypes.default.bool,
       key: _propTypes.default.string.isRequired,
-      label: _propTypes.default.string.isRequired,
-      body: _propTypes.default.string.isRequired,
-      disabled: _propTypes.default.bool
+      label: _propTypes.default.string.isRequired
     }).isRequired
   }),
   defaultActiveKey: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-  type: _propTypes.default.oneOf(['line', 'card', 'editable-card']),
+  type: _propTypes.default.oneOf(['line', 'card'
+  // 'editable-card',
+  ]),
+
   style: _propTypes.default.objectOf(_propTypes.default.string)
 };
 CustomTabs.defaultProps = {

package/build/components/oa-component-tag/{Tag.js → CustomTag.js}

@@ -6,27 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Tag(_ref) {
+function CustomTag(_ref) {
   let {
-    text,
+    label,
     type,
     visible
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, {
     type: type,
     visible: visible
-  }, /*#__PURE__*/_react.default.createElement("span", null, text));
+  }, /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b3-400"
+  }, label)));
 }
-Tag.propTypes = {
-  text: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['success', 'pending', 'failed', 'other']),
+CustomTag.propTypes = {
+  label: _propTypes.default.string.isRequired,
+  type: _propTypes.default.oneOf(['success', 'pending', 'failed']),
   visible: _propTypes.default.bool
 };
-Tag.defaultProps = {
-  type: 'other',
+CustomTag.defaultProps = {
+  type: '',
   visible: true
 };
-var _default = Tag;
+var _default = CustomTag;
 exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledTag = void 0;
+exports.default = exports.StyledTag = exports.CenteredTextContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const getColorStyles = type => {
@@ -32,11 +32,13 @@ const getColorStyles = type => {
   }
   return {
     backgroundColor: '#CCCCCC',
-    borderColor: '#CCCCCC',
+    borderColor: 'var(--color-primarygrey-text)',
     textColor: 'var(--color-primarygrey-text)'
   };
 };
 var _default = {};
 exports.default = _default;
-const StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 4px 12px;\n  color: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n  visibility: ", ";\n"])), props => getColorStyles(props.type).textColor, props => getColorStyles(props.type).backgroundColor, props => getColorStyles(props.type).borderColor, props => props.visible ? 'visible' : 'hidden');
-exports.StyledTag = StyledTag;
+const StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  \n  padding: 4px 12px;\n  \n  color: ", ";\n  \n  background-color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: 4px;\n  \n  visibility: ", ";\n"])), props => getColorStyles(props.type).textColor, props => getColorStyles(props.type).backgroundColor, props => getColorStyles(props.type).borderColor, props => props.visible ? 'visible' : 'hidden');
+exports.StyledTag = StyledTag;
+const CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+exports.CenteredTextContainer = CenteredTextContainer;

package/build/components/oa-component-toggle/CustomToggle.js

@@ -1,44 +1,94 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
 var _styles = require("./styles");
+const _excluded = ["defaultChecked", "disabled", "onChange", "onClick", "checkedLabel", "uncheckedLabel", "size"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Import the styles from the separate file
-
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _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 CustomToggle(_ref) {
   let {
-    disabled,
-    onChange,
-    checkedLabel,
-    uncheckedLabel,
-    type,
-    size
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledSwitch, {
+      defaultChecked,
+      disabled,
+      onChange,
+      onClick,
+      checkedLabel,
+      uncheckedLabel,
+      size
+
+      /*
+      Since we are allowing all ant design props to be passed,
+      a state managed `checked` prop can be passed as it also present
+      in ant design.
+      */
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  // Styling config is stored using a ref to preserve it across re-renders.
+  const SwitchConfig = (0, _react.useRef)((0, _styles.getSwitchConfig)({
+    disabled
+  }));
+  const handleChange = value => {
+    // console.log(value);
+
+    // Call to `onChange` callback received from props.
+    onChange(value);
+  };
+  const handleClick = value => {
+    // console.log(value);
+
+    // Call to `onClick` callback received from props.
+    onClick(value);
+  };
+  (0, _react.useEffect)(() => {
+    SwitchConfig.current = (0, _styles.getSwitchConfig)({
+      disabled
+    });
+  }, [disabled]);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Switch: SwitchConfig.current
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, _extends({
     checkedChildren: checkedLabel,
     unCheckedChildren: uncheckedLabel,
     disabled: disabled,
-    onChange: disabled ? null : onChange,
-    defaultChecked: true
-  });
+    onChange: disabled ? null : handleChange,
+    onClick: disabled ? null : handleClick,
+    defaultChecked: defaultChecked,
+    size: size === 'large' ? 'default' : size
+  }, antDesignProps)));
 }
 CustomToggle.propTypes = {
-  checkedLabel: _propTypes.default.string,
+  defaultChecked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  onChange: _propTypes.default.func.isRequired,
+  onChange: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  checkedLabel: _propTypes.default.string,
   uncheckedLabel: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['large', 'small']).isRequired,
-  type: _propTypes.default.oneOf(['primary', 'secondary']).isRequired
+  size: _propTypes.default.oneOf(['large', 'small'])
 };
 CustomToggle.defaultProps = {
+  defaultChecked: false,
+  disabled: false,
+  onChange: value => value,
+  onClick: value => value,
   checkedLabel: null,
   uncheckedLabel: null,
-  disabled: false
+  size: 'large'
 };
 var _default = CustomToggle;
 exports.default = _default;

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

@@ -3,14 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledSwitch = void 0;
+exports.getSwitchConfig = exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _templateObject; // ToggleStyles.js
 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) } })); }
+// ToggleStyles.js
 var _default = {};
 exports.default = _default;
-const StyledSwitch = (0, _styledComponents.default)(_antd.Switch)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    // Customize the track color based on the type prop\n    background-color: ", "; // Secondary color\n    \n    display: flex;\n\n    // Customize the handle (knob) color based on the type prop\n    .ant-switch-handle::before {\n      /* height: 100%; */\n    }\n\n    // Customize the track size based on the size prop\n    height: ", ";\n    width: ", "\n    // Customize other styles as needed\n    // For example, padding, border-radius, etc.\n    // Example:\n    // padding: 2px;\n    // border-radius: 4px;\n  }\n"])), props => props.type === 'primary' ? '#00875A' // Primary color
-: '#FF5733', props => props.size === 'large' ? '32px' : '20px', props => props.checkedLabel === null && props.uncheckedLabel === null && (props.size === 'large' ? '56px' : '35px'));
-exports.StyledSwitch = StyledSwitch;
+const getSwitchConfig = _ref => {
+  let {
+    disabled
+  } = _ref;
+  return {
+    // trackPadding: '2px',
+    // handleSizeSM: '1rem',
+    // handleSize: '28',
+    // trackHeightSM: '1.25rem',
+    // trackHeight: '2rem',
+    // trackMinWidthSM: '2.1875rem',
+    // trackMinWidth: '3.5rem',
+
+    // Toggle handle color.
+    handleBg: "var(".concat(disabled ? '--color-secondarygrey-text' : '--color-white-background', ")"),
+    // Toggle labels color.
+    colorText: "var(".concat(disabled ? '--color-secondarygrey-text' : '--color-white-background', ")"),
+    // Toggle on, background color
+    colorPrimary: "var(".concat(disabled ? '--color-grey2-disabled' : '--color-blue-CTA', ")"),
+    // Toggle on, hover background color
+    colorPrimaryHover: 'var(--color-blue-hover)',
+    // Toggle off, hover background color.
+    colorTextTertiary: 'var(--color-blue-hover)',
+    // Toggle off, background color.
+    colorTextQuaternary: "var(".concat(disabled ? '--color-grey2-disabled' : '--color-secondarygrey-text', ")"),
+    // Removes lightening effect on disable.
+    opacityLoading: 1
+  };
+};
+exports.getSwitchConfig = getSwitchConfig;

package/build/index.js

@@ -101,12 +101,24 @@ Object.defineProperty(exports, "CustomTabs", {
     return _CustomTabs.default;
   }
 });
+Object.defineProperty(exports, "CustomTag", {
+  enumerable: true,
+  get: function get() {
+    return _CustomTag.default;
+  }
+});
 Object.defineProperty(exports, "CustomTimeline", {
   enumerable: true,
   get: function get() {
     return _CustomTimeline.default;
   }
 });
+Object.defineProperty(exports, "CustomToggle", {
+  enumerable: true,
+  get: function get() {
+    return _CustomToggle.default;
+  }
+});
 Object.defineProperty(exports, "KeyValueDataView", {
   enumerable: true,
   get: function get() {
@@ -149,24 +161,12 @@ Object.defineProperty(exports, "StageTimelineChild", {
     return _StageTimeline.StageTimelineChild;
   }
 });
-Object.defineProperty(exports, "Tag", {
-  enumerable: true,
-  get: function get() {
-    return _Tag.default;
-  }
-});
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
   get: function get() {
     return _TextArea.default;
   }
 });
-Object.defineProperty(exports, "Toggle", {
-  enumerable: true,
-  get: function get() {
-    return _CustomToggle.default;
-  }
-});
 Object.defineProperty(exports, "TrackShipment", {
   enumerable: true,
   get: function get() {
@@ -211,7 +211,7 @@ var _SpacingScales = _interopRequireDefault(require("./components/oa-component-s
 var _CustomTable = _interopRequireDefault(require("./components/oa-component-table/CustomTable"));
 var _CustomTabs = _interopRequireDefault(require("./components/oa-component-tabs/CustomTabs"));
 var _TextArea = _interopRequireDefault(require("./components/oa-component-textarea/TextArea"));
-var _Tag = _interopRequireDefault(require("./components/oa-component-tag/Tag"));
+var _CustomTag = _interopRequireDefault(require("./components/oa-component-tag/CustomTag"));
 var _CustomTimeline = _interopRequireDefault(require("./components/oa-component-timeline/CustomTimeline"));
 var _CustomToggle = _interopRequireDefault(require("./components/oa-component-toggle/CustomToggle"));
 var _TrackShipment = _interopRequireDefault(require("./widgets/oa-widget-track-shipment/TrackShipment"));

package/build/widgets/oa-widget-approval/ApprovalWidget.js

@@ -13,34 +13,40 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _templateObject;
+/* eslint-disable react/prop-types */
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nparentDiv{\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 24px;\n  padding:0;\n}\n.col-7 {\n  grid-column: span 7;\n}\n\n.col-5 {\n    grid-column: span 5;\n}\n.col-5 a{\n  padding:0 !important;\n}\n.col-12 {\n  grid-column: span 12;\n}\n.ant-typography{\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px; \n      color: #212121;\n      padding: 0 0 10px;\n      display: block;\n    }\n    .ant-typography strong{\n      font-weight: 400;\n    }\n    a{\n      color: #014FC5 !important;\n      padding:10px 0 0 !important;\n      font-weight: 500 !important;\n      display: block;\n    }\n    .ant-typography-secondary{\n      color: #717171;\n      padding: 0 !important;\n    }\n    .ant-radio-group-outline{\n      display: flex;\n      justify-content: space-between;\n    }\n    section{\n      padding: 16px 0 0;\n    }\n    section span{\n      padding: 0 0 4px !important;\n      display: block;\n    }\n    textarea{\n      padding: 12px;\n      min-height: 88px;\n      resize: none;\n      border-radius: 4px;\n    }\n    radiofield label{\n      white-space: nowrap;\n    }\n    docdetailstag a{\n          white-space: nowrap;\n    }\n"])));
+const StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n.col-7 {\n  grid-column: span 7;\n}\n\n.col-5 {\n    grid-column: span 5;\n}\n.col-5 a{\n  padding:0 !important;\n}\n.col-12 {\n  grid-column: span 12;\n}\n.ant-typography{\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px; \n      color: #212121;\n      padding: 0 0 10px;\n      display: block;\n    }\n    .ant-typography strong{\n      font-weight: 400;\n    }\n    a{\n      color: #014FC5 !important;\n      padding:10px 0 0 !important;\n      font-weight: 500 !important;\n      display: block;\n    }\n    .ant-typography-secondary{\n      color: #717171;\n      padding: 0 !important;\n    }\n    .ant-radio-group-outline{\n      display: flex;\n      justify-content: space-between;\n    }\n    section{\n      padding: 16px 0 0;\n    }\n    section span{\n      padding: 0 0 4px !important;\n      display: block;\n    }\n    textarea{\n      padding: 12px;\n      min-height: 88px;\n      resize: none;\n      border-radius: 4px;\n    }\n    radiofield label{\n      white-space: nowrap;\n    }\n    docdetailstag a{\n          white-space: nowrap;\n    }\n    .container {\n      max-width: 1120px;\n      margin: 0 auto;\n      padding: 0 16px;\n    }\n    .container-fluid{\n        width: 100%;\n        padding: 0 16px;\n    }\n    .row {\n        display: flex;\n        flex-direction: column;\n    }\n    .gutter{\n        margin: 0 24px 0 0;\n    }\n    .row::after {\n        content: \"\";\n        clear: both;\n        display: table;\n    }\n    .col-xs-1 {\n      width: 8.33333%;\n    }\n    \n    .col-xs-2 {\n      width: 16.66667%;\n    }\n    \n    .col-xs-3 {\n      width: 25%;\n    }\n    \n    .col-xs-4 {\n      width: 33.33333%;\n    }\n    \n    .col-xs-5 {\n      width: 41.66667%;\n    }\n    \n    .col-xs-6 {\n      width: 50%;\n    }\n    \n    .col-xs-7 {\n      width: 58.33333%;\n    }\n    \n    .col-xs-8 {\n      width: 66.66667%;\n    }\n    \n    .col-xs-9 {\n      width: 75%;\n    }\n    \n    .col-xs-10 {\n      width: 83.33333%;\n    }\n    \n    .col-xs-11 {\n      width: 91.66667%;\n    }\n    \n    .col-xs-12 {\n      width: 100%;\n    }\n    @media (min-width: 768px) {\n        .row {\n        flex-direction: row;\n    }\n      .col-sm-1 {\n        width: 8.33333%;\n      }\n    \n      .col-sm-2 {\n        width: 16.66667%;\n      }\n    \n      .col-sm-3 {\n        width: 25%;\n      }\n    \n      .col-sm-4 {\n        width: 33.33333%;\n      }\n    \n      .col-sm-5 {\n        width: 41.66667%;\n      }\n    \n      .col-sm-6 {\n        width: 50%;\n      }\n      .col-sm-7 {\n        width: 58.33333%;\n      }\n      .col-sm-8 {\n        width: 66.66667%;\n      }\n      .col-sm-9 {\n        width: 75%;\n      }\n      .col-sm-10 {\n        width: 83.33333%;\n      }\n      .col-sm-11 {\n        width: 91.66667%;\n      }\n      .col-sm-12 {\n        width: 100%;\n      }\n    }\n    \n    @media (min-width: 768px) {\n      .col-md-1 {\n        width: 8.33333%;\n      }\n      .col-md-2 {\n        width: 16.66667%;\n      }\n      .col-md-3 {\n        width: 25%;\n      }\n      .col-md-4 {\n        width: 33.33333%;\n        float: left;\n      }\n    \n      .col-md-5 {\n        width: 41.66667%;\n      }\n    \n      .col-md-6 {\n        width: 50%;\n      }\n    \n      .col-md-7 {\n        width: 58.33333%;\n      }\n    \n      .col-md-8 {\n        width: 66.66667%;\n      }\n    \n      .col-md-9 {\n        width: 75%;\n      }\n    \n      .col-md-10 {\n        width: 83.33333%;\n      }\n      .col-md-11 {\n        width: 91.66667%;\n      }\n    \n      .col-md-12 {\n        width: 100%;\n      }\n    \n    }\n    /* Large Devices (desktops) */\n    @media (min-width: 992px) {\n        .gutter{\n            margin: 0 24px 0 0;\n        }\n      .col-lg-1 {\n        width: 8.33333%;\n      }\n      .col-lg-2 {\n        width: 16.66667%;\n      }\n      .col-lg-3 {\n        width: 25%;\n        float: left;\n      }\n      .col-lg-4 {\n        width: 33.33333%;\n        float: left;\n      }\n      .col-lg-5 {\n        width: 41.66667%;\n      }\n      .col-lg-6 {\n        width: 50%;\n      }\n      .col-lg-7 {\n        width: 58.33333%;\n      }\n      .col-lg-8 {\n        width: 66.66667%;\n      }\n      .col-lg-9 {\n        width: 75%;\n      }\n      .col-lg-10 {\n        width: 83.33333%;\n      }\n    \n      .col-lg-11 {\n        width: 91.66667%;\n      }\n    \n      .col-lg-12 {\n        width: 100%;\n      }\n    }\n    \n    @media (min-width: 1200px) {\n        .gutter{\n            margin: 0 32px 0 0;\n        }\n      .col-xl-1 {\n        width: 8.33333%;\n      }\n      \n    }\n    \n"])));
 const isUndefined = () => typeof testVar === 'undefined';
 function ApprovalWidget(_ref) {
   let {
-    data: {
-      title,
-      description,
-      key,
-      isFaq,
-      field,
-      remarks,
-      view,
-      docDetails,
-      divider
-    }
+    title,
+    description,
+    key,
+    layoutType,
+    field,
+    remarks,
+    view,
+    docDetails,
+    divider,
+    isFaq
   } = _ref;
   const [drawer, setDrawer] = (0, _react.useState)(false);
   const isDivider = isUndefined(divider) ? true : divider;
   return /*#__PURE__*/_react.default.createElement(StyledAside, {
     key: key
-  }, /*#__PURE__*/_react.default.createElement("parentDiv", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-7"
-  }, /*#__PURE__*/_react.default.createElement("parentdiv", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: isFaq ? 'col-12' : 'col-7'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-sm-12 col-md-7 col-lg-7 gutter"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: isFaq ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-8 col-lg-8 gutter'
   }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
     level: 4,
     strong: true
@@ -63,7 +69,7 @@ function ApprovalWidget(_ref) {
     },
     open: drawer
   }, view.description))), !isFaq && /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-5"
+    className: "col-sm-12 col-md-4 col-lg-4"
   }, docDetails ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Link, {
     level: 4,
     strong: true,
@@ -71,7 +77,7 @@ function ApprovalWidget(_ref) {
   }, docDetails.name && /*#__PURE__*/_react.default.createElement(_icons.DownloadOutlined, null), ' ', docDetails.name)) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
     level: 4
   }, "Not Uploaded"))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-5"
+    className: "col-sm-12 col-md-5 col-lg-5"
   }, field && /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
     options: field.options,
     onChange: field.onChange,
@@ -81,7 +87,7 @@ function ApprovalWidget(_ref) {
   }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
     onChange: remarks.onChange,
     value: remarks.value
-  })))), isDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
+  }))))), isDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
 }
 ApprovalWidget.propTypes = {
   data: _propTypes.default.shape({
@@ -116,6 +122,7 @@ ApprovalWidget.propTypes = {
 
 ApprovalWidget.defaultProps = {
   data: {
+    title: 'hello',
     description: '',
     // Provide a default value for description
     isFaq: false,

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

@@ -8,9 +8,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueDataViewStyles.js
 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 KeyValueGroups = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  \n  display: grid;\n  gap: 12px;\n  grid-template-columns: repeat(", " ,1fr);\n"])), props => props.columns);
+const KeyValueGroups = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  \n  display: flex;\n  gap: 32px;\n  grid-template-columns: repeat(", " ,1fr);\n"])), props => props.columns);
 exports.KeyValueGroups = KeyValueGroups;
-const KeyValueGroup = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 110px 1fr;\n  // This prevents the rows from taking up all the available space.\n  grid-auto-rows: min-content;\n  gap: 5px;\n\n  /* width: 100%; */\n"])));
+const KeyValueGroup = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 120px 1fr;\n  // This prevents the rows from taking up all the available space.\n  grid-auto-rows: min-content;\n  width: 33.33%;\n"])));
 exports.KeyValueGroup = KeyValueGroup;
 const StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--color-primarygrey-text);\n  font-weight: 400;\n"])));
 exports.StyledBold = StyledBold;

package/build/widgets/oa-widget-send-payment-link/SendPaymentLink.js

@@ -32,7 +32,7 @@ function SendPaymentLink(_ref) {
   } = _ref;
   const [form] = _antd.Form.useForm();
   const [selectedRadio, setSelectedRadio] = (0, _react.useState)(0);
-  const onChange = event => {
+  const onRadioChange = event => {
     setSelectedRadio(event.target.value);
 
     // Setting mobileNum and email to falsy values just in case the data is empty.
@@ -45,11 +45,21 @@ function SendPaymentLink(_ref) {
   const handleSubmit = () => {
     // Customize submit behavior over here.
 
-    // Call to `onSubmit` callback received from props.
-    onSubmit();
+    form.validateFields().then(formData => {
+      const modifiedFormData = _objectSpread(_objectSpread({}, formData), {}, {
+        label: options[selectedRadio].label,
+        value: options[selectedRadio].value
+      });
 
-    // Submitting the form.
-    form.submit();
+      /*
+      Call to `onSubmit` callback received from props.
+      Passing the form data up to the parent by putting it as an argument.
+      */
+      onSubmit(modifiedFormData);
+    });
+
+    // This resets the form upon submit.
+    form.resetFields();
   };
   const handleClose = () => {
     // Customize close behavior over here.
@@ -61,12 +71,12 @@ function SendPaymentLink(_ref) {
     closable: true,
     buttonConfig: [{
       label: 'Cancel',
-      onClick: handleClose,
+      callback: handleClose,
       type: 'secondary'
     }, {
       label: 'Send',
       // Calling submit on the form, if the Send button is clicked
-      onClick: handleSubmit,
+      callback: handleSubmit,
       type: 'primary'
     }],
     onClose: handleClose,
@@ -75,16 +85,17 @@ function SendPaymentLink(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-t2-700"
   }, "Send to:"), /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
-    onChange: onChange,
+    onChange: onRadioChange,
     value: selectedRadio
   }, /*#__PURE__*/_react.default.createElement(_styles.RadioGrid, null, options.map((option, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
     key: option.value
   }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    onChange: onRadioChange,
     label: option.label,
     value: idx
   })))))), /*#__PURE__*/_react.default.createElement(_antd.Form, {
     form: form,
-    initialValues: options[0].data,
+    initialValues: options[selectedRadio].data,
     layout: "vertical",
     onFinish: handleSubmit
     // `handleSubmit` (using the alias `onFinish`)

package/build/widgets/oa-widget-send-payment-link/usage-example.md

@@ -1,6 +1,10 @@
 ```jsx
-const onSubmit = ({ mobileNum, email }) => {
+const onSubmit = ({
+  email, label, mobileNum, value,
+}) => {
   // Use the mobile number and email obtained from the form over here.
+  console.log(`Contact person is '${label}'`);
+  console.log(`Code of contact person is '${value}`);
   console.log(`Phone Number is '${mobileNum}'`);
   console.log(`Email ID is '${email}'`);
 };
@@ -26,9 +30,20 @@ const sendPaymentProps = {
     ],
 };
 
-<SendPaymentLink
-    heading={sendPaymentProps.heading}
-    options={sendPaymentProps.options}
-    onSubmit={onSubmit}
-/>
+function App() {
+  const [open, setOpen] = useState(false);
+  
+  return (
+    <>
+      <CustomButton onClick={() => setOpen(true)}>
+
+      <SendPaymentLink
+          heading={sendPaymentProps.heading}
+          options={sendPaymentProps.options}
+          open={open}
+          onSubmit={onSubmit}
+      />
+    </>
+  )
+};
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.9",
+  "version": "0.17.11",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@storybook/addon-actions": "^7.4.3",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/cli": "^7.3.2",
@@ -39,7 +40,7 @@
     "@storybook/testing-library": "^0.2.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.14",
     "react-scripts": "^5.0.1",
     "storybook": "^7.3.2",
     "webpack": "^5.88.2",
@@ -85,7 +86,7 @@
         }
       ],
       "react/jsx-props-no-spreading": [
-        1, 
+        1,
         {
           "html": "enforce",
           "custom": "enforce",