@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.0

package/lib/esm/components/button/styles.js

@@ -1,40 +1,42 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledUrlImage = exports.StyledButton = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.StyledButton = styled_components_1.default.button `
+import styled_components from "styled-components";
+
+
+
+const StyledButton = styled_components.button`
   display: flex;
   justify-content: center;
   align-content: center;
   gap: 6px;
   cursor: pointer;
-  width: ${props => props.theme.button?.style?.width};
-  max-height: ${props => props.theme.button?.style?.maxHeight};
-  height: ${props => props.theme.button?.style?.height};
-  font-family: ${props => props.theme.style?.fontFamily};
-  font-size: ${props => props.theme.button?.style?.fontSize};
-  font-weight: ${props => props.theme.button?.style?.fontWeight};
-  background: ${props => props.theme.button?.style?.background};
-  color: ${props => props.theme.button?.style?.color};
-  outline: ${props => props.theme.button?.style?.outline};
-  border: ${props => props.theme.button?.style?.border};
-  border-radius: ${props => props.theme.button?.style?.borderRadius};
-  padding: ${props => props.theme.button?.style?.padding};
-  overflow: ${props => props.theme.button?.style?.overflow};
+  width: ${(props)=>props.theme.button?.style?.width};
+  max-height: ${(props)=>props.theme.button?.style?.maxHeight};
+  height: ${(props)=>props.theme.button?.style?.height};
+  font-family: ${(props)=>props.theme.style?.fontFamily};
+  font-size: ${(props)=>props.theme.button?.style?.fontSize};
+  font-weight: ${(props)=>props.theme.button?.style?.fontWeight};
+  background: ${(props)=>props.theme.button?.style?.background};
+  color: ${(props)=>props.theme.button?.style?.color};
+  outline: ${(props)=>props.theme.button?.style?.outline};
+  border: ${(props)=>props.theme.button?.style?.border};
+  border-radius: ${(props)=>props.theme.button?.style?.borderRadius};
+  padding: ${(props)=>props.theme.button?.style?.padding};
+  overflow: ${(props)=>props.theme.button?.style?.overflow};
 
   &:hover {
-    background: ${props => props.theme.button?.hoverBackground};
-    color: ${props => props.theme.button?.hoverTextColor};
+    background: ${(props)=>props.theme.button?.hoverBackground};
+    color: ${(props)=>props.theme.button?.hoverTextColor};
   }
 
   &:disabled {
-    opacity: ${props => props.theme.button?.disabledstyle?.opacity};
-    cursor: ${props => props.theme.button?.disabledstyle?.cursor};
-    pointer-events: ${props => props.theme.button?.disabledstyle?.pointerEvents};
+    opacity: ${(props)=>props.theme.button?.disabledstyle?.opacity};
+    cursor: ${(props)=>props.theme.button?.disabledstyle?.cursor};
+    pointer-events: ${(props)=>props.theme.button?.disabledstyle?.pointerEvents};
   }
 `;
-exports.StyledUrlImage = styled_components_1.default.img `
+const StyledUrlImage = styled_components.img`
   width: 20px;
 `;
+
+export { StyledButton, StyledUrlImage };
+
 //# sourceMappingURL=styles.js.map

package/lib/esm/components/button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/button/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAEzB,QAAA,YAAY,GAAG,2BAAM,CAAC,MAAM,CAAA;;;;;;WAM9B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK;gBACpC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS;YACjD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM;iBACrC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU;eACxC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ;iBAC1C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU;gBAC/C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU;WACnD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK;aACvC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO;YAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM;mBACnC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY;aACtD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO;cAC1C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ;;;kBAGxC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,eAAe;aACjD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,cAAc;;;;eAIzC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO;cACpD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM;sBAC1C,KAAK,CAAC,EAAE,CACxB,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,EAAE,aAAa;;CAErD,CAAA;AAEY,QAAA,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAEvC,CAAA"}
+{"version":3,"file":"components/button/styles.js","sources":["../../../../src/components/button/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const StyledButton = styled.button`\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  gap: 6px;\n  cursor: pointer;\n  width: ${props => props.theme.button?.style?.width};\n  max-height: ${props => props.theme.button?.style?.maxHeight};\n  height: ${props => props.theme.button?.style?.height};\n  font-family: ${props => props.theme.style?.fontFamily};\n  font-size: ${props => props.theme.button?.style?.fontSize};\n  font-weight: ${props => props.theme.button?.style?.fontWeight};\n  background: ${props => props.theme.button?.style?.background};\n  color: ${props => props.theme.button?.style?.color};\n  outline: ${props => props.theme.button?.style?.outline};\n  border: ${props => props.theme.button?.style?.border};\n  border-radius: ${props => props.theme.button?.style?.borderRadius};\n  padding: ${props => props.theme.button?.style?.padding};\n  overflow: ${props => props.theme.button?.style?.overflow};\n\n  &:hover {\n    background: ${props => props.theme.button?.hoverBackground};\n    color: ${props => props.theme.button?.hoverTextColor};\n  }\n\n  &:disabled {\n    opacity: ${props => props.theme.button?.disabledstyle?.opacity};\n    cursor: ${props => props.theme.button?.disabledstyle?.cursor};\n    pointer-events: ${props =>\n      props.theme.button?.disabledstyle?.pointerEvents};\n  }\n`\n\nexport const StyledUrlImage = styled.img`\n  width: 20px;\n`\n"],"names":["styled","StyledButton","props","StyledUrlImage"],"mappings":";;;AAAsC;AAE/B,MAAMC,YAAYA,GAAGD,wBAAa,CAAC;;;;;;SAMjC,EAAEE,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,MAAM;cACvC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,UAAU;UACpD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO;eACxC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,EAAE,WAAW;aAC3C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS;eAC7C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,WAAW;cAClD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,WAAW;SACtD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,MAAM;WAC1C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ;UAC/C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO;iBACtC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,aAAa;WACzD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ;YAC7C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS;;;gBAG3C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,gBAAgB;WACpD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,eAAe;;;;aAI5C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,eAAe,QAAQ;YACvD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,eAAe,OAAO;oBAC7C,EAAEA,CAAAA,QAChBA,MAAM,KAAK,CAAC,MAAM,EAAE,eAAe,cAAc;;AAEvD,CAAC;AAEM,MAAMC,cAAcA,GAAGH,qBAAU,CAAC;;AAEzC,CAAC"}

