kupos-ui-components-lib 9.10.1 → 9.10.3

package/dist/KuposUIComponent.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 interface KuposUIComponentProps {
-    typeOfComponent: "serviceitem" | "paymentsidebar" | "servicelist" | "filterbar";
+    typeOfComponent: "serviceitem" | "paymentsidebar" | "servicelist" | "filterbar" | "survey" | "cuponerafilterbar";
     variant?: "mobile" | "desktop";
     serviceItem?: any;
     onBookButtonPress?: () => void;
@@ -82,6 +82,19 @@ interface KuposUIComponentProps {
         sortOrder?: "asc" | "desc";
     };
     onFilterChange?: (filters: any) => void;
+    isOpen?: boolean;
+    selectedScore?: number | null;
+    onScoreChange?: (score: number) => void;
+    feedback?: string;
+    onFeedbackChange?: (text: string) => void;
+    onClose?: () => void;
+    onSkip?: () => void;
+    onSubmit?: (score: number, feedback: string) => void;
+    isSubmitted?: boolean;
+    bookingId?: string;
+    origin?: string;
+    destination?: string;
+    operatorName?: string;
 }
 export default function KuposUIComponent(props: KuposUIComponentProps): React.ReactElement;
 export {};

package/dist/KuposUIComponent.js

@@ -15,6 +15,7 @@ import { ResponsivePaymentSideBar } from "./components/PaymentSideBar";
 import { ResponsiveServiceList } from "./components/ServiceList";
 import { ResponsiveFilterBar } from "./components/FilterBar";
 import ResponsiveCuponeraFilterBar from "./components/CuponeraFilterBar/ResponsiveCuponeraFilterBar";
+import { ResponsiveSurvey } from "./components/Survey";
 // Using imported ResponsivePaymentSideBar component instead
 export default function KuposUIComponent(props) {
     const { typeOfComponent } = props, restProps = __rest(props, ["typeOfComponent"]);
@@ -29,6 +30,8 @@ export default function KuposUIComponent(props) {
             return (React.createElement(ResponsiveFilterBar, Object.assign({}, restProps)));
         case "cuponerafilterbar":
             return (React.createElement(ResponsiveCuponeraFilterBar, Object.assign({}, restProps)));
+        case "survey":
+            return React.createElement(ResponsiveSurvey, Object.assign({}, restProps));
         default:
             return (React.createElement("div", { className: "error-message" },
                 "Invalid component type: ",

package/dist/components/Survey/SurveyMobile.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BottomSheet } from "../../ui/BottomSheet";
-import { ThankYouCard, ScoreButtons, FeedbackTextarea, getFeedbackConfig, } from "../../ui/Survey";
+import { ScoreButtons, FeedbackTextarea, getFeedbackConfig, } from "../../ui/Survey";
 import KuposButton from "../../ui/KuposButton/KuposButton";
 const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }) => {
     if (!isOpen)
@@ -11,20 +11,21 @@ const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedb
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(selectedScore, feedback);
         }
     };
-    return (React.createElement(BottomSheet, { isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : false, onClose: onClose, showHandle: true, showBackdrop: false, blurBackground: true, blurAmount: "2px", padding: isSubmitted ? 0 : "0 20px 32px" }, isSubmitted ? (React.createElement(ThankYouCard, { onClose: onClose, titleFontSize: "1.35rem" })) : (React.createElement(React.Fragment, null,
-        React.createElement("button", { onClick: onClose, "aria-label": "Close survey", className: "absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600" },
-            React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
-        (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
-            React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
-        React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
-        React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
-            "Bas\u00E1ndote en tu experiencia de compra.",
-            React.createElement("br", null),
-            "\u00BFNos recomendar\u00EDas a un amigo?"),
-        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 44, fontSize: 13, gap: 6, colors: colors }),
-        React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
-        React.createElement("div", { className: "flex justify-center mt-[20px]" },
-            React.createElement("div", { className: "w-[180px]" },
-                React.createElement(KuposButton, { isSoldOut: selectedScore == null, isLoading: isLoading || false, buttonColor: "#FF8E43", buyLabel: "Enviar", soldOutLabel: "Enviar", onClick: handleSubmit })))))));
+    return (React.createElement(BottomSheet, { isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : false, onClose: onClose, showHandle: true, showBackdrop: false, blurBackground: true, blurAmount: "2px", padding: isSubmitted ? 0 : "0 20px 32px" },
+        React.createElement(React.Fragment, null,
+            React.createElement("button", { onClick: onClose, "aria-label": "Close survey", className: "absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600" },
+                React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
+            (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
+                React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
+            React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
+            React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
+                "Bas\u00E1ndote en tu experiencia de compra.",
+                React.createElement("br", null),
+                "\u00BFNos recomendar\u00EDas a un amigo?"),
+            React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 44, fontSize: 13, gap: 6, colors: colors }),
+            React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
+            React.createElement("div", { className: "flex justify-center mt-[20px]" },
+                React.createElement("div", { className: "w-[180px]" },
+                    React.createElement(KuposButton, { isSoldOut: selectedScore == null, isLoading: isLoading || false, buttonColor: "#FF8E43", buyLabel: "Enviar", soldOutLabel: "Enviar", onClick: handleSubmit }))))));
 };
 export default SurveyMobile;

