@pingux/astro 1.27.0-alpha.21 → 1.27.0-alpha.22

package/lib/styles/variants/buttons.js

@@ -1,733 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-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';
-import { neutral } from '../colors';
-import { chip } from './boxes';
-
-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: 'active',
-  outlineOffset: '4px'
-};
-var navItemButton = {
-  textDecoration: 'none',
-  outline: 'none',
-  cursor: 'pointer',
-  borderRadius: 0,
-  backgroundColor: 'transparent',
-  paddingTop: '5px',
-  paddingBottom: '5px',
-  display: 'block',
-  color: 'neutral.95',
-  fontSize: 'sm',
-  fontWeight: 1,
-  flexGrow: '1',
-  width: '100%',
-  textAlign: 'left',
-  lineHeight: '16px',
-  whiteSpace: 'break-spaces',
-  overflowWrap: 'break-word',
-  maxWidth: '100%',
-  wordWrap: 'break-word',
-  wordBreak: 'break-word',
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-hovered': {
-    bg: 'accent.10'
-  },
-  '&.is-selected': {
-    bg: 'accent.5',
-    boxShadow: 'inset 2px 0 0 0 white'
-  },
-  '&.is-pressed': {
-    bg: 'accent.5'
-  }
-};
-var iconButton = {
-  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 svgIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
-  path: {
-    fill: 'default'
-  }
-});
-
-var square = _objectSpread(_objectSpread({}, iconButton), {}, {
-  borderRadius: '2px'
-});
-
-var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
-  position: 'absolute',
-  top: 14,
-  right: 10
-});
-
-var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
-  bg: 'accent.99',
-  height: '40px',
-  minWidth: 'max-content',
-  pl: 'xs',
-  ml: '10px',
-  path: {
-    fill: 'active'
-  },
-  '&.is-hovered': {
-    backgroundColor: 'accent.99'
-  },
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-    outlineOffset: '0',
-    zIndex: 1
-  }),
-  '&.is-pressed': {
-    backgroundColor: 'accent.99'
-  }
-});
-
-var close = _objectSpread(_objectSpread({}, iconButton), {}, {
-  p: 0,
-  ml: 'auto',
-  outline: 'none',
-  path: {
-    fill: 'neutral.10'
-  },
-  '&.is-hovered': {
-    bg: 'white',
-    boxShadow: 'standard'
-  },
-  '&.is-pressed': {
-    boxShadow: 'standard',
-    bg: 'neutral.10',
-    path: {
-      fill: 'white'
-    }
-  },
-  '&.is-success': {
-    path: {
-      fill: 'success.dark'
-    },
-    '&.is-pressed': {
-      boxShadow: 'standard',
-      bg: 'success.dark',
-      path: {
-        fill: 'white'
-      }
-    }
-  },
-  '&.is-warning': {
-    path: {
-      fill: 'warning.dark'
-    },
-    '&.is-pressed': {
-      boxShadow: 'standard',
-      bg: 'warning.dark',
-      path: {
-        fill: 'white'
-      }
-    }
-  },
-  '&.is-error': {
-    path: {
-      fill: 'critical.dark'
-    },
-    '&.is-pressed': {
-      boxShadow: 'standard',
-      bg: 'critical.dark',
-      path: {
-        fill: 'white'
-      }
-    }
-  }
-});
-
-var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'transparent',
-  color: 'neutral.10',
-  paddingLeft: '5px',
-  paddingRight: '5px',
-  flexGrow: 0,
-  fontWeight: 700,
-  '&.is-hovered': {
-    color: 'active'
-  },
-  '&.is-pressed': {
-    color: 'accent.20'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-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'
-});
-
-var critical = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'critical.bright',
-  border: '1px solid',
-  borderColor: 'critical.bright',
-  color: 'white'
-});
-
-var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
-  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'
-});
-
-var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
-  background: 'transparent',
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-hovered': {
-    'path': {
-      fill: 'active'
-    }
-  },
-  '&.is-pressed': {
-    'path': {
-      fill: 'active'
-    }
-  }
-});
-
-var applicationPortalPinned = _objectSpread(_objectSpread({}, iconButton), {}, {
-  'path': {
-    fill: 'success.bright'
-  },
-  background: 'transparent',
-  '&.is-focused': _objectSpread({}, defaultFocus),
-  '&.is-hovered': {
-    'path': {
-      fill: 'active'
-    }
-  },
-  '&.is-pressed': {
-    'path': {
-      fill: 'active'
-    }
-  }
-});
-
-var helpHint = _objectSpread(_objectSpread({}, iconButton), {}, {
-  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'
-  }
-});
-
-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'
-  })
-});
-
-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({}, defaultFocus)
-});
-
-var quiet = {
-  all: 'unset',
-  display: 'flex'
-};
-var chipDeleteButton = {
-  borderRadius: '50%',
-  cursor: 'pointer',
-  height: 14,
-  mx: '3px !important',
-  p: 0,
-  width: 14,
-  '&.is-focused, &.is-hovered': {
-    bg: 'accent.40',
-    borderColor: 'accent.40',
-    boxShadow: 'standard',
-    outline: 'none'
-  },
-  '&.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20'
-  }
-};
-
-var rocker = _objectSpread(_objectSpread({}, base), {}, {
-  border: '0',
-  display: 'inline-flex',
-  height: '26px',
-  lineHeight: '26px',
-  fontSize: '14px',
-  borderRadius: '15px',
-  alignSelf: 'center',
-  paddingTop: '0px',
-  paddingBottom: '0px',
-  textTransform: 'uppercase',
-  bg: 'accent.95',
-  '&.is-selected': {
-    bg: 'active',
-    color: 'white',
-    zIndex: '1'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-var comboBox = {
-  bg: 'transparent',
-  color: 'black',
-  padding: 0
-};
-
-var danger = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  bg: 'white',
-  border: '1px solid',
-  borderColor: 'critical.bright',
-  color: 'critical.bright',
-  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
-    color: 'critical.bright',
-    borderColor: 'critical.bright'
-  }),
-  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
-    bg: 'critical.bright',
-    borderColor: 'critical.bright',
-    color: 'white'
-  }),
-  '&.is-focused': _objectSpread({}, defaultFocus)
-});
-
-var copy = {
-  ml: 'xs',
-  outline: 'none',
-  height: 'auto',
-  cursor: 'pointer',
-  path: {
-    fill: 'neutral.10'
-  },
-  '&.is-focused': _objectSpread({
-    boxShadow: 'none'
-  }, defaultFocus)
-};
-var colorField = {
-  border: "1px solid ".concat(neutral['80']),
-  '&:focus-visible': {
-    outline: 'none'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
-};
-
-var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 0,
-  backgroundColor: 'accent.99',
-  border: '2px solid',
-  borderColor: 'neutral.95'
-});
-
-var link = _objectSpread(_objectSpread({}, text), {}, {
-  lineHeight: 'unset',
-  textDecoration: 'none',
-  display: 'flex',
-  justifyContent: 'space-between',
-  width: 'max-content',
-  '&.is-current': {
-    cursor: 'default',
-    color: 'text.primary'
-  }
-});
-
-var neutralText = _objectSpread(_objectSpread({}, link), {}, {
-  color: 'neutral.10'
-});
-
-var expandableRow = {
-  chartWrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    color: 'black',
-    background: 'none',
-    cursor: 'pointer',
-    height: 60,
-    padding: 0,
-    '&:hover': {
-      backgroundColor: '#4462ED1A'
-    }
-  }
-};
-var environmentBreadcrumb = {
-  current: _objectSpread(_objectSpread({}, text), {}, {
-    color: 'neutral.30',
-    fontSize: 'md',
-    fontWeight: 1,
-    padding: '4px',
-    '&.is-hovered': {
-      color: 'active',
-      textDecoration: 'none',
-      boxShadow: 'none'
-    },
-    '&.is-focused': {
-      borderRadius: '2px',
-      boxShadow: '0 0 0 1px #4462ED'
-    },
-    '&.is-pressed': {
-      color: 'accent.20',
-      textDecoration: 'none'
-    }
-  }),
-  selectItem: _objectSpread(_objectSpread({}, text), {}, {
-    color: 'neutral.10',
-    fontSize: 'md',
-    fontWeight: 0,
-    justifyContent: 'start'
-  })
-};
-var fileInputField = {
-  background: 'none',
-  cursor: 'pointer',
-  '& span': {
-    textAlign: 'initial'
-  },
-  '&:focus-visible': {
-    outline: 'none'
-  },
-  '&.is-hovered, &.is-pressed': {
-    cursor: 'pointer',
-    '& span': {
-      textDecoration: 'underline'
-    }
-  },
-  '&.is-focused': {
-    boxShadow: 'focus'
-  }
-};
-
-var tooltipChip = _objectSpread(_objectSpread({}, chip), {}, {
-  cursor: 'default',
-  '&.is-hovered, &.is-pressed': {
-    cursor: 'default',
-    outline: 'none'
-  }
-});
-
-var tooltipIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
-  cursor: 'default',
-  '&.is-hovered, &.is-pressed': {
-    backgroundColor: 'inherit',
-    cursor: 'default',
-    path: {
-      fill: 'neutral.20'
-    }
-  }
-});
-
-var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
-  cursor: 'default',
-  alignSelf: 'flex-start',
-  '&.is-hovered, &.is-pressed': {
-    backgroundColor: 'inherit',
-    cursor: 'default',
-    textDecoration: 'inherit'
-  }
-});
-
-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'
-  }
-};
-
-var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
-  color: 'neutral.40',
-  alignItems: 'center',
-  '&.is-selected *, &.is-hovered *': {
-    color: 'active'
-  },
-  '& + *:not(div:first-of-type)': {
-    'ml': 'md'
-  }
-});
-
-export default {
-  accordionHeader: accordionHeader,
-  chipDeleteButton: chipDeleteButton,
-  close: close,
-  colorField: colorField,
-  comboBox: comboBox,
-  copy: copy,
-  critical: critical,
-  danger: danger,
-  "default": _objectSpread(_objectSpread({}, base), {}, {
-    bg: 'white',
-    border: '1px solid',
-    borderColor: 'active',
-    '&.is-hovered': _objectSpread({}, defaultHover),
-    '&.is-pressed': _objectSpread({}, defaultActive),
-    '&.is-focused': _objectSpread({}, defaultFocus)
-  }),
-  environmentBreadcrumb: environmentBreadcrumb,
-  expandableRow: expandableRow,
-  fileInputField: fileInputField,
-  filter: filter,
-  iconButton: iconButton,
-  imageUpload: imageUpload,
-  inline: inline,
-  inlinePrimary: inlinePrimary,
-  inverted: inverted,
-  link: link,
-  primary: primary,
-  quiet: quiet,
-  rocker: rocker,
-  success: success,
-  text: text,
-  helpHint: helpHint,
-  modalCloseButton: modalCloseButton,
-  navItemButton: navItemButton,
-  applicationPortalPinned: applicationPortalPinned,
-  applicationPortal: applicationPortal,
-  square: square,
-  invertedSquare: invertedSquare,
-  tooltipChip: tooltipChip,
-  tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline,
-  colorBlock: colorBlock,
-  menuTab: menuTab,
-  collapsiblePanelToggle: collapsiblePanelToggle,
-  neutralText: neutralText,
-  svgIconButton: svgIconButton
-};