@cleartrip/talos-trip-segment 1.5.0 → 1.6.0

package/dist/talos-trip-segment.umd.js

@@ -696,9 +696,9 @@
       black100: '#1B1B1B',
       gray97: '#f7f7f7',
       successGreen500: '#11A056',
-      purple700: "#7226E0",
-      neutralOpacity8: "#00000014",
-      neutralShadowOpacity10: "#1A1A1A1A"
+      purple700: '#7226E0',
+      neutralOpacity8: '#00000014',
+      neutralShadowOpacity10: '#1A1A1A1A'
     };
     var elevation = {
       bottomE1: '0px 1px 0px #E7E7E7',
@@ -5084,7 +5084,8 @@
           pinaColada500: colors.pinaColada500,
           green700: colors.green700,
           green100: colors.green100,
-          red100: colors.red100
+          red100: colors.red100,
+          red500: colors.red500
         },
         button: {
           outlinedPrimaryLabel: colors.neutral900,
@@ -5164,6 +5165,7 @@
           lightRed: colors.red200,
           black100: colors.black100,
           gray97: colors.gray97,
+          darkRed: colors.red500,
           orange500: colors.orange500,
           purple700: colors.purple700,
           neutralOpacity8: colors.neutralOpacity8
@@ -6687,6 +6689,7 @@
       TypographyColor["GREEN700"] = "green700";
       TypographyColor["GREEN100"] = "green100";
       TypographyColor["RED100"] = "red100";
+      TypographyColor["RED500"] = "red500";
     })(TypographyColor || (TypographyColor = {}));
     var getTypographyVariant$1 = function (theme, variant) {
       switch (variant) {
@@ -7090,6 +7093,10 @@
           {
             return theme.color.text.red100;
           }
+        case TypographyColor.RED500:
+          {
+            return theme.color.text.red500;
+          }
         default:
           {
             return theme.color.text.primary;
@@ -7915,22 +7922,17 @@
       }));
     });
 
-    var dotAnimationKeyframe = function (_a) {
-      var color1 = _a.color1,
-        color2 = _a.color2;
-      return keyframes(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"], ["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"])), color1, color2, color1);
-    };
+    var dotAnimationKeyframe = keyframes(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  0% { background-color: var(--dot-color-1); transform: scale(1); }\n  50% { background-color: var(--dot-color-2); transform: scale(1.2); }\n  100% { background-color: var(--dot-color-1); transform: scale(1); }\n"], ["\n  0% { background-color: var(--dot-color-1); transform: scale(1); }\n  50% { background-color: var(--dot-color-2); transform: scale(1.2); }\n  100% { background-color: var(--dot-color-1); transform: scale(1); }\n"])));
     var StyledLoaderDot = _default.div(function (_a) {
       var theme = _a.theme,
         dotId = _a.dotId,
         variant = _a.variant,
+        color1 = _a.color1,
+        color2 = _a.color2,
         _b = _a.css,
         styleCss = _b === void 0 ? {} : _b;
       var size = getLoaderDimension(variant, theme);
-      return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "], ["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "])), size, size, theme.border.radius['50P'], theme.color.background.defaultDark, dotAnimationKeyframe({
-        color1: theme.color.background.defaultDark,
-        color2: theme.color.background.defaultDarkest
-      }), 1 / 3 * dotId, styleCss);
+      return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n      --dot-color-1: ", ";\n      --dot-color-2: ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: var(--dot-color-1);\n      animation: ", " ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "], ["\n      --dot-color-1: ", ";\n      --dot-color-2: ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: var(--dot-color-1);\n      animation: ", " ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "])), color1 !== null && color1 !== void 0 ? color1 : theme.color.background.defaultDark, color2 !== null && color2 !== void 0 ? color2 : theme.color.background.defaultDarkest, size, size, theme.border.radius['50P'], dotAnimationKeyframe, 1 / 3 * dotId, styleCss);
     });
     var StyledLoaderWrapper = _default.div(function (_a) {
       _a.theme;
@@ -7958,6 +7960,7 @@
       var css = _a.css,
         _b = _a.variant,
         variant = _b === void 0 ? 'medium' : _b,
+        dotColors = _a.dotColors,
         _c = _a.styleConfig,
         styleConfig = _c === void 0 ? {} : _c;
       var theme = useTheme();
@@ -7976,6 +7979,8 @@
             variant: variant,
             theme: theme,
             dotId: id,
+            color1: dotColors === null || dotColors === void 0 ? void 0 : dotColors.primary,
+            color2: dotColors === null || dotColors === void 0 ? void 0 : dotColors.secondary,
             className: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.className,
             css: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.css
           }, id);
