@cleartrip/ct-design-expandable-input 1.2.0-SNAPSHOT-native-main.3 → 1.2.0-SNAPSHOT-native-main.0

package/dist/ct-design-expandable-input.browser.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e,t=require("react/jsx-runtime"),r=require("react"),n=require("@cleartrip/ct-design-container"),a=require("@cleartrip/ct-design-style-manager"),o=require("@cleartrip/ct-design-typography"),i=require("@cleartrip/ct-design-theme"),l=require("@cleartrip/ct-design-icons");exports.ExpandableInputSize=void 0,(exports.ExpandableInputSize||(exports.ExpandableInputSize={})).SM="sm",exports.ExpandableInputVariant=void 0,(e=exports.ExpandableInputVariant||(exports.ExpandableInputVariant={})).DEFAULT="default",e.AI_GRADIENT="ai-gradient";const s=(e,t)=>(exports.ExpandableInputSize.SM,{minHeight:e.size[12],typographyVariant:"B2"}),u=({theme:e,size:t,isMultiLine:r,variant:n})=>{const a=parseFloat(String(e.border.width.sm)),o=parseFloat(String(e.border.width.md)),{minHeight:i}=s(e),l=r?e.border.radius[16]:e.border.radius[24],u=((e,t)=>{switch(t){case exports.ExpandableInputVariant.AI_GRADIENT:return e.color.background.brand;case exports.ExpandableInputVariant.DEFAULT:default:return e.color.background.defaultDarkest}})(e,n);return{position:"relative",display:"flex",flexDirection:"row",alignItems:r?"flex-end":"center",gap:e.spacing[2],width:"100%",boxSizing:"border-box",minHeight:i,padding:e.spacing[2],backgroundColor:e.color.background.neutral,borderWidth:a,borderStyle:"solid",borderColor:e.color.background.disabledDark,borderRadius:l,transition:"border-radius 0.15s ease",cursor:"text","&:focus-within":{borderColor:"transparent",backgroundClip:"padding-box","&::before":{opacity:1}},"&::before":{content:'""',position:"absolute",inset:`-${o}px`,borderRadius:l,background:u,zIndex:-1,opacity:0,transition:"opacity 0.15s ease, border-radius 0.15s ease"}}},c=({theme:e,rows:t,size:r,variant:n})=>{const{typographyVariant:a}=s(e),{fontSize:i,fontWeight:l,lineHeight:u,letterSpacing:c}=o.getTypographyStyles({theme:e,variant:a}),d=e.color.text.primary,p=e.color.text.subHeading,x=((e,t)=>{switch(t){case exports.ExpandableInputVariant.AI_GRADIENT:case exports.ExpandableInputVariant.DEFAULT:}return e.color.background.defaultDarkest})(e,n),b=parseFloat(String(u));return{flex:1,minHeight:b,maxHeight:b*t,overflowY:"auto",fontSize:i,fontWeight:l,lineHeight:u,letterSpacing:c,color:d,caretColor:x,outlineStyle:"none",overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"pre-wrap","&[data-placeholder]:empty:before":{content:"attr(data-placeholder)",color:p,pointerEvents:"none"}}},d=r.createContext(null),p=({variant:e,children:n})=>{const a=r.useMemo(()=>({variant:e}),[e]);return t.jsx(d.Provider,{value:a,children:n})};function x(){var e;return null!==(e=r.useContext(d))&&void 0!==e?e:void 0}const b=2,g=a.makeStyles(()=>({slot:{display:"flex",alignItems:"center",justifyContent:"center"}})),h=r.forwardRef((e,o)=>{var i;const{placeholder:l,value:s="",rows:d=b,size:p="sm",prefix:h,suffix:f,onChange:C,onKeyDown:m,onFocus:y,onBlur:k,styleConfig:v,disabled:I=!1}=e,{root:E=[],editor:V=[]}=null!=v?v:{},w=r.useRef(null),[H,S]=r.useState(!1),{variant:j=exports.ExpandableInputVariant.DEFAULT}=null!==(i=x())&&void 0!==i?i:{},D=a.useStyles(e=>({root:u({theme:e,size:p,isMultiLine:H,variant:j})}),[p,H,j]),A=a.useStyles(e=>({root:c({theme:e,rows:d,size:p,variant:j})}),[d,p,j]),M={root:[D.root,...E]},z={root:[g.slot]},T=a.useWebMergeStyles([A.root,...V],[A.root,V]),F=r.useCallback(()=>{const e=w.current;if(!e||d<=1)return void S(!1);const t=parseFloat(getComputedStyle(e).lineHeight);S(e.scrollHeight>t)},[d]);r.useEffect(()=>{var e;const t=w.current;if(!t)return;const r=null!==(e=t.innerText)&&void 0!==e?e:"";r!==s&&(document.activeElement!==t||r.trim()!==(null!=s?s:"").trim())?(t.textContent=s,F()):F()},[s,F]);const Z=r.useCallback(e=>{if(I)return;(e.ctrlKey||e.metaKey)&&["b","i","u","s","`"].includes(e.key.toLowerCase())&&e.preventDefault(),null==m||m(e)},[I,m]),R=r.useCallback(()=>{var e;if(I)return;const t=w.current;if(!t)return;const r=null!==(e=t.innerText)&&void 0!==e?e:"";r.trim()||(t.textContent=""),null==C||C(r.trim()),F()},[I,C,F]),L=r.useCallback(e=>{I||null==y||y(e)},[I,y]),U=r.useCallback(e=>{I||null==k||k(e)},[I,k]),_=r.useCallback(()=>{var e;I||null===(e=w.current)||void 0===e||e.focus()},[I]);return r.useImperativeHandle(o,()=>({focus:()=>{var e;return null===(e=w.current)||void 0===e?void 0:e.focus()},blur:()=>{var e;return null===(e=w.current)||void 0===e?void 0:e.blur()},get element(){return w.current}}),[]),t.jsxs(n.Container,{styleConfig:M,onClick:_,children:[t.jsx(n.Container,{styleConfig:z,children:h}),t.jsx("div",{ref:w,className:T,contentEditable:!I,suppressContentEditableWarning:!0,role:"textbox","aria-multiline":"true","aria-label":"Message input",spellCheck:!0,autoCorrect:"on",autoCapitalize:"sentences","data-placeholder":l,onKeyDown:Z,onInput:R,onFocus:L,onBlur:U}),t.jsx(n.Container,{styleConfig:z,children:f})]})});h.displayName="ExpandableInput";const f=(e,t,r)=>{if(r)return{backgroundColor:e.color.background.gray500};switch(t){case exports.ExpandableInputVariant.AI_GRADIENT:return{backgroundColor:e.color.background.brand};case exports.ExpandableInputVariant.DEFAULT:default:return{backgroundColor:e.color.background.primary}}},C=a.makeStyles(e=>({action:{width:e.size[6],height:e.size[6],borderRadius:e.border.radius[12],alignItems:"center",justifyContent:"center"}})),m=e=>{var o;const{children:l,onClick:s,disabled:u}=e,c=i.useTheme(),{variant:d=exports.ExpandableInputVariant.DEFAULT}=null!==(o=x())&&void 0!==o?o:{},p=a.useStyles(()=>({action:f(c,d,u)}),[c,d,u]),b=r.useCallback(()=>{u||null==s||s()},[u,s]);return t.jsx(n.Container,{onClick:b,styleConfig:{root:[C.action,p.action]},children:l})},y=()=>t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.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",fillOpacity:.4}),t.jsx("mask",{id:"mask0_1511_44906",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"3",y:"3",width:"18",height:"18",children:t.jsx("rect",{x:"3",y:"3",width:"18",height:"18",fill:"#D9D9D9"})}),t.jsx("g",{mask:"url(#mask0_1511_44906)",children:t.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"})})]}),k=a.makeStyles(()=>({prefix:{display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"}})),v=r.forwardRef((e,r)=>{const{showKeyboardIcon:a=!1,disableAction:o=!1,onSubmit:s,onPrefixClick:u,isStreaming:c=!1,onStop:d,prefix:x,suffix:b}=e,g=i.useTheme(),f=null!=x?x:t.jsx(n.Container,{styleConfig:{root:[k.prefix]},onClick:()=>{o||null==u||u()},children:a?t.jsx(y,{}):t.jsx(l.PlusChatIcon,{})}),C=t.jsx(m,{disabled:o,onClick:s,children:t.jsx(l.UpArrow,{fill:o?g.color.background.defaultDark:g.color.background.neutral})}),v=t.jsx(m,{onClick:d,children:t.jsx(l.Stop,{})}),I=null!=b?b:c?v:C;return t.jsx(p,{variant:exports.ExpandableInputVariant.AI_GRADIENT,children:t.jsx(h,Object.assign({},e,{ref:r,prefix:f,suffix:I}))})});v.displayName="AIChatInput",exports.AiChatInput=v,exports.ExpandableInput=h,exports.ExpandableInputAction=m,exports.ExpandableInputProvider=p,exports.useExpandableInputContext=x;
+"use strict";var e,t=require("react/jsx-runtime"),r=require("react"),n=require("@cleartrip/ct-design-container"),a=require("@cleartrip/ct-design-style-manager"),o=require("@cleartrip/ct-design-typography"),i=require("@cleartrip/ct-design-theme"),l=require("@cleartrip/ct-design-icons");exports.ExpandableInputSize=void 0,(exports.ExpandableInputSize||(exports.ExpandableInputSize={})).SM="sm",exports.ExpandableInputVariant=void 0,(e=exports.ExpandableInputVariant||(exports.ExpandableInputVariant={})).DEFAULT="default",e.AI_GRADIENT="ai-gradient";const s=(e,t)=>(exports.ExpandableInputSize.SM,{minHeight:e.size[12],typographyVariant:"B2"}),u=({theme:e,size:t,isMultiLine:r,variant:n})=>{const a=parseFloat(String(e.border.width.sm)),o=parseFloat(String(e.border.width.md)),{minHeight:i}=s(e),l=r?e.border.radius[16]:e.border.radius[24],u=((e,t)=>{switch(t){case exports.ExpandableInputVariant.AI_GRADIENT:return e.color.background.brand;case exports.ExpandableInputVariant.DEFAULT:default:return e.color.background.defaultDarkest}})(e,n);return{position:"relative",display:"flex",flexDirection:"row",alignItems:r?"flex-end":"center",gap:e.spacing[2],width:"100%",boxSizing:"border-box",minHeight:i,padding:e.spacing[2],backgroundColor:e.color.background.neutral,borderWidth:a,borderStyle:"solid",borderColor:e.color.background.disabledDark,borderRadius:l,transition:"border-radius 0.15s ease",cursor:"text","&:focus-within":{borderColor:"transparent",backgroundClip:"padding-box","&::before":{opacity:1}},"&::before":{content:'""',position:"absolute",inset:`-${o}px`,borderRadius:l,background:u,zIndex:-1,opacity:0,transition:"opacity 0.15s ease, border-radius 0.15s ease"}}},c=({theme:e,rows:t,size:r,variant:n})=>{const{typographyVariant:a}=s(e),{fontSize:i,fontWeight:l,lineHeight:u,letterSpacing:c}=o.getTypographyStyles({theme:e,variant:a}),d=e.color.text.primary,p=e.color.text.subHeading,x=((e,t)=>{switch(t){case exports.ExpandableInputVariant.AI_GRADIENT:case exports.ExpandableInputVariant.DEFAULT:}return e.color.background.defaultDarkest})(e,n),b=parseFloat(String(u));return{flex:1,minHeight:b,maxHeight:b*t,overflowY:"auto",fontSize:i,fontWeight:l,lineHeight:u,letterSpacing:c,color:d,caretColor:x,outlineStyle:"none",overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"pre-wrap","&[data-placeholder]:empty:before":{content:"attr(data-placeholder)",color:p,pointerEvents:"none"}}},d=r.createContext(null),p=({variant:e,children:n})=>{const a=r.useMemo(()=>({variant:e}),[e]);return t.jsx(d.Provider,{value:a,children:n})};function x(){var e;return null!==(e=r.useContext(d))&&void 0!==e?e:void 0}const b=2,g=a.makeStyles(()=>({slot:{display:"flex",alignItems:"center",justifyContent:"center"}})),h=r.forwardRef((e,o)=>{var i;const{placeholder:l,value:s="",rows:d=b,size:p="sm",prefix:h,suffix:f,onChange:C,onKeyDown:m,onFocus:y,onBlur:k,styleConfig:v,disabled:I=!1}=e,{root:E=[],editor:V=[]}=null!=v?v:{},w=r.useRef(null),[H,S]=r.useState(!1),{variant:j=exports.ExpandableInputVariant.DEFAULT}=null!==(i=x())&&void 0!==i?i:{},D=a.useStyles(e=>({root:u({theme:e,size:p,isMultiLine:H,variant:j})}),[p,H,j]),A=a.useStyles(e=>({root:c({theme:e,rows:d,size:p,variant:j})}),[d,p,j]),M={root:[D.root,...E]},z={root:[g.slot]},T=a.useWebMergeStyles([A.root,...V],[A.root,V]),F=r.useCallback(()=>{const e=w.current;if(!e||d<=1)return void S(!1);const t=parseFloat(getComputedStyle(e).lineHeight);S(e.scrollHeight>t)},[d]);r.useEffect(()=>{var e;const t=w.current;if(!t)return;const r=null!==(e=t.innerText)&&void 0!==e?e:"";r!==s&&(document.activeElement!==t||r.trim()!==(null!=s?s:"").trim())?(t.textContent=s,F()):F()},[s,F]);const Z=r.useCallback(e=>{if(I)return;(e.ctrlKey||e.metaKey)&&["b","i","u","s","`"].includes(e.key.toLowerCase())&&e.preventDefault(),null==m||m(e)},[I,m]),R=r.useCallback(()=>{var e;if(I)return;const t=w.current;if(!t)return;const r=null!==(e=t.innerText)&&void 0!==e?e:"";r.trim()||(t.textContent=""),null==C||C(r.trim()),F()},[I,C,F]),L=r.useCallback(e=>{I||null==y||y(e)},[I,y]),U=r.useCallback(e=>{I||null==k||k(e)},[I,k]),_=r.useCallback(()=>{var e;I||null===(e=w.current)||void 0===e||e.focus()},[I]);return r.useImperativeHandle(o,()=>({focus:()=>{var e;return null===(e=w.current)||void 0===e?void 0:e.focus()},blur:()=>{var e;return null===(e=w.current)||void 0===e?void 0:e.blur()},get element(){return w.current}}),[]),t.jsxs(n.Container,{styleConfig:M,onClick:_,children:[t.jsx(n.Container,{styleConfig:z,children:h}),t.jsx("div",{ref:w,className:T,contentEditable:!I,suppressContentEditableWarning:!0,role:"textbox","aria-multiline":"true","aria-label":"Message input",spellCheck:!0,autoCorrect:"on",autoCapitalize:"sentences","data-placeholder":l,onKeyDown:Z,onInput:R,onFocus:L,onBlur:U}),t.jsx(n.Container,{styleConfig:z,children:f})]})});h.displayName="ExpandableInput";const f=(e,t,r)=>{if(r)return{backgroundColor:e.color.background.gray500};switch(t){case exports.ExpandableInputVariant.AI_GRADIENT:return{backgroundColor:e.color.background.brand};case exports.ExpandableInputVariant.DEFAULT:default:return{backgroundColor:e.color.background.primary}}},C=a.makeStyles(e=>({action:{width:e.size[7],height:e.size[7],borderRadius:e.border.radius[12],alignItems:"center",justifyContent:"center"}})),m=e=>{var o;const{children:l,onClick:s,disabled:u}=e,c=i.useTheme(),{variant:d=exports.ExpandableInputVariant.DEFAULT}=null!==(o=x())&&void 0!==o?o:{},p=a.useStyles(()=>({action:f(c,d,u)}),[c,d,u]),b=r.useCallback(()=>{u||null==s||s()},[u,s]);return t.jsx(n.Container,{onClick:b,styleConfig:{root:[C.action,p.action]},children:l})},y=()=>t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.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",fillOpacity:.4}),t.jsx("mask",{id:"mask0_1511_44906",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"3",y:"3",width:"18",height:"18",children:t.jsx("rect",{x:"3",y:"3",width:"18",height:"18",fill:"#D9D9D9"})}),t.jsx("g",{mask:"url(#mask0_1511_44906)",children:t.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"})})]}),k=a.makeStyles(()=>({prefix:{display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"}})),v=r.forwardRef((e,r)=>{const{showKeyboardIcon:a=!1,disableAction:o=!1,onSubmit:s,onPrefixClick:u,isStreaming:c=!1,onStop:d,prefix:x,suffix:b}=e,g=i.useTheme(),f=null!=x?x:t.jsx(n.Container,{styleConfig:{root:[k.prefix]},onClick:()=>{o||null==u||u()},children:a?t.jsx(y,{}):t.jsx(l.PlusChatIcon,{})}),C=t.jsx(m,{disabled:o,onClick:s,children:t.jsx(l.UpArrow,{fill:o?g.color.background.defaultDark:g.color.background.neutral})}),v=t.jsx(m,{onClick:d,children:t.jsx(l.Stop,{})}),I=null!=b?b:c?v:C;return t.jsx(p,{variant:exports.ExpandableInputVariant.AI_GRADIENT,children:t.jsx(h,Object.assign({},e,{ref:r,prefix:f,suffix:I}))})});v.displayName="AIChatInput",exports.AiChatInput=v,exports.ExpandableInput=h,exports.ExpandableInputAction=m,exports.ExpandableInputProvider=p,exports.useExpandableInputContext=x;
 //# sourceMappingURL=ct-design-expandable-input.browser.cjs.js.map

