@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/dist/esm/TimeField/TimeField.test.js

@@ -1,384 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import React, { useState } from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
-import TimeField from './TimeField';
-
-var TestApp = function TestApp(_ref) {
-  var initialValue = _ref.value,
-      props = _objectWithoutPropertiesLoose(_ref, ["value"]);
-
-  var _useState = useState(initialValue),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  return /*#__PURE__*/React.createElement(TimeField, _extends({}, props, {
-    value: value,
-    onChange: setValue
-  }));
-};
-
-var setup = function setup(_ref2) {
-  var hours = _ref2.hours,
-      minutes = _ref2.minutes,
-      props = _objectWithoutPropertiesLoose(_ref2, ["hours", "minutes"]);
-
-  var testApp = render( /*#__PURE__*/React.createElement(TestApp, _extends({}, props, {
-    value: [hours, minutes]
-  })));
-  var hourInput = testApp.queryByLabelText('Hours');
-  var minuteInput = testApp.queryByLabelText('Minutes');
-  var meridiemInput = testApp.queryByLabelText('AM/PM');
-  return _objectSpread({
-    hourInput: hourInput,
-    minuteInput: minuteInput,
-    meridiemInput: meridiemInput
-  }, testApp);
-}; // 0 padding
-
-
-it('left pads 0 for single digit hours', function () {
-  var _setup = setup({
-    hours: 1
-  }),
-      hourInput = _setup.hourInput;
-
-  expect(hourInput).toHaveValue('01');
-});
-it('doesnt pad double digit hours', function () {
-  var _setup2 = setup({
-    hours: 11
-  }),
-      hourInput = _setup2.hourInput;
-
-  expect(hourInput).toHaveValue('11');
-});
-it('left pads 0 for single digit minutes', function () {
-  var _setup3 = setup({
-    minutes: 3
-  }),
-      minuteInput = _setup3.minuteInput;
-
-  expect(minuteInput).toHaveValue('03');
-});
-it('doesnt pad double digit minutes', function () {
-  var _setup4 = setup({
-    minutes: 35
-  }),
-      minuteInput = _setup4.minuteInput;
-
-  expect(minuteInput).toHaveValue('35');
-}); // hour display
-
-it('displays 13 hours as 01 hours for 12 hour clock', function () {
-  var _setup5 = setup({
-    hours: 13
-  }),
-      hourInput = _setup5.hourInput;
-
-  expect(hourInput).toHaveValue('01');
-});
-it('displays 0 hours as 12 hours for 12 hour clock', function () {
-  var _setup6 = setup({
-    hours: 13
-  }),
-      hourInput = _setup6.hourInput;
-
-  expect(hourInput).toHaveValue('01');
-});
-it('displays 13 hours as 13 hours for 24 hour clock', function () {
-  var _setup7 = setup({
-    hours: 13,
-    twelveHourClock: false
-  }),
-      hourInput = _setup7.hourInput;
-
-  expect(hourInput).toHaveValue('13');
-}); // meridiem
-
-it('displays the meridiem for 12 hour clock', function () {
-  var _setup8 = setup({
-    hours: 13
-  }),
-      meridiemInput = _setup8.meridiemInput;
-
-  expect(meridiemInput).toHaveValue('PM');
-});
-it('does not display the meridiem for 24 hour clock', function () {
-  var _setup9 = setup({
-    hours: 13,
-    twelveHourClock: false
-  }),
-      meridiemInput = _setup9.meridiemInput;
-
-  expect(meridiemInput).not.toBeInTheDocument();
-}); // arrow key events
-
-it('changes focus to minutes from hours on arrow right', function () {
-  var _setup10 = setup({
-    hours: 1,
-    minutes: 30
-  }),
-      hourInput = _setup10.hourInput,
-      minuteInput = _setup10.minuteInput;
-
-  userEvent.type(hourInput, '{arrowright}');
-  expect(minuteInput).toHaveFocus();
-});
-it('changes focus to hours from minutes on arrow left', function () {
-  var _setup11 = setup({
-    hours: 1,
-    minutes: 30
-  }),
-      hourInput = _setup11.hourInput,
-      minuteInput = _setup11.minuteInput;
-
-  userEvent.type(minuteInput, '{arrowleft}');
-  expect(hourInput).toHaveFocus();
-});
-it('changes focus to meridiem from minutes on arrow right for 12 hour clock', function () {
-  var _setup12 = setup({
-    hours: 1,
-    minutes: 30
-  }),
-      minuteInput = _setup12.minuteInput,
-      meridiemInput = _setup12.meridiemInput;
-
-  userEvent.type(minuteInput, '{arrowright}');
-  expect(meridiemInput).toHaveFocus();
-});
-it('changes the meridiem on arrow key', function () {
-  var _setup13 = setup({
-    hours: 13,
-    minutes: 42
-  }),
-      meridiemInput = _setup13.meridiemInput;
-
-  expect(meridiemInput).toHaveValue('PM');
-  userEvent.type(meridiemInput, '{arrowdown}');
-  expect(meridiemInput).toHaveValue('AM');
-  userEvent.type(meridiemInput, '{arrowup}');
-  expect(meridiemInput).toHaveValue('PM');
-});
-it('does not change the meridiem on arrow key if arrow keys are ignored', function () {
-  var _setup14 = setup({
-    hours: 13,
-    minutes: 42,
-    ignoredKeys: ['ArrowUp', 'ArrowDown']
-  }),
-      meridiemInput = _setup14.meridiemInput;
-
-  expect(meridiemInput).toHaveValue('PM');
-  userEvent.type(meridiemInput, '{arrowdown}');
-  expect(meridiemInput).toHaveValue('PM');
-  userEvent.type(meridiemInput, '{arrowup}');
-  expect(meridiemInput).toHaveValue('PM');
-});
-it('increment hour on arrow up', function () {
-  var _setup15 = setup({
-    hours: 1,
-    minutes: 42
-  }),
-      hourInput = _setup15.hourInput;
-
-  expect(hourInput).toHaveValue('01');
-  userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue('02');
-});
-it('increment hour if arrow up on minutes exceeds max value', function () {
-  var _setup16 = setup({
-    hours: 1,
-    minutes: 59
-  }),
-      hourInput = _setup16.hourInput,
-      minuteInput = _setup16.minuteInput;
-
-  expect(hourInput).toHaveValue('01');
-  userEvent.type(minuteInput, '{arrowup}');
-  expect(hourInput).toHaveValue('02');
-});
-it('decrement hour on arrow down', function () {
-  var _setup17 = setup({
-    hours: 2,
-    minutes: 42
-  }),
-      hourInput = _setup17.hourInput;
-
-  expect(hourInput).toHaveValue('02');
-  userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue('01');
-});
-it('decrement hour if arrow down on minutes exceeds min value', function () {
-  var _setup18 = setup({
-    hours: 2,
-    minutes: 0
-  }),
-      hourInput = _setup18.hourInput,
-      minuteInput = _setup18.minuteInput;
-
-  expect(hourInput).toHaveValue('02');
-  userEvent.type(minuteInput, '{arrowdown}');
-  expect(hourInput).toHaveValue('01');
-});
-it('increment minute on arrow up', function () {
-  var _setup19 = setup({
-    hours: 1,
-    minutes: 42
-  }),
-      minuteInput = _setup19.minuteInput;
-
-  expect(minuteInput).toHaveValue('42');
-  userEvent.type(minuteInput, '{arrowup}');
-  expect(minuteInput).toHaveValue('43');
-});
-it('decrement minute on arrow down', function () {
-  var _setup20 = setup({
-    hours: 2,
-    minutes: 43
-  }),
-      minuteInput = _setup20.minuteInput;
-
-  expect(minuteInput).toHaveValue('43');
-  userEvent.type(minuteInput, '{arrowdown}');
-  expect(minuteInput).toHaveValue('42');
-});
-it('set minute to min value if arrow up on minutes exceeds max value', function () {
-  var _setup21 = setup({
-    hours: 1,
-    minutes: 59
-  }),
-      minuteInput = _setup21.minuteInput;
-
-  expect(minuteInput).toHaveValue('59');
-  userEvent.type(minuteInput, '{arrowup}');
-  expect(minuteInput).toHaveValue('00');
-});
-it('set minute to max value if arrow down on minutes exceeds min value', function () {
-  var _setup22 = setup({
-    hours: 1,
-    minutes: 0
-  }),
-      minuteInput = _setup22.minuteInput;
-
-  expect(minuteInput).toHaveValue('00');
-  userEvent.type(minuteInput, '{arrowdown}');
-  expect(minuteInput).toHaveValue('59');
-});
-it('toggle meridiem if arrow up on hour exceeds eleven', function () {
-  var _setup23 = setup({
-    hours: 11
-  }),
-      hourInput = _setup23.hourInput,
-      meridiemInput = _setup23.meridiemInput;
-
-  expect(meridiemInput).toHaveValue('AM');
-  userEvent.type(hourInput, '{arrowup}');
-  expect(meridiemInput).toHaveValue('PM');
-});
-it('toggle meridiem if arrow down on hour exceeds min value', function () {
-  var _setup24 = setup({
-    hours: 0
-  }),
-      hourInput = _setup24.hourInput,
-      meridiemInput = _setup24.meridiemInput;
-
-  expect(meridiemInput).toHaveValue('AM');
-  userEvent.type(hourInput, '{arrowdown}');
-  expect(meridiemInput).toHaveValue('PM');
-});
-it('set 12 hour clock to min value if arrow up on hour exceeds max value', function () {
-  var _setup25 = setup({
-    hours: 12
-  }),
-      hourInput = _setup25.hourInput;
-
-  expect(hourInput).toHaveValue('12');
-  userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue('01');
-});
-it('set 24 hour clock to min value if arrow up on hour exceeds max value', function () {
-  var _setup26 = setup({
-    hours: 23,
-    twelveHourClock: false
-  }),
-      hourInput = _setup26.hourInput;
-
-  expect(hourInput).toHaveValue('23');
-  userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue('00');
-});
-it('set 12 hour clock to max value if arrow down on hour exceeds min value', function () {
-  var _setup27 = setup({
-    hours: 1
-  }),
-      hourInput = _setup27.hourInput;
-
-  expect(hourInput).toHaveValue('01');
-  userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue('12');
-});
-it('set 24 hour clock to max value if arrow down on hour exceeds min value', function () {
-  var _setup28 = setup({
-    hours: 0,
-    twelveHourClock: false
-  }),
-      hourInput = _setup28.hourInput;
-
-  expect(hourInput).toHaveValue('00');
-  userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue('23');
-});
-it('does not change the value of hours on arrow up or arrow down if ignored', function () {
-  var _setup29 = setup({
-    hours: 1,
-    minutes: 42,
-    ignoredKeys: ['ArrowUp', 'ArrowDown']
-  }),
-      hourInput = _setup29.hourInput;
-
-  expect(hourInput).toHaveValue('01');
-  userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue('01');
-  userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue('01');
-});
-it('does not change the value of minutes on arrow up or arrow down if ignored', function () {
-  var _setup30 = setup({
-    hours: 1,
-    minutes: 42,
-    ignoredKeys: ['ArrowUp', 'ArrowDown']
-  }),
-      minuteInput = _setup30.minuteInput;
-
-  expect(minuteInput).toHaveValue('42');
-  userEvent.type(minuteInput, '{arrowup}');
-  expect(minuteInput).toHaveValue('42');
-  userEvent.type(minuteInput, '{arrowdown}');
-  expect(minuteInput).toHaveValue('42');
-}); // ios
-
-it('renders iOS as a single input', function () {
-  var _setup31 = setup({
-    isIOS: true,
-    hours: 13,
-    minutes: 42
-  }),
-      container = _setup31.container,
-      hourInput = _setup31.hourInput,
-      minuteInput = _setup31.minuteInput,
-      meridiemInput = _setup31.meridiemInput;
-
-  var singleTimeInput = container.querySelector('[type=time]');
-  expect(singleTimeInput).toHaveValue('13:42');
-  expect(hourInput).not.toBeInTheDocument();
-  expect(minuteInput).not.toBeInTheDocument();
-  expect(meridiemInput).not.toBeInTheDocument();
-});

