oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,102 @@
+"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;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _utils = require("../../utils");
+var _styles = require("./styles");
+const _excluded = ["data", "data-test", "defaultActiveKey", "disabled", "style", "tabPosition", "type"],
+  _excluded2 = ["body", "disabled", "key", "label"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @function CustomTabs
+ * @description A wrapper component for Ant Design's Tabs component.
+ * @param {Object} data - A data object containing a tabs property.
+ * @param {string} [data-test] - A string to be used as data-test attribute.
+ * @param {string} defaultActiveKey - Key of the initially active tab.
+ * @param {boolean} disabled - Whether the tabs are disabled.
+ * @param {Object} style - An object containing CSS styles for the component.
+ * @param {'top'|'right'|'bottom'|'left'} tabPosition - Position of the tab headers.
+ * @param {'line'|'card'} type - Type of the tabs.
+ * @param {Object} [antDesignProps] - Any additional props to be passed to Ant Design's Tabs component.
+ * @returns {ReactElement} A Tabs component with the given props.
+ */
+function CustomTabs(_ref) {
+  let {
+      data,
+      'data-test': dataTest,
+      defaultActiveKey,
+      disabled,
+      style,
+      tabPosition,
+      type
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const items = data.tabs && data.tabs.map(_ref2 => {
+    let {
+        body,
+        disabled: isTabDisabed,
+        key,
+        label
+      } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
+    return _objectSpread({
+      children: body,
+      disabled: isTabDisabed,
+      key: key !== null && key !== void 0 ? key : (0, _utils.getUUID)(),
+      label: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--label-(").concat(label, ")")
+      }, label) : label
+    }, otherProps);
+  });
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTabs, null, /*#__PURE__*/_react.default.createElement(_antd.Tabs, _extends({
+    defaultActiveKey: defaultActiveKey,
+    disabled: true,
+    items: items,
+    style: _objectSpread({}, style),
+    tabPosition: tabPosition,
+    type: type
+  }, antDesignProps)));
+}
+CustomTabs.propTypes = {
+  data: _propTypes.default.shape({
+    tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+      body: _propTypes.default.node.isRequired,
+      disabled: _propTypes.default.bool,
+      key: _propTypes.default.string.isRequired,
+      label: _propTypes.default.string.isRequired
+    })).isRequired
+  }),
+  'data-test': _propTypes.default.string,
+  defaultActiveKey: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  type: _propTypes.default.oneOf(['line', 'card'
+  // 'editable-card',
+  ]),
+  style: _propTypes.default.objectOf(_propTypes.default.string)
+};
+CustomTabs.defaultProps = {
+  data: {},
+  'data-test': null,
+  defaultActiveKey: '1',
+  tabPosition: 'top',
+  type: 'line',
+  disabled: false,
+  style: {}
+};
+var _default = exports.default = CustomTabs;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledTabs = 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 = {};
+const StyledTabs = exports.StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\n    padding: 12px;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .ant-tabs-tab-disabled{\n    color: var(--color-disabled-button) !important;\n  }\n  s.ant-tabs-tab-disabled:hover {\n    color: var(--color-disabled-button) !important;\n}\n  .ant-tabs .ant-tabs-tab+.ant-tabs-tab{\n    margin: 0;\n  }\n  .ant-tabs-top >.ant-tabs-nav::before{\n    border-bottom: 1px solid var(--color-divider)\n  }\n  .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n    color: var(--color-primary);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px; \n  }\n  .ant-tabs .ant-tabs-tab:hover{\n    color: var(--color-primary-hover);\n  }\n  .ant-tabs .ant-tabs-ink-bar{\n    background: var(--color-primary);\n  }\n"])));

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
+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 _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); } /* eslint-disable */
+/**
+ * A simple tag component that displays a label.
+ *
+ * @param {string} [data-test] - Optional data-test attribute for testing purposes.
+ * @param {string} label - The label text to be displayed inside the tag.
+ * @param {('success' | 'pending' | 'failed')} type - The theme-type of the tag.
+ * @param {boolean} visible - Whether the tag is visible or not.
+ *
+ * @return {ReactElement} The CustomTag component.
+ */
+function CustomTag(_ref) {
+  let {
+    "data-test": dataTest,
+    label,
+    type,
+    visible,
+    bgColor,
+    borderColor,
+    textColor,
+    style
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, _extends({
+    "data-test": dataTest,
+    type: type,
+    visible: visible,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    textColor: textColor
+  }, style && {
+    style
+  }), /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-button-500"
+  }, label)));
+}
+CustomTag.propTypes = {
+  "data-test": _propTypes.default.string,
+  label: _propTypes.default.string.isRequired,
+  type: _propTypes.default.oneOf(["success", "pending", "failed", "recommended", "primary", "blue", "custom"]),
+  visible: _propTypes.default.bool,
+  bgColor: _propTypes.default.string,
+  borderColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  style: _propTypes.default.object
+};
+CustomTag.defaultProps = {
+  "data-test": null,
+  type: "",
+  visible: true,
+  bgColor: "",
+  borderColor: "",
+  textColor: ""
+};
+var _default = exports.default = CustomTag;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledTag = exports.CenteredTextContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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 = props => {
+  const {
+    type,
+    bgColor,
+    borderColor,
+    textColor
+  } = props;
+  if (type === 'success') {
+    return {
+      backgroundColor: 'var(--color-background-positive)',
+      borderColor: 'var(--color-positive)',
+      textColor: 'var(--color-positive)'
+    };
+  }
+  if (type === 'primary') {
+    return {
+      backgroundColor: 'var(--color-divider)',
+      borderColor: 'var(--color-placeholder-text)',
+      textColor: 'var(--color-primary-content)'
+    };
+  }
+  if (type === 'pending') {
+    return {
+      backgroundColor: 'var(--color-background-warning)',
+      borderColor: 'var(--color-warning)',
+      textColor: 'var(--color-warning)'
+    };
+  }
+  if (type === 'recommended') {
+    return {
+      backgroundColor: 'var(--color-tags)',
+      borderColor: 'var(--color-tags)',
+      textColor: 'var(--color-primary-content)'
+    };
+  }
+  if (type === 'failed') {
+    return {
+      backgroundColor: 'var(--color-background-negative)',
+      borderColor: 'var(--color-negative)',
+      textColor: 'var(--color-negative)'
+    };
+  }
+  if (type === 'blue') {
+    return {
+      backgroundColor: 'var(--color-background-info)',
+      borderColor: 'var(--color-primary)',
+      textColor: 'var(--color-primary)'
+    };
+  }
+  if (type === 'custom') {
+    return {
+      backgroundColor: bgColor,
+      borderColor,
+      textColor
+    };
+  }
+  return {
+    backgroundColor: '#CCCCCC',
+    borderColor: 'var(--color-primary-content)',
+    textColor: 'var(--color-primary-content)'
+  };
+};
+var _default = exports.default = {};
+const StyledTag = exports.StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 1px 12px;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: 4px;\n\n  visibility: ", ";\n"])), props => getColorStyles(props).textColor, props => getColorStyles(props).backgroundColor, props => getColorStyles(props).borderColor, props => props.visible ? 'visible' : 'hidden');
+const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex; white-space: nowrap;\n"])));

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