@@ -21319,9 +21324,8 @@
         crossColor: '#1A1A1A'
       });
     };
-    var ModalWithCloseOverlay = React__default$1.forwardRef(function (props, forwardedRef) {
-      var _a = props || {},
-        wrapperCss = _a.wrapperCss,
+    var ModalWithCloseOverlay = React__default$1.forwardRef(function (_a, forwardedRef) {
+      var wrapperCss = _a.wrapperCss,
         isBack = _a.isBack,
         children = _a.children,
         _b = _a.variant,
@@ -21329,19 +21333,19 @@
         isCenter = _a.isCenter,
         _c = _a.isTop,
         isTop = _c === void 0 ? true : _c,
-        rest = __rest$2(_a, ["wrapperCss", "isBack", "children", "variant", "isCenter", "isTop"]);
-      var onClose = rest.onClose;
+        onClose = _a.onClose,
+        rest = __rest$2(_a, ["wrapperCss", "isBack", "children", "variant", "isCenter", "isTop", "onClose"]);
       var theme = useTheme();
       var closeButtonStyles = getCloseButtonStyle({
         theme: theme,
-        isLeft: isBack,
+        isLeft: isBack !== null && isBack !== void 0 ? isBack : false,
         variant: variant,
         isCenter: isCenter,
         isTop: isTop
       });
       var CloseIcon = getCloseIcon(isBack, variant);
       var onCloseClick = function (e) {
-        onClose(e);
+        onClose === null || onClose === void 0 ? void 0 : onClose(e);
       };
       return jsxRuntimeExports$2.jsx(Modal, __assign$4({
         ref: forwardedRef,
@@ -21367,6 +21371,7 @@
         }))
       }));
     });
+    ModalWithCloseOverlay.displayName = 'ModalWithCloseOverlay';
 
     React__default$1.forwardRef(function (_a, forwardedRef) {
       var children = _a.children,
@@ -28673,14 +28678,28 @@
         state = _a[0],
         setState = _a[1];
       var onDragStart = React__default$1.useCallback(function (event) {
-        var _a;
+        var _a, _b;
         var isTouch = 'touches' in event || 'changedTouches' in event;
         if (isTouch && ((_a = event.touches) !== null && _a !== void 0 ? _a : event.changedTouches).length > 1) return;
+        var _c = isTouch ? (_b = event.touches[0]) !== null && _b !== void 0 ? _b : event.changedTouches[0] : event,
+          clientX = _c.clientX,
+          clientY = _c.clientY;
         setState(function (previous) {
-          var _a;
-          var _b = isTouch ? (_a = event.touches[0]) !== null && _a !== void 0 ? _a : event.changedTouches[0] : event,
-            clientX = _b.clientX,
-            clientY = _b.clientY;
+          if (events.onDragStart) {
+            var eventData = {
+              absX: 0,
+              absY: 0,
+              deltaX: 0,
+              deltaY: 0,
+              clientY: clientY,
+              dir: RIGHT,
+              event: event,
+              initial: DRAGGER_INITIAL_STATE.initial,
+              velocity: 0,
+              initialDxDy: previous.initialDxDy
+            };
+            events.onDragStart(eventData);
+          }
           return __assign$4(__assign$4(__assign$4({}, previous), DRAGGER_INITIAL_STATE), {
             initialDxDy: previous.initialDxDy,
             lastDxDy: previous.initialDxDy,
@@ -28689,7 +28708,7 @@
             dragging: true
           });
         });
-      }, []);
+      }, [events]);
       var onDragging = React__default$1.useCallback(function (event) {
         setState(function (state) {
           var _a, _b;
@@ -28698,7 +28717,6 @@
             return state;
           }
           event.stopPropagation();
-          event.preventDefault();
           var _c = isTouch ? (_b = event.touches[0]) !== null && _b !== void 0 ? _b : event.changedTouches[0] : event,
             clientX = _c.clientX,
             clientY = _c.clientY;
@@ -29744,8 +29762,8 @@
       }
     });
     React__default$1.createContext(undefined);
