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

package/lib/components/TokenListInput/TokenValueChips.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+type Props<T> = {
+    values: Array<T>;
+    disabled?: boolean;
+    locked?: boolean;
+    onDismiss: (arg1: T) => unknown;
+    resolveTokenValue?: (arg1: ResolveTokenValueProps<T>) => React.ReactNode;
+};
+export type ResolveTokenValueProps<T> = {
+    token: T;
+    disabled?: boolean;
+    onDismiss?: (arg1: T) => unknown;
+    locked?: boolean;
+};
+export declare function TokenValueChips<T>(props: Props<T>): (string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>)[];
+export declare namespace TokenValueChips {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=TokenValueChips.d.ts.map

package/lib/components/TokenListInput/TokenValueChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenValueChips.d.ts","sourceRoot":"","sources":["../../../src/components/TokenListInput/TokenValueChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,KAAK,CAAC,CAAC,IAAI;IACd,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1E,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAAI;IACtC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA4BF,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,iQAkBjD;yBAlBe,eAAe"}

package/lib/components/TokenListInput/TokenValueChips.js

@@ -15,16 +15,14 @@ function defaultResolveTokenValue(_ref) {
     disabled,
     onDismiss
   } = _ref;
-  // $FlowFixMe[prop-missing] - assumes token has label and key
-
   return (
     /*#__PURE__*/
-    // $FlowFixMe - assumes token has label and key
+    // @ts-ignore - TS2339 - Property 'label' does not exist on type 'NonNullable<T>'.
     React.createElement(_Tooltip.Tooltip, {
       body: token?.label,
       elevation: _elevation.elevationMenu
     }, /*#__PURE__*/React.createElement(_Chip.Chip
-    // $FlowFixMe - assumes token has key
+    // @ts-ignore - TS2339 - Property 'key' does not exist on type 'NonNullable<T>'.
     , {
       key: token?.key,
       onDismiss: _ => onDismiss?.(token),

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

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

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

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

package/lib/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+type ClassNames = Readonly<{
+    tooltip?: string;
+    title?: string;
+    body?: string;
+}>;
+export declare const DELAY_MOTION_DURATION_TYPES: Readonly<{
+    none: "none";
+    fast: "fast";
+    normal: "normal";
+    slow: "slow";
+    slower: "slower";
+    slowest: "slowest";
+}>;
+export type DelayMotionDurationType = typeof DELAY_MOTION_DURATION_TYPES[keyof typeof DELAY_MOTION_DURATION_TYPES];
+export declare const ELEVATION_TYPES: Readonly<{
+    none: "none";
+    card: "card";
+    tooltip: "tooltip";
+    menu: "menu";
+    backdrop: "backdrop";
+    modal: "modal";
+    toast: "toast";
+}>;
+export type ElevationType = typeof ELEVATION_TYPES[keyof typeof ELEVATION_TYPES];
+export type PlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+export type BaseTooltipProps = {
+    classNames?: ClassNames;
+    title?: string | React.ReactNode;
+    body?: string | React.ReactNode;
+    placement?: PlacementType;
+    bodyMaxLines?: number;
+    titleMaxLines?: number;
+    delayMotionDuration?: DelayMotionDurationType;
+    hidden?: boolean;
+    elevation?: ElevationType;
+};
+export type TooltipProps = ((BaseTooltipProps) & {
+    children: any;
+});
+export declare const getElevationValue: (elevation: string) => string;
+export declare const Tooltip: ({ classNames, children, title, body, placement, bodyMaxLines, titleMaxLines, delayMotionDuration, elevation, hidden, }: TooltipProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;;;;;EAOtC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,OAAO,2BAA2B,CAAC,MAAM,OAAO,2BAA2B,CAAC,CAAC;AAEnH,eAAO,MAAM,eAAe;;;;;;;;EAQ1B,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,eAAe,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEjF,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1H,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,gBAAgB,CAAC,GAAG;IAE/C,QAAQ,EAAE,GAAG,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,KAAG,MAIrD,CAAC;AAEF,eAAO,MAAM,OAAO,GAClB,wHAWG,YAAY,sBAgGhB,CAAC"}

package/lib/components/Tooltip/Tooltip.js

@@ -16,8 +16,6 @@ var _TooltipModule = _interopRequireDefault(require("./Tooltip.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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/* eslint-disable flowtype/no-weak-types */
-
 const DELAY_MOTION_DURATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = Object.freeze({
   none: 'none',
   fast: 'fast',
@@ -37,6 +35,7 @@ const ELEVATION_TYPES = exports.ELEVATION_TYPES = Object.freeze({
 });
 const getElevationValue = elevation => {
   const elevationKey = 'elevation' + (0, _string.capitalize)(elevation);
+  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_elevation")'.
   return ELEVATION[elevationKey] || elevation;
 };
 exports.getElevationValue = getElevationValue;
@@ -70,7 +69,11 @@ const Tooltip = _ref => {
     }), (0, _react2.shift)()]
   });
   const motionDurationToken = 'motionDuration' + (0, _string.capitalize)(delayMotionDuration);
-  const hoverDelay = parseInt(MOTION[motionDurationToken]) === NaN ? 0 : parseInt(MOTION[motionDurationToken]);
+  const hoverDelay =
+  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_motion")'.
+  parseInt(MOTION[motionDurationToken]) === NaN ? 0
+  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_motion")'.
+  : parseInt(MOTION[motionDurationToken]);
   const {
     getReferenceProps,
     getFloatingProps

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

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import type { TooltipProps } from './Tooltip';
+declare const _default: {
+    tags: string[];
+    title: string;
+    argTypes: {
+        title: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        body: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placement: {
+            options: string[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        delayMotionDuration: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        elevation: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: unknown[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        hidden: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        bodyMaxLines: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+        titleMaxLines: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+        children: {
+            type: {
+                required: boolean;
+            };
+            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 _Simple: {
+    (args: TooltipProps): React.JSX.Element;
+    args: {
+        title: string;
+        body: string;
+        placement: string;
+        children: any;
+        bodyMaxLines: number;
+        titleMaxLines: number;
+    };
+};
+export declare const _WithCustomComponent: {
+    (args: TooltipProps): React.JSX.Element;
+    args: {
+        title: string;
+    };
+};
+export declare const _Multiline: {
+    (args: TooltipProps): React.JSX.Element;
+    args: {
+        title: string;
+        bodyMaxLines: number;
+        placement: string;
+    };
+};
+//# sourceMappingURL=Tooltip.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAY5C,wBAqLE;AAgDF,eAAO,MAAM,OAAO;WAAU,YAAY;;;;;;;;;CAcnC,CAAC;AAaR,eAAO,MAAM,oBAAoB;WAAU,YAAY;;;;CAchD,CAAC;AAMR,eAAO,MAAM,UAAU;WAAU,YAAY;;;;;;CActC,CAAC"}

package/lib/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,321 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithCustomComponent = exports._Simple = exports._Multiline = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Avatar = require("../Avatar");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Tooltip = require("./Tooltip");
+var _TooltipStoriesModule = _interopRequireDefault(require("./Tooltip.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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const delayMotionDurationOptions = [...Object.values(_Tooltip.DELAY_MOTION_DURATION_TYPES)];
+const elevationOptions = [...Object.values(_Tooltip.ELEVATION_TYPES)];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Tooltip',
+  argTypes: {
+    title: {
+      description: `**Title** of the tooltip. This is first section in the tooltip
+        container. It internally uses truncate to show ellipsis
+        when the text is large(based on \`titleMaxLines\` prop, defaults to **1 Line**). While
+        using title as a react component, you should pass content wrapped inside an
+        inline tag like \`<span>\`
+        `,
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string | React.ReactNode'
+        }
+      }
+    },
+    body: {
+      description: `**Body** of the tooltip. This is second section in the tooltip
+      container. It internally uses truncate to show ellipsis
+      when the text is large(based on \`bodyMaxLines\` prop, defaults to **2 Lines**). While
+      using body as a react component, you should pass content wrapped inside an
+      inline tag like \`<span>\`
+      `,
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string | React.ReactNode'
+        }
+      }
+    },
+    placement: {
+      options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'right'],
+      description: 'Placement of tooltip',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'top'
+        }
+      }
+    },
+    delayMotionDuration: {
+      options: delayMotionDurationOptions,
+      description: `Delay in showing the Tooltip \n
+      none: 0ms \n
+      fast: 100ms \n
+      normal: 200ms \n
+      slow: 300ms \n
+      slower: 500ms \n
+      slowest: 1000ms `,
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'none'
+        }
+      }
+    },
+    elevation: {
+      description: 'z-index to the tooltip. This is by default set to elevationTooltip which is `4`. Use this prop when you want to render tooltip at higher elevation elements like Modal, Toast, Menu, etc.',
+      control: {
+        type: 'select'
+      },
+      options: elevationOptions,
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'tooltip'
+        }
+      }
+    },
+    hidden: {
+      description: 'If set to **true** tooltip wont be visible. Use this if you want to programmatically control the tooltip show/hide',
+      control: {
+        type: 'boolean'
+      }
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{tooltip?: string, title?: string, body?: string}'
+        }
+      }
+    },
+    bodyMaxLines: {
+      description: 'Maximum number of lines allowed for body text in the Tooltip. Tooltip would automatically **truncate** content after that',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: 2
+        }
+      }
+    },
+    titleMaxLines: {
+      description: 'Maximum number of lines allowed for title text in the Tooltip. Tooltip would automatically **truncate** content after that',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: 1
+        }
+      }
+    },
+    children: {
+      type: {
+        required: true
+      },
+      description: 'React Node that tooltip wraps on. Tooltip preserves the consumer\'s references',
+      control: {
+        type: 'null'
+      },
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Tooltip component',
+      description: {
+        component: `
+\`\`\`js
+import { Tooltip } from "@spaced-out/ui-design-system/lib/components/Tooltip";
+\`\`\`
+When users hover over, focus on, or tap an element, **tooltips** provide descriptive text. \`Tooltip\` should be wrapped over
+the element for it to function.
+
+There are 8 possible placements for the Tooltip. Tooltip container has a max-width of \`300px\`. It wraps content if the width exceeds
+
+**Note: **\`<Tooltip>\`** get attached to \`<body>\`. You can manage elevation of the tooltip when you want to use at elevated surfaces.
+
+**Note: **\`<Tooltip>\`** wrapper needs ref to work. If you are not able to provide ref normally, you would need to wrap the component in a \`<div>\`.
+
+\`\`\`jsx
+<Tooltip title="Hello"><div><BodySmall>Hello World</BodySmall></div></Tooltip>
+
+/* Multiline tooltip **/
+<Tooltip
+  title="Person"
+  body={
+    <span>
+      Damian Marley <br />
+      Chris Stapleton <br />
+      Michael Jackson <br />
+      Elton John <br />
+      James Brown <br />
+      Lil Wayne <br />
+      Elvis Crespo <br />
+      Cody Jinks
+    </span>
+  }
+  bodyMaxLines={7}
+  placement={'top-start'}
+>
+  <Button type="tertiary" iconLeftName="face-smirking">
+    Multiline Tooltip
+  </Button>
+</Tooltip>
+\`\`\`
+          `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Tooltip/Tooltip.jsx'
+    }
+  }
+};
+const Names = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Damian Marley ", /*#__PURE__*/React.createElement("br", null), "Chris Stapleton ", /*#__PURE__*/React.createElement("br", null), "Michael Jackson ", /*#__PURE__*/React.createElement("br", null), "Elton John ", /*#__PURE__*/React.createElement("br", null), "James Brown ", /*#__PURE__*/React.createElement("br", null), "Lil Wayne ", /*#__PURE__*/React.createElement("br", null), "Elvis Crespo ", /*#__PURE__*/React.createElement("br", null), "Cody Jinks"));
+const CustomComponent = () => /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.namesContainer
+}, /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.name
+}, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+  imageSrc: "https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png",
+  ring: true
+}), /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+  color: "inversePrimary"
+}, "Persona 1")), /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.name
+}, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+  imageSrc: "https://cdn.sensehq.com/genesis/hashed/static/images/personas/4.png",
+  ring: true
+}), /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+  color: "inversePrimary"
+}, "Persona 2")), /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.name
+}, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+  imageSrc: "https://cdn.sensehq.com/genesis/hashed/static/images/personas/5.png",
+  ring: true
+}), /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+  color: "inversePrimary"
+}, "Persona 3")), /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.name
+}, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+  imageSrc: "https://cdn.sensehq.com/genesis/hashed/static/images/personas/6.png",
+  ring: true
+}), /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+  color: "inversePrimary"
+}, "Persona 4")));
+const _Simple = args => /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.tooltipContainer
+}, /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.tooltipContent
+}, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, args, /*#__PURE__*/React.createElement(_Button.Button, {
+  type: "tertiary",
+  iconLeftName: "face-sunglasses"
+}, "Hover Me")), /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.info
+}, /*#__PURE__*/React.createElement(_Icon.Icon, {
+  color: "tertiary",
+  size: "small",
+  name: "circle-info"
+}), /*#__PURE__*/React.createElement(_Text.BodySmall, {
+  color: "tertiary"
+}, "With title, body & max lines for title and body"))));
+exports._Simple = _Simple;
+_Simple.args = {
+  title: 'Label',
+  body: `The quick brown fox jumps over the dog,
+  The quick brown fox jumps over the dog
+  The quick brown fox jumps over the dog`,
+  placement: 'top',
+  children: null,
+  bodyMaxLines: 2,
+  titleMaxLines: 1
+};
+const _WithCustomComponent = args => /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.tooltipContainer
+}, /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.tooltipContent
+}, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, args, {
+  body: /*#__PURE__*/React.createElement(CustomComponent, null)
+}), /*#__PURE__*/React.createElement(_Button.Button, {
+  type: "tertiary",
+  iconLeftName: "face-smirking"
+}, "With Custom Component as Body")), /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.info
+}, /*#__PURE__*/React.createElement(_Icon.Icon, {
+  color: "tertiary",
+  size: "small",
+  name: "circle-info"
+}), /*#__PURE__*/React.createElement(_Text.BodySmall, {
+  color: "tertiary"
+}, "Can pass any custom component as body"))));
+exports._WithCustomComponent = _WithCustomComponent;
+_WithCustomComponent.args = {
+  title: ''
+};
+const _Multiline = args => /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.tooltipContainer
+}, /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.tooltipContent
+}, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, args, {
+  body: /*#__PURE__*/React.createElement(Names, null)
+}), /*#__PURE__*/React.createElement(_Button.Button, {
+  type: "tertiary",
+  iconLeftName: "face-smirking"
+}, "Multiline Tooltip")), /*#__PURE__*/React.createElement("div", {
+  className: _TooltipStoriesModule.default.info
+}, /*#__PURE__*/React.createElement(_Icon.Icon, {
+  color: "tertiary",
+  size: "small",
+  name: "circle-info"
+}), /*#__PURE__*/React.createElement(_Text.BodySmall, {
+  color: "tertiary"
+}, "With fixed body and bodyMaxLines = 7"))));
+exports._Multiline = _Multiline;
+_Multiline.args = {
+  title: '',
+  bodyMaxLines: 7,
+  placement: 'top'
+};

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

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

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

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

package/lib/components/Truncate/Truncate.d.ts

@@ -0,0 +1,12 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+export type TruncateProps = {
+    children?: React.ReactNode;
+    line?: number;
+    showFullTextOnHover?: boolean;
+    wordBreak?: string;
+    className?: string;
+};
+export declare const BaseTruncate: Flow.AbstractComponent<TruncateProps, HTMLSpanElement>;
+export declare const Truncate: Flow.AbstractComponent<TruncateProps, HTMLSpanElement>;
+//# sourceMappingURL=Truncate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../../src/components/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,eAAe,CAiBvE,CAAC;AAEV,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,eAAe,CA2CxE,CAAC"}