@adoptaunabuelo/react-components 0.3.146 → 0.3.147

package/dist/esm/components/SwitchTag/SwitchTag.d.ts

@@ -1,12 +1,29 @@
 import React, { CSSProperties } from "react";
 declare const SwitchTag: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default SwitchTag;
+/**
+ * Icon-based toggle switch for switching between 2+ options.
+ * Displays icons in a pill-shaped container with active state highlighting.
+ *
+ * @example
+ * ```tsx
+ * <SwitchTag
+ *   options={[
+ *     { id: "grid", icon: <GridIcon /> },
+ *     { id: "list", icon: <ListIcon /> }
+ *   ]}
+ *   onChange={(option) => setViewMode(option.id)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Array of icon options (automatically colors icons based on selection) */
     options: Array<{
         id: string;
         icon: React.ReactElement;
     }>;
+    /** Callback fired when option changes, receives selected option */
     onChange?: (option: {
         id: string;
         icon: React.ReactElement;

package/dist/esm/components/Tabs/Tabs.d.ts

@@ -1,19 +1,46 @@
 import { CSSProperties } from "react";
 declare const Tabs: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;
+/**
+ * Tab navigation component with two visual designs.
+ * Primary design shows underline indicator, secondary design shows rounded background.
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   design="secondary"
+ *   options={[
+ *     { id: "1", title: "Overview" },
+ *     { id: "2", title: "Details" }
+ *   ]}
+ *   selectedOption={currentTab}
+ *   onChange={(tab) => setCurrentTab(tab)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Custom styles for individual tab cells */
     cellStyle?: CSSProperties;
+    /** Custom styles for tab text labels */
     textStyle?: CSSProperties;
+    /** Background color for selected tab (secondary design) */
     cellColor?: string;
+    /** Text color for selected tab */
     textColor?: string;
+    /** Background color for the entire tabs container */
     backgroundColor?: string;
+    /** Array of tab options */
     options: Array<OptionProps>;
+    /** Currently selected tab (controlled component) */
     selectedOption?: OptionProps;
+    /** Visual design: `primary` (underline) or `secondary` (rounded background) */
     design?: "primary" | "secondary";
+    /** Callback fired when tab selection changes */
     onChange?: (option: OptionProps) => void;
 }
 export interface OptionProps {
     id: string;
+    /** Display text for the tab */
     title: string;
 }

package/dist/esm/components/TagSelector/TagSelector.d.ts

@@ -1,18 +1,43 @@
 import React, { CSSProperties } from "react";
 declare const TagSelector: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default TagSelector;
+/**
+ * Tag selector component for single or multiple selection of options.
+ * Renders clickable tags with optional subtitles in a flex-wrap layout.
+ *
+ * @example
+ * ```tsx
+ * <TagSelector
+ *   type="multiple"
+ *   options={[
+ *     { id: "1", title: "React" },
+ *     { id: "2", title: "TypeScript", subtitle: "Recommended" }
+ *   ]}
+ *   optionsSelected={selectedTags}
+ *   onChange={(tags) => setSelectedTags(tags)}
+ * />
+ * ```
+ */
 export interface Props {
+    /** Selection mode: `single` for radio-like, `multiple` for multi-select */
     type?: "multiple" | "single";
     style?: CSSProperties;
+    /** Available tag options to display */
     options: Array<OptionProps>;
+    /** Pre-selected options (controlled component pattern) */
     optionsSelected?: Array<OptionProps>;
+    /** Callback fired when selection changes, receives array of selected options */
     onChange?: (selection: Array<OptionProps>) => void;
+    /** When true, disables click interactions (display only) */
     onlyVisual?: boolean;
+    /** Visual design variant */
     design?: "design1" | "design2";
 }
 export interface OptionProps {
     id: string;
+    /** Main text displayed on the tag */
     title: string;
+    /** Optional secondary text below the title */
     subtitle?: string;
     style?: React.CSSProperties;
 }

package/dist/esm/components/Text/Animated.d.ts

@@ -1,7 +1,24 @@
 import { TextProps } from "./Text";
 declare const TextAnimated: ({ children, ...props }: TextAnimatedProps) => import("react/jsx-runtime").JSX.Element;
 export default TextAnimated;
+/**
+ * Text component with rotating animated words that cycle through options array.
+ * Uses {{data}} placeholder in children string for where animation appears.
+ *
+ * @example
+ * ```tsx
+ * <TextAnimated
+ *   type="h1"
+ *   options={["developers", "designers", "creators"]}
+ *   interval={3000}
+ * >
+ *   Built for {{data}}
+ * </TextAnimated>
+ * ```
+ */
 export type TextAnimatedProps = TextProps & {
+    /** Array of strings to cycle through */
     options: string[];
+    /** Time in milliseconds between transitions. Default: 2500ms */
     interval?: number;
 };

package/dist/esm/components/Text/Text.d.ts

@@ -3,4 +3,15 @@ import { ParagraphProps } from "./Paragraph";
 import { ButtonProps } from "./Button";
 declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Text;
+/**
+ * Unified typography component that renders headers (h1-h6, d1), paragraphs (p, p2, c1, c2, o1, o2), or button text (b1, b2, b3).
+ * Automatically chooses the correct semantic HTML element based on the `type` prop.
+ *
+ * @example
+ * ```tsx
+ * <Text type="h1" weight="bold">Page Title</Text>
+ * <Text type="p" color={ColorV2.text.neutralMedium}>Body text</Text>
+ * <Text type="b1">Button text</Text>
+ * ```
+ */
 export type TextProps = HeaderProps | ParagraphProps | ButtonProps;

package/dist/esm/components/TextArea/TextArea.d.ts

@@ -1,4 +1,23 @@
 import { TextAreaDefaultProps } from "./TextAreaDefault";
 import { TextAreaEditorProps } from "./TextAreaEditor";
 declare const TextArea: (props: TextAreaDefaultProps | TextAreaEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Multi-line text input component with two modes: default (plain textarea) and edit (rich text editor with Tiptap).
+ * Use `type="edit"` for formatted text editing with bold, italic, lists, etc.
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   type="default"
+ *   placeholder="Enter your message..."
+ *   rows={5}
+ * />
+ *
+ * <TextArea
+ *   type="edit"
+ *   value={richTextContent}
+ *   onChange={(html) => setContent(html)}
+ * />
+ * ```
+ */
 export default TextArea;

package/dist/esm/index.js

@@ -532,7 +532,7 @@ import{__rest as e,__awaiter as t}from"tslib";import{jsx as i,jsxs as o,Fragment
 	display: ${e=>e.$isRecording?"block":"none"};
 	height: 100%;
 	width: 100%;
-`,ti=r=>{const l=x(null),[a,s]=c(""),[d,p]=c(!1),h=x(null),u=x(null),g=x(null),[m,f]=c(!1),[y,b]=c(null),[k,v]=c(null),{style:w,value:$,defaultValue:_,onOptionClick:D,options:j}=r,M=e(r,["style","value","defaultValue","onOptionClick","options"]),E=()=>{a&&(r.onSend&&r.onSend({text:a}),s(""))},z=e=>{y&&(y.ondataavailable=t=>{t.data.size>0&&"send"===e&&B([t.data])},y.stop(),b(null)),k&&(k.getTracks().forEach(e=>e.stop()),v(null)),f(!1),console.log("Grabación cancelada.")},B=e=>{if(console.log("Iniciar envio grabación"),0===e.length)return void console.error("No hay datos de audio para enviar.");const t=new Blob(e,{type:"audio/wav"}),i=new FileReader;i.onloadend=()=>{var e;const t=null===(e=i.result)||void 0===e?void 0:e.toString().split(",")[1];t&&r.onSend&&r.onSend({media:{base64:t,contentType:"audio/wav"}})},i.readAsDataURL(t)},O=()=>{if(!u.current||!h.current)return;const e=u.current,t=e.getContext("2d"),i=h.current;if(!t)return;const o=i.frequencyBinCount,n=new Uint8Array(o),r=()=>{i.getByteTimeDomainData(n),t.fillStyle="rgba(0, 0, 0, 0.2)",t.fillRect(0,0,e.width,e.height),t.lineWidth=2,t.strokeStyle="#00ff00",t.beginPath();const l=1*e.width/o;let a=0;for(let i=0;i<o;i++){const o=n[i]/128*e.height/2;0===i?t.moveTo(a,o):t.lineTo(a,o),a+=l}t.lineTo(e.width,e.height/2),t.stroke(),g.current=requestAnimationFrame(r)};r()};return o(Qt,{style:w,$loading:r.loading||r.disabled,$focus:d,$options:j,children:[m?i(ct,{icon:i(C,{height:20,width:20,onClick:()=>{z("delete")}})}):r.options&&i(Kt,{id:"add-menu",position:"top-right",options:j,icon:i(L,{color:De.text.primary}),onClick:e=>{D&&D(e.id)}}),i(ei,{ref:u,$isRecording:m}),!m&&i(Xt,Object.assign({},M,{value:a,ref:l,disabled:r.loading||r.disabled,$loading:r.loading||r.disabled,onChange:e=>{s(e.target.value),r.onChange&&r.onChange(e)},onKeyDown:e=>{"Enter"===e.key&&E(),r.onKeyDown&&r.onKeyDown(e)},onFocus:e=>{p(!0),r.onFocus&&r.onFocus(e)},onBlur:e=>{p(!1),r.onBlur&&r.onBlur(e)}})),r.loading?i(q,{style:{height:48,width:48},src:Gt,loop:!0,autoplay:!0}):i(n,{children:i(ct,{disabled:r.disabled,icon:i(a||m?F:S,{height:20,width:20,color:De.text.primary}),onClick:()=>{a?E():m?z("send"):t(void 0,void 0,void 0,function*(){if(!m)try{const e=yield navigator.mediaDevices.getUserMedia({audio:!0}),t=new MediaRecorder(e);t.onstop=()=>{f(!1)},t.start(),b(t),v(e),f(!0);const i=new AudioContext,o=i.createMediaStreamSource(e),n=i.createAnalyser();n.fftSize=512,o.connect(n),h.current=n,O()}catch(e){console.error("Error al iniciar la grabación:",e)}})}})})]})},ii=r.div`
+`,ti=r=>{const l=x(null),[a,s]=c(""),[d,p]=c(!1),h=x(null),u=x(null),g=x(null),[m,f]=c(!1),[y,b]=c(null),[k,v]=c(null),{style:w,value:$,defaultValue:_,onOptionClick:D,options:j}=r,M=e(r,["style","value","defaultValue","onOptionClick","options"]),E=()=>{a&&(r.onSend&&r.onSend({text:a}),s(""))},z=e=>{y&&(y.ondataavailable=t=>{t.data.size>0&&"send"===e&&B([t.data])},y.stop(),b(null)),k&&(k.getTracks().forEach(e=>e.stop()),v(null)),f(!1)},B=e=>{if(0===e.length)return;const t=new Blob(e,{type:"audio/wav"}),i=new FileReader;i.onloadend=()=>{var e;const t=null===(e=i.result)||void 0===e?void 0:e.toString().split(",")[1];t&&r.onSend&&r.onSend({media:{base64:t,contentType:"audio/wav"}})},i.readAsDataURL(t)},O=()=>{if(!u.current||!h.current)return;const e=u.current,t=e.getContext("2d"),i=h.current;if(!t)return;const o=i.frequencyBinCount,n=new Uint8Array(o),r=()=>{i.getByteTimeDomainData(n),t.fillStyle="rgba(0, 0, 0, 0.2)",t.fillRect(0,0,e.width,e.height),t.lineWidth=2,t.strokeStyle="#00ff00",t.beginPath();const l=1*e.width/o;let a=0;for(let i=0;i<o;i++){const o=n[i]/128*e.height/2;0===i?t.moveTo(a,o):t.lineTo(a,o),a+=l}t.lineTo(e.width,e.height/2),t.stroke(),g.current=requestAnimationFrame(r)};r()};return o(Qt,{style:w,$loading:r.loading||r.disabled,$focus:d,$options:j,children:[m?i(ct,{icon:i(C,{height:20,width:20,onClick:()=>{z("delete")}})}):r.options&&i(Kt,{id:"add-menu",position:"top-right",options:j,icon:i(L,{color:De.text.primary}),onClick:e=>{D&&D(e.id)}}),i(ei,{ref:u,$isRecording:m}),!m&&i(Xt,Object.assign({},M,{value:a,ref:l,disabled:r.loading||r.disabled,$loading:r.loading||r.disabled,onChange:e=>{s(e.target.value),r.onChange&&r.onChange(e)},onKeyDown:e=>{"Enter"===e.key&&E(),r.onKeyDown&&r.onKeyDown(e)},onFocus:e=>{p(!0),r.onFocus&&r.onFocus(e)},onBlur:e=>{p(!1),r.onBlur&&r.onBlur(e)}})),r.loading?i(q,{style:{height:48,width:48},src:Gt,loop:!0,autoplay:!0}):i(n,{children:i(ct,{disabled:r.disabled,icon:i(a||m?F:S,{height:20,width:20,color:De.text.primary}),onClick:()=>{a?E():m?z("send"):t(void 0,void 0,void 0,function*(){if(!m)try{const e=yield navigator.mediaDevices.getUserMedia({audio:!0}),t=new MediaRecorder(e);t.onstop=()=>{f(!1)},t.start(),b(t),v(e),f(!0);const i=new AudioContext,o=i.createMediaStreamSource(e),n=i.createAnalyser();n.fftSize=512,o.connect(n),h.current=n,O()}catch(e){}})}})})]})},ii=r.div`
 	width: fit-content;
 `,oi=r.div`
 	position: relative;
@@ -1271,7 +1271,7 @@ import{__rest as e,__awaiter as t}from"tslib";import{jsx as i,jsxs as o,Fragment
 	flex-grow: 1;
 	line-height: 24px;
 	text-align: left;
-`,Go=t=>{var{position:n="left",error:r,sublabel:l,selected:a=!1,avatarEnabled:s,shape:d="square"}=t,h=e(t,["position","error","sublabel","selected","avatarEnabled","shape"]);const[u,x]=c(a);p(()=>{x(a)},[a]);return o(Ro,Object.assign({"data-testid":"checkbox",onClick:e=>{x(!u),h.onClick&&h.onClick(e)}},h,{children:["left"===n&&i(No,{$shape:d,$selected:a,$error:r,$height:h.height,$width:h.width,children:a&&i(q,{style:{height:18,width:18},autoplay:!0,loop:!1,keepLastFrame:!0,src:Je,onEvent:e=>{}})}),o(Wo,{children:[s&&i(Eo,{name:h.label||"",style:{height:32,width:32,marginRight:8,fontSize:15}}),o("div",{children:[h.children&&h.children,h.label&&i(Ne,{type:"p",children:h.label}),l&&i(Ne,{type:"p",style:{fontSize:12},children:l})]})]}),"right"===n&&i(No,{$shape:d,$selected:a,$error:r,$height:h.height,$width:h.width,children:a&&i(q,{style:{height:18,width:18},autoplay:!0,loop:!1,keepLastFrame:!0,src:Je,onEvent:e=>{}})})]}))},Yo=r.div``,Uo=e=>{const[t,o]=c([]),[n,r]=c(!1),[l,a]=c(window.innerWidth<768);p(()=>{e.selectedOptions&&o(e.selectedOptions);const t=()=>{a(window.innerWidth<768)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[e.selectedOptions]);return i(Yo,{role:"checkboxlist",style:e.style,children:i("div",{style:{paddingBottom:"2px"},children:e.options.map((a,s)=>{const d=t.some(e=>e.id===a.id);return i(Go,{role:"checkbox-"+s,style:Object.assign({marginRight:"16px",marginBottom:"16px",padding:l?"4px 1px":"0px"},e.elementStyle),label:a.label,sublabel:a.sublabel,error:a.error,selected:d,height:e.height,shape:e.shape,width:e.width,position:e.position,avatarEnabled:e.avatarEnabled,onClick:()=>(i=>{const l=t.findIndex(e=>i.id===e.id);let a=t;"single"===e.type?a=[i]:-1===l?a.push(i):a.splice(l,1),o(a),r(!n),e.onChange&&e.onChange(a)})(a),children:a.Element},a.id)})})})},qo=u((t,o)=>{var{type:n,options:r,selectedOptions:l,onChange:a}=t,s=e(t,["type","options","selectedOptions","onChange"]);const d=window.innerWidth<=450,[h,u]=c([]),[x,m]=c(r),[f,y]=c(void 0),[b,k]=c(void 0);g(o,()=>({clean(){w()}})),p(()=>{y(new se(r,{keys:["label","id"]})),m(r)},[r]),p(()=>{u(l||[]),v(l||[])},[l]);const v=e=>{if("single"===n&&e.length>0){const t=e[0];if(t.label)k(t.label);else{const e=r.find(e=>e.id===t.id);k(e?e.label:"1 seleccionado")}}else"multiple"===n&&e.length>0&&k(`${e.length} seleccionados`)},w=()=>{k(void 0),u([]),a&&a([])};return i(Zo,Object.assign({},s,{label:b,childrenBottomBar:"multiple"===n&&!d&&i(ut,{design:"call-to-action",size:d?"normal":"small",onClick:()=>{u(r)},children:"Seleccionar todo"}),onSave:()=>{v(h),a&&a(h)},onRemove:w,onSearchChange:e=>{if(e&&f){const t=f.search(e).map(e=>e.item);m(t)}else m(r)},onClose:()=>{m(r)},children:i(Uo,{style:{width:"100%"},options:x,selectedOptions:h,type:n,shape:s.shape,height:d?22:18,width:d?22:18,position:d?"right":"left",onChange:e=>{u(e)}})}))});ai(".DayPicker{\n    border-radius: 0px;\n    box-shadow: none;\n    font-family: Poppins;\n}\n\n.DayPickerKeyboardShortcuts_show__bottomRight{\n    display: none;\n}\n\n.CalendarMonth{\n    padding: 0px !important;\n}");const Jo=u((t,o)=>{var{position:n,selectedOptions:r,onChange:l}=t,a=e(t,["position","selectedOptions","onChange"]);const s=window.innerWidth<=450,d=window.innerWidth<=400,[h,u]=c(void 0),[x,m]=c(null),[f,y]=c(null),[b,k]=c("startDate");g(o,()=>({clean(){w()}})),p(()=>{r?(m(r.startDate),y(r.endDate),v(r.startDate?r.startDate:void 0,r.endDate?r.endDate:void 0)):(m(null),y(null),u(""))},[r]);const v=(e,t)=>{let i="";e&&(i=e.format("D MMM")),t&&(i+=` - ${t.format("D MMM")}`),u(i)},w=()=>{y(null),m(null),k("startDate"),u(void 0),l&&l({startDate:null,endDate:null})};return i(Zo,Object.assign({},a,{label:h,hideSearchBar:!0,position:n,onSave:()=>{v(x||void 0,f||void 0),l&&l({startDate:x?x.startOf("date"):null,endDate:f?f.endOf("date"):null})},onRemove:w,children:i(Q,{startDate:x,endDate:f,onDatesChange:({startDate:e,endDate:t})=>{m(e),y(t)},daySize:d?35:s?48:void 0,focusedInput:b,noBorder:!0,onFocusChange:e=>k(e),initialVisibleMonth:()=>J()})}))}),Ko=u((t,o)=>{var{selectedOptions:n,min:r,max:l,unit:a,onChange:s}=t,d=e(t,["selectedOptions","min","max","unit","onChange"]);const h=window.innerWidth<=450,[u,x]=c(void 0),[m,f]=c(0),[y,b]=c(void 0);g(o,()=>({clean(){k()}})),p(()=>{n?(f(n),x(`${n.toString()} ${a||""}`)):(f(0),x(void 0))},[n]);const k=()=>{f(0),b(void 0),x(void 0),s&&s(void 0)};return i(Zo,Object.assign({},d,{label:u,hideSearchBar:!0,onSave:()=>{y&&(x(`${y.toString()} ${a||""}`),f(y),s&&s(y))},onRemove:k,children:i(io,{style:{width:"100%",margin:h?"20px 0px":20,marginTop:40},min:r,max:l,unit:a,defaultValue:m,onChange:e=>{const t=e.target.value?Number(e.target.value):void 0;b(t)}})}))}),Qo=u((e,t)=>"date"===e.type?i(Jo,Object.assign({ref:t},e)):"ratio"===e.type?i(Ko,Object.assign({ref:t},e)):i(qo,Object.assign({ref:t},e))),Xo=r.div`
+`,Go=t=>{var{position:n="left",error:r,sublabel:l,selected:a=!1,avatarEnabled:s,shape:d="square"}=t,h=e(t,["position","error","sublabel","selected","avatarEnabled","shape"]);const[u,x]=c(a);p(()=>{x(a)},[a]);return o(Ro,Object.assign({"data-testid":"checkbox",onClick:e=>{x(!u),h.onClick&&h.onClick(e)}},h,{children:["left"===n&&i(No,{$shape:d,$selected:a,$error:r,$height:h.height,$width:h.width,children:a&&i(q,{style:{height:18,width:18},autoplay:!0,loop:!1,keepLastFrame:!0,src:Je,onEvent:e=>{}})}),o(Wo,{children:[s&&i(Eo,{name:h.label||"",style:{height:32,width:32,marginRight:8,fontSize:15}}),o("div",{children:[h.children&&h.children,h.label&&i(Ne,{type:"p",children:h.label}),l&&i(Ne,{type:"p",style:{fontSize:12},children:l})]})]}),"right"===n&&i(No,{$shape:d,$selected:a,$error:r,$height:h.height,$width:h.width,children:a&&i(q,{style:{height:18,width:18},autoplay:!0,loop:!1,keepLastFrame:!0,src:Je,onEvent:e=>{}})})]}))},Yo=r.div``,Uo=e=>{const[t,o]=c([]),[n,r]=c(!1),[l,a]=c(window.innerWidth<768);p(()=>{e.selectedOptions&&o(e.selectedOptions);const t=()=>{a(window.innerWidth<768)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[e.selectedOptions]);return i(Yo,{role:"checkboxlist",style:e.style,children:i("div",{style:{paddingBottom:"2px"},children:e.options.map((a,s)=>{const d=t.some(e=>e.id===a.id);return i(Go,{role:"checkbox-"+s,style:Object.assign({marginRight:"16px",marginBottom:"16px",padding:l?"4px 1px":"0px"},e.elementStyle),label:a.label,sublabel:a.sublabel,error:a.error,selected:d,height:e.height,shape:e.shape,width:e.width,position:e.position,avatarEnabled:e.avatarEnabled,onClick:()=>(i=>{const l=t.findIndex(e=>i.id===e.id),a="single"===e.type?[i]:-1===l?[...t,i]:t.filter((e,t)=>t!==l);o(a),r(!n),e.onChange&&e.onChange(a)})(a),children:a.Element},a.id)})})})},qo=u((t,o)=>{var{type:n,options:r,selectedOptions:l,onChange:a}=t,s=e(t,["type","options","selectedOptions","onChange"]);const d=window.innerWidth<=450,[h,u]=c([]),[x,m]=c(r),[f,y]=c(void 0),[b,k]=c(void 0);g(o,()=>({clean(){w()}})),p(()=>{y(new se(r,{keys:["label","id"]})),m(r)},[r]),p(()=>{u(l||[]),v(l||[])},[l]);const v=e=>{if("single"===n&&e.length>0){const t=e[0];if(t.label)k(t.label);else{const e=r.find(e=>e.id===t.id);k(e?e.label:"1 seleccionado")}}else"multiple"===n&&e.length>0&&k(`${e.length} seleccionados`)},w=()=>{k(void 0),u([]),a&&a([])};return i(Zo,Object.assign({},s,{label:b,childrenBottomBar:"multiple"===n&&!d&&i(ut,{design:"call-to-action",size:d?"normal":"small",onClick:()=>{u(r)},children:"Seleccionar todo"}),onSave:()=>{v(h),a&&a(h)},onRemove:w,onSearchChange:e=>{if(e&&f){const t=f.search(e).map(e=>e.item);m(t)}else m(r)},onClose:()=>{m(r)},children:i(Uo,{style:{width:"100%"},options:x,selectedOptions:h,type:n,shape:s.shape,height:d?22:18,width:d?22:18,position:d?"right":"left",onChange:e=>{u(e)}})}))});ai(".DayPicker{\n    border-radius: 0px;\n    box-shadow: none;\n    font-family: Poppins;\n}\n\n.DayPickerKeyboardShortcuts_show__bottomRight{\n    display: none;\n}\n\n.CalendarMonth{\n    padding: 0px !important;\n}");const Jo=u((t,o)=>{var{position:n,selectedOptions:r,onChange:l}=t,a=e(t,["position","selectedOptions","onChange"]);const s=window.innerWidth<=450,d=window.innerWidth<=400,[h,u]=c(void 0),[x,m]=c(null),[f,y]=c(null),[b,k]=c("startDate");g(o,()=>({clean(){w()}})),p(()=>{r?(m(r.startDate),y(r.endDate),v(r.startDate?r.startDate:void 0,r.endDate?r.endDate:void 0)):(m(null),y(null),u(""))},[r]);const v=(e,t)=>{let i="";e&&(i=e.format("D MMM")),t&&(i+=` - ${t.format("D MMM")}`),u(i)},w=()=>{y(null),m(null),k("startDate"),u(void 0),l&&l({startDate:null,endDate:null})};return i(Zo,Object.assign({},a,{label:h,hideSearchBar:!0,position:n,onSave:()=>{v(x||void 0,f||void 0),l&&l({startDate:x?x.startOf("date"):null,endDate:f?f.endOf("date"):null})},onRemove:w,children:i(Q,{startDate:x,endDate:f,onDatesChange:({startDate:e,endDate:t})=>{m(e),y(t)},daySize:d?35:s?48:void 0,focusedInput:b,noBorder:!0,onFocusChange:e=>k(e),initialVisibleMonth:()=>J()})}))}),Ko=u((t,o)=>{var{selectedOptions:n,min:r,max:l,unit:a,onChange:s}=t,d=e(t,["selectedOptions","min","max","unit","onChange"]);const h=window.innerWidth<=450,[u,x]=c(void 0),[m,f]=c(0),[y,b]=c(void 0);g(o,()=>({clean(){k()}})),p(()=>{n?(f(n),x(`${n.toString()} ${a||""}`)):(f(0),x(void 0))},[n]);const k=()=>{f(0),b(void 0),x(void 0),s&&s(void 0)};return i(Zo,Object.assign({},d,{label:u,hideSearchBar:!0,onSave:()=>{y&&(x(`${y.toString()} ${a||""}`),f(y),s&&s(y))},onRemove:k,children:i(io,{style:{width:"100%",margin:h?"20px 0px":20,marginTop:40},min:r,max:l,unit:a,defaultValue:m,onChange:e=>{const t=e.target.value?Number(e.target.value):void 0;b(t)}})}))}),Qo=u((e,t)=>"date"===e.type?i(Jo,Object.assign({ref:t},e)):"ratio"===e.type?i(Ko,Object.assign({ref:t},e)):i(qo,Object.assign({ref:t},e))),Xo=r.div`
 	display: flex;
 	flex: 1;
 	flex-direction: row;
@@ -1546,7 +1546,7 @@ import{__rest as e,__awaiter as t}from"tslib";import{jsx as i,jsxs as o,Fragment
 	line-height: 12px;
 	display: flex;
 	color: ${De.text.red};
-`,Tn=u((e,n)=>{var r;const[l,a]=c(void 0),[s,d]=c(void 0),[h,u]=c(void 0),[x,m]=c(void 0),[f,y]=c(void 0),[b,k]=c(!1),[v,w]=c(void 0),$=ye(),C=be();p(()=>{e.userData&&e.userData.email?d(e.userData.email):d(void 0)},[e.userData]),g(n,()=>({getPaymentMethod(){return t(this,void 0,void 0,function*(){return yield F()})}}));const L=e=>t(void 0,void 0,void 0,function*(){y(void 0),e.complete?w(e):w(void 0)}),F=()=>t(void 0,void 0,void 0,function*(){if(!(C&&$&&v&&l))return l||u("Debes añadir el nombre del titular"),v||y("Debes añadir un método de pago válido"),void(s||m("Debes añadir un email válido"));if("iban"===v.elementType){e.onLoading&&e.onLoading(!0);const t=C.getElement(ke);if(t&&s){const{error:i,paymentMethod:o}=yield $.createPaymentMethod({type:"sepa_debit",sepa_debit:t,billing_details:{name:l,email:s}});return i?(console.error(i),void(e.onLoading&&e.onLoading(!1))):(e.onLoading&&e.onLoading(!1),o)}return void(s||m("Debes añadir un email válido"))}{e.onLoading&&e.onLoading(!0);const t=C.getElement(ve);if(t){const{error:i,paymentMethod:o}=yield $.createPaymentMethod({type:"card",card:t,billing_details:{name:l}});return i?(console.error(i),void(e.onLoading&&e.onLoading(!1))):(e.onLoading&&e.onLoading(!1),o)}}}),S=()=>{k(!0)},_=()=>{k(!1)};return o("div",{style:e.style,children:[i(Ht,{type:"text",title:e.placeholderName?e.placeholderName:"Nombre del titular",placeholder:e.placeholderName?e.placeholderName:"Nombre del titular",containerStyle:{marginBottom:8},design:e.design,onChange:e=>{return e&&(t=e.target.value,u(void 0),void a(t));var t},error:h}),"sepa_debit"===e.option&&!(null===(r=e.userData)||void 0===r?void 0:r.email)&&i(Ht,{title:e.placeholderEmail?e.placeholderEmail:"Email",placeholder:e.placeholderEmail?e.placeholderEmail:"Email",containerStyle:{marginBottom:8},type:"email",design:e.design,onChange:e=>{return e&&(t=e.target.value,m(void 0),void d(t));var t},error:x}),i(An,{$error:!!f,$focus:b,$design:e.design,children:"card"===e.option?i(ve,{options:{style:{base:{fontFamily:"Poppins",fontSize:"secondary"===e.design?"15px":"14px","::placeholder":{color:De.text.neutralMedium}}},hidePostalCode:!0},onChange:L,onFocus:S,onBlur:_}):i(ke,{options:{supportedCountries:["SEPA"],style:{base:{fontFamily:"Poppins",fontSize:"secondary"===e.design?"15px":"14px","::placeholder":{color:De.text.neutralMedium}}}},onChange:L,onFocus:S,onBlur:_})}),f&&i(Vn,{children:i(Ne,{type:"p",weight:"medium",style:{color:De.text.red,marginTop:4,fontSize:14},children:f})})]})}),Hn=r.div``,In=u((e,n)=>{const r=x(null),l=x(null),[a,s]=c(()=>$e(e.stripeKey)),[d,h]=c(!1);g(n,()=>({getPaymentMethod(){return t(this,void 0,void 0,function*(){var e;return yield null===(e=l.current)||void 0===e?void 0:e.getPaymentMethod()})}})),p(()=>{e.stripeConfirmUrl?h(!0):u()},[e.stripeConfirmUrl]),window.addEventListener("message",function(e){"3DS-authentication-complete"===e.data&&d&&u()},!1);const u=()=>{r.current&&r.current.close()};return o(Hn,{style:e.style,role:"container",children:[i(vi,{ref:r,type:"web",isVisible:d,hideClose:!0,url:e.stripeConfirmUrl,style:{width:600,height:400,padding:0},onClose:()=>{h(!1),e.onSetupConfirmed&&e.onSetupConfirmed()}}),i(we,{stripe:a,options:{fonts:[{cssSrc:"https://fonts.googleapis.com/css2?family=Poppins&display=swap"}]},children:i(Tn,{ref:l,option:e.paymentOption,style:e.cardStyle,onLoading:t=>{e.onLoading&&e.onLoading(t)},error:e.error,userData:e.userData,design:e.design,placeholderEmail:e.placeholderEmail,placeholderName:e.placeholderName})})]})}),Zn=r.div`
+`,Tn=u((e,n)=>{var r;const[l,a]=c(void 0),[s,d]=c(void 0),[h,u]=c(void 0),[x,m]=c(void 0),[f,y]=c(void 0),[b,k]=c(!1),[v,w]=c(void 0),$=ye(),C=be();p(()=>{e.userData&&e.userData.email?d(e.userData.email):d(void 0)},[e.userData]),g(n,()=>({getPaymentMethod(){return t(this,void 0,void 0,function*(){return yield F()})}}));const L=e=>t(void 0,void 0,void 0,function*(){y(void 0),e.complete?w(e):w(void 0)}),F=()=>t(void 0,void 0,void 0,function*(){if(!(C&&$&&v&&l))return l||u("Debes añadir el nombre del titular"),v||y("Debes añadir un método de pago válido"),void(s||m("Debes añadir un email válido"));if("iban"===v.elementType){e.onLoading&&e.onLoading(!0);const t=C.getElement(ke);if(t&&s){const{error:i,paymentMethod:o}=yield $.createPaymentMethod({type:"sepa_debit",sepa_debit:t,billing_details:{name:l,email:s}});return i?void(e.onLoading&&e.onLoading(!1)):(e.onLoading&&e.onLoading(!1),o)}return void(s||m("Debes añadir un email válido"))}{e.onLoading&&e.onLoading(!0);const t=C.getElement(ve);if(t){const{error:i,paymentMethod:o}=yield $.createPaymentMethod({type:"card",card:t,billing_details:{name:l}});return i?void(e.onLoading&&e.onLoading(!1)):(e.onLoading&&e.onLoading(!1),o)}}}),S=()=>{k(!0)},_=()=>{k(!1)};return o("div",{style:e.style,children:[i(Ht,{type:"text",title:e.placeholderName?e.placeholderName:"Nombre del titular",placeholder:e.placeholderName?e.placeholderName:"Nombre del titular",containerStyle:{marginBottom:8},design:e.design,onChange:e=>{return e&&(t=e.target.value,u(void 0),void a(t));var t},error:h}),"sepa_debit"===e.option&&!(null===(r=e.userData)||void 0===r?void 0:r.email)&&i(Ht,{title:e.placeholderEmail?e.placeholderEmail:"Email",placeholder:e.placeholderEmail?e.placeholderEmail:"Email",containerStyle:{marginBottom:8},type:"email",design:e.design,onChange:e=>{return e&&(t=e.target.value,m(void 0),void d(t));var t},error:x}),i(An,{$error:!!f,$focus:b,$design:e.design,children:"card"===e.option?i(ve,{options:{style:{base:{fontFamily:"Poppins",fontSize:"secondary"===e.design?"15px":"14px","::placeholder":{color:De.text.neutralMedium}}},hidePostalCode:!0},onChange:L,onFocus:S,onBlur:_}):i(ke,{options:{supportedCountries:["SEPA"],style:{base:{fontFamily:"Poppins",fontSize:"secondary"===e.design?"15px":"14px","::placeholder":{color:De.text.neutralMedium}}}},onChange:L,onFocus:S,onBlur:_})}),f&&i(Vn,{children:i(Ne,{type:"p",weight:"medium",style:{color:De.text.red,marginTop:4,fontSize:14},children:f})})]})}),Hn=r.div``,In=u((e,n)=>{const r=x(null),l=x(null),[a,s]=c(()=>$e(e.stripeKey)),[d,h]=c(!1);g(n,()=>({getPaymentMethod(){return t(this,void 0,void 0,function*(){var e;return yield null===(e=l.current)||void 0===e?void 0:e.getPaymentMethod()})}})),p(()=>{e.stripeConfirmUrl?h(!0):u()},[e.stripeConfirmUrl]),window.addEventListener("message",function(e){"3DS-authentication-complete"===e.data&&d&&u()},!1);const u=()=>{r.current&&r.current.close()};return o(Hn,{style:e.style,role:"container",children:[i(vi,{ref:r,type:"web",isVisible:d,hideClose:!0,url:e.stripeConfirmUrl,style:{width:600,height:400,padding:0},onClose:()=>{h(!1),e.onSetupConfirmed&&e.onSetupConfirmed()}}),i(we,{stripe:a,options:{fonts:[{cssSrc:"https://fonts.googleapis.com/css2?family=Poppins&display=swap"}]},children:i(Tn,{ref:l,option:e.paymentOption,style:e.cardStyle,onLoading:t=>{e.onLoading&&e.onLoading(t)},error:e.error,userData:e.userData,design:e.design,placeholderEmail:e.placeholderEmail,placeholderName:e.placeholderName})})]})}),Zn=r.div`
 	display: flex;
 	flex-direction: row;
 	border: 1px solid ${De.border.neutralSoft};
@@ -1797,7 +1797,7 @@ import{__rest as e,__awaiter as t}from"tslib";import{jsx as i,jsxs as o,Fragment
 	margin: 0 18px;
 	padding: 2px 8px;
 	border-radius: 6px 6px 0px 0px;
-`,Wr=e=>{const t=x(null),[n,r]=c({}),[l,a]=c(!1),[s,d]=c(!1);p(()=>{h(e.messages);const i=e.messages.slice().reverse().find(e=>"recipient"===e.type);if(console.log(i),i){J().diff(J(i.createdAt),"hours")>=24&&a(!0)}else a(!0);t.current&&t.current.scrollTo({top:t.current.scrollHeight,behavior:"smooth"})},[e.messages]);const h=e=>{const t=e.reduce((e,t)=>{const i=J(new Date(t.createdAt)).format("YYYY-MM-DD");return e[i]||(e[i]=[]),e[i].push(t),e},{});r(t)};return o(Vr,{role:"container",style:e.style,children:[i(Ar,{isVisible:s,templates:e.templates,onSend:e.onSend,onClose:()=>d(!1)}),i(Tr,{ref:t,children:Object.keys(n).map(e=>o(b,{children:[o(Ir,{children:[i(Rr,{}),i(Zr,{type:"c1",children:J(e).format("ddd DD MMM")}),i(Rr,{})]}),n[e].map((e,t)=>i(Or,{message:e},e.key))]},e))}),o(Hr,{children:[l&&i(Nr,{children:i(Ne,{type:"c2",children:"El último mensaje es de hace más de 24 horas. Continuar la conversación usando plantillas."})}),i(ti,{loading:e.loading,disabled:l,placeholder:e.placeholder,options:[{id:"template",label:"Plantillas",icon:i(U,{})},{id:"image",label:"Fotos",icon:i(D,{})}],onOptionClick:t=>{if("template"===t)d(!0);else if("image"===t){const t=document.createElement("input");t.type="file",t.accept="image/*",t.onchange=t=>{var i;const o=null===(i=t.target.files)||void 0===i?void 0:i[0];if(o){const t=new FileReader;t.onloadend=()=>{const i=t.result;e.onSend({media:{base64:i,contentType:"image/*"}})},t.readAsDataURL(o)}},t.click()}},onSend:t=>e.onSend(t)})]})]})},Gr=r.div`
+`,Wr=e=>{const t=x(null),[n,r]=c({}),[l,a]=c(!1),[s,d]=c(!1);p(()=>{h(e.messages);const i=e.messages.slice().reverse().find(e=>"recipient"===e.type);if(i){J().diff(J(i.createdAt),"hours")>=24&&a(!0)}else a(!0);t.current&&t.current.scrollTo({top:t.current.scrollHeight,behavior:"smooth"})},[e.messages]);const h=e=>{const t=e.reduce((e,t)=>{const i=J(new Date(t.createdAt)).format("YYYY-MM-DD");return e[i]||(e[i]=[]),e[i].push(t),e},{});r(t)};return o(Vr,{role:"container",style:e.style,children:[i(Ar,{isVisible:s,templates:e.templates,onSend:e.onSend,onClose:()=>d(!1)}),i(Tr,{ref:t,children:Object.keys(n).map(e=>o(b,{children:[o(Ir,{children:[i(Rr,{}),i(Zr,{type:"c1",children:J(e).format("ddd DD MMM")}),i(Rr,{})]}),n[e].map((e,t)=>i(Or,{message:e},e.key))]},e))}),o(Hr,{children:[l&&i(Nr,{children:i(Ne,{type:"c2",children:"El último mensaje es de hace más de 24 horas. Continuar la conversación usando plantillas."})}),i(ti,{loading:e.loading,disabled:l,placeholder:e.placeholder,options:[{id:"template",label:"Plantillas",icon:i(U,{})},{id:"image",label:"Fotos",icon:i(D,{})}],onOptionClick:t=>{if("template"===t)d(!0);else if("image"===t){const t=document.createElement("input");t.type="file",t.accept="image/*",t.onchange=t=>{var i;const o=null===(i=t.target.files)||void 0===i?void 0:i[0];if(o){const t=new FileReader;t.onloadend=()=>{const i=t.result;e.onSend({media:{base64:i,contentType:"image/*"}})},t.readAsDataURL(o)}},t.click()}},onSend:t=>e.onSend(t)})]})]})},Gr=r.div`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;