package/dist/esm/TimeField/index.js

@@ -1,2 +0,0 @@
-import TimeField from './TimeField';
-export default TimeField;

package/dist/esm/TimeField/utils.js

@@ -1,40 +0,0 @@
-import { addHours, addMinutes, getHours, getMinutes } from 'date-fns';
-export var HOURS_IN_DAY = 24;
-export var HOURS_TO_NOON = HOURS_IN_DAY / 2;
-export var MINUTES_IN_HOUR = 60;
-export function addHoursToTime(time, hoursToAdd) {
-  var hours = time[0],
-      minutes = time[1];
-  return [modulo(hours + hoursToAdd, HOURS_IN_DAY), minutes];
-}
-export function addMinutesToTime(time, minutesToAdd) {
-  var hours = time[0],
-      minutes = time[1];
-  var nextMinutes = minutes + minutesToAdd;
-  var remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR);
-
-  if (remainderMinutes >= 0) {
-    var nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR);
-    hours = modulo(nextHours, HOURS_IN_DAY);
-    minutes = remainderMinutes;
-  } else {
-    minutes = nextMinutes;
-  }
-
-  return [hours, minutes];
-}
-export function addTimeToDate(date, time) {
-  var hours = time[0],
-      minutes = time[1];
-  return addHours(addMinutes(date, minutes), hours);
-}
-export function getMeridiem(time) {
-  var hours = time[0];
-  return hours <= 11 ? 'AM' : 'PM';
-}
-export function getTimeFromDate(date) {
-  return [getHours(date), getMinutes(date)];
-}
-export function modulo(n, m) {
-  return (n % m + m) % m;
-}

