@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/components/Button/Buttons.styles.js

@@ -1,246 +0,0 @@
-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 { text as textVariants } from '../Text/Text.styles';
-export var base = _objectSpread({
-  cursor: 'pointer',
-  height: 36,
-  lineHeight: '30px',
-  minWidth: 'min-content',
-  px: 'md',
-  outline: 'none',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '2px',
-  flexShrink: 0,
-  wordBreak: 'inherit',
-  whiteSpace: 'nowrap'
-}, textVariants.buttonLabel);
-var defaultActive = {
-  bg: 'active',
-  border: '1px solid',
-  borderColor: 'active',
-  color: 'white',
-  'path': {
-    fill: 'white'
-  }
-};
-var defaultHover = {
-  bg: 'accent.99',
-  border: '1px solid',
-  borderColor: 'accent.40',
-  color: 'accent.40',
-  boxShadow: 'standard'
-};
-export var defaultFocus = {
-  outline: '1px solid',
-  outlineColor: 'focus',
-  outlineOffset: '2px'
-};
-export var focusWithCroppedOutline = {
-  boxShadow: 'none',
-  outline: '1px solid',
-  outlineColor: 'focus',
-  outlineOffset: '1px'
-};
-
-var primary = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'active',
-  border: '1px solid',
-  borderColor: 'active',
-  color: 'white',
-  '&.is-hovered': {
-    bg: 'accent.40',
-    border: '1px solid',
-    borderColor: 'accent.40',
-    color: 'white',
-    boxShadow: 'standard'
-  },
-  '&.is-pressed': {
-    bg: 'accent.20',
-    border: '1px solid',
-    borderColor: 'accent.20',
-    color: 'white'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-var success = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'success.bright',
-  border: '1px solid',
-  borderColor: 'success.bright',
-  color: 'white',
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-var critical = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'critical.bright',
-  border: '1px solid',
-  borderColor: 'critical.bright',
-  color: 'white',
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-var inline = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'white',
-  height: '22px',
-  lineHeight: 1,
-  fontSize: 'sm',
-  borderRadius: '15px',
-  border: '1px solid',
-  borderColor: 'active',
-  alignSelf: 'center',
-  paddingTop: '0px',
-  paddingBottom: '0px',
-  '&.is-hovered': _objectSpread({}, defaultHover),
-  '&.is-pressed': _objectSpread({}, defaultActive),
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
-  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
-    backgroundColor: 'accent.40',
-    color: 'white'
-  }),
-  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
-    backgroundColor: 'accent.20',
-    border: '1px solid',
-    borderColor: 'accent.20'
-  })
-});
-
-export var text = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'transparent',
-  border: '1px solid',
-  borderColor: 'transparent',
-  color: 'active',
-  height: 'auto',
-  padding: '0',
-  lineHeight: 'unset',
-  '&.is-hovered': {
-    textDecoration: 'underline'
-  },
-  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
-});
-export var quiet = {
-  all: 'unset',
-  display: 'flex'
-};
-export var link = _objectSpread(_objectSpread({}, text), {}, {
-  lineHeight: 'unset',
-  textDecoration: 'none',
-  display: 'flex',
-  justifyContent: 'space-between',
-  width: 'max-content',
-  '&.is-current': {
-    cursor: 'default',
-    color: 'text.primary'
-  },
-  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
-});
-
-var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
-  bg: 'white',
-  border: '1px solid',
-  borderColor: 'active',
-  '&.is-hovered': _objectSpread({}, defaultHover),
-  '&.is-pressed': _objectSpread({}, defaultActive),
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
-  px: 'sm',
-  borderColor: 'neutral.80',
-  height: 40,
-  color: 'active',
-  display: 'flex'
-});
-
-var colorBlock = {
-  bg: 'neutral.95',
-  border: '1px solid',
-  borderColor: 'neutral.90',
-  borderRadius: 10,
-  outline: 'none',
-  cursor: 'pointer',
-  width: 150,
-  minHeight: 40,
-  p: '5px 15px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  '&.is-hovered': {
-    bg: 'neutral.80'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-pressed': {
-    bg: 'neutral.60',
-    borderColor: 'neutral.60'
-  },
-  '& span': {
-    color: 'text.primary',
-    textAlign: 'left'
-  },
-  '&>div': {
-    alignItems: 'baseline'
-  },
-  '&>svg': {
-    color: 'text.secondary',
-    fill: 'text.secondary'
-  },
-  '&.is-configured': {
-    bg: 'active',
-    borderColor: 'active',
-    '& span': {
-      color: 'white'
-    },
-    '&>svg': {
-      color: 'white',
-      fill: 'white'
-    }
-  },
-  '&.is-configured.is-hovered': {
-    bg: 'accent.40',
-    borderColor: 'accent.40'
-  },
-  '&.is-configured.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20'
-  }
-};
-export default {
-  critical: critical,
-  "default": _objectSpread(_objectSpread({}, base), {}, {
-    bg: 'white',
-    border: '1px solid',
-    borderColor: 'active',
-    '&.is-hovered': _objectSpread({}, defaultHover),
-    '&.is-pressed': _objectSpread({}, defaultActive),
-    '&.is-focused': _objectSpread({}, defaultFocus)
-  }),
-  filter: filter,
-  inline: inline,
-  inlinePrimary: inlinePrimary,
-  link: link,
-  primary: primary,
-  quiet: quiet,
-  success: success,
-  colorBlock: colorBlock
-};

