@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Tabs/TabsList.js

@@ -1,40 +1,32 @@
-"use strict";
-
-exports.__esModule = true;
-exports.TabsList = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["children", "title"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
 /**
  * Internal dependencies
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var TabsList = function TabsList(_ref) {
-  var children = _ref.children,
-    title = _ref.title,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(TabsPrimitive.List, _extends({
-    sx: {
-      borderBottom: '1px solid',
-      borderColor: 'borders.2',
-      display: 'flex'
-    },
-    "aria-label": title
-  }, props, {
-    children: children
-  }));
-};
-exports.TabsList = TabsList;
+
+const TabsList = ( { children, title, ...props } ) => (
+	<TabsPrimitive.List
+		sx={ {
+			borderBottom: '1px solid',
+			borderColor: 'borders.2',
+			display: 'flex',
+		} }
+		aria-label={ title }
+		{ ...props }
+	>
+		{ children }
+	</TabsPrimitive.List>
+);
+
 TabsList.propTypes = {
-  title: _propTypes["default"].string.isRequired,
-  children: _propTypes["default"].node.isRequired
-};
+	title: PropTypes.string.isRequired,
+	children: PropTypes.node.isRequired,
+};
+
+export { TabsList };

package/build/system/Tabs/TabsTrigger.d.ts

@@ -0,0 +1,2 @@
+export const TabsTrigger: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/Tabs/TabsTrigger.js

@@ -1,70 +1,62 @@
-"use strict";
+/** @jsxImportSource theme-ui */
 
-exports.__esModule = true;
-exports.TabsTrigger = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */ /**
-                                                                                                                                                                                                                                                                                                                                                                                          * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                          */
-var styles = {
-  cursor: 'pointer',
-  background: 'none',
-  mr: 3,
-  fontSize: 2,
-  px: 0,
-  pb: 3,
-  border: 'none',
-  color: 'heading',
-  '&[data-state="active"]': {
-    color: 'link',
-    fontWeight: 'regular',
-    boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
-    boxShadowColor: 'borders.accent'
-  },
-  '&:disabled': {
-    color: 'muted'
-  },
-  ':hover': {
-    fontWeight: 'regular',
-    color: 'heading'
-  },
-  '&:focus': function focus(theme) {
-    return theme.outline;
-  },
-  '&:focus-visible': function focusVisible(theme) {
-    return theme.outline;
-  }
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+
+const styles = {
+	cursor: 'pointer',
+	background: 'none',
+	mr: 3,
+	fontSize: 2,
+	px: 0,
+	pb: 3,
+	border: 'none',
+	color: 'heading',
+	'&[data-state="active"]': {
+		color: 'link',
+		fontWeight: 'regular',
+		boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
+		boxShadowColor: 'borders.accent',
+	},
+	'&:disabled': {
+		color: 'muted',
+	},
+	':hover': { fontWeight: 'regular', color: 'heading' },
+	'&:focus': theme => theme.outline,
+	'&:focus-visible': theme => theme.outline,
 };
-var TabsTrigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var value = _ref.value,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return (0, _jsxRuntime.jsx)(TabsPrimitive.TabsTrigger, {
-    className: (0, _classnames["default"])('vip-tabs-trigger', "vip-tabs-trigger-" + value, className),
-    value: value,
-    disabled: disabled,
-    sx: _extends({}, styles),
-    ref: forwardRef,
-    children: children
-  });
-});
-exports.TabsTrigger = TabsTrigger;
+
+const TabsTrigger = React.forwardRef(
+	( { value, disabled = false, children, className = null }, forwardRef ) => (
+		<TabsPrimitive.TabsTrigger
+			className={ classNames( 'vip-tabs-trigger', `vip-tabs-trigger-${ value }`, className ) }
+			value={ value }
+			disabled={ disabled }
+			sx={ {
+				...styles,
+			} }
+			ref={ forwardRef }
+		>
+			{ children }
+		</TabsPrimitive.TabsTrigger>
+	)
+);
+
 TabsTrigger.propTypes = {
-  className: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  children: _propTypes["default"].node.isRequired
+	className: PropTypes.string,
+	value: PropTypes.string,
+	disabled: PropTypes.bool,
+	children: PropTypes.node.isRequired,
 };
-TabsTrigger.displayName = 'TabsTrigger';
+
+TabsTrigger.displayName = 'TabsTrigger';
+export { TabsTrigger };

package/build/system/Tabs/index.d.ts

