@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/{styles/variants/text.js → components/Text/Text.styles.js}

@@ -12,14 +12,14 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var base = {
+export var base = {
   display: 'block',
   fontSize: 'md',
   color: 'text.primary',
   fontFamily: 'standard',
   overflowWrap: 'break-word'
 };
-var wordWrap = {
+export var wordWrap = {
   display: 'block',
   overflowWrap: 'break-word',
   maxWidth: '100%',
@@ -46,110 +46,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
   }
 });
 
-var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
-  },
-  '&.is-error': {
-    color: 'critical.dark'
-  },
-  '&.is-success': {
-    color: 'success.dark'
-  },
-  '&.is-warning': {
-    color: 'warning.dark'
-  },
-  '.is-left-label > &': {
-    gridRowEnd: 3,
-    gridColumnEnd: 3
-  }
-});
-
-var tooltipContent = {
-  maxWidth: '10em',
-  maxHeight: '15em',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: '10',
-  WebkitBoxOrient: 'vertical',
-  display: '-webkit-box !important',
-  wordBreak: 'break-word',
-  '.is-right > * > &, .is-left > * > &': {
-    maxWidth: '24em',
-    maxHeight: '6.5em',
-    WebkitLineClamp: '4'
-  }
-};
-var expandableRowSharedStyle = {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-};
-var expandableRow = {
-  title: _objectSpread({
-    fontSize: 'lg',
-    color: 'neutral.20'
-  }, expandableRowSharedStyle),
-  subtitle: _objectSpread({
-    fontSize: 'sm',
-    color: 'neutral.60'
-  }, expandableRowSharedStyle),
-  lineChart: {
-    title: _objectSpread({
-      fontSize: 'sm',
-      color: 'neutral.40',
-      maxWidth: '100%'
-    }, expandableRowSharedStyle),
-    count: {
-      color: 'neutral.20',
-      fontSize: 22,
-      fontWeight: 2
-    },
-    countLabel: {
-      fontSize: 'xs',
-      color: 'neutral.50'
-    },
-    chartLabel: {
-      fontSize: 'xs',
-      color: 'neutral.50',
-      minWidth: '60px'
-    },
-    trend: {
-      color: 'neutral.20',
-      fontSize: 'sm',
-      fontWeight: 3,
-      whiteSpace: 'nowrap'
-    }
-  }
-};
-var breadcrumbLi = {
-  'a.is-hovered.is-current ': {
-    textDecoration: 'none'
-  }
-};
-var breadcrumbLink = {
-  color: 'active',
-  fontFamily: 'standard',
-  fontSize: '15px',
-  textDecoration: 'none',
-  outline: 'none',
-  '&.is-hovered': {
-    textDecoration: 'underline'
-  },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
-  '&.is-disabled': {
-    pointerEvents: 'none'
-  },
-  '&.is-current': _objectSpread(_objectSpread({
-    pointerEvents: 'none'
-  }, base), {}, {
-    fontWeight: 1
-  })
-};
-
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
   fontWeight: 3,
@@ -157,84 +53,6 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'capitalize'
 });
 
-var navBarSubtitle = {
-  ml: 'md',
-  my: 'sm',
-  fontWeight: 1,
-  fontSize: 'sm',
-  color: 'accent.80',
-  zIndex: '100'
-};
-
-var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  whiteSpace: 'break-spaces',
-  lineHeight: 1,
-  fontSize: 'md',
-  fontWeight: 1,
-  maxWidth: '150px',
-  color: 'neutral.95',
-  '.is-selected &': {
-    color: 'white'
-  }
-});
-
-var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  color: 'neutral.30',
-  fontSize: 'sm',
-  fontWeight: 500,
-  overflow: 'hidden',
-  marginRight: 'xs',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-
-var collapsiblePanelTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  fontSize: 'sm',
-  fontWeight: 500,
-  color: 'text.secondary',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  mr: 'xs'
-});
-
-var maskedValue = {
-  width: 252,
-  wordBreak: 'break-all',
-  '&.is-masked': {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    fontWeight: 700
-  }
-};
-var timeZone = {
-  title: {
-    color: 'neutral.10',
-    fontSize: 'md',
-    whiteSpace: 'nowrap',
-    lineHeight: 1,
-    '.is-focused &': {
-      color: 'white'
-    }
-  },
-  subTitle: {
-    color: 'neutral.40',
-    fontSize: 'sm',
-    ml: 10,
-    '.is-focused &': {
-      color: 'white'
-    }
-  },
-  time: {
-    color: 'neutral.10',
-    fontSize: 'sm',
-    fontWeight: 1,
-    '.is-focused &': {
-      color: 'white'
-    }
-  }
-};
-
 var title = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontSize: 'xx',
   fontWeight: 1,