package/dist/esm/ToggleSwitch/ToggleSwitch.js

@@ -1,82 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import { Box } from '../Box';
-import Button from '../Button';
-import { colors } from '../system/colors';
-import { StackView } from '../StackView';
-import Text from '../Text';
-import { useThemeProps } from '../system';
-export function ToggleSwitch(props) {
-  var _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      isChecked = props.isChecked,
-      label = props.label,
-      onClick = props.onClick,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'md' : _props$size,
-      tooltip = props.tooltip,
-      restProps = _objectWithoutPropertiesLoose(props, ["disabled", "isChecked", "label", "onClick", "size", "tooltip"]);
-
-  var _useThemeProps = useThemeProps('toggleSwitch', restProps),
-      backgroundColor = _useThemeProps.backgroundColor;
-
-  var toggleButtonProps = {
-    height: 2.5,
-    width: 4.375
-  };
-  var toggleNotchProps = {
-    height: 2,
-    width: 2
-  };
-
-  if (size === 'sm') {
-    toggleButtonProps = {
-      height: 2.25,
-      width: 4
-    };
-    toggleNotchProps = {
-      height: 1.75,
-      width: 1.75
-    };
-  } else if (size === 'xs') {
-    toggleButtonProps = {
-      height: 2,
-      width: 3.5
-    };
-    toggleNotchProps = {
-      height: 1.5,
-      width: 1.5
-    };
-  }
-
-  return /*#__PURE__*/React.createElement(StackView, {
-    alignment: "center",
-    axis: "horizontal",
-    spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
-  }, /*#__PURE__*/React.createElement(Button, _extends({
-    "aria-checked": isChecked,
-    as: "button",
-    backgroundColor: disabled ? colors.grays.light.neutral81 : isChecked ? backgroundColor : colors.grays.light.neutral62,
-    onClick: onClick,
-    opacity: 1,
-    position: "relative",
-    radius: "pill",
-    role: "switch",
-    theme: false,
-    disabled: disabled,
-    tooltip: tooltip
-  }, toggleButtonProps), /*#__PURE__*/React.createElement(Box, _extends({
-    background: "#fff",
-    left: 0.25,
-    pointerEvents: "none",
-    position: "absolute",
-    radius: "circle",
-    top: 0.25,
-    transform: "translateX(" + (isChecked ? 'calc(100% - 1px)' : '0%') + ")",
-    transition: "120ms"
-  }, toggleNotchProps))), label && /*#__PURE__*/React.createElement(Text, {
-    size: size === 'xs' ? 5 : size === 'sm' ? 4 : 3
-  }, label));
-}
-export default ToggleSwitch;

