oa-componentbook 0.7.0 → 0.9.0

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");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(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;
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
+var _styles = _interopRequireDefault(require("./styles"));
 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 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"])));
+// Import the styles from the separate file
+
+const notificationOptions = ['green-success', 'red-error'];
+exports.notificationOptions = notificationOptions;
 function Notification(_ref) {
   let {
-    borderColor,
-    disabled,
-    onChange,
+    description,
+    isDisplayed,
+    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: isDisplayed ? 0 : 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, {
-    typography: typographies.button,
-    text: "Add Notes",
-    onClick: openNotification,
-    size: "large",
-    type: "primary"
-  }));
+
+  // This is for displaying the notification on storybook
+  (0, _react.useEffect)(() => {
+    if (isDisplayed) {
+      openNotification();
+    }
+  });
+  return contextHolder;
 }
 Notification.propTypes = {
-  borderColor: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  onChange: _propTypes.default.func.isRequired,
+  description: _propTypes.default.string.isRequired,
+  isDisplayed: _propTypes.default.bool,
+  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,8 @@ Notification.propTypes = {
   })
 };
 Notification.defaultProps = {
-  borderColor: '#007bff',
-  disabled: false,
+  isDisplayed: 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.js}

@@ -5,42 +5,47 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.CustomRadioGroup = 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,
-    typography
+    label,
+    typography,
+    value
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_antd.Radio, {
     disabled: disabled,
     onChange: disabled ? null : onChange,
     size: size,
-    type: "radio1"
+    type: "radio1",
+    value: value
   }, /*#__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,
-  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+  label: _propTypes.default.string.isRequired,
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions),
+  value: _propTypes.default.number.isRequired
 };
-RadioButton.defaultProps = {
+CustomRadio.defaultProps = {
   disabled: false,
   size: 'middle',
   typography: 'type-b1-400'
 };
-var _default = RadioButton;
-exports.default = _default;
+var _default = CustomRadio;
+exports.default = _default;
+const CustomRadioGroup = _antd.Radio.Group;
+exports.CustomRadioGroup = CustomRadioGroup;

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;

package/build/components/{TabsDesign.js → oa-component-tabs/CustomTabs.js}

@@ -18,10 +18,10 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 const {
   TabPane
 } = _antd.Tabs;
-function TabsDesign(_ref) {
+function CustomTabs(_ref) {
   let {
-    defaultActiveKey,
     data,
+    defaultActiveKey,
     disabled,
     style,
     tabPosition,
@@ -38,7 +38,7 @@ function TabsDesign(_ref) {
     tab: item.label
   }, item.body))));
 }
-TabsDesign.propTypes = {
+CustomTabs.propTypes = {
   data: _propTypes.default.shape({
     tabs: _propTypes.default.arrayOf({
       key: _propTypes.default.string.isRequired,
@@ -53,7 +53,7 @@ TabsDesign.propTypes = {
   type: _propTypes.default.oneOf(['line', 'card', 'editable-card']),
   style: _propTypes.default.objectOf(_propTypes.default.string)
 };
-TabsDesign.defaultProps = {
+CustomTabs.defaultProps = {
   data: {},
   defaultActiveKey: '1',
   tabPosition: 'top',
@@ -61,5 +61,5 @@ TabsDesign.defaultProps = {
   disabled: false,
   style: {}
 };
-var _default = TabsDesign;
+var _default = CustomTabs;
 exports.default = _default;

package/build/components/oa-component-textarea/TextArea.js

@@ -0,0 +1,38 @@
+"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 }; }
+function TextArea(_ref) {
+  let {
+    rows,
+    placeholder,
+    maxLength,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.default, {
+    rows: rows,
+    placeholder: placeholder,
+    maxLength: maxLength,
+    className: "custom-textarea ".concat(className)
+  }));
+}
+TextArea.propTypes = {
+  rows: _propTypes.default.number,
+  placeholder: _propTypes.default.string,
+  maxLength: _propTypes.default.number,
+  className: _propTypes.default.string
+};
+TextArea.defaultProps = {
+  rows: 2,
+  placeholder: null,
+  maxLength: 100,
+  className: ''
+};
+var _default = TextArea;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+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 {
+  TextArea: AntdTextArea
+} = _antd.Input;
+const StyledTextArea = (0, _styledComponents.default)(AntdTextArea)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.custom-textarea {\n    padding: 12px;\n    resize: none;\n    border-radius: 4px;\n    max-height: 96px;\n  }\n"])));
+var _default = StyledTextArea;
+exports.default = _default;

package/build/components/{DrawerDesign.js → oa-component-timeline/CustomTimeline.js}

@@ -6,49 +6,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _antd = require("antd");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
+var _styles = 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 DrawerDesign(_ref) {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CustomTimeline(_ref) {
   let {
-    closable,
-    data,
-    height,
-    onClose,
-    open,
-    placement,
-    title,
-    width
+    stepsData,
+    currentStep,
+    typography
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
-    closable: closable,
-    onClose: onClose,
-    open: open,
-    placement: placement,
-    title: title,
-    height: height,
-    width: width
-  }, data));
+  return /*#__PURE__*/_react.default.createElement(_styles.CustomSteps, {
+    progressDot: true,
+    current: currentStep,
+    direction: "horizontal"
+  }, stepsData.map(step => /*#__PURE__*/_react.default.createElement(_styles.CustomStep, {
+    key: step,
+    title: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: typography
+    }, step.title)
+  })));
 }