package/lib/components/Card/Card.styles.js

@@ -1,13 +0,0 @@
-var container = {
-  display: 'flex',
-  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
-  borderRadius: '3px',
-  color: 'text.primary',
-  fontSize: 'md',
-  fontWeight: 0,
-  flex: '1 1 0',
-  p: 'lg'
-};
-export default {
-  container: container
-};

package/lib/components/CopyText/CopyText.styles.js

@@ -1,48 +0,0 @@
-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 { defaultFocus } from '../Button/Buttons.styles';
-var copy = {
-  alignItems: 'center',
-  wordBreak: 'break-all',
-  overflowWrap: 'break-word',
-  '& .is-focused': {
-    outline: '1px solid',
-    outlineColor: 'active',
-    outlineOffset: '4px',
-    borderRadius: '4px'
-  },
-  '& span': {
-    cursor: 'text'
-  }
-};
-export var copyButton = {
-  ml: 'xs',
-  outline: 'none',
-  height: 'auto',
-  cursor: 'pointer',
-  path: {
-    fill: 'neutral.10'
-  },
-  '&.is-focused': _objectSpread({
-    boxShadow: 'none'
-  }, defaultFocus),
-  ':focus': {
-    outline: 'none'
-  }
-};
-export default {
-  copy: copy,
-  copyButton: copyButton
-};

package/lib/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles.js

@@ -1,49 +0,0 @@
-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 { text } from '../Button/Buttons.styles';
-var button = {
-  current: _objectSpread(_objectSpread({}, text), {}, {
-    color: 'neutral.30',
-    fontSize: 'md',
-    fontWeight: 1,
-    padding: '4px',
-    '&.is-hovered': {
-      color: 'active',
-      textDecoration: 'none',
-      boxShadow: 'none'
-    },
-    '&.is-focused': {
-      outline: '1px solid',
-      outlineColor: 'focus',
-      outlineOffset: '1px'
-    },
-    '&:focus-visible': {
-      outline: 'none'
-    },
-    '&.is-pressed': {
-      color: 'accent.20',
-      textDecoration: 'none'
-    }
-  }),
-  selectItem: _objectSpread(_objectSpread({}, text), {}, {
-    color: 'neutral.10',
-    fontSize: 'md',
-    fontWeight: 0,
-    justifyContent: 'start'
-  })
-};
-export default {
-  button: button
-};

package/lib/components/FileInputField/FileInputField.styles.js

