@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.10

package/build/Pill/Choice/Choice.js

@@ -7,103 +7,93 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
-
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Choice = /*#__PURE__*/function (_React$Component) {
-  _inherits(Choice, _React$Component);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-  var _super = _createSuper(Choice);
-
-  function Choice(props) {
-    var _this;
+var getStylesByStatus = function getStylesByStatus(selected, disabled) {
+  if (selected) {
+    if (disabled) {
+      return {
+        iconColor: _colors["default"].icon.inverse.disabled,
+        button: 'selectedDisabled',
+        text: 'textSelectedDisabled'
+      };
+    }
 
-    _classCallCheck(this, Choice);
+    return {
+      iconColor: _colors["default"].icon.inverse["default"],
+      button: 'selected',
+      text: 'textSelected'
+    };
+  }
 
-    _this = _super.call(this, props);
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
+  if (disabled) {
+    return {
+      iconColor: _colors["default"].icon.brand.disabled,
+      button: 'disabled',
+      text: 'textDisabled'
+    };
   }
 
-  _createClass(Choice, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          onClick = _this$props.onClick;
-      if (onClick) onClick(id);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          children = _this$props2.children,
-          selected = _this$props2.selected,
-          disabled = _this$props2.disabled,
-          idPrefix = _this$props2.idPrefix,
-          testId = _this$props2.testId,
-          leftIcon = _this$props2.leftIcon,
-          rightIcon = _this$props2.rightIcon,
-          id = _this$props2.id;
-      var iconColor = disabled ? _colors["default"].grey200 : selected ? _colors["default"].prim : _colors["default"].grey900;
-      return /*#__PURE__*/_react["default"].createElement("button", {
-        className: "".concat(classes.pill).concat(selected ? " ".concat(classes.selected) : disabled ? " ".concat(classes.disabled) : ''),
-        onClick: this.handleOnClick,
-        id: idPrefix ? "".concat(idPrefix).concat(id) : null,
-        "data-testid": testId ? "".concat(testId).concat(id) : null
-      }, leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: leftIcon,
-        colors: [iconColor],
-        width: _iconSizes["default"].small,
-        height: _iconSizes["default"].small
-      }), children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        tag: "span",
-        className: classes.text,
-        primary: selected,
-        disabled: disabled
-      }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: rightIcon,
-        colors: [iconColor],
-        width: _iconSizes["default"].small,
-        height: _iconSizes["default"].small
-      }));
-    }
-  }]);
+  return {
+    iconColor: _colors["default"].icon.brand["default"],
+    button: 'enabled',
+    text: 'textEnabled'
+  };
+};
 
-  return Choice;
-}(_react["default"].Component);
+var Choice = function Choice(props) {
+  var classes = props.classes,
+      children = props.children,
+      selected = props.selected,
+      disabled = props.disabled,
+      idPrefix = props.idPrefix,
+      testId = props.testId,
+      leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      onClick = props.onClick,
+      id = props.id;
+  var handleOnClick = (0, _react.useCallback)(function () {
+    return onClick(id);
+  }, [onClick, id]);
+  var conditionedStyles = (0, _react.useMemo)(function () {
+    return getStylesByStatus(!!selected, !!disabled);
+  }, [selected, disabled]);
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({
+    className: "".concat(classes.pill, " ").concat(classes[conditionedStyles.button])
+  }, onClick && {
+    onClick: handleOnClick
+  }, {
+    disabled: disabled,
+    id: idPrefix ? "".concat(idPrefix).concat(id) : null,
+    "data-testid": testId ? "".concat(testId).concat(id) : null
+  }), leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: leftIcon,
+    colors: [conditionedStyles.iconColor],
+    width: 18,
+    height: 18
+  }), children && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.text, " ").concat(classes[conditionedStyles.text])
+  }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: rightIcon,
+    colors: [conditionedStyles.iconColor],
+    width: 18,
+    height: 18
+  }));
+};
 
 Choice.propTypes = {
   classes: _propTypes["default"].object.isRequired,

package/build/Pill/Choice/styles.js

@@ -5,55 +5,96 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
     height: 32,
-    padding: "0 ".concat(_spacing["default"].gutter, "px"),
-    marginBottom: _spacing["default"].tiny,
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-2']],
+    marginBottom: _spacing["default"]['size-2'],
     position: 'relative',
     zIndex: 0,
-    outline: 0,
+    border: 0,
     transition: '0.3s all',
     cursor: 'pointer',
-    borderRadius: _spacing["default"].small,
+    borderRadius: _borderRadius["default"]['br-md'],
     maxWidth: '100%',
+    outline: 0,
     display: 'inline-flex',
     alignItems: 'center',
     minWidth: 'auto',
     '&:not(:last-child)': {
-      marginRight: _spacing["default"].tiny
-    },
+      marginRight: _spacing["default"]['size-2']
+    }
+  },
+  enabled: {
+    background: _colors["default"].pill.unselected.bg["default"],
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: _colors["default"].pill.unselected.bg["default"]
     }
   },
