@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -12,20 +12,18 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["variant"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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 React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import TextField from '.';
-import { Box } from '../../';
+import { Box } from '../..';
+import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import statuses from '../../utils/devUtils/constants/statuses.js';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { modes as labelModes } from '../Label/constants';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import CopyButton from '../CopyText/CopyButton';
-import statuses from '../../utils/devUtils/constants/statuses.js';
-import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import { modes as labelModes } from '../Label/constants';
+import TextField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',
@@ -37,7 +35,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -57,12 +55,11 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(_ref) {
   var variant = _ref.variant,
-      args = _objectWithoutProperties(_ref, _excluded);
-
+    args = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(TextField, _extends({
     id: "default-id",
     name: "custom-name",
@@ -119,10 +116,9 @@ LeftLabel.parameters = {
 };
 export var Controlled = function Controlled() {
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return ___EmotionJSX(TextField, {
     label: "Example Label",
     onChange: function onChange(e) {
@@ -158,10 +154,9 @@ export var Required = function Required() {
 };
 export var DynamicRequired = function DynamicRequired() {
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
   return ___EmotionJSX(TextField, {
     isRequired: isEmpty(value) // isEmpty from lodash
     ,
@@ -214,15 +209,13 @@ export var MaxLength = function MaxLength() {
 };
 export var WithSlots = function WithSlots() {
   var _useState5 = useState("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),
-      _useState6 = _slicedToArray(_useState5, 2),
-      addressesValue = _useState6[0],
-      setAddressesValue = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    addressesValue = _useState6[0],
+    setAddressesValue = _useState6[1];
   var _useState7 = useState("[{ 'status': 'inactive', 'subject': 'example@pingidentity.com' },{ 'status': 'active', 'subject': 'john@pingidentity.com' }]"),
-      _useState8 = _slicedToArray(_useState7, 2),
-      jsonValue = _useState8[0],
-      setJsonValue = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    jsonValue = _useState8[0],
+    setJsonValue = _useState8[1];
   var copyAddressesToClipboard = useCopyToClipboard(addressesValue);
   var copyJsonToClipboard = useCopyToClipboard(jsonValue);
   var buttonSx = {

package/lib/components/TextField/TextField.test.js

@@ -5,9 +5,9 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import TextField from '.';
-import axeTest from '../../utils/testUtils/testAxe';
 import statuses from '../../utils/devUtils/constants/statuses';
+import axeTest from '../../utils/testUtils/testAxe';
+import TextField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-text-field';
 var testLabel = 'Test Label';
@@ -15,13 +15,12 @@ var defaultProps = {
   'data-testid': testId,
   label: testLabel
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextField, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default text field', function () {
   getComponent();
@@ -52,7 +51,6 @@ test('text field with helper text', function () {
 });
 test('label will receive gridRow attribute if it will be higher than input', function () {
   var originalOffsetHeight = _Object$getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
-
   _Object$defineProperties(window.HTMLElement.prototype, {
     offsetHeight: {
       get: function get() {
@@ -60,10 +58,8 @@ test('label will receive gridRow attribute if it will be higher than input', fun
       }
     }
   });
-
   getComponent();
   expect(screen.getByText(defaultProps.label)).toHaveStyle('grid-row: 1/5');
-
   _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
 });
 test('form wrapper will have default max label column width when no custom width set', function () {

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

@@ -10,11 +10,8 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["additionalTimeZones", "emptySearchText", "locales", "localeOptions"];
-
 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 _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -25,36 +22,30 @@ import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import defaultTimezones, { usCities } from './timezones.js';
 import { Box, ComboBoxField, Item, Text } from '../../index';
+import defaultTimezones, { usCities } from './timezones.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var createSearchTags = function createSearchTags(_ref) {
   var _context, _context2, _context3, _context4;
-
   var gmt = _ref.gmt,
-      gmtLabel = _ref.gmtLabel,
-      timeZone = _ref.timeZone;
+    gmtLabel = _ref.gmtLabel,
+    timeZone = _ref.timeZone;
   var additionalTags = '';
   var americaTimeZone = _includesInstanceProperty(timeZone).call(timeZone, 'America') && timeZone.substring(8);
-
   if (_includesInstanceProperty(usCities).call(usCities, americaTimeZone)) {
     additionalTags = "US ".concat(americaTimeZone);
   }
-
   return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(gmt, " ")).call(_context4, gmtLabel, " ")).call(_context3, timeZone, " ")).call(_context2, timeZone === null || timeZone === void 0 ? void 0 : timeZone.replace(/_/g, ' '), " ")).call(_context, additionalTags);
 };
-
 var getLocaleTime = function getLocaleTime(_ref2) {
   var timeZone = _ref2.timeZone,
-      locales = _ref2.locales,
-      localeOptions = _ref2.localeOptions;
+    locales = _ref2.locales,
+    localeOptions = _ref2.localeOptions;
   var date = new Date();
   return date.toLocaleTimeString(locales, _objectSpread({
     timeZone: timeZone
   }, localeOptions));
 };
-
 var getTimezoneOffset = function getTimezoneOffset(timeZone) {
   var now = new Date();
   var tzString = now.toLocaleString('en-US', {
@@ -66,6 +57,7 @@ var getTimezoneOffset = function getTimezoneOffset(timeZone) {
   var formattedString = "".concat(offset, ":00");
   return offset > 0 ? "+".concat(formattedString) : formattedString;
 };
+
 /**
  *  Component allows users to choose a timezone from the list.
  *  You can checkout the default timezones list [here](https://github.com/yury-dymov/react-bootstrap-timezone-picker/blob/master/src/timezones.json).
@@ -73,34 +65,27 @@ var getTimezoneOffset = function getTimezoneOffset(timeZone) {
  *  Utilizes ComboBoxField component. You can use the same props as with
  *  the ComboBoxField - they will be spread into it.
  */
-
-
 var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var additionalTimeZones = props.additionalTimeZones,
-      emptySearchText = props.emptySearchText,
-      locales = props.locales,
-      localeOptions = props.localeOptions,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
+    emptySearchText = props.emptySearchText,
+    locales = props.locales,
+    localeOptions = props.localeOptions,
+    otherProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      search = _useState2[0],
-      setSearch = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
   var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      timeUpdate = _useState4[0],
-      setTimeUpdate = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    timeUpdate = _useState4[0],
+    setTimeUpdate = _useState4[1];
   var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      timeZones = _useState6[0],
-      setTimeZones = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    timeZones = _useState6[0],
+    setTimeZones = _useState6[1];
   var extendedTimeZonesList = additionalTimeZones ? _objectSpread(_objectSpread({}, defaultTimezones), additionalTimeZones) : defaultTimezones;
   var timeZonePickerRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return timeZonePickerRef.current;
   });
@@ -108,10 +93,8 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     if (timeUpdate) {
       var createTimeZoneTimes = function createTimeZoneTimes() {
         var _context5;
-
         return _mapInstanceProperty(_context5 = _Object$entries(extendedTimeZonesList)).call(_context5, function (item) {
           var _item$;
-
           var gmt = "GMT".concat(getTimezoneOffset(item[1]));
           var gmtLabel = item[0].substring(12);
           var timeZone = (_item$ = item[1]) === null || _item$ === void 0 ? void 0 : _item$.replace(/_/g, ' ');
@@ -133,7 +116,6 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           };
         });
       };
-
       setTimeZones(createTimeZoneTimes());
       setTimeUpdate(false);
     }
@@ -141,7 +123,6 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var filterTimezones = useCallback(function (timeZonesList) {
     return _filterInstanceProperty(timeZonesList).call(timeZonesList, function (_ref3) {
       var _context6;
-
       var searchTags = _ref3.searchTags;
       return _indexOfInstanceProperty(_context6 = searchTags.toUpperCase()).call(_context6, search.toUpperCase()) > -1;
     });
@@ -149,28 +130,22 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var filteredTimezones = useMemo(function () {
     return filterTimezones(timeZones);
   }, [filterTimezones, timeZones]);
-
   var sortByGMT = function sortByGMT(a, b) {
     var aNum = _parseFloat(a.gmt.split('GMT')[1].split(':')[0]);
-
     var bNum = _parseFloat(b.gmt.split('GMT')[1].split(')')[0]);
-
     return aNum - bNum;
   };
-
   var checkIsSelectedItem = function checkIsSelectedItem() {
     return _filterInstanceProperty(timeZones).call(timeZones, function (tz) {
       return tz.timeZone === search;
     }).length > 0;
   };
-
   var renderTimeZones = function renderTimeZones(timeZonesToRender) {
     var _context7;
-
     return _mapInstanceProperty(_context7 = _sortInstanceProperty(timeZonesToRender).call(timeZonesToRender, sortByGMT)).call(_context7, function (_ref4) {
       var gmt = _ref4.gmt,
-          time = _ref4.time,
-          timeZone = _ref4.timeZone;
+        time = _ref4.time,
+        timeZone = _ref4.timeZone;
       return ___EmotionJSX(Item, {
         key: timeZone,
         "data-id": timeZone,
@@ -182,27 +157,25 @@ 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))));
     });
   };
-
   var items = useMemo(function () {
     if (filteredTimezones.length === 0) {
       return ___EmotionJSX(Item, {
         key: emptySearchText
       }, emptySearchText);
     }
-
     return renderTimeZones(checkIsSelectedItem() ? timeZones : filteredTimezones);
   }, [emptySearchText, filteredTimezones, search, timeZones]);
   var comboBoxFieldProps = useMemo(function () {
     return _objectSpread({
-      controlProps: {
+      containerProps: {
         sx: {
           width: 400,
           fontSize: 'md'
@@ -232,13 +205,10 @@ TimeZonePicker.propTypes = {
    * e.g. `{'(GMT+02:00) Africa/Juba': 'Africa/Juba'}`
    */
   additionalTimeZones: PropTypes.shape({}),
-
   /** Text that will be shown if no search results are found. */
   emptySearchText: PropTypes.string,
-
   /** Locale(s) to use when generating the time format. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#using_locales) for more info. */
   locales: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** Custom options to use when generating the time format. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#using_options) for more info. */
   localeOptions: PropTypes.shape({})
 };

package/lib/components/TimeZonePicker/TimeZonePicker.test.js

@@ -1,25 +1,21 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import { OverlayProvider, TimeZonePicker } from '../../index';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { TimeZonePicker, OverlayProvider } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTimeZoneJuba = 'Africa/Juba';
 var testTimeZoneApia = 'Pacific/Apia';
 var defaultProps = {
   label: 'Test Label'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
   return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(TimeZonePicker, _extends({}, defaultProps, props))));
 };
-
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;

package/lib/components/TooltipTrigger/Tooltip.js

@@ -2,32 +2,29 @@ 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';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      others = _objectWithoutProperties(props, _excluded);
-
+    others = _objectWithoutProperties(props, _excluded);
   var _useContext = useContext(TooltipContext),
-      state = _useContext.state;
-
+    state = _useContext.state;
   var _useTooltip = useTooltip(props, state),
-      tooltipProps = _useTooltip.tooltipProps;
-
+    tooltipProps = _useTooltip.tooltipProps;
   var tooltipRef = useRef();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return tooltipRef.current;
   });
   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;

package/lib/components/TooltipTrigger/Tooltip.styles.js

@@ -0,0 +1,64 @@
+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 { baseBadge } from '../Badge/Badge.styles';
+import { text } from '../Button/Buttons.styles';
+var container = {
+  p: 'sm'
+};
+var badge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'default',
+    outline: 'none'
+  }
+});
+export var button = {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    path: {
+      fill: 'neutral.20'
+    }
+  }
+};
+var inline = _objectSpread(_objectSpread({}, text), {}, {
+  cursor: 'default',
+  alignSelf: 'flex-start',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    textDecoration: 'inherit'
+  }
+});
+var content = {
+  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'
+  }
+};
+export default {
+  container: container,
+  badge: badge,
+  button: button,
+  inline: inline,
+  content: content
+};