oa-componentbook 0.17.56 → 0.17.58

package/build/components/oa-component-accordion/Accordion.js

@@ -25,7 +25,7 @@ function Accordion(_ref) {
         }
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
     expandIconPosition: "end",
     defaultActiveKey: disabled ? '-1' : '1'
   }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
@@ -38,7 +38,7 @@ function Accordion(_ref) {
     }, headerText, smallText && /*#__PURE__*/_react.default.createElement(_styles.SmallText, null, smallText))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "gridContainer"
-  }, body))));
+  }, body)))));
 }
 Accordion.propTypes = {
   body: _propTypes.default.node,

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SmallText = void 0;
+exports.default = exports.SmallText = exports.CollapseStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
 const SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #E21616;\n  margin: 0 0 0 4px;\n"])));
-exports.SmallText = SmallText;
+exports.SmallText = SmallText;
+const CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n  background: var(--color-disabled-button);\n}\n  .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  }\n  .ant-collapse-expand-icon{\n    transform: rotate(90deg);\n    padding-inline-start: 0 !important;\n  }\n  .ant-collapse-header-text{\n    color: var(--color-primary-content);\n  }\n  .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  }\n  .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse>.ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse{\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n  }\n  .ant-collapse .ant-collapse-content>.ant-collapse-content-box{\n    padding: 20px 24px;\n  }\n  .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n    padding: 12px 24px;\n  }\n"])));
+exports.CollapseStyle = CollapseStyle;

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

@@ -34,18 +34,18 @@ function CustomCheckBox(_ref) {
     // Call to `onChange` callback received from props.
     onChange(event);
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledCheckbox, _extends({
+  return /*#__PURE__*/_react.default.createElement(_styles.CheckboxContainer, null, /*#__PURE__*/_react.default.createElement(_styles.StyledCheckbox, _extends({
     "data-test": dataTest,
     disabled: disabled,
     onChange: handleChange
   }, antDesignProps),
   // The label is a string or a number
-  ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement("p", {
     color: "primary-content",
-    typography: size === 'large' ? 'type-b1-400' : 'type-b2-400'
+    className: size === 'large' ? 'type-b1-400' : 'type-b2-400'
   }, label) ||
   // The label is a node
-  /*#__PURE__*/_react.default.isValidElement(label) && label || undefined);
+  /*#__PURE__*/_react.default.isValidElement(label) && label || undefined));
 }
 
 // This allows us referencing the Group container in our Checkbox component

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

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledCheckbox = void 0;
+exports.default = exports.StyledCheckbox = exports.CheckboxContainer = void 0;
 var _antd = require("antd");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledCheckbox = (0, _styledComponents.default)(_antd.Checkbox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-checkbox-inner{\n    border: 1px solid var(--color-secondary-content);\n  }\n  .ant-checkbox-checked .ant-checkbox-inner{\n    border: 1px solid var(--color-primary);\n    background-color: var(--color-primary);\n  }\n  .ant-checkbox:hover{\n    border: 1px solid var(--color-primary-hover);\n  }\n"])));
+const CheckboxContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-checkbox-wrapper-disabled p{\n  color: var(--color-disabled-button);\n}\n.ant-checkbox-disabled {\n  color: var(--color-disabled-button);\n}\n.ant-checkbox-disabled  .ant-checkbox-inner {\n  border: 1px solid var(--color-disabled-button);\n}\n"])));
+exports.CheckboxContainer = CheckboxContainer;
+const StyledCheckbox = (0, _styledComponents.default)(_antd.Checkbox)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  p{\n    color: var(--color-primary-content);\n  }\n \n\n  .ant-checkbox-inner{\n    border: 1px solid var(--color-secondary-content);\n  }\n  .ant-checkbox-checked .ant-checkbox-inner{\n    border: 1px solid var(--color-primary);\n    background-color: var(--color-primary);\n  }\n  .ant-checkbox:hover{\n    border: 1px solid var(--color-primary-hover);\n    background: var(--color-primary-hover);\n  }\n"])));
 exports.StyledCheckbox = StyledCheckbox;

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

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const DrawerFooter = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n"])));
 exports.DrawerFooter = DrawerFooter;
-const CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-drawer-header {\n    padding: 16px 24px;\n    background: var(--color-secondary-background);\n  }\n  label{\n    position: relative;\n  }\n  .ant-drawer-body{\n\n  }\n  .ant-drawer-footer {\n    padding: 16px\n  }\n"])));
+const CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-drawer-title{\n  color: var(--color-primary-content);\n}\n  .ant-drawer-header {\n    padding: 16px 24px;\n    background: var(--color-secondary-background);\n  }\n  label{\n    position: relative;\n  }\n  .ant-drawer-body{\n\n  }\n  .ant-drawer-footer {\n    padding: 16px\n  }\n"])));
 exports.CustomStyledDrawer = CustomStyledDrawer;
 const BaseDrawerTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 exports.BaseDrawerTitle = BaseDrawerTitle;

package/build/components/oa-component-radio/CustomRadio.js

@@ -43,15 +43,15 @@ function CustomRadio(_ref) {
         }
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_styles.StyledRadio, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_styles.StyledRadio, _extends({
     disabled: disabled,
     onChange: handleChange,
     value: value,
     "data-test": dataTest
-  }, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: size === 'large' ? 'type-b1-400' : 'type-b2-400',
+  }, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement("p", {
+    className: size === 'large' ? 'type-b1-400' : 'type-b2-400',
     color: "primary-content"
-  }, label) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined));
+  }, label) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined)));
 }
 
 // This allows us referencing the Group container and Button component in our Checkbox component

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

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledRadio = void 0;
+exports.default = exports.StyledRadio = exports.RadioContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  .ant-radio-checked .ant-radio-inner {\n    background: var(--color-primary-background);\n    border:1px solid var(--color-primary);\n  }\n\n  .ant-radio-inner::after {\n    background: var(--color-primary);\n  }\n\n  .ant-radio-inner:hover {\n    color: var(--color-primary);\n  }  \n \n  .ant-radio-inner {\n    border-color: var(--color-secondary-content);\n  }\n"])));
+const RadioContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-radio-wrapper-disabled p{\n  color: var(--color-disabled-button);\n}\n.ant-radio-disabled {\n  color: var(--color-disabled-button);\n}\n.ant-radio-wrapper-disabled {\n  color: var(--color-disabled-button);\n}\n"])));
+exports.RadioContainer = RadioContainer;
+const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  p{\n    color: var(--color-primary-content);\n  }\n  .ant-radio-checked .ant-radio-inner {\n    background: var(--color-primary-background);\n    border:1px solid var(--color-primary);\n  }\n\n  .ant-radio-inner::after {\n    background: var(--color-primary);\n  }\n\n  .ant-radio-inner:hover {\n    color: var(--color-primary);\n  }  \n \n  .ant-radio-inner {\n    border-color: var(--color-secondary-content);\n  }\n"])));
 exports.StyledRadio = StyledRadio;

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