+  disabled: {
+    background: _colors["default"].pill.unselected.bg.disabled,
+    pointerEvents: 'none'
+  },
   selected: {
-    background: "".concat(_colors["default"].primLighter, " !important"),
+    background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
     zIndex: 1,
-    borderColor: _colors["default"].prim,
-    color: _colors["default"].prim
+    color: _colors["default"].text.white.primary,
+    '&:hover': {
+      background: _colors["default"].pill.selected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.selected.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
+    }
   },
-  disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+  selectedDisabled: {
+    background: _colors["default"].pill.selected.bg.disabled,
     pointerEvents: 'none'
   },
   text: {
     flex: 1,
     overflow: 'hidden',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginLeft: _spacing["default"].xTiny,
-    marginRight: _spacing["default"].xTiny
+    padding: [0, _spacing["default"]['size-1']],
+    marginLeft: _spacing["default"]['size-1'],
+    marginRight: _spacing["default"]['size-1']
+  },
+  textSelectedDisabled: {
+    color: _colors["default"].text.white.secondary
+  },
+  textSelected: {
+    color: _colors["default"].text.white.primary
+  },
+  textDisabled: {
+    color: _colors["default"].text.indigo.secondary
+  },
+  textEnabled: {
+    color: _colors["default"].text.indigo.primary
   }
 };
 exports["default"] = _default;

package/build/Pill/Group/Group.js

@@ -17,7 +17,8 @@ var Group = function Group(_ref) {
       selected = _ref.selected,
       onSelect = _ref.onSelect,
       idPrefix = _ref.idPrefix,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      disabled = _ref.disabled;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.pillGroup
   }, items.map(function (item, index) {
@@ -25,7 +26,8 @@ var Group = function Group(_ref) {
       key: item.id,
       id: idPrefix ? "".concat(idPrefix).concat(item.id) : null,
       "data-testid": testId ? "".concat(testId).concat(index) : null,
-      className: "".concat(classes.pill).concat(selected == item.id ? " ".concat(classes.selected) : item.disabled ? " ".concat(classes.disabled) : ''),
+      disabled: disabled || item.disabled,
+      className: "".concat(classes.pill).concat(selected == item.id ? " ".concat(classes.selected) : disabled || item.disabled ? " ".concat(classes.disabled) : ''),
       onClick: selected != item.id ? function () {
         onSelect(item.id, index);
       } : null
@@ -38,6 +40,7 @@ Group.propTypes = {
   items: _propTypes["default"].array,
   onSelect: _propTypes["default"].func,
   selected: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  disabled: _propTypes["default"].bool,
   idPrefix: _propTypes["default"].string,
   testId: _propTypes["default"].string
 };

package/build/Pill/Group/styles.js

@@ -5,62 +5,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../../subatomic/fonts"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pillGroup: {
-    display: 'flex'
+    display: 'flex',
+    background: _colors["default"].pill.unselected.bg["default"],
+    borderRadius: _borderRadius["default"]['br-full'],
+    marginBottom: _spacing["default"]['size-2']
   },
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    color: _colors["default"].ink,
-    fontFamily: _fonts["default"].body,
-    fontSize: 15,
-    fontWeight: 400,
-    lineHeight: "".concat(_spacing["default"].base, "px"),
-    height: _spacing["default"].medium,
-    padding: [0, _spacing["default"].small],
+    color: _colors["default"].text.indigo.primary,
+    background: 'none',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    height: _spacing["default"]['size-6'],
+    padding: [0, _spacing["default"]['size-4']],
+    outline: 0,
+    borderRadius: _borderRadius["default"]['br-md'],
     position: 'relative',
     zIndex: 1,
-    outline: 0,
+    border: 0,
     flex: 1,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     transition: '0.3s all',
     cursor: 'pointer',
-    '&:first-child': {
-      borderTopLeftRadius: _spacing["default"].small,
-      borderBottomLeftRadius: _spacing["default"].small
-    },
-    '&:last-child': {
-      borderTopRightRadius: _spacing["default"].small,
-      borderBottomRightRadius: _spacing["default"].small
-    },
-    '&:not(:first-child)': {
-      marginLeft: -1
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: 'none'
     },
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.unselected.bg.active
     }
   },
   selected: {
-    background: "".concat(_colors["default"].primLighter, " !important"),
+    background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
     zIndex: 2,
-    borderColor: _colors["default"].prim,
-    color: _colors["default"].prim
+    color: _colors["default"].text.white.primary
   },
   disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+    color: _colors["default"].text.indigo.secondary,
     zIndex: 0,
     pointerEvents: 'none'
   }