package/dist/esm/ToggleSwitch/ToggleSwitch.test.js

@@ -1,136 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import ToggleSwitch from './ToggleSwitch';
-var base = 8;
-describe('ToggleSwitch component', function () {
-  it('should render with default properties', function () {
-    var _render = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isChecked: false,
-      label: "Toggle me",
-      onClick: function onClick() {}
-    })),
-        getByRole = _render.getByRole;
-
-    var toggleButton = getByRole('switch');
-    expect(toggleButton).toBeInTheDocument();
-  });
-  it('should call onClick when clicked', function () {
-    var mockOnClick = jest.fn();
-
-    var _render2 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isChecked: false,
-      label: "Toggle me",
-      onClick: mockOnClick
-    })),
-        getByRole = _render2.getByRole;
-
-    var toggleButton = getByRole('switch');
-    fireEvent.click(toggleButton);
-    expect(mockOnClick).toHaveBeenCalled();
-  });
-  it('should display the label', function () {
-    var label = 'Toggle me';
-
-    var _render3 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isChecked: false,
-      label: label,
-      onClick: function onClick() {}
-    })),
-        getByText = _render3.getByText;
-
-    expect(getByText(label)).toBeInTheDocument();
-  });
-  it('should apply active color when isChecked is true', function () {
-    var activeColor = 'green';
-
-    var _render4 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      backgroundColor: activeColor,
-      isChecked: true,
-      label: "Toggle me",
-      onClick: function onClick() {}
-    })),
-        getByRole = _render4.getByRole;
-
-    var toggleButton = getByRole('switch');
-    expect(toggleButton).toHaveStyle("background-color: " + activeColor);
-  });
-  it('should apply aria-checked="true" when isChecked is true', function () {
-    var _render5 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isChecked: true,
-      label: "Toggle me",
-      onClick: function onClick() {}
-    })),
-        getByRole = _render5.getByRole;
-
-    var toggleButton = getByRole('switch');
-    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
-  });
-  it('should apply aria-checked="false" when isChecked is false', function () {
-    var _render6 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isChecked: false,
-      label: "Toggle me",
-      onClick: function onClick() {}
-    })),
-        getByRole = _render6.getByRole;
-
-    var toggleButton = getByRole('switch');
-    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
-  });
-  it('should not be clickable when disabled', function () {
-    var mockOnClick = jest.fn();
-
-    var _render7 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      disabled: true,
-      isChecked: false,
-      label: "Toggle me",
-      onClick: mockOnClick
-    })),
-        getByRole = _render7.getByRole;
-
-    var toggleButton = getByRole('switch');
-    fireEvent.click(toggleButton);
-    expect(mockOnClick).not.toHaveBeenCalled();
-  });
-  describe('it should apply the correct size', function () {
-    it("should apply the correct size for xs", function () {
-      var _render8 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-        isChecked: false,
-        label: "Toggle me",
-        onClick: function onClick() {},
-        size: "xs"
-      })),
-          getByRole = _render8.getByRole;
-
-      var toggleButton = getByRole('switch');
-      expect(toggleButton).toHaveStyle("height: " + base * 2 + "px");
-      expect(toggleButton).toHaveStyle("width: " + base * 3.5 + "px");
-    });
-    it("should apply the correct size for sm", function () {
-      var _render9 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-        isChecked: false,
-        label: "Toggle me",
-        onClick: function onClick() {},
-        size: "sm"
-      })),
-          getByRole = _render9.getByRole;
-
-      var toggleButton = getByRole('switch');
-      expect(toggleButton).toHaveStyle("height: " + base * 2.25 + "px");
-      expect(toggleButton).toHaveStyle("width: " + base * 4 + "px");
-    });
-    it("should apply the correct default size (md)", function () {
-      var _render10 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-        isChecked: false,
-        label: "Toggle me",
-        onClick: function onClick() {},
-        size: "md"
-      })),
-          getByRole = _render10.getByRole;
-
-      var toggleButton = getByRole('switch');
-      expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
-      expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
-    });
-  });
-});