package/dist/index.d.ts

@@ -6,9 +6,13 @@ import KuposUIComponent from "./KuposUIComponent";
 import { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar } from "./components/PaymentSideBar";
 import { ServiceListDesktop, ServiceListMobile, ResponsiveServiceList } from "./components/ServiceList";
 import { FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar } from "./components/FilterBar";
-export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem, ServiceItemPBMobile, KuposUIComponent, PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, };
+import { SurveyDesktop, SurveyMobile, ResponsiveSurvey } from "./components/Survey";
+import { Modal, ModalHeader } from "./ui/Modal";
+export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem, ServiceItemPBMobile, KuposUIComponent, PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, SurveyDesktop, SurveyMobile, ResponsiveSurvey, Modal, ModalHeader, };
 export type { ServiceItemProps } from "./types";
 export type { MobileServiceItemProps } from "./components/ServiceItem/mobileTypes";
 export type { PaymentSideBarProps } from "./components/PaymentSideBar/types";
 export type { ServiceListProps } from "./components/ServiceList/types";
 export type { FilterBarProps } from "./components/FilterBar/tyoes";
+export type { SurveyProps } from "./components/Survey/types";
+export type { ModalProps, ModalVariant, ModalSize, ModalHeaderProps } from "./ui/Modal";

package/dist/index.js

@@ -9,10 +9,18 @@ import { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar,
 import { ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, } from "./components/ServiceList";
 // Import FilterBar components
 import { FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, } from "./components/FilterBar";
+// Import Survey components
+import { SurveyDesktop, SurveyMobile, ResponsiveSurvey, } from "./components/Survey";
+// Import Modal components
+import { Modal, ModalHeader } from "./ui/Modal";
 export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem, ServiceItemPBMobile, KuposUIComponent, 
 // PaymentSideBar components
 PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, 
 // ServiceList components
 ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, 
 // FilterBar components
-FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, };
+FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, 
+//Survey components
+SurveyDesktop, SurveyMobile, ResponsiveSurvey, 
+// Modal components
+Modal, ModalHeader, };

package/dist/styles.css

@@ -45,6 +45,9 @@
 .top-\[5px\] {
   top: 5px;
 }
+.top-\[15px\] {
+  top: 15px;
+}
 .top-\[16px\] {
   top: 16px;
 }
@@ -72,6 +75,9 @@
 .right-\[18px\] {
   right: 18px;
 }