@@ -0,0 +1,5 @@
+import { Tabs } from './Tabs';
+import { TabsList } from './TabsList';
+import { TabsTrigger } from './TabsTrigger';
+import { TabsContent } from './TabsContent';
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/build/system/Tabs/index.js

@@ -1,11 +1,9 @@
-"use strict";
+/**
+ * Internal dependencies
+ */
+import { Tabs } from './Tabs';
+import { TabsTrigger } from './TabsTrigger';
+import { TabsList } from './TabsList';
+import { TabsContent } from './TabsContent';
 
-exports.__esModule = true;
-var _Tabs = require("./Tabs");
-exports.Tabs = _Tabs.Tabs;
-var _TabsTrigger = require("./TabsTrigger");
-exports.TabsTrigger = _TabsTrigger.TabsTrigger;
-var _TabsList = require("./TabsList");
-exports.TabsList = _TabsList.TabsList;
-var _TabsContent = require("./TabsContent");
-exports.TabsContent = _TabsContent.TabsContent;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/build/system/Text/Text.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Text: import("react").ForwardRefExoticComponent<import("theme-ui").BoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/build/system/Text/Text.js

@@ -2,23 +2,20 @@
 
 exports.__esModule = true;
 exports.Text = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _themeUi = require("theme-ui");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["sx", "className"];
-/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Text = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+var Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var sx = _ref.sx,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
+    className = _ref.className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
     as: "p",
@@ -28,12 +25,7 @@ var Text = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
       color: 'text'
     }, sx),
     className: (0, _classnames["default"])('vip-text-component', className),
-    ref: forwardRef
+    ref: ref
   }, props));
 });
-exports.Text = Text;
-Text.displayName = 'Text';
-Text.propTypes = {
-  sx: _propTypes["default"].object,
-  className: _propTypes["default"].any
-};
+Text.displayName = 'Text';

package/build/system/Text/Text.stories.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("theme-ui").BoxProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;

package/build/system/Text/Text.stories.js

@@ -5,15 +5,15 @@ exports["default"] = exports.Default = void 0;
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 /**
  * Internal dependencies
  */
-var _default = {
+var _default = exports["default"] = {
   title: 'Text',
   component: _.Text
 };
-exports["default"] = _default;
-var Default = function Default() {
+var Default = exports.Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)(_.Text, {
       children: ["Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ']
@@ -59,5 +59,4 @@ var Default = function Default() {
       })
     })]
   });
-};
-exports.Default = Default;
+};

package/build/system/Text/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Text } from './Text';

package/build/system/Text/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
+exports.Text = void 0;
 var _Text = require("./Text");
 exports.Text = _Text.Text;

package/build/system/Tooltip/Tooltip.css

@@ -0,0 +1,96 @@
+[data-vip-tooltip] {
+	position: relative;
+	cursor: help;
+  }
+
+  [data-vip-tooltip]::before,
+  [data-vip-tooltip]::after {
+	position: absolute;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity .3s ease-in-out;
+  }
+
+  [data-vip-tooltip]:focus-within::before,
+  [data-vip-tooltip]:focus-within::after,
+  [data-vip-tooltip]:hover::before,
+  [data-vip-tooltip]:hover::after {
+	opacity: 1;
+	visibility: visible;
+  }
+
+  [data-vip-tooltip]::before {
+	content: attr(data-vip-tooltip);
+	z-index: 9999;
+	width: 210px;
+	color: #fff;
+	background: rgba(0,0,0, .7);
+	border-radius: 5px;
+	padding: 5px;
+  }
+
+  [data-vip-tooltip]::after {
+	content: "";
+	width: 0;
+	height: 0;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="top"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="top"]::after {
+	bottom: 100%;
+	left: 50%;
+	transform: translate(-50%);
+	margin-bottom: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="top"]::after {
+	margin-bottom: 8px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 7px solid rgba(0,0,0, .7);
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="bottom"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="bottom"]::after {
+	top: 100%;
+	left: 50%;
+	transform: translate(-50%);
+	margin-top: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="bottom"]::after {
+	margin-top: 8px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 7px solid rgba(0,0,0, .7);
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="right"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="right"]::after {
+	top: 50%;
+	left: 100%;
+	transform: translate(0, -50%);
+	margin-left: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="right"]::after {
+	margin-left: 8px;
+	border-top: 5px solid transparent;
+	border-right: 7px solid rgba(0,0,0, .7);
+	border-bottom: 5px solid transparent;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="left"]::before,
+  [data-vip-tooltip][data-vip-tooltip-position="left"]::after {
+	top: 50%;
+	right: 100%;
+	transform: translate(0, -50%);
+	margin-right: 15px;
+  }
+
+  [data-vip-tooltip][data-vip-tooltip-position="left"]::after {
+	margin-right: 8px;
+	border-top: 5px solid transparent;
+	border-left: 7px solid rgba(0,0,0, .7);
+	border-bottom: 5px solid transparent;
+  }