package/build/Pill/Pill.js

@@ -144,16 +144,17 @@ var Pill = /*#__PURE__*/function (_Component) {
       var errorStatus = error && (touched || allowError);
       if (disabled) realStatus = 'disabled';else if (errorStatus) realStatus = 'error';
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.container).concat(realStatus == 'disabled' ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
+        className: "".concat(classes.container).concat(className ? " ".concat(className) : ''),
         id: id,
         style: style
       }, (label || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.top
       }, label && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left)
+        className: classes.label
       }, label)), group ? /*#__PURE__*/_react["default"].createElement(_Group["default"], {
         items: group,
         onSelect: this.handleGroupOnSelect,
+        disabled: disabled,
         selected: selected,
         idPrefix: idPrefix,
         testId: testId
@@ -186,7 +187,7 @@ var Pill = /*#__PURE__*/function (_Component) {
       })) : null, (assistiveText || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
       }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.assistiveText)
+        className: "".concat(classes.assistiveText, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.validAssistiveText)
       }, realStatus == 'error' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "warningSolid",
         width: 14,

package/build/Pill/Stack/Stack.js

@@ -9,13 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
-
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -39,15 +35,14 @@ var Stack = function Stack(_ref) {
       testId = _ref.testId;
   return /*#__PURE__*/_react["default"].createElement("button", {
     className: "".concat(classes.pill).concat(disabled ? " ".concat(classes.disabled) : ''),
+    disabled: disabled,
     onClick: function onClick() {
       handleOnClick(id, _onClick);
     },
     id: idPrefix ? "".concat(idPrefix).concat(id) : null,
     "data-testid": testId ? "".concat(testId).concat(id) : null
-  }, children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    className: classes.text,
-    tag: "span",
-    disabled: disabled
+  }, children && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.text).concat(disabled ? " ".concat(classes.textDisabled) : '')
   }, children), onClose && /*#__PURE__*/_react["default"].createElement("span", {
     className: classes.closeCont,
     onClick: function onClick(e) {
@@ -56,9 +51,9 @@ var Stack = function Stack(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     className: classes.close,
     iconName: "cross",
-    colors: [_colors["default"].grey300],
-    width: _iconSizes["default"].small,
-    height: _iconSizes["default"].small
+    colors: [disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.brand["default"]],
+    width: 18,
+    height: 18
   })));
 };
 

package/build/Pill/Stack/styles.js

@@ -5,63 +5,76 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    maxWidth: '100%',
     height: 32,
-    padding: "0 ".concat(_spacing["default"].gutter, "px"),
-    marginBottom: _spacing["default"].tiny,
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-2']],
+    marginBottom: _spacing["default"]['size-2'],
     position: 'relative',
     zIndex: 0,
+    border: 0,
+    transition: '0.3s all',
+    cursor: 'pointer',
+    borderRadius: _borderRadius["default"]['br-md'],
+    maxWidth: '100%',
     outline: 0,
-    flex: 1,
     display: 'inline-flex',
     alignItems: 'center',
-    transition: '0.3s all',
-    cursor: 'pointer',
-    borderRadius: _spacing["default"].small,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    minWidth: 'auto',
     '&:not(:last-child)': {
-      marginRight: _spacing["default"].tiny
-    },
-    '&:not(:first-child)': {
-      marginLeft: -1
+      marginRight: _spacing["default"]['size-2']
     },
+    background: _colors["default"].pill.unselected.bg["default"],
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: _colors["default"].pill.unselected.bg["default"]
     }
   },
   disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+    background: _colors["default"].pill.unselected.bg.disabled,
     pointerEvents: 'none'
   },
-  closeCont: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: -_spacing["default"].xTiny,
-    marginLeft: -_spacing["default"].xTiny
-  },
   text: {
+    flex: 1,
     overflow: 'hidden',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.indigo.primary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginLeft: _spacing["default"].xTiny,
-    marginRight: _spacing["default"].xTiny
+    padding: [0, _spacing["default"]['size-1']],
+    marginRight: _spacing["default"]['size-1']
+  },
+  textDisabled: {
+    color: _colors["default"].text.indigo.secondary
+  },
+  closeCont: {
+    width: _spacing["default"]['size-5'],
+    height: _spacing["default"]['size-5'],
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: -_spacing["default"]['size-1'],
+    marginLeft: -_spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;