@@ -1,58 +0,0 @@
-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 { focusWithCroppedOutline } from '../Button/Buttons.styles';
-var wrapper = {
-  display: 'flex',
-  border: '1px dashed',
-  borderColor: 'active',
-  padding: '10px 0',
-  '&.is-drag-active': {
-    backgroundColor: 'accent.95'
-  },
-  '&.is-error': {
-    borderColor: 'critical.dark'
-  },
-  '&.is-success': {
-    borderColor: 'success.dark'
-  },
-  '&.is-warning': {
-    borderColor: 'warning.dark'
-  },
-  '&.is-loading': {
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-};
-var button = {
-  background: 'none',
-  cursor: 'pointer',
-  '& span': {
-    textAlign: 'initial'
-  },
-  '&:focus-visible': {
-    outline: 'none'
-  },
-  '&.is-hovered, &.is-pressed': {
-    cursor: 'pointer',
-    '& span': {
-      textDecoration: 'underline'
-    }
-  },
-  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
-};
-export default {
-  wrapper: wrapper,
-  button: button
-};

package/lib/components/HelpHint/HelpHint.styles.js

@@ -1,53 +0,0 @@
-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 { defaultFocus } from '../Button/Buttons.styles';
-export var hintButton = {
-  bg: 'neutral.90',
-  borderColor: 'active',
-  mt: 'auto',
-  mb: 'auto',
-  ml: '5px',
-  maxWidth: '13px',
-  maxHeight: '14px',
-  borderRadius: '5.5px',
-  'svg': {
-    'height': '100%',
-    mb: 0.75
-  },
-  'path': {
-    fill: 'neutral.20'
-  },
-  '&.is-hovered': {
-    bg: 'accent.20',
-    borderColor: 'accent.20',
-    'path': {
-      fill: 'white'
-    },
-    color: 'white',
-    boxShadow: 'standard'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20',
-    color: 'white'
-  },
-  ':focus': {
-    outline: 'none'
-  }
-};
-export default {
-  hintButton: hintButton
-};

package/lib/components/IconButton/IconButton.styles.js

@@ -1,164 +0,0 @@
-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 { defaultFocus } from '../Button/Buttons.styles';
-import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
-import { copyButton } from '../CopyText/CopyText.styles';
-import { hintButton } from '../HelpHint/HelpHint.styles';
-import { deleteButton, badgeWithSlotDeleteButton } from '../Badge/Badge.styles';
-import { modalCloseButton } from '../Modal/Modal.styles';
-import { messageCloseButton } from '../Messages/Message.styles';
-import { button } from '../TooltipTrigger/Tooltip.styles';
-export var base = {
-  justifyContent: 'center',
-  appearance: 'none',
-  alignItems: 'center',
-  alignSelf: 'baseline',
-  display: 'inline-flex !important',
-  flexGrow: 0,
-  flexShrink: 0,
-  borderRadius: '100%',
-  cursor: 'pointer',
-  bg: 'transparent',
-  p: '3px',
-  width: 'inherit',
-  height: 'inherit',
-  path: {
-    fill: 'neutral.40'
-  },
-  outline: 'none',
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-hovered': {
-    bg: 'accent.95'
-  },
-  '&.is-pressed': {
-    'path': {
-      fill: 'white'
-    },
-    bg: 'active'
-  }
-};
-var bidirectional = {
-  border: '1px solid',
-  outline: 'none',
-  height: '24px',
-  width: '24px',
-  color: 'active',
-  borderRadius: '12px',
-  borderColor: 'active',
-  '&.is-hovered': {
-    color: 'accent.40',
-    borderColor: 'accent.40'
-  },
-  '&.is-pressed': {
-    color: 'accent.20',
-    borderColor: 'accent.20'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
-};
-
-var inverted = _objectSpread(_objectSpread({}, base), {}, {
-  bg: 'active',
-  borderColor: 'active',
-  'path': {
-    fill: 'white'
-  },
-  '&.is-hovered': {
-    bg: 'accent.40',
-    borderColor: 'accent.40',
-    color: 'white',
-    boxShadow: 'standard'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20',
-    color: 'white'
-  }
-});
-
-var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
-  borderRadius: '2px'
-});
-
-export var square = _objectSpread(_objectSpread({}, base), {}, {
-  borderRadius: '2px'
-});
-
-var svgIconButton = _objectSpread(_objectSpread({}, base), {}, {
-  path: {
-    fill: 'default'
-  }
-});
-/**
- * Recipe related variants below
- */
-
-
-var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
-  background: 'transparent',
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-hovered': {
-    'path': {
-      fill: 'active'
-    }
-  },
-  '&.is-pressed': {
-    'path': {
-      fill: 'active'
-    }
-  }
-});
-
-var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
-  'path': {
-    fill: 'success.bright'
-  },
-  background: 'transparent',
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-hovered': {
-    'path': {
-      fill: 'active'
-    }
-  },
-  '&.is-pressed': {
-    'path': {
-      fill: 'active'
-    }
-  }
-});
-
-export default {
-  base: base,
-  bidirectional: bidirectional,
-  badge: {
-    deleteButton: deleteButton
-  },
-  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
-  copyButton: copyButton,
-  hintButton: _objectSpread(_objectSpread({}, base), hintButton),
-  inverted: inverted,
-  messageCloseButton: _objectSpread(_objectSpread({}, base), messageCloseButton),
-  modalCloseButton: _objectSpread(_objectSpread({}, base), modalCloseButton),
-  invertedSquare: invertedSquare,
-  square: square,
-  svgIconButton: svgIconButton,
-  toggle: toggle,
-  tooltip: {
-    button: _objectSpread(_objectSpread({}, base), button)
-  },
-  // Recipe related variants
-  applicationPortal: applicationPortal,
-  applicationPortalPinned: applicationPortalPinned
-};