@@ -0,0 +1,74 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styles = _interopRequireDefault(require("./styles"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+const _excluded = ["rows", "placeholder", "maxLength", "className"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * A custom text area component.
+ *
+ * The component includes the following properties:
+ * - `rows`: The number of rows for the text area.
+ * - `placeholder`: The placeholder text for the text area.
+ * - `maxLength`: The maximum length of the input value.
+ * - `className`: Additional CSS class to apply to the text area.
+ * - `antDesignProps`: Any other props to pass to the antd Input.TextArea component.
+ *
+ * The component will apply the following styles:
+ * - A dark grey background when the component is disabled.
+ * - A dark grey text color when the component is disabled.
+ * - A custom style class of `custom-textarea` to the outer element.
+ *
+ * The component will also apply the following props to the antd Input.TextArea component:
+ * - `rows`
+ * - `placeholder`
+ * - `maxLength`
+ * - `className` (appended to the outer element)
+ * - Any other props passed in the `antDesignProps` object
+ */
+function CustomTextArea(_ref) {
+  let {
+      rows,
+      placeholder,
+      maxLength,
+      className
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, _extends({
+    rows: rows,
+    placeholder: placeholder,
+    maxLength: maxLength,
+    className: "custom-textarea ".concat(className)
+  }, antDesignProps)));
+}
+CustomTextArea.propTypes = {
+  rows: _propTypes.default.number,
+  placeholder: _propTypes.default.string,
+  maxLength: _propTypes.default.number,
+  className: _propTypes.default.string
+};
+CustomTextArea.defaultProps = {
+  rows: 2,
+  placeholder: null,
+  maxLength: 5000,
+  className: ''
+};
+var _default = exports.default = CustomTextArea;

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

@@ -0,0 +1,16 @@
+"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: 16px;\n    resize: none;\n    border-radius: 4px;\n    max-height: 92px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n  &.custom-textarea:hover {\n    border: 1px solid var(--color-primary);\n  }\n  &.custom-textarea:focus-within {\n     box-shadow: 0px 0px 4px 0px rgba(1, 79, 197, 0.90);\n  }\n"])));
+var _default = exports.default = StyledTextArea;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styles = require("./styles");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+const _excluded = ["stepsData", "currentStep"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * CustomTimeline renders a vertical timeline with custom colors.
+ *
+ * It uses the ConfigProvider from antd to set the colors of the timeline.
+ * The colors are set from the ColorVariablesMap.
+ *
+ * @param {Array} stepsData - The data to be displayed in the timeline.
+ * @param {number} currentStep - The current step in the timeline.
+ * @param {Object} props - Additional props to be passed to the timeline component.
+ *
+ * @returns {React.ReactElement} A component displaying the timeline.
+ */
+function CustomTimeline(_ref) {
+  let {
+      stepsData,
+      currentStep
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        colorSplit: _ColorVariablesMap.default['--color-disabled-button'],
+        colorPrimary: _ColorVariablesMap.default['--color-positive'],
+        colorPrimaryBorder: _ColorVariablesMap.default['--color-positive'],
+        finishIconBorderColor: _ColorVariablesMap.default['--color-positive'],
+        colorTextDisabled: _ColorVariablesMap.default['--color-disabled-button'],
+        colorTextDescription: _ColorVariablesMap.default['--color-disabled-button']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.StyleTimeline, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cstScroll"
+  }, /*#__PURE__*/_react.default.createElement(_styles.CustomSteps, _extends({
+    current: currentStep,
+    labelPlacement: "vertical",
+    items: stepsData,
+    className: (stepsData === null || stepsData === void 0 ? void 0 : stepsData.length) === 3 ? 'horizontalOnly' : ''
+  }, props)))));
+}
+CustomTimeline.propTypes = {
+  stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    description: _propTypes.default.string,
+    status: _propTypes.default.string
+  })).isRequired,
+  currentStep: _propTypes.default.number.isRequired
+};
+var _default = exports.default = CustomTimeline;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleTimeline = exports.CustomSteps = void 0;
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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) } })); }
+var _default = exports.default = {};
+const StyleTimeline = exports.StyleTimeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .ant-steps .ant-steps-item-icon {\n        width: 24px;\n        height: 24px;\n    }\n    .ant-steps-item-finish .ant-steps-item-icon{\n        background-color: var(--color-positive);\n        border-color: var(--color-positive);\n    }\n\n   \n    .ant-steps.ant-steps-label-vertical .ant-steps-item-tail{        \n        padding: 2px 8px;\n    }\n    \n    .ant-steps .ant-steps-item-icon{\n        line-height: 27px;\n    }\n    \n\n    .ant-steps-item-error .ant-steps-item-icon{\n        background-color: var(--color-negative);\n        border-color: var(--color-negative);\n    }\n        .ant-steps .ant-steps-item-title {        \n    padding-inline-end: 0;\n            line-height: 24px !important;\n        }\n\n    .ant-steps .ant-steps-item-tail{\n        top: 9px;\n    }\n    .ant-steps .ant-steps-item-finish .ant-steps-item-icon >.ant-steps-icon{\n        color: #fff;\n        font-size: 14px;\n    }\n    .ant-steps-item-process .ant-steps-item-icon{\n        background-color: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        margin-inline-end: 0 !important;\n    }\n    .ant-steps-item-wait .ant-steps-item-icon{\n        background-color: #fff;\n        position: relative;\n        border-color: var(--color-disabled-button);\n       \n    }\n    .estimationDrawer .ant-steps-item-process .ant-steps-icon{\n        display: block;\n        width: 16px;\n        height: 16px;\n        vertical-align: middle;\n        border: var(--color-positive) 1px solid;\n        border-radius: 50%;\n    }\n    .ant-steps-item-content{\n        margin-top: 8px !important;\n        padding: 0 6px;\n        width: min-content;\n    }\n    .ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon{\n        top: -2px;\n    }\n    // .ant-steps .ant-steps-item-title{\n    //     line-height: 24px;\n    // }\n    .ant-steps-item-wait .ant-steps-icon{\n        visibility: hidden;\n\n   }\n   @media only screen and (max-width: 574px) {\n    .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail::after {\n         width: 100%; \n          height: 1px;\n    }\n    .ant-steps.horizontalOnly {\n        display: flex;\n        flex-direction: row;\n        text-align: center;\n    }\n    .horizontalOnly .ant-steps-item-container{\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n    }\n    .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail{\n    \n        top: 12px; \n        inset-inline-start: 15px;\n        width: 100%;\n        height: 1px; \n        padding: 0;\n    }\n  }\n"])));
+const CustomSteps = exports.CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    \n"])));
+CustomSteps.Step = _antd.Steps.Step;

package/build/components/oa-component-timepicker/CustomTimePicker.js

@@ -0,0 +1,104 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomTimePicker;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _AccessTimeRounded = _interopRequireDefault(require("@material-ui/icons/AccessTimeRounded"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+require("antd/dist/reset.css");
+const _excluded = ["data-test"];
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const FullWidthTimePicker = (0, _styledComponents.default)(_antd.TimePicker)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+
+/**
+ * CustomTimePicker is a component that renders an antd TimePicker component with customizable styling.
+ * It automatically sets the format to 'HH:mm' and adds an AccessTimeRoundedIcon as the suffix icon.
+ * The component allows customization of padding, border colors, placeholder text color, active color, hover color, and more.
+ * The component also styles the clock icon.
+ *
+ * @param {Object} props - The props for the component
+ * @prop {string} ['data-test'] - The data-test value for the component
+ *
+ * @return {ReactElement} The rendered component
+ */
+function CustomTimePicker(_ref) {
+  let {
+      'data-test': dataTest
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        controlHeight: 48,
+        // height of text field (tag height is half of this, i.e. 24px)
+        controlHeightSM: 32,
+        // height of small text field
+        controlHeightLG: 64,
+        borderRadius: 4,
+        fontSize: _TypographiesMap.default['type-b2-400']['font-size'],
+        fontSizeLG: _TypographiesMap.default['type-b2-400']['font-size'],
+        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        // for active color of input
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary-hover'],
+        // for hover color of input
+
+        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        // border color of input text field
+        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        // Text color
+        colorTextDisabled: _ColorVariablesMap.default['--color-placeholder-text'],
+        // Text color when disabled
+        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextQuaternary: _ColorVariablesMap.default['--color-placeholder-text'],
+        // color of disabled clock icon
+
+        colorLink: _ColorVariablesMap.default['--color-primary'],
+        colorLinkHover: _ColorVariablesMap.default['--color-primary-hover'],
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        // Error color
+        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
+      },
+      components: {
+        DatePicker: {
+          // DatePicker key is used for TimePicker component as well.
+          lineHeight: _TypographiesMap.default['type-b2-400']['line-height'] / _TypographiesMap.default['type-b2-400']['font-size'],
+          // presetsWidth: 1000,
+          paddingInline: 16,
+          paddingInlineSM: 12,
+          paddingBlockLG: 14
+          // colorIcon: '#1677ff',
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(FullWidthTimePicker, _extends({
+    allowClear: true // Discussed with UX team
+    ,
+    format: "HH:mm",
+    suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _AccessTimeRounded.default,
+      size: 20
+    })
+  }, props)));
+}
+CustomTimePicker.propTypes = {
+  'data-test': _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'middle'])
+};
+CustomTimePicker.defaultProps = {
+  'data-test': null,
+  size: 'middle'
+};

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