@@ -268,8 +86,6 @@ export var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   }),
-  breadcrumbLi: breadcrumbLi,
-  breadcrumbLink: breadcrumbLink,
   buttonLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,
@@ -296,7 +112,6 @@ export var text = {
     fontFamily: 'standard'
   }),
   environmentBreadcrumb: environmentBreadcrumb,
-  fieldHelperText: fieldHelperText,
   H1: _objectSpread(_objectSpread({}, title), {}, {
     fontWeight: 3,
     lineHeight: '28px'
@@ -350,12 +165,6 @@ export var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }),
-  maskedValue: maskedValue,
-  expandableRow: expandableRow,
-  collapsiblePanellItem: collapsiblePanellItem,
-  collapsiblePanelTitle: collapsiblePanelTitle,
-  navBarHeaderText: navBarHeaderText,
-  navBarSubtitle: navBarSubtitle,
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',
@@ -379,7 +188,5 @@ export var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  title: title,
-  tooltipContent: tooltipContent,
-  timeZone: timeZone
+  title: title
 };

package/lib/components/TextArea/TextArea.styles.js

@@ -0,0 +1,47 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { input } from '../Input/Input.styles'; // Styles for default input and variants go here.
+
+export var baseField = _objectSpread(_objectSpread({}, input), {}, {
+  height: 'unset',
+  '&.is-unresizable': {
+    resize: 'none'
+  },
+  '.is-float-label &': {
+    height: 'unset'
+  }
+});
+var containerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var floatLabelWrapper = {
+  width: 'calc(100% - 4px)',
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
+export default {
+  baseField: baseField,
+  containerSlot: containerSlot,
+  floatLabelWrapper: floatLabelWrapper
+};

package/lib/components/TextAreaField/TextAreaField.js

@@ -22,6 +22,7 @@ import { Box, FieldHelperText, Label, TextArea } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 /**
  * Combines a textarea, label, and helper text for a complete, form-ready solution.
  */
@@ -41,11 +42,12 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     statusClasses: statusClasses
   }, props)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var containerRef = useRef();
-  var inputContainerRef = useRef();
+  var fieldControlWrapperRef = useRef();
   var labelRef = useRef();
   var labelWrapperRef = useRef();
   var slotContainer = useRef();