+.right-\[25px\] {
+  right: 25px;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -384,6 +390,9 @@
 .h-\[30px\] {
   height: 30px;
 }
+.h-\[90px\] {
+  height: 90px;
+}
 .h-\[100\%\] {
   height: 100%;
 }
@@ -444,6 +453,9 @@
 .w-\[80\%\] {
   width: 80%;
 }
+.w-\[90px\] {
+  width: 90px;
+}
 .w-\[100\%\] {
   width: 100%;
 }
@@ -456,6 +468,9 @@
 .w-\[150px\] {
   width: 150px;
 }
+.w-\[180px\] {
+  width: 180px;
+}
 .w-\[188px\] {
   width: 188px;
 }
@@ -494,6 +509,9 @@
 .max-w-\[220px\] {
   max-width: 220px;
 }
+.max-w-\[460px\] {
+  max-width: 460px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -536,6 +554,9 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.resize {
+  resize: both;
+}
 .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
   grid-template-columns: 14% 40% 0.5% 24% 13.5%;
 }
@@ -1048,6 +1069,14 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
+.leading-\[1\.4\] {
+  --tw-leading: 1.4;
+  line-height: 1.4;
+}
+.leading-\[1\.25\] {
+  --tw-leading: 1.25;
+  line-height: 1.25;
+}
 .leading-\[14px\] {
   --tw-leading: 14px;
   line-height: 14px;
@@ -1148,6 +1177,9 @@
 .uppercase {
   text-transform: uppercase;
 }
+.italic {
+  font-style: italic;
+}
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -170,7 +170,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
                                 React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
-                        React.createElement("div", { className: "flex flex-col gap-[8px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
                             React.createElement("div", { className: "text-[12px] bold-text" }, travelDate
                                 ? new Date(travelDate).toLocaleDateString("es-CL", {
                                     weekday: "long",
@@ -192,15 +192,13 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                     } }, "Tu compra est\u00E1 100% asegurada.")))),
                     React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
                         React.createElement("div", { className: "text-center" },
-                            React.createElement("div", { className: "bold-text text-[14px]" },
+                            React.createElement("div", { className: "bold-text text-[13px]" },
                                 operatorsCompetingCount,
-                                " operadores compitiendo",
-                                React.createElement("br", null),
-                                " por tu compra")),
+                                " operadores compitiendo por tu compra")),
                         React.createElement("div", { className: "grid w-full grid-cols-3 items-stretch gap-[14px] " }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 // height: "80px",
                                 border: "1px solid #363c48",
-                                backgroundColor: "#1a202e",
+                                backgroundColor: "#fff",
                                 padding: "14px 10px",
                             } },
                             React.createElement("img", { src: op.logo, alt: op.name, onError: (e) => {
@@ -209,13 +207,16 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                         ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
                                             "/images/service-list/bus-icon.svg";
                                 }, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
-                            React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, op.name),
+                            React.createElement("span", { className: "text-[11px] truncate max-w-full text-center text-[#464647]" }, op.name),
                             React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
                                 React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
-                            React.createElement("span", { className: "text-[10px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
-                        React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px]", style: {
+                            React.createElement("span", { className: "text-[10px] mt-[6px] text-[#464647]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
+                        React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] rounded-full", style: {
                                 padding: "8px 14px",
                                 marginBottom: "6px",
+                                border: "1px solid #363c48",
+                                backgroundColor: "#1a202e",
+                                // padding: "14px 10px",
                             } },
                             React.createElement(LottiePlayer
                             // animationData={serviceItem.icons.flexibleAnim}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.10.1",
+  "version": "9.10.3",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/KuposUIComponent.tsx

@@ -9,13 +9,16 @@ import { FilterBarProps } from "./components/FilterBar/tyoes";
 import { CuponeraFilterBarProps } from "./components/CuponeraFilterBar/types";
 import { ResponsiveFilterBar } from "./components/FilterBar";
 import ResponsiveCuponeraFilterBar from "./components/CuponeraFilterBar/ResponsiveCuponeraFilterBar";
+import { ResponsiveSurvey, SurveyProps } from "./components/Survey";
 
 interface KuposUIComponentProps {
   typeOfComponent:
     | "serviceitem"
     | "paymentsidebar"
     | "servicelist"
-    | "filterbar";
+    | "filterbar"
+    | "survey"
+    | "cuponerafilterbar";
   variant?: "mobile" | "desktop";
 
   // Original ServiceItem props
@@ -105,6 +108,21 @@ interface KuposUIComponentProps {
     sortOrder?: "asc" | "desc";
   };
   onFilterChange?: (filters: any) => void;
+
+  // Survey props
+  isOpen?: boolean;
+  selectedScore?: number | null;
+  onScoreChange?: (score: number) => void;
+  feedback?: string;
+  onFeedbackChange?: (text: string) => void;
+  onClose?: () => void;
+  onSkip?: () => void;
+  onSubmit?: (score: number, feedback: string) => void;
+  isSubmitted?: boolean;
+  bookingId?: string;
+  origin?: string;
+  destination?: string;
+  operatorName?: string;
 }
 
 // Using imported ResponsivePaymentSideBar component instead
@@ -144,6 +162,9 @@ export default function KuposUIComponent(
         />
       );
 
+    case "survey":
+      return <ResponsiveSurvey {...(restProps as unknown as SurveyProps)} />;
+
     default:
       return (
         <div className="error-message">

package/src/assets/images/anims/service_list/succes_anim.json

@@ -0,0 +1 @@
+{"v":"5.7.6","fr":30,"ip":0,"op":60,"w":512,"h":512,"nm":"Checkmark-final","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Capa de formas 6","sr":1,"ks":{"o":{"a":0,"k":67,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[173.75,411.25,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[0,0,100]},{"t":39,"s":[3.598,3.598,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":67,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.969,0.576,0.118,0.5,0.957,0.465,0.129,1,0.945,0.353,0.141],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Capa de formas 5","sr":1,"ks":{"o":{"a":0,"k":67,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[423.5,238.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":36,"s":[0,0,100]},{"t":50,"s":[4.406,4.406,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":67,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.969,0.576,0.118,0.5,0.957,0.465,0.129,1,0.945,0.353,0.141],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Capa de formas 4","sr":1,"ks":{"o":{"a":0,"k":67,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,140,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":46,"s":[0,0,100]},{"t":60,"s":[5.219,5.219,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":67,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.969,0.576,0.118,0.5,0.957,0.465,0.129,1,0.945,0.353,0.141],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Capa 1/Check-Mark-Animation2 contornos","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2,"l":2},"a":{"a":0,"k":[256,256,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-54.205,3.498],[-19.88,36.986],[54.205,-36.986]],"c":false},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":14.2,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[262.249,261.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Grupo 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[0]},{"t":40,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Recortar trazados 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"CirculoNaranja","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[254,256,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[0,0,100]},{"t":25,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,1,0.655,0.212,0.5,1,0.608,0.241,1,1,0.561,0.271],"ix":9}},"s":{"a":0,"k":[-29,-62],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":21,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"CirculoBlanco","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[254,256,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[0,0,100]},{"t":25,"s":[109,109,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"CirculoAnaranjadoFondo","sr":1,"ks":{"o":{"a":0,"k":14,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2,"l":2},"a":{"a":0,"k":[256,256,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":20,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-141.385,0],[0,-141.385],[141.385,0],[0,141.385]],"o":[[141.385,0],[0,141.385],[-141.385,0],[0,-141.385]],"v":[[0,-256],[256,0],[0,256],[-256,0]],"c":true},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.944999964097,0.352999997606,0.141000007181,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Relleno 2","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[256,256],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Grupo 1","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Capa de formas 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,252,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[518.633,518.633],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Trazado de rectángulo 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[3.316,3.316],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectángulo 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}

package/src/components/Survey/ResponsiveSurvey.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { SurveyProps } from "./types";
+import SurveyDesktop from "./SurveyDesktop";
+import SurveyMobile from "./SurveyMobile";
+
+export default function ResponsiveSurvey(props: SurveyProps) {
+  const { variant } = props;
+
+  if (variant === "mobile") {
+    return <SurveyMobile {...(props as unknown as SurveyProps)} />;
+  }
+
+  return <SurveyDesktop {...props} />;
+}

package/src/components/Survey/SurveyDesktop.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { SurveyProps } from "./types";
+import { Modal } from "../../ui/Modal";
+import {
+  ThankYouCard,
+  ScoreButtons,
+  FeedbackTextarea,
+  getFeedbackConfig,
+} from "../../ui/Survey";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+
+const SurveyDesktop = ({
+  isOpen,
+  isSubmitted,
+  selectedScore,
+  onScoreChange,
+  feedback = "",
+  onFeedbackChange,
+  onClose,
+  onSkip,
+  onSubmit,
+  colors,
+  icons,
+  isLoading,
+}: SurveyProps) => {
+  if (!isOpen) return null;
+
+  const config = getFeedbackConfig(selectedScore);
+
+  const handleSubmit = () => {
+    if (selectedScore != null) {
+      onSubmit?.(selectedScore, feedback);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      variant="center"
+      size="lg"
+      maxWidth={550}
+      padding={isSubmitted ? 0 : "40px 48px 36px"}
+      borderRadius={28}
+      closeOnBackdrop={false}
+    >
+      {/* {isSubmitted ? (
+        <ThankYouCard onClose={onClose} />
+      ) : ( */}
+      <>
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          aria-label="Close survey"
+          className="absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600"
+        >
+          <img
+            src={icons.closeIcon}
+            alt="Close"
+            className="w-[16px] h-[16px] block"
+          />
+        </button>
+
+        {/* Centered Illustration */}
+        {icons?.surveyIcon && (
+          <div className="flex justify-center mb-3 mt-2">
+            <img
+              src={icons.surveyIcon}
+              alt="Survey Illustration"
+              className="w-[90px] h-[90px] block"
+            />
+          </div>
+        )}
+
+        {/* Centered Title */}
+        <h2 className="text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2">
+          Ayúdanos a mejorar
+        </h2>
+
+        {/* Centered Subtitle */}
+        <p className="text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto">
+          Basándote en tu experiencia de compra.
+          <br />
+          ¿Nos recomendarías a un amigo?
+        </p>
+
+        <ScoreButtons
+          selectedScore={selectedScore}
+          onScoreChange={onScoreChange}
+          buttonHeight={45}
+          fontSize={15}
+          colors={colors}
+        />
+
+        <FeedbackTextarea
+          config={config}
+          feedback={feedback}
+          onFeedbackChange={onFeedbackChange}
+          colors={colors}
+        />
+
+        {/* Centered Submit Button */}
+        <div className="flex justify-center mt-[20px]">
+          <div className="w-[180px]">
+            <KuposButton
+              isSoldOut={selectedScore == null}
+              isLoading={isLoading || false}
+              buttonColor={"#FF8E43"}
+              buyLabel="Enviar"
+              soldOutLabel="Enviar"
+              onClick={handleSubmit}
+            />
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </Modal>
+  );
+};
+
+export default SurveyDesktop;

package/src/components/Survey/SurveyMobile.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { SurveyProps } from "./types";
+import { BottomSheet } from "../../ui/BottomSheet";
+import {
+  ThankYouCard,
+  SurveyHeader,
+  ScoreButtons,
+  FeedbackBanner,
+  FeedbackTextarea,
+  SurveyFooter,
+  getFeedbackConfig,
+} from "../../ui/Survey";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+
+const SurveyMobile = ({
+  isOpen,
+  isSubmitted,
+  selectedScore,
+  onScoreChange,
+  feedback = "",
+  onFeedbackChange,
+  onClose,
+  onSkip,
+  onSubmit,
+  colors,
+  icons,
+  isLoading,
+}: SurveyProps) => {
+  if (!isOpen) return null;
+
+  const config = getFeedbackConfig(selectedScore);
+
+  const handleSubmit = () => {
+    if (selectedScore != null) {
+      onSubmit?.(selectedScore, feedback);
+    }
+  };
+
+  return (
+    <BottomSheet
+      isOpen={isOpen ?? false}
+      onClose={onClose}
+      showHandle={true}
+      showBackdrop={false}
+      blurBackground={true}
+      blurAmount="2px"
+      padding={isSubmitted ? 0 : "0 20px 32px"}
+    >
+      {/* {isSubmitted ? (
+        <ThankYouCard onClose={onClose} titleFontSize="1.35rem" />
+      ) : ( */}
+      <>
+        {/* <SurveyHeader onClose={onClose} /> */}
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          aria-label="Close survey"
+          className="absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600"
+        >
+          <img
+            src={icons.closeIcon}
+            alt="Close"
+            className="w-[16px] h-[16px] block"
+          />
+        </button>
+
+        {/* Centered Illustration */}
+        {icons?.surveyIcon && (
+          <div className="flex justify-center mb-3 mt-2">
+            <img
+              src={icons.surveyIcon}
+              alt="Survey Illustration"
+              className="w-[90px] h-[90px] block"
+            />
+          </div>
+        )}
+
+        {/* Centered Title */}
+        <h2 className="text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2">
+          Ayúdanos a mejorar
+        </h2>
+
+        {/* Centered Subtitle */}
+        <p className="text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto">
+          Basándote en tu experiencia de compra.
+          <br />
+          ¿Nos recomendarías a un amigo?
+        </p>
+
+        <ScoreButtons
+          selectedScore={selectedScore}
+          onScoreChange={onScoreChange}
+          buttonHeight={44}
+          fontSize={13}
+          gap={6}
+          colors={colors}
+        />
+
+        {/* <FeedbackBanner config={config} /> */}
+
+        <FeedbackTextarea
+          config={config}
+          feedback={feedback}
+          onFeedbackChange={onFeedbackChange}
+        />
+
+        <div className="flex justify-center mt-[20px]">
+          <div className="w-[180px]">
+            <KuposButton
+              isSoldOut={selectedScore == null}
+              isLoading={isLoading || false}
+              buttonColor={"#FF8E43"}
+              buyLabel="Enviar"
+              soldOutLabel="Enviar"
+              onClick={handleSubmit}
+            />
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </BottomSheet>
+  );
+};
+
+export default SurveyMobile;

package/src/components/Survey/index.ts

@@ -0,0 +1,5 @@
+import SurveyDesktop from "./SurveyDesktop";
+import SurveyMobile from "./SurveyMobile";
+import ResponsiveSurvey from "./ResponsiveSurvey";
+export { SurveyDesktop, SurveyMobile, ResponsiveSurvey };
+export type { SurveyProps } from "./types";