oa-componentbook 0.7.0 → 0.8.0

package/build/components/ColorVariables.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+/*
+? Keep this at the top level of the app using any of these components.
+* Do not add any children to it because this element does NOT render any of its children
+
+* Instead, follow a syntax similar to this:
+<>
+<ColorVariables />
+<App />
+</>
+*/
+
+// TODO: Figure out a way to make this work with storybook.
+// Can be used to wrap the entire application, to make these styles available to every component
+const ColorVariables = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n:root {\n  --color-blue-CTA: #014FC5;\n  --color-blue-hover: #82A9E2;\n  --color-darkblue-background: #003264;\n  --color-lightblue-background: #DEF1FB;\n  --color-green-success: #00875A;\n  --color-lightgreen-success: #CCE7DE;\n  --color-yellow-warning: #FF991F;\n  --color-lightyellow-warning: #FFEBD2;\n  --color-red-error: #DE350B;\n  --color-red-hover: #E87254;\n  --color-lightred-error: #F8D7CE;\n  --color-primarygrey-text: #212121;\n  --color-secondarygrey-text: #717171;\n  --color-grey1-placeholder: #959595;\n  --color-grey2-disabled: #BFBFBF;\n  --color-grey3-disabled_divider: #E0E0E0;\n  --color-grey4-background: #F6F6F6;\n  --color-white-background: #FFFFFF;\n  --color-grey5-overlay: rgba(0, 0, 0, 0.7);\n  --color-sunyellow-tags: #F5C82D;\n}   \n"])));
+var _default = ColorVariables;
+exports.default = _default;

package/build/components/{oa-button/OACustomButton.js → oa-component-button/CustomButton.js}

@@ -11,19 +11,19 @@ require("core-js/modules/es.string.replace.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@ant-design/icons");
-var _Typography = _interopRequireWildcard(require("../Typography"));
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
 var _styles = _interopRequireDefault(require("./styles"));
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function OACustomButton(_ref) {
+function CustomButton(_ref) {
   let {
     className,
     disabled,
     onClick,
-    position,
+    iconPosition,
     size,
-    text,
+    label,
     type,
     typography
   } = _ref;
@@ -34,27 +34,27 @@ function OACustomButton(_ref) {
     type: "button"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "text-container"
-  }, position === 'left' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: typography
-  }, text), position === 'right' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null)));
+  }, label), iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null)));
 }
-OACustomButton.propTypes = {
+CustomButton.propTypes = {
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   onClick: _propTypes.default.func.isRequired,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  position: _propTypes.default.oneOf(['left', 'right', 'none']),
-  text: _propTypes.default.string.isRequired,
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'none']),
+  label: _propTypes.default.string.isRequired,
   type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only']),
   typography: _propTypes.default.oneOf(_Typography.typographyOptions)
 };
-OACustomButton.defaultProps = {
+CustomButton.defaultProps = {
   className: '',
   disabled: false,
   size: 'medium',
-  position: 'left',
+  iconPosition: 'none',
   type: 'primary',
   typography: 'type-button-500'
 };
-var _default = OACustomButton;
+var _default = CustomButton;
 exports.default = _default;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+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 _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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 getSizeStyles = size => {
+  switch (size) {
+    case 'small':
+      {
+        return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        min-width: 80px;\n        padding: 10px 16px;\n      "])));
+      }
+    case 'medium':
+      {
+        return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        min-width: 100px;\n        padding: 10px 16px;   \n      "])));
+      }
+    case 'large':
+      {
+        return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        min-width: 136px;\n        padding: 10px 24px;\n      "])));
+      }
+    default:
+      {
+        return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        min-width: 100px;\n        padding: 10px 16px;   \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    \n  }\n\n  .anticon-search {\n    margin: 0 8px 0 0;\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  }\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));
+var _default = ColoredStyledButton;
+exports.default = _default;

package/build/components/{CheckBoxes.js → oa-component-checkbox/CustomCheckBox.js}

@@ -9,15 +9,15 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _Typography = _interopRequireWildcard(require("./Typography"));
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function CheckBoxes(_ref) {
+function CustomCheckBox(_ref) {
   let {
     disabled,
     onChange,
-    text,
+    label,
     typography
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
@@ -25,17 +25,17 @@ function CheckBoxes(_ref) {
     onChange: disabled ? null : onChange
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: typography
-  }, text));
+  }, label));
 }