-DrawerDesign.propTypes = {
-  closable: _propTypes.default.bool,
-  data: _propTypes.default.node.isRequired,
-  onClose: _propTypes.default.func,
-  open: _propTypes.default.bool,
-  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-  title: _propTypes.default.string,
-  height: _propTypes.default.number.isRequired,
-  width: _propTypes.default.number.isRequired
+CustomTimeline.propTypes = {
+  stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired
+  })).isRequired,
+  currentStep: _propTypes.default.number.isRequired,
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
 };
-DrawerDesign.defaultProps = {
-  closable: false,
-  onClose: null,
-  open: true,
-  placement: 'right',
-  title: ''
+CustomTimeline.defaultProps = {
+  typography: 'type-b3-400'
 };
-var _default = DrawerDesign;
+var _default = CustomTimeline;
 exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomSteps = exports.CustomStep = void 0;
+var _antd = require("antd");
+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) } })); }
+var _default = {};
+exports.default = _default;
+const CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n\n    .ant-steps-item-icon {\n      width: 16px !important;\n      height: 16px !important;\n      margin-inline-start: 62px !important;\n    }\n    .ant-steps-item-tail {\n      top: 6px !important;\n    }\n    .ant-steps-icon-dot {\n      background: #00875A !important;\n    }\n    .ant-steps-item-tail::after {\n      height: 2px !important;\n      width: 100% !important;\n      margin-inline-start: -8px !important;\n    }\n    .ant-steps-item-finish .ant-steps-item-tail::after {\n      background: #00875A !important;\n    }\n    .ant-steps-item-process .ant-steps-item-tail::after {\n      background-color: rgba(5, 5, 5, 0.06) !important;\n    }\n    .ant-steps-item-wait .ant-steps-icon-dot {\n      background-color: rgb(240 240 240)!important;\n    }\n    .ant-steps-item-content {\n      margin-top: 8px !important;\n    }\n"])));
+exports.CustomSteps = CustomSteps;
+const CustomStep = _antd.Steps.Step;
+exports.CustomStep = CustomStep;

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

@@ -0,0 +1,44 @@
+"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 CustomToggle(_ref) {
+  let {
+    disabled,
+    onChange,
+    checkedLabel,
+    uncheckedLabel,
+    type,
+    size
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledSwitch, {
+    checkedChildren: checkedLabel,
+    unCheckedChildren: uncheckedLabel,
+    disabled: disabled,
+    onChange: disabled ? null : onChange,
+    defaultChecked: true
+  });
+}
+CustomToggle.propTypes = {
+  checkedLabel: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  uncheckedLabel: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['large', 'small']).isRequired,
+  type: _propTypes.default.oneOf(['primary', 'secondary']).isRequired
+};
+CustomToggle.defaultProps = {
+  checkedLabel: null,
+  uncheckedLabel: null,
+  disabled: false
+};
+var _default = CustomToggle;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledSwitch = 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) } })); }
+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;

package/build/components/oa-component-typography/Typography.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typographyOptions = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ColorUsage = require("../oa-component-colorUsage/ColorUsage");
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const typographyOptions = ['type-d1-500', 'type-d2-500', 'type-h1-500', 'type-h2-500', 'type-h3-500', 'type-t1-500', 'type-t2-700', 'type-b1-400', 'type-b2-400', 'type-b3-400', 'type-button-500', 'type-sl1-700'];
+exports.typographyOptions = typographyOptions;
+function Typography(_ref) {
+  let {
+    children,
+    color,
+    typography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTypography, {
+    color: color,
+    className: "".concat(typography)
+  }, children);
+}
+Typography.propTypes = {
+  color: _propTypes.default.oneOf(_ColorUsage.colorOptions) || null,
+  children: _propTypes.default.node.isRequired,
+  typography: _propTypes.default.oneOf(typographyOptions).isRequired
+};
+Typography.defaultProps = {
+  color: null
+};
+var _default = Typography;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledTypography = 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) } })); }
+var _default = {};
+exports.default = _default;
+const StyledTypography = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // If a color is provided then that is used, otherwise the color is inherited from parent.\n  color: ", ";\n\n  &.type-d1-500 {\n    font-size: 56px;\n    font-weight: 500;\n    line-height: 68px;\n  }\n  \n  &.type-d2-500 {\n    font-size: 40px;\n    font-weight: 500;\n    line-height: 52px;\n  }\n  \n  &.type-h1-500 {\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 40px;\n  }\n  \n  &.type-h2-500 {\n    font-size: 28px;\n    font-weight: 600;\n    line-height: 36px;\n  }\n  \n  &.type-h3-500 {\n    font-size: 24px;\n    font-weight: 600;\n    line-height: 32px;\n  }\n  \n  &.type-t1-500 {\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 28px;\n  }\n  \n  &.type-t2-700 {\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n  \n  &.type-b1-400 {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 24px;\n  }\n  \n  &.type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  \n  &.type-b3-400 {\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 16px;\n  }\n  \n  &.type-button-500 {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n  }\n  \n  &.type-sl1-700 {\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 16px;\n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n"])), props => props.color !== null ? "var(--color-".concat(props.color, ")") : 'inherit');
+exports.StyledTypography = StyledTypography;