@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid #e8e8e8;\n    border-radius: 4px;\n    th.ant-table-cell{\n        font-size: 10px;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n        color: var(--color-secondary-content) !important;\n        line-height: 10px;\n    }\n    .ant-table-tbody > tr > td{\n        font-size: 14px;\n        letter-spacing: 0;\n        line-height: 22px;\n        color: var(--color-primary-content) !important;\n    }\n   .ant-table-cell-row-hover {\n        background: var(--color-background-info) !important;\n    }\n    .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{\n        display: none;\n    }\n    .ant-pagination-item{\n        border-radius: 0;\n    }\n    .ant-pagination-item-link{\n        border: 1px solid #d9d9d9 !important;\n        border-radius: 0 !important;\n    }\n    .ant-table-thead > tr > th{\n        background: var(--color-secondary-background);\n        color: var(--color-secondary-content) !important;\n        white-space: nowrap;\n    }\n    .ant-table-thead>tr>th {\n        background: var(--color-secondary-background);\n    }\n    th.ant-table-cell {\n        font-size: 12px;\n        letter-spacing: 0.24px;\n        text-transform: uppercase;\n        color: var(--color-secondary-content)!important;\n        line-height: 16px;\n    }\n"])));
+const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-table-container table>thead>tr:first-child >*:first-child {\n    border-start-start-radius: 0;\n}\n.ant-table-container table>thead>tr:first-child >*:last-child {\n    border-start-end-radius: 0;\n}\n    border: 1px solid #e8e8e8;\n    border-radius: 4px;\n    th.ant-table-cell{\n        font-size: 10px;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n        color: var(--color-secondary-content) !important;\n        line-height: 10px;\n    }\n    .ant-table-tbody > tr > td{\n        font-size: 14px;\n        letter-spacing: 0;\n        line-height: 22px;\n        color: var(--color-primary-content) !important;\n    }\n   .ant-table-cell-row-hover {\n        background: var(--color-background-info) !important;\n    }\n    .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{\n        display: none;\n    }\n    .ant-pagination-item{\n        border-radius: 0;\n    }\n    .ant-pagination-item-link{\n        border: 1px solid #d9d9d9 !important;\n        border-radius: 0 !important;\n    }\n    .ant-table-thead > tr > th{\n        background: var(--color-secondary-background);\n        color: var(--color-secondary-content) !important;\n        white-space: nowrap;\n    }\n    th.ant-table-cell {\n        font-size: 12px;\n        letter-spacing: 0.24px;\n        text-transform: uppercase;\n        color: var(--color-secondary-content)!important;\n        line-height: 16px;\n    }\n"])));
 exports.StyledTable = StyledTable;

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

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _nanoid = require("nanoid");
+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 }; }
@@ -49,14 +50,14 @@ function CustomTabs(_ref) {
       }, label) : label
     }, otherProps);
   });