@@ -0,0 +1,111 @@
+"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 = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styles = require("./styles");
+const _excluded = ["data-test", "defaultChecked", "disabled", "onChange", "onClick", "checkedLabel", "uncheckedLabel", "size"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+/**
+ * A custom toggle component based on ant design's Switch component.
+ *
+ * @prop {string} [data-test] - Optional data-test attribute for testing purposes.
+ * @prop {boolean} defaultChecked - Whether the toggle is checked or not by default.
+ * @prop {boolean} disabled - Whether the toggle is disabled or not.
+ * @prop {function} onChange - Function to be called when the toggle is changed.
+ * @prop {function} onClick - Function to be called when the toggle is clicked.
+ * @prop {string} checkedLabel - Label text to be displayed when the toggle is checked.
+ * @prop {string} uncheckedLabel - Label text to be displayed when the toggle is unchecked.
+ * @prop {('large' | 'small')} size - Size of the toggle.
+ *
+ * @return {ReactElement} The CustomToggle component.
+ */
+function CustomToggle(_ref) {
+  let {
+      'data-test': dataTest,
+      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 => {
+    // Call to `onChange` callback received from props.
+    onChange(value);
+  };
+  const handleClick = 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(_styles.SwitchStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Switch, _extends({
+    "data-test": dataTest
+    // style={{
+    //   transform: `scale(${size === 'large' ? '1.45' : '1.25'})`,
+    // }}
+    ,
+    checkedChildren: checkedLabel,
+    unCheckedChildren: uncheckedLabel,
+    disabled: disabled,
+    onChange: disabled ? null : handleChange,
+    onClick: disabled ? null : handleClick,
+    defaultChecked: defaultChecked,
+    size: size === 'large' ? 'default' : size
+  }, antDesignProps))));
+}
+CustomToggle.propTypes = {
+  'data-test': _propTypes.default.string,
+  defaultChecked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  checkedLabel: _propTypes.default.string,
+  uncheckedLabel: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['large', 'small'])
+};
+CustomToggle.defaultProps = {
+  'data-test': null,
+  defaultChecked: false,
+  disabled: false,
+  onChange: value => value,
+  onClick: value => value,
+  checkedLabel: null,
+  uncheckedLabel: null,
+  size: 'large'
+};
+var _default = exports.default = CustomToggle;