-CheckBoxes.propTypes = {
+CustomCheckBox.propTypes = {
   disabled: _propTypes.default.bool,
   onChange: _propTypes.default.func.isRequired,
-  text: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
   typography: _propTypes.default.oneOf(_Typography.typographyOptions)
 };
-CheckBoxes.defaultProps = {
+CustomCheckBox.defaultProps = {
   disabled: false,
   typography: 'type-b2-400'
 };
-var _default = CheckBoxes;
+var _default = CustomCheckBox;
 exports.default = _default;

package/build/components/oa-component-colorUsage/ColorUsage.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.colorOptions = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = _interopRequireDefault(require("./styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Import the styles from the separate file
+
+const colorOptions = ['blue-CTA', 'darkblue-background', 'lightblue-background', 'blue-hover', 'green-success', 'lightgreen-success', 'yellow-warning', 'lightyellow-warning', 'red-error', 'red-hover', 'lightred-error', 'primarygrey-text', 'secondarygrey-text', 'grey1-placeholder', 'grey2-disabled', 'grey3-disabled_divider', 'grey4-background', 'white-background', 'grey5-overlay', 'sunyellow-tags'];
+exports.colorOptions = colorOptions;
+function ColorUsage(_ref) {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.default, {
+    color: color
+  }, "--color-".concat(color));
+}
+ColorUsage.propTypes = {
+  color: _propTypes.default.oneOf(colorOptions).isRequired
+};
+var _default = ColorUsage;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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) } })); }
+const StyledColorUsage = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: var(--color-", ");\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n  width: 450px;\n"])), props => props.color);
+var _default = StyledColorUsage;
+exports.default = _default;

package/build/components/oa-component-cornerRadius/CornerRadius.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Import the styles from the separate file
+
+function CornerRadius(_ref) {
+  let {
+    type
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCornerComponent, {
+    type: type
+  }, type);
+}
+CornerRadius.propTypes = {
+  type: _propTypes.default.oneOf(['border-radius-xlarge', 'border-radius-large', 'border-radius-medium', 'border-radius-small', 'border-radius-xsmall', 'border-radius-none', 'border-radius-full']).isRequired
+};
+var _default = CornerRadius;
+exports.default = _default;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBorderSize = exports.StyledCornerComponent = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject; // CornerRadiusStyles.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 getBorderSize = type => {
+  switch (type.replace('border-radius-', '')) {
+    case 'full':
+      return 9999;
+    case 'xlarge':
+      return 16;
+    case 'large':
+      return 12;
+    case 'medium':
+      return 8;
+    case 'small':
+      return 4;
+    case 'xsmall':
+      return 2;
+    case 'none':
+      return 0;
+    default:
+      return 0;
+  }
+};
+exports.getBorderSize = getBorderSize;
+const StyledCornerComponent = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 200px;\n  width: 200px;\n  background-color: blue;\n  border-radius: ", "px; // Pass the 'type' prop to getBorderSize\n"])), props => getBorderSize(props.type));
+exports.StyledCornerComponent = StyledCornerComponent;

package/build/components/{DrawerDesign.js → oa-component-drawer/CustomDrawer.js}

@@ -12,7 +12,7 @@ var _antd = require("antd");
 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 DrawerDesign(_ref) {
+function CustomDrawer(_ref) {
   let {
     closable,
     data,
@@ -33,7 +33,7 @@ function DrawerDesign(_ref) {
     width: width
   }, data));
 }