-    var moveRight = keyframes(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
-    var moveRightAgain = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+    var moveRight = /*#__PURE__*/keyframes(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+    var moveRightAgain = /*#__PURE__*/keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
     var templateObject_1$1, templateObject_2;
     /*#__PURE__*/_default.div.withConfig({
       displayName: "BusinessDropdown__BDHoverContainer",
@@ -30218,6 +30236,8 @@
         suffix = props.suffix,
         onChange = props.onChange,
         onKeyDown = props.onKeyDown,
+        onFocus = props.onFocus,
+        onBlur = props.onBlur,
         styleConfig = props.styleConfig,
         _e = props.disabled,
         disabled = _e === void 0 ? false : _e;
@@ -30275,6 +30295,14 @@
         onChange === null || onChange === void 0 ? void 0 : onChange(text.trim());
         checkMultiLine();
       }, [disabled, onChange, checkMultiLine]);
+      var handleFocus = React__default$1.useCallback(function (e) {
+        if (disabled) return;
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+      }, [disabled, onFocus]);
+      var handleBlur = React__default$1.useCallback(function (e) {
+        if (disabled) return;
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+      }, [disabled, onBlur]);
       var focusEditor = React__default$1.useCallback(function () {
         var _a;
         if (disabled) return;
@@ -30331,6 +30359,8 @@
           "data-placeholder": placeholder,
           onKeyDown: handleKeyDown,
           onInput: handleInput,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
           className: editor === null || editor === void 0 ? void 0 : editor.className,
           css: editor === null || editor === void 0 ? void 0 : editor.css,
           disabled: disabled
@@ -30381,137 +30411,177 @@
         onClick === null || onClick === void 0 ? void 0 : onClick();
       }, [disabled, onClick]);
       return jsxRuntimeExports$2.jsx(Container, __assign$4({
-        height: "24px",
-        width: "24px",
-        borderRadius: "50%",
+        height: '24px',
+        width: '24px',
+        borderRadius: '50%',
         onClick: handleClick,
         css: {
           backgroundColor: backgroundColor
         },
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: disabled ? "not-allowed" : "pointer"
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: disabled ? 'not-allowed' : 'pointer'
       }, {
         children: children
       }));
     };
     var Keyboard = function (props) {
       return jsxRuntimeExports$2.jsxs("svg", __assign$4({
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
       }, {
         children: [jsxRuntimeExports$2.jsx("path", {
-          d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
-          fill: "white",
+          d: 'M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z',
+          fill: 'white',
           fillOpacity: 0.4
         }), jsxRuntimeExports$2.jsx("mask", __assign$4({
-          id: "mask0_1511_44906",
+          id: 'mask0_1511_44906',
           style: {
             maskType: 'alpha'
           },
-          maskUnits: "userSpaceOnUse",
-          x: "3",
-          y: "3",
-          width: "18",
-          height: "18"
+          maskUnits: 'userSpaceOnUse',
+          x: '3',
+          y: '3',
+          width: '18',
+          height: '18'
         }, {
           children: jsxRuntimeExports$2.jsx("rect", {
-            x: "3",
-            y: "3",
-            width: "18",
-            height: "18",
-            fill: "#D9D9D9"
+            x: '3',
+            y: '3',
+            width: '18',
+            height: '18',
+            fill: '#D9D9D9'
           })
         })), jsxRuntimeExports$2.jsx("g", __assign$4({
-          mask: "url(#mask0_1511_44906)"
+          mask: 'url(#mask0_1511_44906)'
         }, {
           children: jsxRuntimeExports$2.jsx("path", {
-            d: "M5.24998 18C4.83748 18 4.48436 17.8531 4.19061 17.5594C3.89686 17.2656 3.74998 16.9125 3.74998 16.5V7.5C3.74998 7.0875 3.89686 6.73438 4.19061 6.44063C4.48436 6.14688 4.83748 6 5.24998 6H18.75C19.1625 6 19.5156 6.14688 19.8094 6.44063C20.1031 6.73438 20.25 7.0875 20.25 7.5V16.5C20.25 16.9125 20.1031 17.2656 19.8094 17.5594C19.5156 17.8531 19.1625 18 18.75 18H5.24998ZM5.24998 16.5H18.75V7.5H5.24998V16.5ZM8.99998 15.75H15V14.25H8.99998V15.75ZM6.74998 13.125H8.24998V11.625H6.74998V13.125ZM9.74998 13.125H11.25V11.625H9.74998V13.125ZM12.75 13.125H14.25V11.625H12.75V13.125ZM15.75 13.125H17.25V11.625H15.75V13.125ZM6.74998 10.5H8.24998V9H6.74998V10.5ZM9.74998 10.5H11.25V9H9.74998V10.5ZM12.75 10.5H14.25V9H12.75V10.5ZM15.75 10.5H17.25V9H15.75V10.5Z",
-            fill: "#1C1B1F"
+            d: 'M5.24998 18C4.83748 18 4.48436 17.8531 4.19061 17.5594C3.89686 17.2656 3.74998 16.9125 3.74998 16.5V7.5C3.74998 7.0875 3.89686 6.73438 4.19061 6.44063C4.48436 6.14688 4.83748 6 5.24998 6H18.75C19.1625 6 19.5156 6.14688 19.8094 6.44063C20.1031 6.73438 20.25 7.0875 20.25 7.5V16.5C20.25 16.9125 20.1031 17.2656 19.8094 17.5594C19.5156 17.8531 19.1625 18 18.75 18H5.24998ZM5.24998 16.5H18.75V7.5H5.24998V16.5ZM8.99998 15.75H15V14.25H8.99998V15.75ZM6.74998 13.125H8.24998V11.625H6.74998V13.125ZM9.74998 13.125H11.25V11.625H9.74998V13.125ZM12.75 13.125H14.25V11.625H12.75V13.125ZM15.75 13.125H17.25V11.625H15.75V13.125ZM6.74998 10.5H8.24998V9H6.74998V10.5ZM9.74998 10.5H11.25V9H9.74998V10.5ZM12.75 10.5H14.25V9H12.75V10.5ZM15.75 10.5H17.25V9H15.75V10.5Z',
+            fill: '#1C1B1F'
           })
         }))]
       }));
     };
     var Plus = function (props) {
       return jsxRuntimeExports$2.jsxs("svg", __assign$4({
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
       }, {
         children: [jsxRuntimeExports$2.jsx("path", {
-          d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
-          fill: "white",
+          d: 'M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z',
+          fill: 'white',
           fillOpacity: 0.4
         }), jsxRuntimeExports$2.jsx("path", {
-          d: "M12 5.5C12.2761 5.5 12.5 5.72386 12.5 6V11.5H18C18.2761 11.5 18.5 11.7239 18.5 12C18.5 12.2761 18.2761 12.5 18 12.5H12.5V18C12.5 18.2761 12.2761 18.5 12 18.5C11.7239 18.5 11.5 18.2761 11.5 18V12.5H6C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5H11.5V6C11.5 5.72386 11.7239 5.5 12 5.5Z",
-          fill: "#1A1A1A"
+          d: 'M12 5.5C12.2761 5.5 12.5 5.72386 12.5 6V11.5H18C18.2761 11.5 18.5 11.7239 18.5 12C18.5 12.2761 18.2761 12.5 18 12.5H12.5V18C12.5 18.2761 12.2761 18.5 12 18.5C11.7239 18.5 11.5 18.2761 11.5 18V12.5H6C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5H11.5V6C11.5 5.72386 11.7239 5.5 12 5.5Z',
+          fill: '#1A1A1A'
         })]
       }));
     };
     var UpArrow = function (props) {
       var _a = props.fill,
-        fill = _a === void 0 ? "white" : _a,
+        fill = _a === void 0 ? 'white' : _a,
         rest = __rest$2(props, ["fill"]);
       return jsxRuntimeExports$2.jsx("svg", __assign$4({
-        width: "14",
-        height: "14",
-        viewBox: "0 0 14 14",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        width: '14',
+        height: '14',
+        viewBox: '0 0 14 14',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
       }, rest, {
         children: jsxRuntimeExports$2.jsx("path", {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
-          d: "M12.5596 6.66895C12.7306 6.83963 12.7303 7.11804 12.5596 7.28906C12.3889 7.45968 12.1114 7.45962 11.9405 7.28906L7.43753 2.79395L7.43753 12.25C7.43753 12.4916 7.24166 12.6875 7.00003 12.6875C6.75843 12.6875 6.56253 12.4916 6.56253 12.25L6.56253 2.81445L2.0596 7.30957C1.88868 7.48013 1.61117 7.48028 1.44046 7.30957C1.26991 7.13866 1.26977 6.86114 1.44046 6.69043L6.64163 1.50098C6.7207 1.38774 6.85145 1.31251 7.00003 1.3125C7.00165 1.3125 7.0033 1.31338 7.00492 1.31348C7.11836 1.31213 7.23268 1.35406 7.31937 1.44043L12.5596 6.66895Z",
+          "fill-rule": 'evenodd',
+          "clip-rule": 'evenodd',
+          d: 'M12.5596 6.66895C12.7306 6.83963 12.7303 7.11804 12.5596 7.28906C12.3889 7.45968 12.1114 7.45962 11.9405 7.28906L7.43753 2.79395L7.43753 12.25C7.43753 12.4916 7.24166 12.6875 7.00003 12.6875C6.75843 12.6875 6.56253 12.4916 6.56253 12.25L6.56253 2.81445L2.0596 7.30957C1.88868 7.48013 1.61117 7.48028 1.44046 7.30957C1.26991 7.13866 1.26977 6.86114 1.44046 6.69043L6.64163 1.50098C6.7207 1.38774 6.85145 1.31251 7.00003 1.3125C7.00165 1.3125 7.0033 1.31338 7.00492 1.31348C7.11836 1.31213 7.23268 1.35406 7.31937 1.44043L12.5596 6.66895Z',
           fill: fill
         })
       }));
     };
+    var Stop = function () {
+      return jsxRuntimeExports$2.jsxs("svg", __assign$4({
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, {
+        children: [jsxRuntimeExports$2.jsx("path", {
+          d: "M16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0Z",
+          fill: "#F3F3F3"
+        }), jsxRuntimeExports$2.jsx("path", {
+          d: "M15.9996 7.95857C11.5586 7.95868 7.95851 11.5593 7.95851 16.0003C7.95862 20.4412 11.5587 24.0413 15.9996 24.0414C20.4407 24.0414 24.0413 20.4413 24.0414 16.0003C24.0414 11.5592 20.4407 7.95857 15.9996 7.95857ZM15.9996 7C20.9701 7 24.9999 11.0298 24.9999 16.0003C24.9998 20.9707 20.9701 25 15.9996 25C11.0293 24.9999 7.00005 20.9707 6.99994 16.0003C6.99994 11.0299 11.0292 7.00011 15.9996 7Z",
+          fill: "#FF4F17"
+        }), jsxRuntimeExports$2.jsx("path", {
+          d: "M14.25 19.3529C13.364 19.3529 12.6458 18.6347 12.6458 17.7487V14.2487C12.6458 13.3627 13.364 12.6445 14.25 12.6445H17.75C18.6359 12.6445 19.3541 13.3627 19.3541 14.2487V17.7487C19.3541 18.6347 18.6359 19.3529 17.75 19.3529H14.25Z",
+          fill: "#FF4F17"
+        })]
+      }));
+    };
     React__default$1.forwardRef(function (props, ref) {
       var _a = props.showKeyboardIcon,
         showKeyboardIcon = _a === void 0 ? false : _a,
         _b = props.disableAction,
         disableAction = _b === void 0 ? false : _b,
         onSubmit = props.onSubmit,
-        onPrefixClick = props.onPrefixClick;
+        onPrefixClick = props.onPrefixClick,
+        _c = props.isStreaming,
+        isStreaming = _c === void 0 ? false : _c,
+        onStop = props.onStop,
+        prefixProp = props.prefix,
+        suffixProp = props.suffix;
       var theme = useTheme();
-      var prefix = showKeyboardIcon ? jsxRuntimeExports$2.jsx(Keyboard, {}) : jsxRuntimeExports$2.jsx(Plus, {});
       var handlePrefixClick = function () {
         if (disableAction) return;
         onPrefixClick === null || onPrefixClick === void 0 ? void 0 : onPrefixClick();
       };
+      var prefixNode = prefixProp !== null && prefixProp !== void 0 ? prefixProp : jsxRuntimeExports$2.jsx(Container, __assign$4({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        onClick: handlePrefixClick,
+        cursor: "pointer"
+      }, {
+        children: showKeyboardIcon ? jsxRuntimeExports$2.jsx(Keyboard, {}) : jsxRuntimeExports$2.jsx(Plus, {})
+      }));
+      var submitAction = jsxRuntimeExports$2.jsx(ExpandableInputAction, __assign$4({
+        disabled: disableAction,
+        onClick: onSubmit
+      }, {
+        children: jsxRuntimeExports$2.jsx(UpArrow, {
+          fill: disableAction ? theme.color.background.defaultDark : theme.color.background.neutral
+        })
+      }));
+      var stopAction = jsxRuntimeExports$2.jsx(ExpandableInputAction, __assign$4({
+        onClick: onStop
+      }, {
+        children: jsxRuntimeExports$2.jsx(Stop, {})
+      }));
+      var suffixNode = suffixProp !== null && suffixProp !== void 0 ? suffixProp : isStreaming ? stopAction : submitAction;
       return jsxRuntimeExports$2.jsx(ExpandableInputProvider, __assign$4({
         variant: ExpandableInputVariant.AI_GRADIENT
       }, {
         children: jsxRuntimeExports$2.jsx(ExpandableInput, __assign$4({}, props, {
           ref: ref,
-          prefix: jsxRuntimeExports$2.jsx(Container, __assign$4({
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            onClick: handlePrefixClick,
-            cursor: "pointer"
-          }, {
-            children: prefix
-          })),
-          suffix: jsxRuntimeExports$2.jsx(ExpandableInputAction, __assign$4({
-            disabled: disableAction,
-            onClick: onSubmit
-          }, {
-            children: jsxRuntimeExports$2.jsx(UpArrow, {
-              fill: disableAction ? theme.color.background.defaultDark : theme.color.background.neutral
-            })
-          }))
+          prefix: prefixNode,
+          suffix: suffixNode
         }))
       }));
     });
 
+    var InitialCorner;
+    (function (InitialCorner) {
+      InitialCorner["TOP_LEFT"] = "top-left";
+      InitialCorner["TOP_RIGHT"] = "top-right";
+      InitialCorner["BOTTOM_LEFT"] = "bottom-left";
+      InitialCorner["BOTTOM_RIGHT"] = "bottom-right";
+    })(InitialCorner || (InitialCorner = {}));
+
     var getTripSegmentStyle = function (theme) {
         return {
             root: {