-  return /*#__PURE__*/_react.default.createElement(_antd.Tabs, _extends({
+  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));
+  }, antDesignProps)));
 }
 CustomTabs.propTypes = {
   data: _propTypes.default.shape({

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

@@ -0,0 +1,15 @@
+"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 = _default;
+const StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\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  }\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"])));
+exports.StyledTabs = StyledTabs;

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

@@ -29,12 +29,12 @@ function CustomTimeline(_ref) {
       content: description
     }, dot) : dot;
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.CustomSteps, _extends({
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleTimeline, null, /*#__PURE__*/_react.default.createElement(_styles.CustomSteps, _extends({
     current: currentStep,
     direction: "horizontal",
     items: stepsData,
     progressDot: customDot
-  }, props));
+  }, props)));
 }
 CustomTimeline.propTypes = {
   stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({

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

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CustomSteps = void 0;
+exports.default = exports.StyleTimeline = exports.CustomSteps = void 0;
 var _antd = require("antd");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    padding: 20px 0 56px;\n  .ant-steps-item-tail{\n    left: -30px;\n  }\n  .ant-steps-item-content{\n    width: auto !important;\n    text-align: left !important;\n\n  }\n  .ant-steps-item:fist-child .ant-steps-item-content{\n\n  }\n    .ant-steps-item-icon {\n      width: 16px !important;\n      height: 16px !important;\n      margin-inline-start: 20px!important;\n      margin-inline-end: 68px;\n    }\n    \n    .ant-steps-item-tail {\n      top: 6px !important;\n    }\n    \n    .ant-steps-icon-dot {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-tail::after {\n      height: 2px !important;\n      width: 100% !important;\n      margin-inline-start: -8px !important;\n    }\n    \n    .ant-steps-item-finish .ant-steps-item-tail::after {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-process .ant-steps-item-tail::after {\n      background-color: rgba(5, 5, 5, 0.06) !important;\n    }\n    \n    .ant-steps-item-wait .ant-steps-icon-dot {\n      background-color: rgb(240 240 240)!important;\n    }\n    \n    .ant-steps-item-content {\n      margin-top: 8px !important;\n    }\n    .ant-steps-item-description {\n      display: none;\n    }\n"])));
+const StyleTimeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-steps .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title,.ant-steps .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title{\n  color: var(--color-primarygrey-text);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px; \n}\n.ant-steps .ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title{\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n}\n.ant-steps .ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {\n  color: var(--color-grey2-disabled);\n}\n"])));
+exports.StyleTimeline = StyleTimeline;
+const CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    padding: 20px 0 56px;\n  .ant-steps-item-tail{\n    left: -30px;\n  }\n  .ant-steps-item-content{\n    width: auto !important;\n    text-align: left !important;\n\n  }\n  .ant-steps-item:fist-child .ant-steps-item-content{\n\n  }\n    .ant-steps-item-icon {\n      width: 16px !important;\n      height: 16px !important;\n      margin-inline-start: 20px!important;\n      margin-inline-end: 68px;\n    }\n    \n    .ant-steps-item-tail {\n      top: 6px !important;\n    }\n    \n    .ant-steps-icon-dot {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-tail::after {\n      height: 2px !important;\n      width: 100% !important;\n      margin-inline-start: -8px !important;\n    }\n    \n    .ant-steps-item-finish .ant-steps-item-tail::after {\n      background: #00875A !important;\n    }\n    \n    .ant-steps-item-process .ant-steps-item-tail::after {\n      background-color: rgba(5, 5, 5, 0.06) !important;\n    }\n    \n    .ant-steps-item-wait .ant-steps-icon-dot {\n      background-color: rgb(240 240 240)!important;\n    }\n    \n    .ant-steps-item-content {\n      margin-top: 8px !important;\n    }\n    .ant-steps-item-description {\n      display: none;\n    }\n"])));
 exports.CustomSteps = CustomSteps;
 CustomSteps.Step = _antd.Steps.Step;

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

@@ -63,7 +63,7 @@ function CustomToggle(_ref) {
         Switch: SwitchConfig.current
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, _extends({
+  }, /*#__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'})`,
@@ -76,7 +76,7 @@ function CustomToggle(_ref) {
     onClick: disabled ? null : handleClick,
     defaultChecked: defaultChecked,
     size: size === 'large' ? 'default' : size
-  }, antDesignProps)));
+  }, antDesignProps))));
 }
 CustomToggle.propTypes = {
   'data-test': _propTypes.default.string,

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

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSwitchConfig = exports.default = void 0;
+exports.getSwitchConfig = exports.default = exports.SwitchStyle = 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 }; }
-// ToggleStyles.js
+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 SwitchStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-switch{\n  min-width: 56px;\n  height: 32px;\n}\n.ant-switch .ant-switch-handle::before{\n  border-radius: 50px;\n}\n.ant-switch .ant-switch-handle{\n  width: 28px;\n  height: 28px;\n}\n.ant-switch.ant-switch-checked .ant-switch-handle {\n  inset-inline-start: calc(100% - 30px);\n}\n.ant-switch-small .ant-switch-handle{\n  width: 16px;\n  height: 16px;\n}\n.ant-switch.ant-switch-small.ant-switch-checked .ant-switch-handle {\n  inset-inline-start: calc(100% - 18px) !important;\n}\n  .ant-switch.ant-switch-small {\n    min-width: 35px;\n    height: 20px;\n"])));
+exports.SwitchStyle = SwitchStyle;
 const getSwitchConfig = _ref => {
   let {
     disabled

package/build/images/caution.svg

@@ -0,0 +1,3 @@
+<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.137 10.1349C19.8746 9.58714 19.4973 9.13231 19.0428 8.81608C18.5884 8.49985 18.0729 8.33337 17.5482 8.33337C17.0234 8.33337 16.508 8.49985 16.0535 8.81608C15.5991 9.13231 15.2217 9.58714 14.9593 10.1349L6.88688 26.9882C6.62454 27.536 6.48644 28.1574 6.48645 28.7898C6.48646 29.4223 6.6246 30.0436 6.88696 30.5914C7.14933 31.1391 7.52668 31.594 7.98111 31.9102C8.43553 32.2265 8.951 32.393 9.47573 32.393H25.6206C26.1454 32.393 26.6608 32.2265 27.1153 31.9102C27.5697 31.594 27.947 31.1391 28.2094 30.5914C28.4718 30.0436 28.6099 29.4223 28.6099 28.7898C28.6099 28.1574 28.4718 27.536 28.2095 26.9882L20.137 10.1349ZM17.5482 29.4747C17.3201 29.4747 17.0972 29.3932 16.9076 29.2405C16.7179 29.0877 16.5701 28.8707 16.4829 28.6167C16.3956 28.3627 16.3728 28.0833 16.4173 27.8137C16.4618 27.5441 16.5716 27.2964 16.7328 27.102C16.8941 26.9077 17.0996 26.7753 17.3232 26.7217C17.5469 26.668 17.7788 26.6956 17.9895 26.8008C18.2001 26.9059 18.3802 27.0841 18.5069 27.3127C18.6336 27.5412 18.7013 27.8099 18.7013 28.0848C18.7013 28.2674 18.6714 28.4481 18.6135 28.6167C18.5555 28.7853 18.4706 28.9386 18.3635 29.0676C18.2565 29.1967 18.1293 29.2991 17.9894 29.3689C17.8495 29.4387 17.6996 29.4747 17.5482 29.4747ZM19.1762 15.5289L18.7689 23.8742C18.7506 24.2495 18.614 24.6021 18.3871 24.8601C18.1602 25.118 17.86 25.2616 17.5481 25.2616C17.2362 25.2616 16.9361 25.118 16.7092 24.8601C16.4822 24.6021 16.3456 24.2495 16.3273 23.8742L15.9201 15.5289C15.907 15.2615 15.9394 14.9937 16.0154 14.7419C16.0913 14.4902 16.2091 14.2598 16.3615 14.0649C16.514 13.87 16.6979 13.7147 16.9019 13.6085C17.106 13.5024 17.3259 13.4477 17.5481 13.4477C17.7704 13.4477 17.9902 13.5024 18.1943 13.6085C18.3983 13.7147 18.5822 13.87 18.7347 14.0649C18.8872 14.2598 19.005 14.4902 19.0809 14.7419C19.1568 14.9937 19.1892 15.2615 19.1762 15.5289Z" fill="#FF991F"/>
+</svg>

package/build/widgets/oa-widget-add-spare-part/styles.js

@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledForm = (0, _styledComponents.default)(_antd.Form)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  th.ant-table-cell {\n    vertical-align: text-top;\n    padding: 8px 16px !important;\n    font-size: 12px;\n  }\n  th.ant-table-cell{\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 16px; \n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n  .ant-table-row:last-child .ant-table-cell{\n    border-bottom: none;\n  }\n  .ant-table-body table {\n    padding: 0 0 170px;\n  }\n  td.ant-table-cell {\n    padding: 20px 16px !important;\n  }\n  :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before, :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>td:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before { \n    width: 0;\n  }\n  .ant-form-item-control-input{\n    min-height: 30px;\n    width: 120px;\n  }\n"])));
+const StyledForm = (0, _styledComponents.default)(_antd.Form)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-input-affix-wrapper-disabled {\n  background: var(--color-grey3-disabled_divider);\n  border: 1px solid var(--color-placeholder-text);\n}\n\n  th.ant-table-cell {\n    vertical-align: text-top;\n    padding: 8px 16px !important;\n    font-size: 12px;\n  }\n  th.ant-table-cell{\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 16px; \n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n  .ant-table-row:last-child .ant-table-cell{\n    border-bottom: none;\n  }\n  .ant-table-body table {\n    padding: 0 0 170px;\n  }\n  td.ant-table-cell {\n    padding: 20px 16px !important;\n  }\n  :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before, :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>td:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before { \n    width: 0;\n  }\n  .ant-form-item-control-input{\n    min-height: 30px;\n    width: 120px;\n  }\n"])));
 exports.StyledForm = StyledForm;

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -74,7 +74,7 @@ function NotesWidget(_ref) {
     dataIndex: 'user',
     key: 'user'
   }];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleNotesTable, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
     columns: columns,
     dataSource: mutatedRecords,
     pagination: false,

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.NoNotesMessage = void 0;
+exports.default = exports.StyleNotesTable = exports.NoNotesMessage = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {}; // export const StyledAside = styled.aside`
@@ -40,5 +40,7 @@ var _default = {}; // export const StyledAside = styled.aside`
 // }
 // `;
 exports.default = _default;
-const NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"])));
+const StyleNotesTable = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {\n    border-start-start-radius: 0;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {\n  border-start-end-radius: 0px;\n}\n.ant-table.ant-table-small .ant-table-cell input {\n  height: 30px;\n}\n.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody>tr>td {\n  padding: 16px;\n}\n"])));
+exports.StyleNotesTable = StyleNotesTable;
+const NoNotesMessage = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"])));
 exports.NoNotesMessage = NoNotesMessage;

package/build/widgets/oa-widget-track-shipment/TrackShipmentWidget.js

@@ -22,15 +22,15 @@ function TrackShipmentWidget(_ref) {
     title,
     toAddress
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("section", {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleTrackShipment, {
     className: "trackingDetails"
   }, title && /*#__PURE__*/_react.default.createElement("h1", {
     className: "type-t1-500"
-  }, title), /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: "type-t1-500"
-  }, "Shipment tracking details")), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: "type-b2-400"
-  }, "AWB Number:", ' ', awbNumber)), /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
+  }, title), /*#__PURE__*/_react.default.createElement("h3", {
+    className: "type-t1-500"
+  }, "Shipment tracking details"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "type-b2-400"
+  }, "AWB Number:", ' ', awbNumber), /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
     address: fromAddress
   }), /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
     address: toAddress

package/build/widgets/oa-widget-track-shipment/styles.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.AddressesContainer = void 0;
+exports.default = exports.StyleTrackShipment = exports.AddressesContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const AddressesContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  gap: 24px;\n  \n  margin: 24px 0 36px;\n"])));
+const StyleTrackShipment = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\np {\n  color: var(--color-primarygrey-text);\n}\nh3{\n  color: var(--color-primarygrey-text);\n  margin: 0 0 8px;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {\n  border-start-start-radius: 0;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {\n  border-start-end-radius: 0;\n}\n  "])));
+exports.StyleTrackShipment = StyleTrackShipment;
+const AddressesContainer = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  gap: 24px;\n  \n  margin: 24px 0 36px;\n"])));
 exports.AddressesContainer = AddressesContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.56",
+  "version": "0.17.58",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",