@@ -68,7 +70,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
 
 
   var resizeSlotContainer = function resizeSlotContainer() {
-    inputContainerRef.current.style.width = textAreaRef.current.style.width;
+    fieldControlWrapperRef.current.style.width = textAreaRef.current.style.width;
   };
 
   var onResize = useCallback(function () {
@@ -113,27 +115,27 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 
   var wrappedLabel = ___EmotionJSX(Box, {
-    variant: "boxes.floatLabelWrapper",
+    variant: "forms.textarea.floatLabelWrapper",
     ref: labelWrapperRef
   }, labelNode);
 
   return ___EmotionJSX(Box, _extends({
-    variant: "forms.input.wrapper"
+    variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
-  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, {
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, _extends({
     isRow: true,
-    variant: "forms.input.container",
-    className: fieldControlProps.className,
+    variant: "forms.input.fieldControlWrapper",
     minWidth: "40px",
     maxWidth: "100%",
-    ref: inputContainerRef
-  }, ___EmotionJSX(TextArea, _extends({
+    ref: fieldControlWrapperRef
+  }, fieldControlWrapperProps), ___EmotionJSX(TextArea, _extends({
     ref: textAreaRef,
-    rows: rows
-  }, fieldControlProps, {
+    rows: rows,
+    variant: "forms.textarea.baseField"
+  }, fieldControlInputProps, {
     sx: slots !== null && slots !== void 0 && slots.inContainer ? {
       paddingRight: '35px'
     } : {
@@ -142,14 +144,14 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && ___EmotionJSX(Box, {
-    variant: "boxes.textFieldInContainerSlot",
+    variant: "forms.textarea.containerSlot",
     ref: slotContainer
   }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText));
 });
-TextAreaField.propTypes = _objectSpread({
+TextAreaField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -236,21 +238,12 @@ TextAreaField.propTypes = _objectSpread({
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
 
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({}),
-
   /** Provides a way to insert markup in specified places. */
   slots: PropTypes.shape({
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   })
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -20,6 +20,7 @@ import SearchIcon from 'mdi-react/SearchIcon';
 import TextAreaField from '.';
 import { Box, Icon } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { modes as labelModes } from '../Label/constants';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -33,7 +34,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -76,15 +77,12 @@ export default {
     id: {},
     autocomplete: {},
     className: {},
-    containerProps: {},
-    labelProps: {},
-    controlProps: {},
     value: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 
 var IconSlot = ___EmotionJSX(Box, {

package/lib/components/TextField/TextField.js

@@ -22,6 +22,7 @@ import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttr
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import useColumnStyles from '../../hooks/useColumnStyles';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 /**
  * Combines a text input, label, and helper text for a complete, form-ready solution.
  */
@@ -30,12 +31,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
       slots = props.slots,
-      status = props.status,
-      wrapperProps = props.wrapperProps;
+      status = props.status;
 
   var _useField = useField(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var inputRef = useRef();
@@ -58,7 +59,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var helperTextId = uuid();
   return ___EmotionJSX(Box, _extends({
-    variant: "forms.input.wrapper"
+    variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
@@ -67,11 +68,10 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
       gridRow: '1/5'
     }
   })), ___EmotionJSX(Box, _extends({
-    variant: "forms.input.container",
-    className: fieldControlProps.className
-  }, wrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
+    variant: "forms.input.fieldControlWrapper"
+  }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
     ref: inputRef
-  }, fieldControlProps, {
+  }, fieldControlInputProps, {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && ___EmotionJSX(FieldHelperText, {
@@ -79,7 +79,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-TextField.propTypes = _objectSpread({
+TextField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -167,18 +167,9 @@ TextField.propTypes = _objectSpread({
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: PropTypes.string,
 
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({}),
-
   /** Props object that is spread directly into the input wrapper element. */
   wrapperProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/TextField/TextField.stories.js

@@ -22,6 +22,7 @@ import isEmpty from 'lodash/isEmpty';
 import TextField from '.';
 import { Box } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { modes as labelModes } from '../Label/constants';
 import CopyButton from '../CopyText/CopyButton';
 import statuses from '../../utils/devUtils/constants/statuses.js';
@@ -37,7 +38,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -57,7 +58,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(_ref) {
   var variant = _ref.variant,

package/lib/components/TimeZonePicker/TimeZone.styles.js

@@ -0,0 +1,30 @@
+var item = {
+  title: {
+    color: 'neutral.10',
+    fontSize: 'md',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  subTitle: {
+    color: 'neutral.40',
+    fontSize: 'sm',
+    ml: 10,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  time: {
+    color: 'neutral.10',
+    fontSize: 'sm',
+    fontWeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  }
+};
+export default {
+  item: item
+};

package/lib/components/TimeZonePicker/TimeZonePicker.js

@@ -182,11 +182,11 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       }, ___EmotionJSX(Box, {
         flexDirection: "row"
       }, ___EmotionJSX(Text, {
-        variant: "timeZone.title"
+        variant: "variants.timeZone.item.title"
       }, timeZone), ___EmotionJSX(Text, {
-        variant: "timeZone.subTitle"
+        variant: "variants.timeZone.item.subTitle"
       }, gmt)), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-        variant: "timeZone.time"
+        variant: "variants.timeZone.item.time"
       }, time))));
     });
   };
@@ -202,7 +202,7 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [emptySearchText, filteredTimezones, search, timeZones]);
   var comboBoxFieldProps = useMemo(function () {
     return _objectSpread({
-      controlProps: {
+      containerProps: {
         sx: {
           width: 400,
           fontSize: 'md'

package/lib/components/TooltipTrigger/Tooltip.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children"];
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
-import { useTooltip } from '@react-aria/tooltip';
+import { useTooltip } from 'react-aria';
 import { TooltipContext } from '../../context/TooltipContext/index';
 import Box from '../Box';
 import Text from '../Text';
@@ -25,9 +25,9 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   return ___EmotionJSX(Box, _extends({
     ref: tooltipRef,
-    variant: "tooltip.tooltipContainer"
+    variant: "tooltip.container"
   }, tooltipProps, others), ___EmotionJSX(Text, {
-    variant: "tooltipContent"
+    variant: "variants.tooltip.content"
   }, children));
 });
 export default Tooltip;