@bigbinary/neeto-site-blocks 1.16.21 → 1.16.23

package/dist/index.cjs.js

@@ -7225,7 +7225,10 @@ var Button = function Button(_ref) {
 };
 var Button$1 = withConditionalRender(Button, ramda.prop("label"));
 
-var createStyledIcon = function createStyledIcon(IconComponent) {
+var createStyledIcon = function createStyledIcon() {
+  var IconComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
+    return /*#__PURE__*/jsxRuntime.jsx("span", {});
+  };
   return styled__default["default"](IconComponent)(function (_ref) {
     var fill = _ref.fill,
       hoverColor = _ref.hoverColor;
@@ -13897,7 +13900,7 @@ var FaqWithHamburgerView = function FaqWithHamburgerView(_ref) {
     enableAnimation = properties.enableAnimation,
     faqs = properties.faqs;
   var baseClasses = "grid grid-cols-12 items-center gap-4 gap-y-12";
-  var columnsBaseClasses = "col-span-12 gap-12 cursor-pointer space-y-2";
+  var columnsBaseClasses = "col-span-12 gap-12 space-y-2";
   return /*#__PURE__*/jsxRuntime.jsxs(BlockWrapper, {
     className: className,
     enableAnimation: enableAnimation,
@@ -13941,17 +13944,32 @@ var FAQItem = function FAQItem(_ref3) {
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+
+  // Even though `paddingHorizontal` and `paddingVertical` values are accepted
+  // for the card, we are separately setting the paddings for the `question`
+  // and `answer` components to make the entire `question` clickable.
+  var cardDesgin = ramda.omit(["paddingHorizontal", "paddingVertical"], design.card);
+  var questionWrapperDesign = {
+    paddingHorizontal: design.card.paddingHorizontal,
+    paddingTop: design.card.paddingVertical,
+    paddingBottom: !isOpen && design.card.paddingVertical
+  };
+  var answerWrapperDesign = {
+    paddingHorizontal: design.card.paddingHorizontal,
+    paddingBottom: isOpen && design.card.paddingVertical
+  };
   return /*#__PURE__*/jsxRuntime.jsxs(MotionWrapper, {
     enableAnimation: enableAnimation,
     className: "w-full",
-    design: design.card,
-    onClick: function onClick() {
-      return setIsOpen(function (prevState) {
-        return !prevState;
-      });
-    },
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+    design: cardDesgin,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledWrapper, {
       className: "flex items-center justify-between gap-4",
+      design: questionWrapperDesign,
+      onClick: function onClick() {
+        return setIsOpen(function (prevState) {
+          return !prevState;
+        });
+      },
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography$1, _objectSpread$l(_objectSpread$l({
         index: index,
         isTitle: true,
@@ -13981,15 +13999,16 @@ var FAQItem = function FAQItem(_ref3) {
           width: "24",
           children: /*#__PURE__*/jsxRuntime.jsx("path", {
             d: "M6 9L12 15L18 9",
-            stroke: "#68737D",
+            stroke: design.question.color,
             strokeLinecap: "round",
             strokeLinejoin: "round",
             strokeWidth: "1.5"
           })
         })
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), /*#__PURE__*/jsxRuntime.jsx(StyledWrapper, {
       className: "lg:pr-8",
+      design: answerWrapperDesign,
       children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
         children: isOpen && /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div, {
           animate: {