package/lib/esm/components/buttons-disabler.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { WebchatMessage } from '../index-types';
+import type { WebchatMessage } from '../index-types.js';
 interface DisabledProps {
     disabled?: boolean;
     autodisable?: boolean | string;

package/lib/esm/components/buttons-disabler.js

@@ -1,16 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonsDisabler = void 0;
-const message_utils_1 = require("../message-utils");
-const objects_1 = require("../util/objects");
-const react_1 = require("../util/react");
-const button_1 = require("./button");
+import { isCarousel } from "../message-utils.js";
+import { strToBool } from "../util/objects.js";
+import { deepMapWithIndex } from "../util/react.js";
+import { Button } from "./button/index.js";
+
+
+
+
+
+/* eslint-disable @typescript-eslint/no-explicit-any */ 
+
+
+
 // biome-ignore lint/complexity/noStaticOnlyClass: ButtonsDisabler is a static class and should not be instantiated
 class ButtonsDisabler {
     static constructBrowserProps(props) {
         const disabledProps = {};
         if (props.autodisable !== undefined) {
-            disabledProps.autodisable = (0, objects_1.strToBool)(props.autodisable);
+            disabledProps.autodisable = strToBool(props.autodisable);
         }
         if (props.disabledstyle !== undefined) {
             disabledProps.disabledstyle = props.disabledstyle;
@@ -31,12 +37,12 @@ class ButtonsDisabler {
         return {
             disabled: props.disabled,
             autodisable: props.autodisable,
-            disabledstyle: props.disabledstyle,
+            disabledstyle: props.disabledstyle
         };
     }
     static updateChildrenButtons(children, additionalProps) {
-        return (0, react_1.deepMapWithIndex)(children, (node) => {
-            if (node.type === button_1.Button) {
+        return deepMapWithIndex(children, (node)=>{
+            if (node.type === Button) {
                 return ButtonsDisabler.updateButtons(node, additionalProps);
             }
             return node;
@@ -46,49 +52,46 @@ class ButtonsDisabler {
         if (additionalProps) {
             additionalProps = {
                 parentId: additionalProps.parentId,
-                disabled: node.props.disabled === true
-                    ? node.props.disabled
-                    : additionalProps.disabled,
-                setDisabled: additionalProps.setDisabled,
+                disabled: node.props.disabled === true ? node.props.disabled : additionalProps.disabled,
+                setDisabled: additionalProps.setDisabled
             };
         }
         return {
             ...node,
             props: {
                 ...node.props,
-                ...additionalProps,
-            },
+                ...additionalProps
+            }
         };
     }
     static getUpdatedMessage(messageToUpdate) {
-        const updateMsgButton = (button) => {
+        const updateMsgButton = (button)=>{
             return {
                 ...button,
                 ...{
-                    disabled: true,
-                },
+                    disabled: true
+                }
             };
         };
-        if ((0, message_utils_1.isCarousel)(messageToUpdate) &&
-            messageToUpdate.data &&
-            messageToUpdate.data.elements) {
-            messageToUpdate.data.elements = messageToUpdate.data.elements.map(e => ({
-                ...e,
-                ...{
-                    buttons: e.buttons.map(updateMsgButton),
-                },
-            }));
+        if (isCarousel(messageToUpdate) && messageToUpdate.data && messageToUpdate.data.elements) {
+            messageToUpdate.data.elements = messageToUpdate.data.elements.map((e)=>({
+                    ...e,
+                    ...{
+                        buttons: e.buttons.map(updateMsgButton)
+                    }
+                }));
             return messageToUpdate;
-        }
-        else {
+        } else {
             return {
                 ...messageToUpdate,
                 ...{
-                    buttons: messageToUpdate.buttons.map(updateMsgButton),
-                },
+                    buttons: messageToUpdate.buttons.map(updateMsgButton)
+                }
             };
         }
     }
 }
-exports.ButtonsDisabler = ButtonsDisabler;
+
+export { ButtonsDisabler };
+
 //# sourceMappingURL=buttons-disabler.js.map

package/lib/esm/components/buttons-disabler.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttons-disabler.js","sourceRoot":"","sources":["../../../src/components/buttons-disabler.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"components/buttons-disabler.js","sources":["../../../src/components/buttons-disabler.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from 'react'\n\nimport type { WebchatMessage } from '../index-types'\nimport { isCarousel } from '../message-utils'\nimport { strToBool } from '../util/objects'\nimport { deepMapWithIndex } from '../util/react'\nimport { Button } from './button'\nimport type { ButtonProps } from './index-types'\n\ninterface DisabledProps {\n  disabled?: boolean\n  autodisable?: boolean | string\n  disabledstyle?: Record<string, string> | string\n}\n\ninterface AdditionalProps {\n  parentId: string\n  disabled?: boolean\n  setDisabled: (disabled: boolean) => void\n}\n// biome-ignore lint/complexity/noStaticOnlyClass: ButtonsDisabler is a static class and should not be instantiated\nexport class ButtonsDisabler {\n  static constructBrowserProps(props: DisabledProps): DisabledProps {\n    const disabledProps: DisabledProps = {}\n    if (props.autodisable !== undefined) {\n      disabledProps.autodisable = strToBool(props.autodisable)\n    }\n    if (props.disabledstyle !== undefined) {\n      disabledProps.disabledstyle = props.disabledstyle\n    }\n    return disabledProps\n  }\n\n  static constructNodeProps(props: DisabledProps): DisabledProps {\n    const disabledProps: DisabledProps = {}\n    if (props.autodisable !== undefined) {\n      disabledProps.autodisable = String(props.autodisable)\n    }\n    if (props.disabledstyle !== undefined) {\n      disabledProps.disabledstyle = JSON.stringify(props.disabledstyle)\n    }\n    return disabledProps\n  }\n\n  static withDisabledProps(props: DisabledProps): DisabledProps {\n    return {\n      disabled: props.disabled,\n      autodisable: props.autodisable,\n      disabledstyle: props.disabledstyle,\n    }\n  }\n\n  static updateChildrenButtons(\n    children: React.ReactNode,\n    additionalProps?: AdditionalProps\n  ): React.ReactNode {\n    return deepMapWithIndex(children, (node: any) => {\n      if (node.type === Button) {\n        return ButtonsDisabler.updateButtons(node, additionalProps)\n      }\n      return node\n    })\n  }\n\n  static updateButtons(node: any, additionalProps?: AdditionalProps): any {\n    if (additionalProps) {\n      additionalProps = {\n        parentId: additionalProps.parentId,\n        disabled:\n          node.props.disabled === true\n            ? node.props.disabled\n            : additionalProps.disabled,\n        setDisabled: additionalProps.setDisabled,\n      }\n    }\n    return {\n      ...node,\n      props: {\n        ...node.props,\n        ...additionalProps,\n      },\n    }\n  }\n\n  static getUpdatedMessage(messageToUpdate: WebchatMessage): WebchatMessage {\n    const updateMsgButton = (button: ButtonProps) => {\n      return {\n        ...button,\n        ...{\n          disabled: true,\n        },\n      }\n    }\n\n    if (\n      isCarousel(messageToUpdate) &&\n      messageToUpdate.data &&\n      messageToUpdate.data.elements\n    ) {\n      messageToUpdate.data.elements = messageToUpdate.data.elements.map(e => ({\n        ...e,\n        ...{\n          buttons: e.buttons.map(updateMsgButton),\n        },\n      }))\n      return messageToUpdate\n    } else {\n      return {\n        ...messageToUpdate,\n        ...{\n          buttons: messageToUpdate.buttons.map(updateMsgButton),\n        },\n      }\n    }\n  }\n}\n"],"names":["isCarousel","strToBool","deepMapWithIndex","Button","ButtonsDisabler","props","disabledProps","undefined","String","JSON","children","additionalProps","node","messageToUpdate","updateMsgButton","button","e"],"mappings":";;;;;;;;;AAAA,qDAAqD,GAIR;AACF;AACK;AACf;AAcjC,mHAAmH;AAC5G,MAAMI,eAAeA;IAC1B,OAAO,sBAAsBC,KAAoB,EAAiB;QAChE,MAAMC,gBAA+B,CAAC;QACtC,IAAID,MAAM,WAAW,KAAKE,WAAW;YACnCD,cAAc,WAAW,GAAGL,SAASA,CAACI,MAAM,WAAW;QACzD;QACA,IAAIA,MAAM,aAAa,KAAKE,WAAW;YACrCD,cAAc,aAAa,GAAGD,MAAM,aAAa;QACnD;QACA,OAAOC;IACT;IAEA,OAAO,mBAAmBD,KAAoB,EAAiB;QAC7D,MAAMC,gBAA+B,CAAC;QACtC,IAAID,MAAM,WAAW,KAAKE,WAAW;YACnCD,cAAc,WAAW,GAAGE,OAAOH,MAAM,WAAW;QACtD;QACA,IAAIA,MAAM,aAAa,KAAKE,WAAW;YACrCD,cAAc,aAAa,GAAGG,KAAK,SAAS,CAACJ,MAAM,aAAa;QAClE;QACA,OAAOC;IACT;IAEA,OAAO,kBAAkBD,KAAoB,EAAiB;QAC5D,OAAO;YACL,UAAUA,MAAM,QAAQ;YACxB,aAAaA,MAAM,WAAW;YAC9B,eAAeA,MAAM,aAAa;QACpC;IACF;IAEA,OAAO,sBACLK,QAAyB,EACzBC,eAAiC,EAChB;QACjB,OAAOT,gBAAgBA,CAACQ,UAAU,CAACE;YACjC,IAAIA,KAAK,IAAI,KAAKT,MAAMA,EAAE;gBACxB,OAAOC,eAAeA,CAAC,aAAa,CAACQ,MAAMD;YAC7C;YACA,OAAOC;QACT;IACF;IAEA,OAAO,cAAcA,IAAS,EAAED,eAAiC,EAAO;QACtE,IAAIA,iBAAiB;YACnBA,kBAAkB;gBAChB,UAAUA,gBAAgB,QAAQ;gBAClC,UACEC,KAAK,KAAK,CAAC,QAAQ,KAAK,OACpBA,KAAK,KAAK,CAAC,QAAQ,GACnBD,gBAAgB,QAAQ;gBAC9B,aAAaA,gBAAgB,WAAW;YAC1C;QACF;QACA,OAAO;YACL,GAAGC,IAAI;YACP,OAAO;gBACL,GAAGA,KAAK,KAAK;gBACb,GAAGD,eAAe;YACpB;QACF;IACF;IAEA,OAAO,kBAAkBE,eAA+B,EAAkB;QACxE,MAAMC,kBAAkB,CAACC;YACvB,OAAO;gBACL,GAAGA,MAAM;gBACT,GAAG;oBACD,UAAU;gBACZ,CAAC;YACH;QACF;QAEA,IACEf,UAAUA,CAACa,oBACXA,gBAAgB,IAAI,IACpBA,gBAAgB,IAAI,CAAC,QAAQ,EAC7B;YACAA,gBAAgB,IAAI,CAAC,QAAQ,GAAGA,gBAAgB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAACG,CAAAA,IAAM;oBACtE,GAAGA,CAAC;oBACJ,GAAG;wBACD,SAASA,EAAE,OAAO,CAAC,GAAG,CAACF;oBACzB,CAAC;gBACH;YACA,OAAOD;QACT,OAAO;YACL,OAAO;gBACL,GAAGA,eAAe;gBAClB,GAAG;oBACD,SAASA,gBAAgB,OAAO,CAAC,GAAG,CAACC;gBACvC,CAAC;YACH;QACF;IACF;AACF"}

package/lib/esm/components/carousel.d.ts

@@ -1,5 +1,5 @@
 import { INPUT } from '@botonic/core';
-import type { CarouselProps } from './index-types';
+import type { CarouselProps } from './index-types.js';
 export declare const Carousel: {
     (props: CarouselProps): import("react/jsx-runtime").JSX.Element;
     displayName: "Carousel";

package/lib/esm/components/carousel.js

@@ -1,119 +1,196 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Carousel = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@botonic/core");
-const react_1 = require("react");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const leftArrow_svg_1 = tslib_1.__importDefault(require("../assets/leftArrow.svg"));
-const rightArrow_svg_1 = tslib_1.__importDefault(require("../assets/rightArrow.svg"));
-const constants_1 = require("../constants");
-const environment_1 = require("../util/environment");
-const context_1 = require("../webchat/context");
-const buttons_disabler_1 = require("./buttons-disabler");
-const constants_2 = require("./constants");
-const message_1 = require("./message");
-const ScrollableCarousel = styled_components_1.default.div `
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { INPUT, isBrowser } from "@botonic/core";
+import { useContext, useEffect, useRef, useState } from "react";
+import styled_components from "styled-components";
+import leftArrow from "../assets/leftArrow.svg";
+import rightArrow from "../assets/rightArrow.svg";
+import { COLORS, WEBCHAT } from "../constants.js";
+import { resolveImage } from "../util/environment.js";
+import { WebchatContext } from "../webchat/context/index.js";
+import { ButtonsDisabler } from "./buttons-disabler.js";
+import { COMPONENT_DISPLAY_NAMES } from "./constants.js";
+import { Message } from "./message/index.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const ScrollableCarousel = styled_components.div`
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
 `;
-const StyledCarousel = styled_components_1.default.div `
+const StyledCarousel = styled_components.div`
   padding: 10px 0px;
   display: flex;
   flex-direction: row;
   max-width: 100%;
-  ${props => props.carouselArrowsEnabled && 'overflow-x: auto;'}
+  ${(props)=>props.carouselArrowsEnabled && 'overflow-x: auto;'}
 `;
-const StyledItems = styled_components_1.default.div `
+const StyledItems = styled_components.div`
   display: flex;
 `;
-const StyledArrowContainer = styled_components_1.default.div `
+const StyledArrowContainer = styled_components.div`
   position: absolute;
   top: calc(50% - 20px);
   height: 40px;
   width: 25px;
-  background: ${constants_1.COLORS.SILVER};
+  background: ${COLORS.SILVER};
   display: flex;
   align-items: center;
   cursor: pointer;
-  justify-content: ${props => props.justifyContent};
-
-  ${props => (props.left === 0 ? `left: ${props.left}px` : '')};
-  ${props => (props.right === 0 ? `right: ${props.right}px` : '')};
-  ${props => (props.arrow === 'right' ? 'border-top-right-radius: 30px' : '')};
-  ${props => props.arrow === 'right' ? 'border-bottom-right-radius: 30px' : ''};
-  ${props => (props.arrow === 'left' ? 'border-top-left-radius: 30px' : '')};
-  ${props => (props.arrow === 'left' ? 'border-bottom-left-radius: 30px' : '')};
+  justify-content: ${(props)=>props.justifyContent};
+
+  ${(props)=>props.left === 0 ? `left: ${props.left}px` : ''};
+  ${(props)=>props.right === 0 ? `right: ${props.right}px` : ''};
+  ${(props)=>props.arrow === 'right' ? 'border-top-right-radius: 30px' : ''};
+  ${(props)=>props.arrow === 'right' ? 'border-bottom-right-radius: 30px' : ''};
+  ${(props)=>props.arrow === 'left' ? 'border-top-left-radius: 30px' : ''};
+  ${(props)=>props.arrow === 'left' ? 'border-bottom-left-radius: 30px' : ''};
 `;
-const StyledArrow = styled_components_1.default.img `
+const StyledArrow = styled_components.img`
   width: 20px;
   height: 20px;
 `;
-const serialize = carouselProps => {
+const serialize = (carouselProps)=>{
     let carouselChildren = carouselProps.children;
     if (!Array.isArray(carouselChildren)) {
-        carouselChildren = [carouselChildren];
+        carouselChildren = [
+            carouselChildren
+        ];
     }
     return {
-        type: core_1.INPUT.CAROUSEL,
-        elements: carouselChildren.map(e => e?.type?.serialize?.(e.props)),
+        type: INPUT.CAROUSEL,
+        elements: carouselChildren.map((e)=>e?.type?.serialize?.(e.props))
     };
 };
-const Carousel = (props) => {
-    const { getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
-    const [hasLeftArrow, setLeftArrow] = (0, react_1.useState)(false);
-    const [hasRightArrow, setRightArrow] = (0, react_1.useState)(true);
-    const carouselRef = (0, react_1.useRef)(null);
-    const CustomCarouselLeftArrow = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow);
-    const CustomCarouselRightArrow = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow);
+const Carousel = (props)=>{
+    const { getThemeProperty } = useContext(WebchatContext);
+    const [hasLeftArrow, setLeftArrow] = useState(false);
+    const [hasRightArrow, setRightArrow] = useState(true);
+    const carouselRef = useRef(null);
+    const CustomCarouselLeftArrow = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow);
+    const CustomCarouselRightArrow = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow);
     // TODO: Investigate why when set to false, scroll is enabled via dragging the bar but not hovering the carousel elements
-    const carouselArrowsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows);
-    const scrollCarouselBy = value => {
+    const carouselArrowsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows);
+    const scrollCarouselBy = (value)=>{
         carouselRef.current?.scrollBy({
             left: value,
-            behavior: 'smooth',
+            behavior: 'smooth'
         });
     };
-    const setArrowsVisibility = event => {
+    const setArrowsVisibility = (event)=>{
         const carousel = event.currentTarget;
-        const maxRightScroll = carousel.scrollWidth -
-            carousel.offsetWidth -
-            constants_1.WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
+        const maxRightScroll = carousel.scrollWidth - carousel.offsetWidth - WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
         setLeftArrow(carousel.scrollLeft !== 0);
         setRightArrow(carousel.scrollLeft < maxRightScroll);
     };
-    const getArrows = () => {
-        const scrollBy = constants_1.WEBCHAT.DEFAULTS.ELEMENT_WIDTH + constants_1.WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasLeftArrow &&
-                    (CustomCarouselLeftArrow ? ((0, jsx_runtime_1.jsx)(CustomCarouselLeftArrow, { scrollCarouselBy: scrollCarouselBy })) : ((0, jsx_runtime_1.jsx)(StyledArrowContainer, { left: 0, arrow: 'right', justifyContent: 'flex-start', onClick: () => scrollCarouselBy(-scrollBy), children: (0, jsx_runtime_1.jsx)(StyledArrow, { src: (0, environment_1.resolveImage)(leftArrow_svg_1.default) }) }))), hasRightArrow &&
-                    (CustomCarouselRightArrow ? ((0, jsx_runtime_1.jsx)(CustomCarouselRightArrow, { scrollCarouselBy: scrollCarouselBy })) : ((0, jsx_runtime_1.jsx)(StyledArrowContainer, { right: 0, arrow: 'left', justifyContent: 'flex-end', onClick: () => scrollCarouselBy(scrollBy), children: (0, jsx_runtime_1.jsx)(StyledArrow, { src: (0, environment_1.resolveImage)(rightArrow_svg_1.default) }) })))] }));
+    const getArrows = ()=>{
+        const scrollBy = WEBCHAT.DEFAULTS.ELEMENT_WIDTH + WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                hasLeftArrow && (CustomCarouselLeftArrow ? /*#__PURE__*/ jsx(CustomCarouselLeftArrow, {
+                    scrollCarouselBy: scrollCarouselBy
+                }) : /*#__PURE__*/ jsx(StyledArrowContainer, {
+                    left: 0,
+                    arrow: 'right',
+                    justifyContent: 'flex-start',
+                    onClick: ()=>scrollCarouselBy(-scrollBy),
+                    children: /*#__PURE__*/ jsx(StyledArrow, {
+                        src: resolveImage(leftArrow)
+                    })
+                })),
+                hasRightArrow && (CustomCarouselRightArrow ? /*#__PURE__*/ jsx(CustomCarouselRightArrow, {
+                    scrollCarouselBy: scrollCarouselBy
+                }) : /*#__PURE__*/ jsx(StyledArrowContainer, {
+                    right: 0,
+                    arrow: 'left',
+                    justifyContent: 'flex-end',
+                    onClick: ()=>scrollCarouselBy(scrollBy),
+                    children: /*#__PURE__*/ jsx(StyledArrow, {
+                        src: resolveImage(rightArrow)
+                    })
+                }))
+            ]
+        });
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(()=>{
         const carousel = carouselRef.current;
         if (carousel?.addEventListener) {
             carousel.addEventListener('scroll', setArrowsVisibility, false);
         }
-        return () => {
+        return ()=>{
             if (carousel?.removeEventListener) {
                 carousel.removeEventListener('scroll', setArrowsVisibility, false);
             }
         };
-    }, [carouselRef.current]);
+    }, [
+        carouselRef.current
+    ]);
     const carouselProps = {
         ...props,
-        children: buttons_disabler_1.ButtonsDisabler.updateChildrenButtons(props.children),
+        children: ButtonsDisabler.updateChildrenButtons(props.children)
     };
-    if ((0, core_1.isBrowser)()) {
-        return ((0, jsx_runtime_1.jsx)(message_1.Message, { style: {
+    if (isBrowser()) {
+        return /*#__PURE__*/ jsx(Message, {
+            style: {
                 width: '85%',
                 padding: 0,
-                backgroundColor: constants_1.COLORS.TRANSPARENT,
-            }, blob: false, json: serialize(carouselProps), type: core_1.INPUT.CAROUSEL, ...carouselProps, children: (0, jsx_runtime_1.jsx)(ScrollableCarousel, { children: (0, jsx_runtime_1.jsxs)(StyledCarousel, { ref: carouselRef, carouselArrowsEnabled: carouselArrowsEnabled, children: [(0, jsx_runtime_1.jsx)(StyledItems, { children: carouselProps.children }), carouselArrowsEnabled && getArrows()] }) }) }));
+                backgroundColor: COLORS.TRANSPARENT
+            },
+            blob: false,
+            json: serialize(carouselProps),
+            type: INPUT.CAROUSEL,
+            ...carouselProps,
+            children: /*#__PURE__*/ jsx(ScrollableCarousel, {
+                children: /*#__PURE__*/ jsxs(StyledCarousel, {
+                    ref: carouselRef,
+                    carouselArrowsEnabled: carouselArrowsEnabled,
+                    children: [
+                        /*#__PURE__*/ jsx(StyledItems, {
+                            children: carouselProps.children
+                        }),
+                        carouselArrowsEnabled && getArrows()
+                    ]
+                })
+            })
+        });
     }
-    return ((0, jsx_runtime_1.jsx)(message_1.Message, { style: { width: '85%', padding: 0, backgroundColor: constants_1.COLORS.TRANSPARENT }, blob: false, json: serialize(carouselProps), type: core_1.INPUT.CAROUSEL, ...carouselProps, children: props.children }));
+    return /*#__PURE__*/ jsx(Message, {
+        style: {
+            width: '85%',
+            padding: 0,
+            backgroundColor: COLORS.TRANSPARENT
+        },
+        blob: false,
+        json: serialize(carouselProps),
+        type: INPUT.CAROUSEL,
+        ...carouselProps,
+        children: props.children
+    });
 };
-exports.Carousel = Carousel;
-exports.Carousel.displayName = constants_2.COMPONENT_DISPLAY_NAMES.Carousel;
-exports.Carousel.serialize = serialize;
+Carousel.displayName = COMPONENT_DISPLAY_NAMES.Carousel;
+Carousel.serialize = serialize;
+
+export { Carousel };
+
 //# sourceMappingURL=carousel.js.map

package/lib/esm/components/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../src/components/carousel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"components/carousel.js","sources":["../../../src/components/carousel.tsx"],"sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport { useContext, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\n\nimport LeftArrow from '../assets/leftArrow.svg'\nimport RightArrow from '../assets/rightArrow.svg'\nimport { COLORS, WEBCHAT } from '../constants'\nimport { resolveImage } from '../util/environment'\nimport { WebchatContext } from '../webchat/context'\nimport { ButtonsDisabler } from './buttons-disabler'\nimport { COMPONENT_DISPLAY_NAMES } from './constants'\nimport type { CarouselProps } from './index-types'\nimport { Message } from './message'\n\nconst ScrollableCarousel = styled.div`\n  overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n`\n\ninterface StyledCarouselProps {\n  carouselArrowsEnabled: boolean\n}\n\nconst StyledCarousel = styled.div<StyledCarouselProps>`\n  padding: 10px 0px;\n  display: flex;\n  flex-direction: row;\n  max-width: 100%;\n  ${props => props.carouselArrowsEnabled && 'overflow-x: auto;'}\n`\n\nconst StyledItems = styled.div`\n  display: flex;\n`\n\ninterface StyledArrowContainerProps {\n  left?: number\n  right?: number\n  arrow: 'right' | 'left'\n  justifyContent: string\n}\n\nconst StyledArrowContainer = styled.div<StyledArrowContainerProps>`\n  position: absolute;\n  top: calc(50% - 20px);\n  height: 40px;\n  width: 25px;\n  background: ${COLORS.SILVER};\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  justify-content: ${props => props.justifyContent};\n\n  ${props => (props.left === 0 ? `left: ${props.left}px` : '')};\n  ${props => (props.right === 0 ? `right: ${props.right}px` : '')};\n  ${props => (props.arrow === 'right' ? 'border-top-right-radius: 30px' : '')};\n  ${props =>\n    props.arrow === 'right' ? 'border-bottom-right-radius: 30px' : ''};\n  ${props => (props.arrow === 'left' ? 'border-top-left-radius: 30px' : '')};\n  ${props => (props.arrow === 'left' ? 'border-bottom-left-radius: 30px' : '')};\n`\nconst StyledArrow = styled.img`\n  width: 20px;\n  height: 20px;\n`\n\nconst serialize = carouselProps => {\n  let carouselChildren = carouselProps.children\n  if (!Array.isArray(carouselChildren)) {\n    carouselChildren = [carouselChildren]\n  }\n  return {\n    type: INPUT.CAROUSEL,\n    elements: carouselChildren.map(e => e?.type?.serialize?.(e.props)),\n  }\n}\n\nexport const Carousel = (props: CarouselProps) => {\n  const { getThemeProperty } = useContext(WebchatContext)\n  const [hasLeftArrow, setLeftArrow] = useState(false)\n  const [hasRightArrow, setRightArrow] = useState(true)\n  const carouselRef = useRef<HTMLDivElement>(null)\n\n  const CustomCarouselLeftArrow = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow\n  )\n  const CustomCarouselRightArrow = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow\n  )\n  // TODO: Investigate why when set to false, scroll is enabled via dragging the bar but not hovering the carousel elements\n  const carouselArrowsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows\n  )\n\n  const scrollCarouselBy = value => {\n    carouselRef.current?.scrollBy({\n      left: value,\n      behavior: 'smooth',\n    })\n  }\n\n  const setArrowsVisibility = event => {\n    const carousel = event.currentTarget\n    const maxRightScroll =\n      carousel.scrollWidth -\n      carousel.offsetWidth -\n      WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT\n    setLeftArrow(carousel.scrollLeft !== 0)\n    setRightArrow(carousel.scrollLeft < maxRightScroll)\n  }\n\n  const getArrows = () => {\n    const scrollBy =\n      WEBCHAT.DEFAULTS.ELEMENT_WIDTH + WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT\n    return (\n      <>\n        {hasLeftArrow &&\n          (CustomCarouselLeftArrow ? (\n            <CustomCarouselLeftArrow scrollCarouselBy={scrollCarouselBy} />\n          ) : (\n            <StyledArrowContainer\n              left={0}\n              arrow={'right'}\n              justifyContent={'flex-start'}\n              onClick={() => scrollCarouselBy(-scrollBy)}\n            >\n              <StyledArrow src={resolveImage(LeftArrow)} />\n            </StyledArrowContainer>\n          ))}\n        {hasRightArrow &&\n          (CustomCarouselRightArrow ? (\n            <CustomCarouselRightArrow scrollCarouselBy={scrollCarouselBy} />\n          ) : (\n            <StyledArrowContainer\n              right={0}\n              arrow={'left'}\n              justifyContent={'flex-end'}\n              onClick={() => scrollCarouselBy(scrollBy)}\n            >\n              <StyledArrow src={resolveImage(RightArrow)} />\n            </StyledArrowContainer>\n          ))}\n      </>\n    )\n  }\n\n  useEffect(() => {\n    const carousel = carouselRef.current\n    if (carousel?.addEventListener) {\n      carousel.addEventListener('scroll', setArrowsVisibility, false)\n    }\n\n    return () => {\n      if (carousel?.removeEventListener) {\n        carousel.removeEventListener('scroll', setArrowsVisibility, false)\n      }\n    }\n  }, [carouselRef.current])\n\n  const carouselProps = {\n    ...props,\n    children: ButtonsDisabler.updateChildrenButtons(props.children),\n  }\n\n  if (isBrowser()) {\n    return (\n      <Message\n        style={{\n          width: '85%',\n          padding: 0,\n          backgroundColor: COLORS.TRANSPARENT,\n        }}\n        blob={false}\n        json={serialize(carouselProps)}\n        type={INPUT.CAROUSEL}\n        {...carouselProps}\n      >\n        <ScrollableCarousel>\n          <StyledCarousel\n            ref={carouselRef}\n            carouselArrowsEnabled={carouselArrowsEnabled}\n          >\n            <StyledItems>{carouselProps.children}</StyledItems>\n            {carouselArrowsEnabled && getArrows()}\n          </StyledCarousel>\n        </ScrollableCarousel>\n      </Message>\n    )\n  }\n\n  return (\n    <Message\n      style={{ width: '85%', padding: 0, backgroundColor: COLORS.TRANSPARENT }}\n      blob={false}\n      json={serialize(carouselProps)}\n      type={INPUT.CAROUSEL}\n      {...carouselProps}\n    >\n      {props.children}\n    </Message>\n  )\n}\n\nCarousel.displayName = COMPONENT_DISPLAY_NAMES.Carousel\n\nCarousel.serialize = serialize\n"],"names":["INPUT","isBrowser","useContext","useEffect","useRef","useState","styled","LeftArrow","RightArrow","COLORS","WEBCHAT","resolveImage","WebchatContext","ButtonsDisabler","COMPONENT_DISPLAY_NAMES","Message","ScrollableCarousel","StyledCarousel","props","StyledItems","StyledArrowContainer","StyledArrow","serialize","carouselProps","carouselChildren","Array","e","Carousel","getThemeProperty","hasLeftArrow","setLeftArrow","hasRightArrow","setRightArrow","carouselRef","CustomCarouselLeftArrow","CustomCarouselRightArrow","carouselArrowsEnabled","scrollCarouselBy","value","setArrowsVisibility","event","carousel","maxRightScroll","getArrows","scrollBy"],"mappings":"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"}

package/lib/esm/components/components.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getElementName = getElementName;
-exports.getComponentTypeName = getComponentTypeName;
 /**
  * Get the name of an element (instantiated component)
  * @param {React.Element} component
  * @returns {string}
- */
-function getElementName(component) {
+ */ function getElementName(component) {
     return component.type.name;
 }
 /**
  * Get the name of a component TYPE
  * @param {React.ComponentType} component
  * @returns {string}
- */
-function getComponentTypeName(component) {
+ */ function getComponentTypeName(component) {
     return component.displayName || component.name || 'Component';
 }
+
+export { getComponentTypeName, getElementName };
+
 //# sourceMappingURL=components.js.map

package/lib/esm/components/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/components/components.js"],"names":[],"mappings":";;AAKA,wCAEC;AAOD,oDAEC;AAhBD;;;;GAIG;AACH,SAAgB,cAAc,CAAC,SAAS;IACtC,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;AAC5B,CAAC;AAED;;;;GAIG;AACH,SAAgB,oBAAoB,CAAC,SAAS;IAC5C,OAAO,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,CAAA;AAC/D,CAAC"}
+{"version":3,"file":"components/components.js","sources":["../../../src/components/components.js"],"sourcesContent":["/**\n * Get the name of an element (instantiated component)\n * @param {React.Element} component\n * @returns {string}\n */\nexport function getElementName(component) {\n  return component.type.name\n}\n\n/**\n * Get the name of a component TYPE\n * @param {React.ComponentType} component\n * @returns {string}\n */\nexport function getComponentTypeName(component) {\n  return component.displayName || component.name || 'Component'\n}\n"],"names":["getElementName","component","getComponentTypeName"],"mappings":"AAAA;;;;CAIC,GACM,SAASA,cAAcA,CAACC,SAAS;IACtC,OAAOA,UAAU,IAAI,CAAC,IAAI;AAC5B;AAEA;;;;CAIC,GACM,SAASC,oBAAoBA,CAACD,SAAS;IAC5C,OAAOA,UAAU,WAAW,IAAIA,UAAU,IAAI,IAAI;AACpD"}

package/lib/esm/components/constants.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.COMPONENT_DISPLAY_NAMES = void 0;
-exports.COMPONENT_DISPLAY_NAMES = {
+const COMPONENT_DISPLAY_NAMES = {
     Button: 'Button',
     Carousel: 'Carousel',
     Pic: 'Pic',
@@ -10,6 +7,9 @@ exports.COMPONENT_DISPLAY_NAMES = {
     Text: 'Text',
     Title: 'Title',
     MultichannelButton: 'MultichannelButton',
-    MultichannelReply: 'MultichannelReply',
+    MultichannelReply: 'MultichannelReply'
 };
+
+export { COMPONENT_DISPLAY_NAMES };
+
 //# sourceMappingURL=constants.js.map

package/lib/esm/components/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,uBAAuB,GAAG;IACrC,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,iBAAiB,EAAE,mBAAmB;CAC9B,CAAA"}
+{"version":3,"file":"components/constants.js","sources":["../../../src/components/constants.ts"],"sourcesContent":["export const COMPONENT_DISPLAY_NAMES = {\n  Button: 'Button',\n  Carousel: 'Carousel',\n  Pic: 'Pic',\n  Reply: 'Reply',\n  Subtitle: 'Subtitle',\n  Text: 'Text',\n  Title: 'Title',\n  MultichannelButton: 'MultichannelButton',\n  MultichannelReply: 'MultichannelReply',\n} as const\n"],"names":["COMPONENT_DISPLAY_NAMES"],"mappings":"AAAO,MAAMA,uBAAuBA,GAAG;IACrC,QAAQ;IACR,UAAU;IACV,KAAK;IACL,OAAO;IACP,UAAU;IACV,MAAM;IACN,OAAO;IACP,oBAAoB;IACpB,mBAAmB;AACrB,EAAU"}

package/lib/esm/components/custom-message.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CustomMessageType } from './index-types';
+import type { CustomMessageType } from './index-types.js';
 /**
  *
  *  name: as it appears at ThemeProps' message.customTypes key