package/build/system/Tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { PropsWithChildren, ReactElement } from 'react';
+import css from './Tooltip.css';
+/**
+ * Internal dependencies
+ */
+export interface TooltipProps {
+    title?: string;
+    trigger?: ReactElement;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
+declare const Tooltip: ({ title, trigger, children, position, }: PropsWithChildren<TooltipProps>) => import("react").JSX.Element;
+export { Tooltip, css };

package/build/system/Tooltip/Tooltip.js

@@ -2,101 +2,31 @@
 
 exports.__esModule = true;
 exports.Tooltip = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _md = require("react-icons/md");
-var TooltipPrimitive = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
-var _ = require("..");
+var _react = require("react");
+var _Tooltip = _interopRequireDefault(require("./Tooltip.css"));
+exports.css = _Tooltip["default"];
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["trigger", "text", "width", "children", "tooltipProps"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */ /**
-                                                                                                                                                                                                                                                                                                                                                                                          * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                          */
-var StyledArrow = function StyledArrow(props) {
-  return (0, _jsxRuntime.jsx)(TooltipPrimitive.Arrow, _extends({
-    sx: {
-      fill: 'white'
-    }
-  }, props));
-};
-var Tooltip = function Tooltip(_ref) {
-  var _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? (0, _jsxRuntime.jsx)(_md.MdHelp, {
-      sx: {
-        fill: 'text'
-      }
-    }) : _ref$trigger,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? '' : _ref$text,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 200 : _ref$width,
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+var Tooltip = exports.Tooltip = function Tooltip(_ref) {
+  var title = _ref.title,
+    trigger = _ref.trigger,
     children = _ref.children,
-    tooltipProps = _ref.tooltipProps,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(TooltipPrimitive.Provider, {
-    children: (0, _jsxRuntime.jsx)(TooltipPrimitive.Root, _extends({
-      skipDelayDuration: 700,
-      sx: {
-        display: 'inline-block',
-        position: 'relative',
-        svg: {
-          display: 'block'
-        },
-        '.tooltip-content': {
-          visibility: 'hidden'
-        },
-        '&:hover': {
-          '.tooltip-content': {
-            visibility: 'visible'
-          }
-        }
-      }
-    }, tooltipProps, {
-      children: (0, _jsxRuntime.jsxs)(TooltipPrimitive.Trigger, {
-        sx: {
-          background: 'transparent',
-          border: 'none',
-          display: 'inline-flex',
-          '&:focus': function focus(theme) {
-            return theme.outline;
-          },
-          '&:focus-visible': function focusVisible(theme) {
-            return theme.outline;
-          },
-          p: 0,
-          m: 0
-        },
-        children: [trigger, (0, _jsxRuntime.jsxs)(TooltipPrimitive.Content, {
-          children: [(0, _jsxRuntime.jsx)(_.Card, _extends({
-            className: "tooltip-content",
-            sx: {
-              width: width,
-              background: 'dialog'
-            }
-          }, props, {
-            children: children ? children : (0, _jsxRuntime.jsx)(_.Text, {
-              sx: {
-                fontSize: 2,
-                color: 'text'
-              },
-              children: text
-            })
-          })), (0, _jsxRuntime.jsx)(StyledArrow, {})]
-        })]
-      })
-    }))
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top' : _ref$position;
+  var triggerCloned = trigger ? /*#__PURE__*/(0, _react.cloneElement)(trigger, {
+    'data-vip-tooltip': title,
+    'aria-label': title,
+    'data-vip-tooltip-position': position
+  }) : null;
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [triggerCloned, children]
   });
-};
-exports.Tooltip = Tooltip;
-Tooltip.propTypes = {
-  children: _propTypes["default"].object,
-  text: _propTypes["default"].string,
-  tooltipProps: _propTypes["default"].object,
-  trigger: _propTypes["default"].string,
-  width: _propTypes["default"].number
 };

package/build/system/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: ({ title, trigger, children, position, }: import("react").PropsWithChildren<import("./Tooltip").TooltipProps>) => import("react").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: () => import("react").JSX.Element;
+export declare const Container: () => import("react").JSX.Element;