oa-componentbook 0.18.131 → 0.18.133

package/build/widgets/oa-widget-detailcard/MembershipDetailCard.js

@@ -95,7 +95,9 @@ function MembershipDetailCard(_ref) {
     }, item === null || item === void 0 ? void 0 : item.subHeading))), (item === null || item === void 0 ? void 0 : item.heading) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       color: "primary-content",
       className: "type-t2-700"
-    }, item === null || item === void 0 ? void 0 : item.heading))), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description4 = item.description) === null || _item$description4 === void 0 ? void 0 : _item$description4.text) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    }, item === null || item === void 0 ? void 0 : item.heading))), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description4 = item.description) === null || _item$description4 === void 0 ? void 0 : _item$description4.text) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+      className: "preline"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       color: "primary-content",
       className: "type-b2-400"
     }, item.description.text))))), item.actions && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -8,5 +8,5 @@ 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 MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n  padding: 0 0 8px;\n}\n.viewStatus button{\n  padding: 16px 0 0;\n}\n.flexGap div:last-child{\n  padding: 0;\n}\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h2,h3{\n  margin: 0;\n}\n  padding: 24px;\n  background: var(--color-primary-background);\n  border-radius: 12px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  position: relative;\n  border: 1px solid var(--color-divider);\n  margin: 0 0 24px;\n  @media only screen and (max-width: 600px) {\n    gap: 16px;\n    padding: 16px;\n  }\n  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n    align-items: center;\n    cursor: pointer;\n  }\n  .primaryInfo img{\n    width: 24px;\n    height: 24px;\n  }\n  .toolTipInfo .text-container svg {\n    font-size: 16px !important;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 8px;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .flexChangeBody{\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .toolTipInfo .toolTip + div{\n    display: flex;\n    justify-content: end;\n  }\n  .error{\n    background: var(--color-background-negative);\n  }\n  .error .toolTip svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning .toolTip svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n\n  .success .toolTip svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\n  }\n  .cardHead{\n    display: flex;\n    justify-content: space-between;\n    gap: 32px;\n    flex-direction: column;\n  }\n  .imgBg{\n    border-radius: 8px;\n    background: #DEF1FB;\n    min-width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n \n  .ant-modal-footer{\n    display: none;\n  }\n  .toolTip svg{\n    margin: 0px 0 0;\n  }\n  .displayFlex{\n    display: flex;\n  }\n  @media only screen and (max-width: 600px) {\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 0;\n      align-items: unset;\n    }\n    .cardHead{\n      gap: 24px;\n    }\n    .cardHead .titleHead > span{\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 24px;\n    }\n  }\n"])));
+const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n  padding: 0 0 8px;\n}\n.viewStatus button{\n  padding: 16px 0 0;\n}\n.flexGap div:last-child{\n  padding: 0;\n}\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h2,h3{\n  margin: 0;\n}\n  padding: 24px;\n  background: var(--color-primary-background);\n  border-radius: 12px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  position: relative;\n  border: 1px solid var(--color-divider);\n  margin: 0 0 24px;\n  @media only screen and (max-width: 600px) {\n    gap: 16px;\n    padding: 16px;\n  }\n  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n    align-items: center;\n    cursor: pointer;\n  }\n  .primaryInfo img{\n    width: 24px;\n    height: 24px;\n  }\n  .toolTipInfo .text-container svg {\n    font-size: 16px !important;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 8px;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .flexChangeBody{\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .toolTipInfo .toolTip + div{\n    display: flex;\n    justify-content: end;\n  }\n  .error{\n    background: var(--color-background-negative);\n  }\n  .error .toolTip svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning .toolTip svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n\n  .success .toolTip svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\n  }\n  .cardHead{\n    display: flex;\n    justify-content: space-between;\n    gap: 32px;\n    flex-direction: column;\n  }\n  .imgBg{\n    border-radius: 8px;\n    background: #DEF1FB;\n    min-width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n \n  .ant-modal-footer{\n    display: none;\n  }\n  .toolTip svg{\n    margin: 0px 0 0;\n  }\n  .displayFlex{\n    display: flex;\n  }\n\n.preline span{\n  white-space: pre-line;\n}\n\n  @media only screen and (max-width: 600px) {\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 0;\n      align-items: unset;\n    }\n    .cardHead{\n      gap: 24px;\n    }\n    .cardHead .titleHead > span{\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 24px;\n    }\n  }\n"])));
 const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 32px;\n@media only screen and (max-width: 600px) {\n  gap: 24px;\n}\n"])));

package/build/widgets/oa-widget-membershipcard/MembershipCard.js

@@ -20,6 +20,24 @@ var _CustomModal = _interopRequireDefault(require("../../components/oa-component
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _offer = _interopRequireDefault(require("../../images/offer.svg"));
+var _Mobile = _interopRequireDefault(require("../../images/Mobile.png"));
+var _Refrigerator = _interopRequireDefault(require("../../images/Refrigerator.png"));
+var _Shirts = _interopRequireDefault(require("../../images/Shirts.png"));
+var _Tablets = _interopRequireDefault(require("../../images/Tablets.png"));
+var _Television = _interopRequireDefault(require("../../images/Television.png"));
+var _WashingMachine = _interopRequireDefault(require("../../images/WashingMachine.png"));
+var _WaterPurifier = _interopRequireDefault(require("../../images/WaterPurifier.png"));
+var _Wearable = _interopRequireDefault(require("../../images/Wearable.png"));
+var _Wallet = _interopRequireDefault(require("../../images/Wallet.png"));
+var _AC = _interopRequireDefault(require("../../images/AC.png"));
+var _Cooler = _interopRequireDefault(require("../../images/Cooler.png"));
+var _Default = _interopRequireDefault(require("../../images/Default.png"));
+var _Footwear = _interopRequireDefault(require("../../images/Footwear.png"));
+var _Furniture = _interopRequireDefault(require("../../images/Furniture.png"));
+var _Glasses = _interopRequireDefault(require("../../images/Glasses.png"));
+var _Laptop = _interopRequireDefault(require("../../images/Laptop.png"));
+var _Luggage = _interopRequireDefault(require("../../images/Luggage.png"));
+var _Microwave = _interopRequireDefault(require("../../images/Microwave.png"));
 var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,30 +72,27 @@ function MembershipCard(_ref) {
   const {
     actions
   } = footer || {};
-
-  // const icons = {
-  //   Mobile,
-  //   Laptop,
-  //   Television,
-  //   AC,
-  //   Refrigerator,
-  //   Wearable,
-  //   Water_Purifier: WaterPurifier,
-  //   Microwave,
-  //   Cooler,
-  //   Wallet,
-  //   Shirts,
-  //   Washing_Machine: WashingMachine,
-  //   Tablets,
-  //   Glasses,
-  //   Luggage,
-  //   Footwear,
-  //   Furniture,
-  //   Default,
-  // };
-
-  // const iconSrc = icons[icon] || Default;
-
+  const icons = {
+    Mobile: _Mobile.default,
+    Laptop: _Laptop.default,
+    Television: _Television.default,
+    AC: _AC.default,
+    Refrigerator: _Refrigerator.default,
+    Wearable: _Wearable.default,
+    Water_Purifier: _WaterPurifier.default,
+    Microwave: _Microwave.default,
+    Cooler: _Cooler.default,
+    Wallet: _Wallet.default,
+    Shirts: _Shirts.default,
+    Washing_Machine: _WashingMachine.default,
+    Tablets: _Tablets.default,
+    Glasses: _Glasses.default,
+    Luggage: _Luggage.default,
+    Footwear: _Footwear.default,
+    Furniture: _Furniture.default,
+    Default: _Default.default
+  };
+  const iconSrc = icons[icon] || _Default.default;
   return /*#__PURE__*/_react.default.createElement(_styles.MembershipCardStyle, null, body && /*#__PURE__*/_react.default.createElement(_styles.CardBody, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "cardHead"
   }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", {
@@ -95,7 +110,12 @@ function MembershipCard(_ref) {
   }, /*#__PURE__*/_react.default.createElement("label", null, ' ', /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: primaryInfo.type === 'success' ? 'positive' : 'negative',
     className: "type-t2-700"
-  }, primaryInfo.label))))), itemsToShow.length > 0 && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, primaryInfo.label)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "imgBg"
+  }, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
+    alt: "phone img",
+    src: iconSrc
+  }))), itemsToShow.length > 0 && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: "type-b1-400",
     color: "primary-content"
   }, itemsToShow.join(', '), remainingItems.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