package/dist/ct-design-expandable-input.browser.esm.js

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{createContext as t,useMemo as n,useContext as o,forwardRef as i,useRef as a,useState as l,useCallback as c,useEffect as s,useImperativeHandle as d}from"react";import{Container as u}from"@cleartrip/ct-design-container";import{makeStyles as p,useStyles as g,useWebMergeStyles as f}from"@cleartrip/ct-design-style-manager";import{getTypographyStyles as h}from"@cleartrip/ct-design-typography";import{useTheme as m}from"@cleartrip/ct-design-theme";import{PlusChatIcon as b,UpArrow as C,Stop as v}from"@cleartrip/ct-design-icons";var y,k;!function(r){r.SM="sm"}(y||(y={})),function(r){r.DEFAULT="default",r.AI_GRADIENT="ai-gradient"}(k||(k={}));const x=(r,e)=>(y.SM,{minHeight:r.size[12],typographyVariant:"B2"}),w=({theme:r,size:e,isMultiLine:t,variant:n})=>{const o=parseFloat(String(r.border.width.sm)),i=parseFloat(String(r.border.width.md)),{minHeight:a}=x(r),l=t?r.border.radius[16]:r.border.radius[24],c=((r,e)=>{switch(e){case k.AI_GRADIENT:return r.color.background.brand;case k.DEFAULT:default:return r.color.background.defaultDarkest}})(r,n);return{position:"relative",display:"flex",flexDirection:"row",alignItems:t?"flex-end":"center",gap:r.spacing[2],width:"100%",boxSizing:"border-box",minHeight:a,padding:r.spacing[2],backgroundColor:r.color.background.neutral,borderWidth:o,borderStyle:"solid",borderColor:r.color.background.disabledDark,borderRadius:l,transition:"border-radius 0.15s ease",cursor:"text","&:focus-within":{borderColor:"transparent",backgroundClip:"padding-box","&::before":{opacity:1}},"&::before":{content:'""',position:"absolute",inset:`-${i}px`,borderRadius:l,background:c,zIndex:-1,opacity:0,transition:"opacity 0.15s ease, border-radius 0.15s ease"}}},H=({theme:r,rows:e,size:t,variant:n})=>{const{typographyVariant:o}=x(r),{fontSize:i,fontWeight:a,lineHeight:l,letterSpacing:c}=h({theme:r,variant:o}),s=r.color.text.primary,d=r.color.text.subHeading,u=((r,e)=>{switch(e){case k.AI_GRADIENT:case k.DEFAULT:}return r.color.background.defaultDarkest})(r,n),p=parseFloat(String(l));return{flex:1,minHeight:p,maxHeight:p*e,overflowY:"auto",fontSize:i,fontWeight:a,lineHeight:l,letterSpacing:c,color:s,caretColor:u,outlineStyle:"none",overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"pre-wrap","&[data-placeholder]:empty:before":{content:"attr(data-placeholder)",color:d,pointerEvents:"none"}}},V=t(null),D=({variant:e,children:t})=>{const o=n(()=>({variant:e}),[e]);return r(V.Provider,{value:o,children:t})};function I(){var r;return null!==(r=o(V))&&void 0!==r?r:void 0}const A=2,S=p(()=>({slot:{display:"flex",alignItems:"center",justifyContent:"center"}})),M=i((t,n)=>{var o;const{placeholder:i,value:p="",rows:h=A,size:m="sm",prefix:b,suffix:C,onChange:v,onKeyDown:y,onFocus:x,onBlur:V,styleConfig:D,disabled:M=!1}=t,{root:E=[],editor:T=[]}=null!=D?D:{},z=a(null),[F,Z]=l(!1),{variant:L=k.DEFAULT}=null!==(o=I())&&void 0!==o?o:{},_=g(r=>({root:w({theme:r,size:m,isMultiLine:F,variant:L})}),[m,F,L]),N=g(r=>({root:H({theme:r,rows:h,size:m,variant:L})}),[h,m,L]),R={root:[_.root,...E]},U={root:[S.slot]},B=f([N.root,...T],[N.root,T]),j=c(()=>{const r=z.current;if(!r||h<=1)return void Z(!1);const e=parseFloat(getComputedStyle(r).lineHeight);Z(r.scrollHeight>e)},[h]);s(()=>{var r;const e=z.current;if(!e)return;const t=null!==(r=e.innerText)&&void 0!==r?r:"";t!==p&&(document.activeElement!==e||t.trim()!==(null!=p?p:"").trim())?(e.textContent=p,j()):j()},[p,j]);const G=c(r=>{if(M)return;(r.ctrlKey||r.metaKey)&&["b","i","u","s","`"].includes(r.key.toLowerCase())&&r.preventDefault(),null==y||y(r)},[M,y]),K=c(()=>{var r;if(M)return;const e=z.current;if(!e)return;const t=null!==(r=e.innerText)&&void 0!==r?r:"";t.trim()||(e.textContent=""),null==v||v(t.trim()),j()},[M,v,j]),W=c(r=>{M||null==x||x(r)},[M,x]),O=c(r=>{M||null==V||V(r)},[M,V]),P=c(()=>{var r;M||null===(r=z.current)||void 0===r||r.focus()},[M]);return d(n,()=>({focus:()=>{var r;return null===(r=z.current)||void 0===r?void 0:r.focus()},blur:()=>{var r;return null===(r=z.current)||void 0===r?void 0:r.blur()},get element(){return z.current}}),[]),e(u,{styleConfig:R,onClick:P,children:[r(u,{styleConfig:U,children:b}),r("div",{ref:z,className:B,contentEditable:!M,suppressContentEditableWarning:!0,role:"textbox","aria-multiline":"true","aria-label":"Message input",spellCheck:!0,autoCorrect:"on",autoCapitalize:"sentences","data-placeholder":i,onKeyDown:G,onInput:K,onFocus:W,onBlur:O}),r(u,{styleConfig:U,children:C})]})});M.displayName="ExpandableInput";const E=(r,e,t)=>{if(t)return{backgroundColor:r.color.background.gray500};switch(e){case k.AI_GRADIENT:return{backgroundColor:r.color.background.brand};case k.DEFAULT:default:return{backgroundColor:r.color.background.primary}}},T=p(r=>({action:{width:r.size[6],height:r.size[6],borderRadius:r.border.radius[12],alignItems:"center",justifyContent:"center"}})),z=e=>{var t;const{children:n,onClick:o,disabled:i}=e,a=m(),{variant:l=k.DEFAULT}=null!==(t=I())&&void 0!==t?t:{},s=g(()=>({action:E(a,l,i)}),[a,l,i]),d=c(()=>{i||null==o||o()},[i,o]);return r(u,{onClick:d,styleConfig:{root:[T.action,s.action]},children:n})},F=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r("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",fillOpacity:.4}),r("mask",{id:"mask0_1511_44906",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"3",y:"3",width:"18",height:"18",children:r("rect",{x:"3",y:"3",width:"18",height:"18",fill:"#D9D9D9"})}),r("g",{mask:"url(#mask0_1511_44906)",children:r("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"})})]}),Z=p(()=>({prefix:{display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"}})),L=i((e,t)=>{const{showKeyboardIcon:n=!1,disableAction:o=!1,onSubmit:i,onPrefixClick:a,isStreaming:l=!1,onStop:c,prefix:s,suffix:d}=e,p=m(),g=null!=s?s:r(u,{styleConfig:{root:[Z.prefix]},onClick:()=>{o||null==a||a()},children:r(n?F:b,{})}),f=r(z,{disabled:o,onClick:i,children:r(C,{fill:o?p.color.background.defaultDark:p.color.background.neutral})}),h=r(z,{onClick:c,children:r(v,{})}),y=null!=d?d:l?h:f;return r(D,{variant:k.AI_GRADIENT,children:r(M,Object.assign({},e,{ref:t,prefix:g,suffix:y}))})});L.displayName="AIChatInput";export{L as AiChatInput,M as ExpandableInput,z as ExpandableInputAction,D as ExpandableInputProvider,y as ExpandableInputSize,k as ExpandableInputVariant,I as useExpandableInputContext};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{createContext as t,useMemo as n,useContext as o,forwardRef as i,useRef as a,useState as l,useCallback as c,useEffect as s,useImperativeHandle as d}from"react";import{Container as u}from"@cleartrip/ct-design-container";import{makeStyles as p,useStyles as g,useWebMergeStyles as f}from"@cleartrip/ct-design-style-manager";import{getTypographyStyles as h}from"@cleartrip/ct-design-typography";import{useTheme as m}from"@cleartrip/ct-design-theme";import{PlusChatIcon as b,UpArrow as C,Stop as v}from"@cleartrip/ct-design-icons";var y,k;!function(r){r.SM="sm"}(y||(y={})),function(r){r.DEFAULT="default",r.AI_GRADIENT="ai-gradient"}(k||(k={}));const x=(r,e)=>(y.SM,{minHeight:r.size[12],typographyVariant:"B2"}),w=({theme:r,size:e,isMultiLine:t,variant:n})=>{const o=parseFloat(String(r.border.width.sm)),i=parseFloat(String(r.border.width.md)),{minHeight:a}=x(r),l=t?r.border.radius[16]:r.border.radius[24],c=((r,e)=>{switch(e){case k.AI_GRADIENT:return r.color.background.brand;case k.DEFAULT:default:return r.color.background.defaultDarkest}})(r,n);return{position:"relative",display:"flex",flexDirection:"row",alignItems:t?"flex-end":"center",gap:r.spacing[2],width:"100%",boxSizing:"border-box",minHeight:a,padding:r.spacing[2],backgroundColor:r.color.background.neutral,borderWidth:o,borderStyle:"solid",borderColor:r.color.background.disabledDark,borderRadius:l,transition:"border-radius 0.15s ease",cursor:"text","&:focus-within":{borderColor:"transparent",backgroundClip:"padding-box","&::before":{opacity:1}},"&::before":{content:'""',position:"absolute",inset:`-${i}px`,borderRadius:l,background:c,zIndex:-1,opacity:0,transition:"opacity 0.15s ease, border-radius 0.15s ease"}}},H=({theme:r,rows:e,size:t,variant:n})=>{const{typographyVariant:o}=x(r),{fontSize:i,fontWeight:a,lineHeight:l,letterSpacing:c}=h({theme:r,variant:o}),s=r.color.text.primary,d=r.color.text.subHeading,u=((r,e)=>{switch(e){case k.AI_GRADIENT:case k.DEFAULT:}return r.color.background.defaultDarkest})(r,n),p=parseFloat(String(l));return{flex:1,minHeight:p,maxHeight:p*e,overflowY:"auto",fontSize:i,fontWeight:a,lineHeight:l,letterSpacing:c,color:s,caretColor:u,outlineStyle:"none",overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"pre-wrap","&[data-placeholder]:empty:before":{content:"attr(data-placeholder)",color:d,pointerEvents:"none"}}},V=t(null),D=({variant:e,children:t})=>{const o=n(()=>({variant:e}),[e]);return r(V.Provider,{value:o,children:t})};function I(){var r;return null!==(r=o(V))&&void 0!==r?r:void 0}const A=2,S=p(()=>({slot:{display:"flex",alignItems:"center",justifyContent:"center"}})),M=i((t,n)=>{var o;const{placeholder:i,value:p="",rows:h=A,size:m="sm",prefix:b,suffix:C,onChange:v,onKeyDown:y,onFocus:x,onBlur:V,styleConfig:D,disabled:M=!1}=t,{root:E=[],editor:T=[]}=null!=D?D:{},z=a(null),[F,Z]=l(!1),{variant:L=k.DEFAULT}=null!==(o=I())&&void 0!==o?o:{},_=g(r=>({root:w({theme:r,size:m,isMultiLine:F,variant:L})}),[m,F,L]),N=g(r=>({root:H({theme:r,rows:h,size:m,variant:L})}),[h,m,L]),R={root:[_.root,...E]},U={root:[S.slot]},B=f([N.root,...T],[N.root,T]),j=c(()=>{const r=z.current;if(!r||h<=1)return void Z(!1);const e=parseFloat(getComputedStyle(r).lineHeight);Z(r.scrollHeight>e)},[h]);s(()=>{var r;const e=z.current;if(!e)return;const t=null!==(r=e.innerText)&&void 0!==r?r:"";t!==p&&(document.activeElement!==e||t.trim()!==(null!=p?p:"").trim())?(e.textContent=p,j()):j()},[p,j]);const G=c(r=>{if(M)return;(r.ctrlKey||r.metaKey)&&["b","i","u","s","`"].includes(r.key.toLowerCase())&&r.preventDefault(),null==y||y(r)},[M,y]),K=c(()=>{var r;if(M)return;const e=z.current;if(!e)return;const t=null!==(r=e.innerText)&&void 0!==r?r:"";t.trim()||(e.textContent=""),null==v||v(t.trim()),j()},[M,v,j]),W=c(r=>{M||null==x||x(r)},[M,x]),O=c(r=>{M||null==V||V(r)},[M,V]),P=c(()=>{var r;M||null===(r=z.current)||void 0===r||r.focus()},[M]);return d(n,()=>({focus:()=>{var r;return null===(r=z.current)||void 0===r?void 0:r.focus()},blur:()=>{var r;return null===(r=z.current)||void 0===r?void 0:r.blur()},get element(){return z.current}}),[]),e(u,{styleConfig:R,onClick:P,children:[r(u,{styleConfig:U,children:b}),r("div",{ref:z,className:B,contentEditable:!M,suppressContentEditableWarning:!0,role:"textbox","aria-multiline":"true","aria-label":"Message input",spellCheck:!0,autoCorrect:"on",autoCapitalize:"sentences","data-placeholder":i,onKeyDown:G,onInput:K,onFocus:W,onBlur:O}),r(u,{styleConfig:U,children:C})]})});M.displayName="ExpandableInput";const E=(r,e,t)=>{if(t)return{backgroundColor:r.color.background.gray500};switch(e){case k.AI_GRADIENT:return{backgroundColor:r.color.background.brand};case k.DEFAULT:default:return{backgroundColor:r.color.background.primary}}},T=p(r=>({action:{width:r.size[7],height:r.size[7],borderRadius:r.border.radius[12],alignItems:"center",justifyContent:"center"}})),z=e=>{var t;const{children:n,onClick:o,disabled:i}=e,a=m(),{variant:l=k.DEFAULT}=null!==(t=I())&&void 0!==t?t:{},s=g(()=>({action:E(a,l,i)}),[a,l,i]),d=c(()=>{i||null==o||o()},[i,o]);return r(u,{onClick:d,styleConfig:{root:[T.action,s.action]},children:n})},F=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r("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",fillOpacity:.4}),r("mask",{id:"mask0_1511_44906",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"3",y:"3",width:"18",height:"18",children:r("rect",{x:"3",y:"3",width:"18",height:"18",fill:"#D9D9D9"})}),r("g",{mask:"url(#mask0_1511_44906)",children:r("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"})})]}),Z=p(()=>({prefix:{display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"}})),L=i((e,t)=>{const{showKeyboardIcon:n=!1,disableAction:o=!1,onSubmit:i,onPrefixClick:a,isStreaming:l=!1,onStop:c,prefix:s,suffix:d}=e,p=m(),g=null!=s?s:r(u,{styleConfig:{root:[Z.prefix]},onClick:()=>{o||null==a||a()},children:r(n?F:b,{})}),f=r(z,{disabled:o,onClick:i,children:r(C,{fill:o?p.color.background.defaultDark:p.color.background.neutral})}),h=r(z,{onClick:c,children:r(v,{})}),y=null!=d?d:l?h:f;return r(D,{variant:k.AI_GRADIENT,children:r(M,Object.assign({},e,{ref:t,prefix:g,suffix:y}))})});L.displayName="AIChatInput";export{L as AiChatInput,M as ExpandableInput,z as ExpandableInputAction,D as ExpandableInputProvider,y as ExpandableInputSize,k as ExpandableInputVariant,I as useExpandableInputContext};
 //# sourceMappingURL=ct-design-expandable-input.browser.esm.js.map

package/dist/ct-design-expandable-input.cjs.js

@@ -250,8 +250,8 @@ const getExpandableInputActionStyles = (theme, variant, disabled) => {
 
 const staticStyles$1 = ctDesignStyleManager.makeStyles((theme) => ({
     action: {
-        width: theme.size[6],
-        height: theme.size[6],
+        width: theme.size[7],
+        height: theme.size[7],
         borderRadius: theme.border.radius[12],
         alignItems: 'center',
         justifyContent: 'center',

package/dist/ct-design-expandable-input.esm.js

@@ -248,8 +248,8 @@ const getExpandableInputActionStyles = (theme, variant, disabled) => {
 
 const staticStyles$1 = makeStyles((theme) => ({
     action: {
-        width: theme.size[6],
-        height: theme.size[6],
+        width: theme.size[7],
+        height: theme.size[7],
         borderRadius: theme.border.radius[12],
         alignItems: 'center',
         justifyContent: 'center',

package/dist/ct-design-expandable-input.umd.js

@@ -246,8 +246,8 @@
 
     const staticStyles$1 = ctDesignStyleManager.makeStyles((theme) => ({
         action: {
-            width: theme.size[6],
-            height: theme.size[6],
+            width: theme.size[7],
+            height: theme.size[7],
             borderRadius: theme.border.radius[12],
             alignItems: 'center',
             justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-expandable-input",
-  "version": "1.2.0-SNAPSHOT-native-main.3",
+  "version": "1.2.0-SNAPSHOT-native-main.0",
   "description": "A auto-growing rich text input that expands with content",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-expandable-input.cjs.js",
@@ -27,13 +27,13 @@
     "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-theme": "5.27.0-SNAPSHOT-native-main.17",
-    "@cleartrip/ct-design-types": "5.27.0-SNAPSHOT-native-main.17",
-    "@cleartrip/ct-design-typography": "5.27.0-SNAPSHOT-native-main.17",
-    "@cleartrip/ct-design-container": "5.27.0-SNAPSHOT-native-main.17",
-    "@cleartrip/ct-design-style-manager": "5.27.0-SNAPSHOT-native-main.17",
-    "@cleartrip/ct-design-use-merge-refs": "5.27.0-SNAPSHOT-native-main.17",
-    "@cleartrip/ct-design-icons": "61.0.0-SNAPSHOT-native-main.5"
+    "@cleartrip/ct-design-theme": "5.28.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-types": "5.28.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-typography": "5.28.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-container": "5.28.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-style-manager": "5.27.1-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-use-merge-refs": "5.28.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-icons": "62.0.0-SNAPSHOT-native-main.0"
   },
   "devDependencies": {},
   "peerDependencies": {

package/src/ExpandableInputAction/ExpandableInputAction.tsx

@@ -13,8 +13,8 @@ import { ExpandableInputVariant } from '../type';
 
 const staticStyles = makeStyles((theme) => ({
   action: {
-    width: theme.size[6],
-    height: theme.size[6],
+    width: theme.size[7],
+    height: theme.size[7],
     borderRadius: theme.border.radius[12],
     alignItems: 'center',
     justifyContent: 'center',

package/dist/icons/Plus.d.ts

@@ -1,3 +0,0 @@
-declare const Plus: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-export default Plus;
-//# sourceMappingURL=Plus.d.ts.map

package/dist/icons/Plus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Plus.d.ts","sourceRoot":"","sources":["../../packages/components/ExpandableInput/src/icons/Plus.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAcjD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/icons/Plus.native.d.ts

@@ -1,3 +0,0 @@
-declare const Plus: () => import("react/jsx-runtime").JSX.Element;
-export default Plus;
-//# sourceMappingURL=Plus.native.d.ts.map

package/dist/icons/Plus.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Plus.native.d.ts","sourceRoot":"","sources":["../../packages/components/ExpandableInput/src/icons/Plus.native.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,IAAI,+CAcT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/icons/Stop.d.ts

@@ -1,3 +0,0 @@
-declare const Stop: () => import("react/jsx-runtime").JSX.Element;
-export default Stop;
-//# sourceMappingURL=Stop.d.ts.map

package/dist/icons/Stop.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stop.d.ts","sourceRoot":"","sources":["../../packages/components/ExpandableInput/src/icons/Stop.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,+CAiBT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/icons/Stop.native.d.ts

@@ -1,3 +0,0 @@
-declare const Stop: () => import("react/jsx-runtime").JSX.Element;
-export default Stop;
-//# sourceMappingURL=Stop.native.d.ts.map

package/dist/icons/Stop.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stop.native.d.ts","sourceRoot":"","sources":["../../packages/components/ExpandableInput/src/icons/Stop.native.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,IAAI,+CAiBT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/icons/UpArrow.d.ts

@@ -1,3 +0,0 @@
-declare const UpArrow: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-export default UpArrow;
-//# sourceMappingURL=UpArrow.d.ts.map

package/dist/icons/UpArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UpArrow.d.ts","sourceRoot":"","sources":["../../packages/components/ExpandableInput/src/icons/UpArrow.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,OAAO,GAAI,OAAO,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAYpD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/icons/UpArrow.native.d.ts

@@ -1,6 +0,0 @@
-interface IUpArrowProps {
-    fill?: string;
-}
-declare const UpArrow: ({ fill }: IUpArrowProps) => import("react/jsx-runtime").JSX.Element;
-export default UpArrow;
-//# sourceMappingURL=UpArrow.native.d.ts.map

package/dist/icons/UpArrow.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UpArrow.native.d.ts","sourceRoot":"","sources":["../../packages/components/ExpandableInput/src/icons/UpArrow.native.tsx"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,OAAO,GAAI,UAAoB,aAAa,4CAWjD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/src/icons/Plus.native.tsx

@@ -1,19 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-const Plus = () => {
-  return (
-    <Svg width={24} height={24} viewBox='0 0 24 24' fill='none'>
-      <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'
-        fillOpacity={0.4}
-      />
-      <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'
-      />
-    </Svg>
-  );
-};
-
-export default Plus;

package/src/icons/Plus.tsx

@@ -1,17 +0,0 @@
-const Plus = (props: React.SVGProps<SVGSVGElement>) => {
-  return (
-    <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <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'
-        fillOpacity={0.4}
-      />
-      <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'
-      />
-    </svg>
-  );
-};
-
-export default Plus;

package/src/icons/Stop.native.tsx

@@ -1,22 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-const Stop = () => {
-  return (
-    <Svg width={32} height={32} viewBox='0 0 32 32' fill='none'>
-      <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'
-      />
-      <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'
-      />
-      <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'
-      />
-    </Svg>
-  );
-};
-
-export default Stop;

package/src/icons/Stop.tsx

@@ -1,20 +0,0 @@
-const Stop = () => {
-  return (
-    <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <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'
-      />
-      <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'
-      />
-      <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'
-      />
-    </svg>
-  );
-};
-
-export default Stop;

package/src/icons/UpArrow.native.tsx

@@ -1,20 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-interface IUpArrowProps {
-  fill?: string;
-}
-
-const UpArrow = ({ fill = 'white' }: IUpArrowProps) => {
-  return (
-    <Svg width={14} height={14} viewBox='0 0 14 14' fill='none'>
-      <Path
-        fillRule='evenodd'
-        clipRule='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}
-      />
-    </Svg>
-  );
-};
-
-export default UpArrow;

package/src/icons/UpArrow.tsx

@@ -1,15 +0,0 @@
-const UpArrow = (props: React.SVGProps<SVGSVGElement>) => {
-  const { fill = 'white', ...rest } = props;
-  return (
-    <svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' {...rest}>
-      <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={fill}
-      />
-    </svg>
-  );
-};
-
-export default UpArrow;