@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/components/ChatBubble/ChatAnchor.stories.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithAvatarAndTooltip = exports._WithAvatar = exports._Default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChatBubble = require("./ChatBubble");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'AI Prompt Components/Chat Bubble/Anatomy/Chat Anchor',
+  component: _ChatBubble.ChatAnchor,
+  argTypes: {
+    isAI: {
+      description: 'Determines whether to show the AI icon or a custom avatar.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'true'
+        }
+      }
+    },
+    tooltip: {
+      description: 'Props to configure the tooltip displayed on hover.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'BaseTooltipProps'
+        }
+      }
+    },
+    classNames: {
+      description: 'Optional class names for the wrapper.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{ wrapper?: string }'
+        }
+      }
+    },
+    avatarProps: {
+      description: 'Props for the Avatar component if `isAI` is false.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'AvatarProps'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Renders either an AI icon or a custom Avatar with an optional tooltip.',
+      description: {
+        component: `
+\`\`\`js
+import { ChatAnchor } from "@spaced-out/ui-design-system/lib/components/ChatBubble";
+\`\`\`
+The **ChatAnchor** component conditionally renders:
+- An **AI icon** if \`isAI\` is \`true\`.
+- A **custom Avatar** if \`isAI\` is \`false\`.
+
+Optionally, you can provide a tooltip to display additional information.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/ChatBubble/ChatBubble.jsx'
+    }
+  }
+}; // Default Story with AI Icon
+const _Default = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, args);
+exports._Default = _Default;
+_Default.storyName = 'Default AI Icon';
+
+// Custom Avatar Example
+const _WithAvatar = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, args);
+exports._WithAvatar = _WithAvatar;
+_WithAvatar.storyName = 'With Custom Avatar';
+_WithAvatar.args = {
+  isAI: false,
+  avatarProps: {
+    imageSrc: 'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
+    text: 'Adam Craig Gilchrist'
+  }
+};
+
+// Custom Avatar Example
+const _WithAvatarAndTooltip = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, args);
+exports._WithAvatarAndTooltip = _WithAvatarAndTooltip;
+_WithAvatarAndTooltip.storyName = 'With Custom Avatar And Tooltip';
+_WithAvatarAndTooltip.args = {
+  isAI: false,
+  avatarProps: {
+    imageSrc: 'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
+    text: 'Adam Craig Gilchrist'
+  },
+  tooltip: {
+    body: 'Adam Craig'
+  }
+};

package/lib/components/ChatBubble/ChatBubble.d.ts

@@ -0,0 +1,76 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { AvatarProps } from '../Avatar';
+import type { BaseTooltipProps } from '../Tooltip';
+export type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export declare const CHAT_BUBBLE_ORIENTATION: Readonly<{
+    left: "left";
+    right: "right ";
+}>;
+export type ChatBubbleOrientation = typeof CHAT_BUBBLE_ORIENTATION[keyof typeof CHAT_BUBBLE_ORIENTATION];
+export type ChatBubbleProps = {
+    classNames?: ClassNames;
+    orientation?: ChatBubbleOrientation;
+    children: React.ReactNode;
+};
+export declare const ChatBubble: Flow.AbstractComponent<ChatBubbleProps, HTMLDivElement>;
+export type ChatAnchorProps = {
+    isAI?: boolean;
+    tooltip?: BaseTooltipProps;
+    classNames?: ClassNames;
+    avatarProps?: AvatarProps;
+};
+export declare const ChatAnchor: {
+    ({ isAI, tooltip, classNames, avatarProps, }: ChatAnchorProps): React.JSX.Element;
+    displayName: string;
+};
+export type ChatContentProps = {
+    classNames?: ClassNames;
+    children?: React.ReactNode;
+};
+export declare const ChatContent: {
+    ({ classNames, children, }: ChatContentProps): React.JSX.Element;
+    displayName: string;
+};
+export type ChatBodyClassNames = Readonly<{
+    wrapper?: string;
+    loader: string;
+}>;
+export type ChatBodyProps = {
+    withBgColor?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
+    children?: React.ReactNode;
+    classNames?: ClassNames;
+};
+export declare const ChatBody: {
+    ({ withBgColor, isLoading, children, loadingText, classNames, }: ChatBodyProps): React.JSX.Element;
+    displayName: string;
+};
+export type ChatFooterProps = {
+    classNames?: ClassNames;
+    children?: React.ReactNode;
+};
+export declare const ChatFooter: {
+    ({ children, classNames, }: ChatFooterProps): React.JSX.Element;
+    displayName: string;
+};
+export type ChatFooterRightSlotProps = {
+    children?: React.ReactNode;
+    classNames?: ClassNames;
+};
+export declare const ChatFooterRightSlot: {
+    ({ children, classNames, }: ChatFooterRightSlotProps): React.JSX.Element;
+    displayName: string;
+};
+export type ChatFooterLeftSlotProps = {
+    children?: React.ReactNode;
+    classNames?: ClassNames;
+};
+export declare const ChatFooterLeftSlot: {
+    ({ children, classNames, }: ChatFooterLeftSlotProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ChatBubble.d.ts.map

package/lib/components/ChatBubble/ChatBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/ChatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAC;AAG3C,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAmBjD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;EAGlC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,OAAO,uBAAuB,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAC;AAEzG,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CA4B7E,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU;kDAMlB,eAAe;;CAkBb,CAAC;AAIR,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW;gCAInB,gBAAgB;;CAMd,CAAC;AAIR,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,QAAQ;qEAOhB,aAAa;;CAwBX,CAAC;AAIR,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU;gCAIlB,eAAe;;CAgBnB,CAAC;AAIF,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,mBAAmB;gCAI3B,wBAAwB;;CAC+B,CAAC;AAI7D,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;gCAI1B,uBAAuB;;CACgC,CAAC"}

package/lib/components/ChatBubble/ChatBubble.js

@@ -17,7 +17,7 @@ const getNamedComponent = (childrenArray, componentDisplayName) => {
   const nodes = [];
   for (const child of childrenArray) {
     if (
-    // $FlowFixMe
+    // @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
     child?.type?.displayName === componentDisplayName) {
       nodes.push(child);
     }
@@ -58,7 +58,10 @@ const ChatAnchor = _ref2 => {
     className: (0, _classify.default)(_ChatBubbleModule.default.chatAnchorWrapper, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
     hidden: !tooltip
-  }), isAI ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }), isAI ?
+  /*#__PURE__*/
+  // @ts-ignore - TS2769 - No overload matches this call.
+  React.createElement(_Icon.Icon, {
     name: "sparkle",
     color: "information",
     type: _Icon.ICON_TYPE.solid,

package/lib/components/ChatBubble/ChatBubble.stories.d.ts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import type { ChatBubbleProps } from './';
+export declare const ChatFooterWithIcons: () => React.JSX.Element;
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<ChatBubbleProps, HTMLDivElement>;
+    argTypes: {
+        orientation: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: ("left" | "right ")[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Default: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        orientation: string;
+    };
+};
+export declare const _WithUserMessage: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        orientation: string;
+    };
+};
+export declare const _NoAnchor: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+};
+export declare const _WithAvatar: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        orientation: string;
+    };
+};
+export declare const _LoadingState: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        orientation: string;
+    };
+};
+export declare const _DataState: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        orientation: string;
+    };
+};
+export declare const _EmptySlot: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        orientation: string;
+    };
+};
+export declare const _WithLongTextSlot: {
+    (args: ChatBubbleProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        orientation: string;
+    };
+};
+//# sourceMappingURL=ChatBubble.stories.d.ts.map

package/lib/components/ChatBubble/ChatBubble.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ChatBubble/ChatBubble.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,IAAI,CAAC;AAexC,eAAO,MAAM,mBAAmB,yBAuBlB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEf,wBAyCE;AAGF,eAAO,MAAM,QAAQ;WAAU,eAAe;;;;;CAchC,CAAC;AAQf,eAAO,MAAM,gBAAgB;WAAU,eAAe;;;;;CAcxC,CAAC;AAQf,eAAO,MAAM,SAAS;WAAU,eAAe;;CAajC,CAAC;AAKf,eAAO,MAAM,WAAW;WAAU,eAAe;;;;;CAenC,CAAC;AAQf,eAAO,MAAM,aAAa;WAAU,eAAe;;;;;CAKrC,CAAC;AAQf,eAAO,MAAM,UAAU;WAAU,eAAe;;;;;CAelC,CAAC;AAQf,eAAO,MAAM,UAAU;WAAU,eAAe;;;;;CAOlC,CAAC;AAOf,eAAO,MAAM,iBAAiB;WAAU,eAAe;;;;;CA8CzC,CAAC"}

package/lib/components/ChatBubble/ChatBubble.stories.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithUserMessage = exports._WithLongTextSlot = exports._WithAvatar = exports._NoAnchor = exports._LoadingState = exports._EmptySlot = exports._Default = exports._DataState = exports.ChatFooterWithIcons = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Button = require("../Button");
+var _Separator = require("../Separator");
+var _Text = require("../Text");
+var _ChatBubble = require("./ChatBubble");
+var _ChatBubbleStoriesModule = _interopRequireDefault(require("./ChatBubble.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ChatFooterWithIcons = () => /*#__PURE__*/React.createElement(_ChatBubble.ChatFooter, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatFooterLeftSlot, {
+  classNames: {
+    wrapper: _ChatBubbleStoriesModule.default.footerWrapperLeftSlot
+  }
+}, /*#__PURE__*/React.createElement(_Button.Button, {
+  iconRightName: "flag",
+  size: "small",
+  type: "ghost",
+  ariaLabel: "Flag"
+}), /*#__PURE__*/React.createElement(_Separator.Separator, {
+  classNames: {
+    wrapper: _ChatBubbleStoriesModule.default.separatorMargin
+  }
+}), /*#__PURE__*/React.createElement("div", {
+  className: _ChatBubbleStoriesModule.default.buttonWrapper
+}, /*#__PURE__*/React.createElement(_Button.Button, {
+  iconRightName: "thumbs-up",
+  size: "small",
+  type: "ghost",
+  ariaLabel: "Thumbs Up"
+}), /*#__PURE__*/React.createElement(_Button.Button, {
+  iconRightName: "thumbs-down",
+  size: "small",
+  type: "ghost",
+  ariaLabel: "Thumbs Down"
+}))), /*#__PURE__*/React.createElement(_ChatBubble.ChatFooterRightSlot, {
+  classNames: {
+    wrapper: _ChatBubbleStoriesModule.default.footerWrapperRightSlot
+  }
+}, /*#__PURE__*/React.createElement(_Button.Button, {
+  children: "Secondary",
+  type: "ghost",
+  size: "small"
+}), /*#__PURE__*/React.createElement(_Button.Button, {
+  children: "Primary",
+  type: "secondary",
+  size: "small"
+})));
+exports.ChatFooterWithIcons = ChatFooterWithIcons;
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'AI Prompt Components/Chat Bubble',
+  component: _ChatBubble.ChatBubble,
+  argTypes: {
+    orientation: {
+      description: 'Determines the alignment of the chat bubble.',
+      control: {
+        type: 'radio'
+      },
+      options: [_ChatBubble.CHAT_BUBBLE_ORIENTATION.left, _ChatBubble.CHAT_BUBBLE_ORIENTATION.right],
+      table: {
+        type: {
+          summary: `${_ChatBubble.CHAT_BUBBLE_ORIENTATION.left} | ${_ChatBubble.CHAT_BUBBLE_ORIENTATION.right}`
+        },
+        defaultValue: {
+          summary: `${_ChatBubble.CHAT_BUBBLE_ORIENTATION.left}`
+        }
+      }
+    },
+    classNames: {
+      description: 'Provide an optional className to be applied to the wrapper.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: '{ wrapper?: string }'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a ChatBubble component.',
+      description: {
+        component: `
+\`\`\`js
+import { ChatBubble } from "@spaced-out/ui-design-system/lib/components/ChatBubble";
+\`\`\`
+The ChatBubble component is used to structure chat messages with anchors, content, and a footer.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/ChatBubble/ChatBubble.jsx'
+    }
+  }
+}; // Default ChatBubble Story
+const _Default = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "Generative AI (GenAI) enables systems to generate human-like responses, content, or ideas dynamically, leveraging advanced machine learning models. In conversational applications, GenAI enhances user experiences by enabling intelligent, context-aware, and natural language interactions.")), /*#__PURE__*/React.createElement(ChatFooterWithIcons, null)));
+exports._Default = _Default;
+_Default.storyName = 'Default Chat Bubble';
+_Default.args = {
+  orientation: 'left'
+};
+
+// ChatBubble with Custom User Message
+const _WithUserMessage = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, {
+  isAI: false,
+  avatarProps: {
+    imageSrc: 'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
+    text: 'Adam Craig Gilchrist'
+  }
+}), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+  withBgColor: false
+}, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "This message has a custom avatar."))));
+exports._WithUserMessage = _WithUserMessage;
+_WithUserMessage.storyName = 'Chat Bubble With Custom User';
+_WithUserMessage.args = {
+  orientation: 'left'
+};
+
+// ChatBubble with No Anchor
+const _NoAnchor = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "Generative AI (GenAI) enables systems to generate human-like responses, content, or ideas dynamically, leveraging advanced machine learning models. In conversational applications, GenAI enhances user experiences by enabling intelligent, context-aware, and natural language interactions.")), /*#__PURE__*/React.createElement(ChatFooterWithIcons, null)));
+exports._NoAnchor = _NoAnchor;
+_NoAnchor.storyName = 'Chat Bubble Without Anchor';
+
+// ChatBubble with Custom Avatar
+const _WithAvatar = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, {
+  isAI: false,
+  avatarProps: {
+    imageSrc: 'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
+    text: 'Adam Craig Gilchrist'
+  }
+}), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "This message has a custom avatar.")), /*#__PURE__*/React.createElement(ChatFooterWithIcons, null)));
+exports._WithAvatar = _WithAvatar;
+_WithAvatar.storyName = 'Chat Bubble With Avatar';
+_WithAvatar.args = {
+  orientation: 'left'
+};
+
+// Loading State in ChatBubble
+const _LoadingState = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+  isLoading: true,
+  loadingText: "Loading message"
+})));
+exports._LoadingState = _LoadingState;
+_LoadingState.storyName = 'Chat Bubble Loading State';
+_LoadingState.args = {
+  orientation: 'left'
+};
+
+// Data State in ChatBubble
+const _DataState = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.SubTitleSmall, null, "Title"), /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "Generative AI (GenAI) enables systems to generate human-like responses, content, or ideas dynamically, leveraging advanced machine learning models. In conversational applications, GenAI enhances user experiences by enabling intelligent, context-aware, and natural language interactions.")), /*#__PURE__*/React.createElement(ChatFooterWithIcons, null)));
+exports._DataState = _DataState;
+_DataState.storyName = 'Chat Bubble With Data';
+_DataState.args = {
+  orientation: 'left'
+};
+
+// EMpty Slot in ChatBubble
+const _EmptySlot = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, {
+  classNames: {
+    wrapper: _ChatBubbleStoriesModule.default.emptyChatContent
+  }
+}, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+  classNames: {
+    wrapper: _ChatBubbleStoriesModule.default.emptyBodyChat
+  }
+}, /*#__PURE__*/React.createElement(_Text.BodyMedium, null)), /*#__PURE__*/React.createElement(ChatFooterWithIcons, null)));
+exports._EmptySlot = _EmptySlot;
+_EmptySlot.storyName = 'Chat Bubble With Empty Slot';
+_EmptySlot.args = {
+  orientation: 'left'
+};
+const _WithLongTextSlot = args => /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, args, /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+  classNames: {
+    wrapper: _ChatBubbleStoriesModule.default.longChatContent
+  }
+}, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "Generative AI (GenAI) represents a transform leap in the field of artificial intelligence, enabling systems to generate human-like responses, content, or ideas dynamically. This cutting-edge technology leverages advanced machine learning models, including neural networks like GPT (Generative Pre-trained Transformer) and other sophisticated algorithms, to create coherent, contextually appropriate, and natural outputs. The capability of GenAI to mimic human creativity and language is not merely theoretical\u2014it is actively reshaping industries, enhancing user experiences, and revolutionizing the way humans and machines interact. At its core, Generative AI operates by understanding and analyzing massive datasets to learn patterns, structures, and nuances of language or other types of input. Unlike traditional AI systems, which are designed to follow predefined rules or produce outputs based on specific programming, GenAI systems adapt dynamically. They can respond to queries, generate creative content, and simulate human-like understanding without requiring explicit instructions for every scenario. This makes GenAI an invaluable tool in applications ranging from conversational interfaces to content creation, personalized recommendations, and beyond. In conversational applications, Generative AI has emerged as a cornerstone of intelligent, context-aware interactions. Whether it\u2019s powering chatbot, virtual assistants, or customer support agents, GenAI ensures that users experience seamless and natural communication. For example, when users engage with a customer service chatbot, a GenAI system doesn\u2019t simply respond with pre-written scripts. Instead, it understands the user\u2019s query, interprets the context, and crafts responses that feel human and empathetic. This not only improves the efficiency of the interaction but also leaves users feeling heard and understood. The transform impact of GenAI extends far beyond customer service. In education, for instance, GenAI is being used to create adaptive learning environments. These systems can generate personalized lesson plans, answer complex questions, and provide feedback to students in real time, catering to individual learning styles and needs. Similarly, in healthcare, GenAI powers virtual health assistants that can triage symptoms, provide medical information, and even remind patients to take their medications. These applications demonstrate how GenAI is not only enhancing efficiency but also contributing to better outcomes in critical fields.")), /*#__PURE__*/React.createElement(ChatFooterWithIcons, null)));
+exports._WithLongTextSlot = _WithLongTextSlot;
+_WithLongTextSlot.storyName = 'Chat Bubble With Long Text';
+_WithLongTextSlot.args = {
+  orientation: 'left'
+};

package/lib/components/ChatBubble/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChatBubble';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ChatBubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChatBubble/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,29 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { GroupAlign } from '../../types/common';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    checkboxSquare?: string;
+    label?: string;
+}>;
+export type CheckboxProps = {
+    name?: string;
+    value?: string;
+    children?: React.ReactNode;
+    checked?: boolean;
+    indeterminate?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    onChange?: (arg1: {
+        value: string;
+        checked: boolean;
+    }, arg2?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown;
+    align?: GroupAlign;
+    classNames?: ClassNames;
+    tabIndex?: number;
+    ariaLabel?: string;
+};
+export declare const Checkbox: Flow.AbstractComponent<CheckboxProps, HTMLInputElement>;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/components/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAOnD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAOH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;KAClB,EACD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,gBAAgB,CA2H3E,CAAC"}

package/lib/components/Checkbox/Checkbox.js

@@ -14,6 +14,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
   Note: An indeterminate state has a higher priority.
   If true checkbox would be in an indeterminate state. If indeterminate is false, it will owner checked value.
 */
+
 const Checkbox = exports.Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     name = 'checkbox',
@@ -31,6 +32,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/React.forwardRef((_ref, forward
     ariaLabel = ''
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
+  // @ts-ignore - TS2322 - Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
   React.useImperativeHandle(forwardRef, () => checkboxInput.current);
   const handleOnClick = event => {
     if (!disabled) {