@@ -129,7 +149,7 @@ function MembershipCard(_ref) {
     color: "primary-background",
     icon: _ArrowForwardIos.default
   }))), alert.length > 0 && alert.map((item, i) => {
-    var _item$description, _item$description2, _item$description3, _item$description4;
+    var _item$description, _item$description2, _item$description3, _item$description4, _item$description5, _item$description6;
     return ((item === null || item === void 0 ? void 0 : item.subHeading) !== '' || (item === null || item === void 0 ? void 0 : item.heading) !== '' || (item === null || item === void 0 || (_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.text) !== undefined) && /*#__PURE__*/_react.default.createElement("div", {
       className: item !== null && item !== void 0 && (_item$description2 = item.description) !== null && _item$description2 !== void 0 && _item$description2.text && (item === null || item === void 0 || (_item$description3 = item.description) === null || _item$description3 === void 0 ? void 0 : _item$description3.text) !== '' ? "toolTipInfo ".concat(item.type) : 'toolTipInfo flexChangeBody'
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -151,7 +171,7 @@ function MembershipCard(_ref) {
     }, item === null || item === void 0 ? void 0 : item.heading))), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description4 = item.description) === null || _item$description4 === void 0 ? void 0 : _item$description4.text) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       color: "primary-content",
       className: "type-b2-400"
