@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

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

@@ -0,0 +1,384 @@
+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

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

package/dist/esm/TimeField/utils.js

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,83 @@
+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 { colors } from '../system/colors';
+import { StackView } from '../StackView';
+import Text from '../Text';
+import Tooltip from '../Tooltip';
+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(Tooltip, {
+    title: tooltip
+  }, /*#__PURE__*/React.createElement(StackView, {
+    alignment: "center",
+    "aria-checked": isChecked ? 'true' : 'false',
+    as: "button",
+    axis: "horizontal",
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    onClick: disabled ? undefined : onClick,
+    radius: "pill",
+    role: "switch",
+    spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    backgroundColor: disabled ? colors.grays.light.neutral81 : isChecked ? backgroundColor : colors.grays.light.neutral62,
+    position: "relative",
+    radius: "pill"
+  }, 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

@@ -0,0 +1,136 @@
+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 toggleSwitch = getByRole('switch');
+    expect(toggleSwitch).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 toggleSwitch = getByRole('switch');
+    fireEvent.click(toggleSwitch);
+    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 toggleSwitchGraphicElement = getByRole('switch').firstElementChild;
+    expect(toggleSwitchGraphicElement).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 toggleSwitch = getByRole('switch');
+    expect(toggleSwitch).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 toggleSwitch = getByRole('switch');
+    expect(toggleSwitch).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 toggleSwitchGraphicElement = getByRole('switch').firstElementChild;
+    fireEvent.click(toggleSwitchGraphicElement);
+    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 toggleSwitchGraphicElement = getByRole('switch').firstElementChild;
+      expect(toggleSwitchGraphicElement).toHaveStyle("height: " + base * 2 + "px");
+      expect(toggleSwitchGraphicElement).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 toggleSwitchGraphicElement = getByRole('switch').firstElementChild;
+      expect(toggleSwitchGraphicElement).toHaveStyle("height: " + base * 2.25 + "px");
+      expect(toggleSwitchGraphicElement).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 toggleSwitchGraphicElement = getByRole('switch').firstElementChild;
+      expect(toggleSwitchGraphicElement).toHaveStyle("height: " + base * 2.5 + "px");
+      expect(toggleSwitchGraphicElement).toHaveStyle("width: " + base * 4.375 + "px");
+    });
+  });
+});

package/dist/esm/ToggleSwitch/index.js

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

package/dist/esm/TokenInput/DefaultToken.js

@@ -0,0 +1,31 @@
+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;