-DrawerDesign.propTypes = {
+CustomDrawer.propTypes = {
   closable: _propTypes.default.bool,
   data: _propTypes.default.node.isRequired,
   onClose: _propTypes.default.func,
@@ -43,12 +43,12 @@ DrawerDesign.propTypes = {
   height: _propTypes.default.number.isRequired,
   width: _propTypes.default.number.isRequired
 };
-DrawerDesign.defaultProps = {
+CustomDrawer.defaultProps = {
   closable: false,
   onClose: null,
   open: true,
   placement: 'right',
   title: ''
 };
-var _default = DrawerDesign;
+var _default = CustomDrawer;
 exports.default = _default;

package/build/components/{Notification.js → oa-component-notification/CustomNotification.js}

@@ -4,67 +4,73 @@ require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-require("core-js/modules/web.dom-collections.iterator.js");
+exports.notificationOptions = exports.default = void 0;
 require("core-js/modules/es.symbol.description.js");
-var _react = _interopRequireWildcard(require("react"));
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _icons = require("@ant-design/icons");
-var _Typography = _interopRequireWildcard(require("./Typography"));
-var _OACustomButton = _interopRequireDefault(require("./oa-button/OACustomButton"));
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _styles = _interopRequireDefault(require("./styles"));
 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 StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  \n  div {\n    display: flex;\n    flex-direction: column;\n  } \n\n  .anticon-close {\n    cursor: pointer;\n  }\n"])));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Import the styles from the separate file
+
+const notificationOptions = ['green-success', 'red-error'];
+exports.notificationOptions = notificationOptions;
 function Notification(_ref) {
   let {
-    borderColor,
-    disabled,
+    description,
     onChange,
+    placement,
+    title,
+    type,
     typographies
   } = _ref;
   const [api, contextHolder] = _antd.notification.useNotification();
   const openNotification = () => {
-    const titleText = 'Notification Title';
-    const descriptionText = 'I will never close automatically. This is a purposely very very long description that has many many characters and words.';
-    const customNotification = /*#__PURE__*/_react.default.createElement(StyledNotification, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      color: "green-success",
-      typography: typographies.title
-    }, titleText), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      color: "grey2-disabled",
+    const titleColor = type === 'success' ? 'green-success' : 'red-error';
+    const descriptionColor = type === 'success' ? 'type-b3-400' : 'primarygrey-text';
+    const borderColor = type === 'success' ? 'var(--color-green-success)' : 'var(--color-red-error)';
+    const customNotification = /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: typographies.title,
+      color: titleColor
+    }, /*#__PURE__*/_react.default.createElement("div", null, title)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: descriptionColor,
       typography: typographies.description
-    }, descriptionText)), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+    }, description)), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
       onClick: api.destroy('string')
     }));
     api.open({
       message: customNotification,
       closeIcon: false,
-      // Overriding how the notification looks.
+      duration: 2000,
       style: {
-        color: 'var(--color-white-background)',
-        padding: '8px 16px 8px 16px !important',
-        borderRadius: '4px  !important',
-        borderLeft: '4px solid var(--color-green-success)',
+        padding: '8px 16px 8px 16px',
+        borderRadius: '4px',
+        borderLeft: "4px solid ".concat(borderColor),
         boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)'
-      }
+      },
+      placement
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contextHolder, /*#__PURE__*/_react.default.createElement(_OACustomButton.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contextHolder, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
     typography: typographies.button,
-    text: "Add Notes",
+    label: "Trigger Notification",
     onClick: openNotification,
-    size: "large",
+    size: "small",
     type: "primary"
   }));
 }
 Notification.propTypes = {
-  borderColor: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
+  description: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired,
+  placement: _propTypes.default.oneOf(['topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
+  title: _propTypes.default.string.isRequired,
+  type: _propTypes.default.oneOf(['success', 'failure']).isRequired,
   typographies: _propTypes.default.shape({
     button: _propTypes.default.oneOf(_Typography.typographyOptions),
     description: _propTypes.default.oneOf(_Typography.typographyOptions),
@@ -72,8 +78,7 @@ Notification.propTypes = {
   })
 };
 Notification.defaultProps = {
-  borderColor: '#007bff',
-  disabled: false,
+  placement: 'topRight',
   typographies: {
     button: 'type-button-500',
     description: 'type-b3-400',

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject; // NotificationStyles.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 StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  .anticon-close {\n    cursor: pointer;    \n    margin: 0 0 0 8px;\n  }\n"])));
+var _default = StyledNotification;
+exports.default = _default;

package/build/components/{RadioButton.js → oa-component-radio/CustomRadio.jsx.js}

@@ -9,16 +9,16 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _Typography = _interopRequireWildcard(require("./Typography"));
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function RadioButton(_ref) {
+function CustomRadio(_ref) {
   let {
     disabled,
     onChange,
     size,
-    text,
+    label,
     typography
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_antd.Radio, {
@@ -28,19 +28,19 @@ function RadioButton(_ref) {
     type: "radio1"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: typography
-  }, text));
+  }, label));
 }
-RadioButton.propTypes = {
+CustomRadio.propTypes = {
   disabled: _propTypes.default.bool,
   onChange: _propTypes.default.func.isRequired,
   size: _propTypes.default.oneOf(['small', 'middle', 'large']),
-  text: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
   typography: _propTypes.default.oneOf(_Typography.typographyOptions)
 };
-RadioButton.defaultProps = {
+CustomRadio.defaultProps = {
   disabled: false,
   size: 'middle',
   typography: 'type-b1-400'
 };
-var _default = RadioButton;
+var _default = CustomRadio;
 exports.default = _default;

package/build/components/oa-component-spacingScales/SpacingScales.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = _interopRequireDefault(require("./styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// SpacingScales.js
+
+// Import the styled component
+
+function SpacingScales(_ref) {
+  let {
+    type
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.default, {
+    type: type
+  }, ' `', type, "` on all sides");
+}
+SpacingScales.propTypes = {
+  type: _propTypes.default.oneOf(['spacing-4', 'spacing-8', 'spacing-12', 'spacing-16', 'spacing-24', 'spacing-32', 'spacing-40', 'spacing-48', 'spacing-56', 'spacing-64', 'spacing-72', 'spacing-80', 'spacing-96', 'spacing-108']).isRequired
+};
+var _default = SpacingScales;
+exports.default = _default;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject; // SpacingScalesStyles.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 SpacingScalesContainer = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: red;\n  ", ""])), _ref => {
+  let {
+    type
+  } = _ref;
+  switch (type) {
+    case 'spacing-4':
+      return 'padding: 4px; margin: 0;';
+    case 'spacing-8':
+      return 'padding: 8px; margin: 0;';
+    case 'spacing-12':
+      return 'padding: 12px; margin: 0;';
+    case 'spacing-16':
+      return 'padding: 16px; margin: 0;';
+    case 'spacing-24':
+      return 'padding: 24px; margin: 0;';
+    case 'spacing-32':
+      return 'padding: 32px; margin: 0;';
+    case 'spacing-40':
+      return 'padding: 40px; margin: 0;';
+    case 'spacing-48':
+      return 'padding: 48px; margin: 0;';
+    case 'spacing-56':
+      return 'padding: 56px; margin: 0;';
+    case 'spacing-64':
+      return 'padding: 64px; margin: 0;';
+    case 'spacing-72':
+      return 'padding: 72px; margin: 0;';
+    case 'spacing-80':
+      return 'padding: 80px; margin: 0;';
+    case 'spacing-96':
+      return 'padding: 96px; margin: 0;';
+    case 'spacing-108':
+      return 'padding: 108px; margin: 0;';
+    default:
+      return 'padding: 0; margin: 0;';
+  }
+});
+var _default = SpacingScalesContainer;
+exports.default = _default;

package/build/components/{TableDesign.js → oa-component-table/CustomTable.js}

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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) } })); }
-function TableDesign(_ref) {
+function CustomTable(_ref) {
   let {
     columns,
     dataSource,
@@ -30,7 +30,7 @@ function TableDesign(_ref) {
     rowKey: rowKey
   });
 }
-TableDesign.propTypes = {
+CustomTable.propTypes = {
   columns: _propTypes.default.arrayOf(_propTypes.default.string),
   dataSource: _propTypes.default.arrayOf(_propTypes.default.string),
   rowKey: _propTypes.default.string.isRequired,
@@ -38,10 +38,10 @@ TableDesign.propTypes = {
     // Define the shape of your object if needed
   })])
 };
-TableDesign.defaultProps = {
+CustomTable.defaultProps = {
   dataSource: [],
   columns: [],
   pagination: false
 };
-var _default = TableDesign;
+var _default = CustomTable;
 exports.default = _default;