-    }, item.description.text))))), item.actions && /*#__PURE__*/_react.default.createElement("div", {
+    }, item.description.text))), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description5 = item.description) === null || _item$description5 === void 0 ? void 0 : _item$description5.listData) && (item === null || item === void 0 || (_item$description6 = item.description) === null || _item$description6 === void 0 || (_item$description6 = _item$description6.listData) === null || _item$description6 === void 0 ? void 0 : _item$description6.length) > 0 && /*#__PURE__*/_react.default.createElement("ul", null, item.description.listData.map((temp, j) => /*#__PURE__*/_react.default.createElement("li", null, temp))))), item.actions && /*#__PURE__*/_react.default.createElement("div", {
       className: "viewStatus"
     }, item.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
       key: action.label,

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

@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
 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 MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n  padding: 0 0 8px;\n}\n.viewStatus button{\n  padding: 16px 0 0;\n}\n.flexGap div:last-child{\n  padding: 0;\n}\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n  margin: 0;\n}\n  padding: 24px;\n  background: var(--color-primary-background);\n  border-radius: 12px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  position: relative;\n  margin: 0 0 24px;\n  border: 1px solid var(--color-divider);\n  @media only screen and (max-width: 600px) {\n    gap: 16px;\n    padding: 24px 16px 16px;\n    .cardHead p .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .primary-info label .type-t2-700{\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 20px;\n    }\n  }\n  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n    align-items: center;\n    cursor: pointer;\n  }\n  .primaryInfo img{\n    width: 24px;\n    height: 24px;\n  }\n  .toolTipInfo .text-container svg {\n    font-size: 16px !important;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 8px;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .flexChangeBody{\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .toolTipInfo .toolTip + div{\n    display: flex;\n    justify-content: end;\n  }\n  .error{\n    background: var(--color-background-negative);\n  }\n  .error .toolTip svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning .toolTip svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n\n  .success .toolTip svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\n  }\n  .cardHead{\n    display: flex;\n    justify-content: space-between;\n    gap: 24px;\n  }\n  .imgBg{\n    border-radius: 8px;\n    background: #DEF1FB;\n    min-width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n \n  .ant-modal-footer{\n    display: none;\n  }\n  .toolTip svg{\n    margin: 0px 0 0;\n  }\n  .flexChangeBody{\n    align-items: center !important;\n    flex-direction: row !important;\n    gap: 8px !important;\n  }\n  .flexChangeBody .text-container{\n    white-space: nowrap;\n  }\n  .flexChangeBody .viewStatus button {\n    padding: 0 !important;\n}\n.displayFlex{\n  display: flex;\n}\n  @media only screen and (max-width: 600px) {\n    .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 0;\n      align-items: unset;\n    }\n    \n    .cardHead .titleHead > span{\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 24px;\n    }\n  }\n"])));
+const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n  padding: 0 0 8px;\n}\n.flexGap ul{\n  margin: 0;\n  padding: 0 0 0 16px;\n  list-style-type: disc;\n}\n.flexGap li{\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.viewStatus button{\n  margin: 16px 0 0;\n}\n.flexGap div:last-child{\n  padding: 0;\n}\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n  margin: 0;\n}\n  padding: 24px;\n  background: var(--color-primary-background);\n  border-radius: 12px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  position: relative;\n  margin: 0 0 24px;\n  border: 1px solid var(--color-divider);\n  @media only screen and (max-width: 600px) {\n    gap: 16px;\n    padding: 24px 16px 16px;\n    .cardHead p .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .primary-info label .type-t2-700{\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 20px;\n    }\n  }\n  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n    align-items: center;\n    cursor: pointer;\n  }\n  .primaryInfo img{\n    width: 24px;\n    height: 24px;\n  }\n  .toolTipInfo .text-container svg {\n    font-size: 16px !important;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 8px;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .flexChangeBody{\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .toolTipInfo .toolTip + div{\n    display: flex;\n    justify-content: end;\n  }\n  .error{\n    background: var(--color-background-negative);\n  }\n  .error .toolTip svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning .toolTip svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n\n  .success .toolTip svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\n  }\n  .cardHead{\n    display: flex;\n    justify-content: space-between;\n    gap: 24px;\n  }\n  .imgBg{\n    border-radius: 8px;\n    background: #DEF1FB;\n    min-width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n \n  .ant-modal-footer{\n    display: none;\n  }\n  .toolTip svg{\n    margin: 0px 0 0;\n  }\n  .flexChangeBody{\n    align-items: center !important;\n    flex-direction: row !important;\n    gap: 8px !important;\n  }\n  .flexChangeBody .text-container{\n    white-space: nowrap;\n  }\n  .flexChangeBody .viewStatus button {\n    padding: 0 !important;\n}\n.displayFlex{\n  display: flex;\n}\n  @media only screen and (max-width: 600px) {\n    .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 0;\n      align-items: unset;\n    }\n    \n    .cardHead .titleHead > span{\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 24px;\n    }\n  }\n"])));
 const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 24px;\n@media only screen and (max-width: 600px) {\n  gap: 16px;\n}\n"])));
 const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ndisplay: flex;\npadding: 16px 24px;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\njustify-content: end;\n@media only screen and (max-width: 600px) {\n  padding: 16px 16px;\n  width: calc(100% + 32px);\n  margin: 0 0 0 -16px;\n  top: 16px;\n\n  .text-container .type-t2-700 {\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n}\n.large {\n  height: 36px;\n  min-width: 100px;\n  padding: 10px 16px;\n}\n}\n"])));

package/package.json

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