package/dist/esm/ToggleSwitch/index.js

@@ -1,2 +0,0 @@
-export * from './ToggleSwitch';
-export { ToggleSwitch as default } from './ToggleSwitch';

package/dist/esm/TokenInput/DefaultToken.js

@@ -1,31 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import Badge from '../Badge';
-import Icon from '../Icon';
-
-function DefaultToken(_ref) {
-  var keyboardControls = _ref.keyboardControls,
-      removeToken = _ref.removeToken,
-      selectFirstToken = _ref.selectFirstToken,
-      selectLastToken = _ref.selectLastToken,
-      selectPreviousToken = _ref.selectPreviousToken,
-      selectNextToken = _ref.selectNextToken,
-      token = _ref.token,
-      tokenIndex = _ref.tokenIndex,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["keyboardControls", "removeToken", "selectFirstToken", "selectLastToken", "selectPreviousToken", "selectNextToken", "token", "tokenIndex"]);
-
-  return /*#__PURE__*/React.createElement(Badge, _extends({
-    size: "sm",
-    renderRight: /*#__PURE__*/React.createElement(Icon, {
-      name: "general.x",
-      size: "xs",
-      cursor: "pointer",
-      onClick: function onClick() {
-        return removeToken(false);
-      }
-    })
-  }, keyboardControls, restProps), token);
-}
-
-export default DefaultToken;