@semcore/pills 3.5.5 → 4.0.2

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.0.2] - 2022-05-19
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/utils` [3.32.0 ~> 3.32.1], `@semcore/flex-box` [4.5.1 ~> 4.5.3], `@semcore/neighbor-location` [2.3.5 ~> 2.3.6], `@semcore/icon` [2.25.0 ~> 2.25.1], `@semcore/badge` [3.0.0 ~> 3.0.1]).
+
+## [4.0.1] - 2022-05-18
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.24.0 ~> 2.25.0]).
+
+## [4.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+- Remove value "xl"/"s"" for "size".
+
 ## [3.5.5] - 2022-03-14
 
 ### Changed

package/lib/cjs/Pills.js

@@ -52,25 +52,23 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SPills_1gi6g_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1gi6g_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;color:#666666;background:#fff;border:1px solid #a6b0b3}.___SPill_1gi6g_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1gi6g_gg_:active,.___SPill_1gi6g_gg_:focus,.___SPill_1gi6g_gg_:hover{outline:0;text-decoration:none}.___SPill_1gi6g_gg_:hover{background:rgba(166,176,179,.2)}.___SPill_1gi6g_gg_.__selected_1gi6g_gg_{background:rgba(43,148,225,.2);border-color:#2b94e1;z-index:1}.___SPill_1gi6g_gg_.__selected_1gi6g_gg_:enabled:hover{background:rgba(43,148,225,.2)}.___SPill_1gi6g_gg_.__disabled_1gi6g_gg_{cursor:default;pointer-events:none}.___SPill_1gi6g_gg_.__disabled_1gi6g_gg_>*{opacity:0.3}.___SPill_1gi6g_gg_.__keyboardFocused_1gi6g_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SText_1gi6g_gg_{color:#333333;display:inline-flex;line-height:1.1}.___SAddon_1gi6g_gg_{color:#757575;display:inline-flex;align-items:center;justify-content:center;line-height:1.1}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:4px;margin-right:4px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:4px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:4px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:8px;margin-right:8px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:8px;margin-right:8px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:12px;margin-right:12px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-6px;margin-right:-6px}.___SPill_1gi6g_gg_._neighborLocation_right_1gi6g_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1gi6g_gg_._neighborLocation_both_1gi6g_gg_{border-radius:0;margin-left:-1px}.___SPill_1gi6g_gg_._neighborLocation_left_1gi6g_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
+".___SPills_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_1frzm_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1frzm_gg_:active,.___SPill_1frzm_gg_:focus,.___SPill_1frzm_gg_:hover{outline:0;text-decoration:none}.___SPill_1frzm_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1frzm_gg_.__selected_1frzm_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1frzm_gg_.__disabled_1frzm_gg_{cursor:default;pointer-events:none}.___SPill_1frzm_gg_.__disabled_1frzm_gg_>*{opacity:0.3}.___SPill_1frzm_gg_.__keyboardFocused_1frzm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1frzm_gg_{color:#191b23;display:inline-flex}.___SAddon_1frzm_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_._size_m_1frzm_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._neighborLocation_right_1frzm_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1frzm_gg_._neighborLocation_both_1frzm_gg_{border-radius:0;margin-left:-1px}.___SPill_1frzm_gg_._neighborLocation_left_1frzm_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
 /*__inner_css_end__*/
-, "1y1hdgc_gg_")
+, "1dqcagg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPills": "___SPills_1gi6g_gg_",
-  "__SPill": "___SPill_1gi6g_gg_",
-  "_selected": "__selected_1gi6g_gg_",
-  "_disabled": "__disabled_1gi6g_gg_",
-  "_keyboardFocused": "__keyboardFocused_1gi6g_gg_",
-  "__SText": "___SText_1gi6g_gg_",
-  "__SAddon": "___SAddon_1gi6g_gg_",
-  "_size_s": "_size_s_1gi6g_gg_",
-  "_size_m": "_size_m_1gi6g_gg_",
-  "_size_l": "_size_l_1gi6g_gg_",
-  "_size_xl": "_size_xl_1gi6g_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1gi6g_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1gi6g_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1gi6g_gg_"
+  "__SPills": "___SPills_1frzm_gg_",
+  "__SPill": "___SPill_1frzm_gg_",
+  "_selected": "__selected_1frzm_gg_",
+  "_disabled": "__disabled_1frzm_gg_",
+  "_keyboardFocused": "__keyboardFocused_1frzm_gg_",
+  "__SText": "___SText_1frzm_gg_",
+  "__SAddon": "___SAddon_1frzm_gg_",
+  "_size_m": "_size_m_1frzm_gg_",
+  "_size_l": "_size_l_1frzm_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_1frzm_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_1frzm_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1frzm_gg_"
 });
 
 var RootPills = /*#__PURE__*/function (_Component) {
@@ -120,7 +118,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref5;
 
       var SPills = _flexBox.Box;
@@ -144,7 +142,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
 });
 
 function Pill(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref6;
 
   var SPill = _flexBox.Box;
@@ -165,7 +163,7 @@ function Pill(props) {
 Pill.enhance = [(0, _keyboardFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()];
 
 function Text(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref7;
 
   var SText = _flexBox.Box;
@@ -175,7 +173,7 @@ function Text(props) {
 }
 
 function Addon(props) {
-  var _ref4 = this ? this.asProps : arguments[0],
+  var _ref4 = arguments[0],
       _ref8;
 
   var SAddon = _flexBox.Box;

package/lib/cjs/Pills.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Pills.jsx"],"names":["RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Box","Children","styles","controlsLength","Component","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n  static displayName = 'Pills';\n  static style = style;\n  static defaultProps = {\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value, size, disabled } = this.asProps;\n    return {\n      size,\n      disabled,\n      selected: value === props.value,\n      onClick: this.bindHandlerClick(props.value),\n    };\n  }\n\n  render() {\n    const SPills = Root;\n    const { Children, styles, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <SPills render={Box}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n      </SPills>,\n    );\n  }\n}\n\nfunction Pill(props) {\n  const SPill = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <SPill render={Box} type=\"button\" tag=\"button\">\n      {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n      {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n    </SPill>,\n  );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n  Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}
+{"version":3,"sources":["../../src/Pills.jsx"],"names":["RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Box","Children","styles","controlsLength","Component","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n  static displayName = 'Pills';\n  static style = style;\n  static defaultProps = {\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value, size, disabled } = this.asProps;\n    return {\n      size,\n      disabled,\n      selected: value === props.value,\n      onClick: this.bindHandlerClick(props.value),\n    };\n  }\n\n  render() {\n    const SPills = Root;\n    const { Children, styles, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <SPills render={Box}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n      </SPills>,\n    );\n  }\n}\n\nfunction Pill(props) {\n  const SPill = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <SPill render={Box} type=\"button\" tag=\"button\">\n      {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n      {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n    </SPill>,\n  );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n  Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}

package/lib/cjs/index.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { Box, IBoxProps } from '@semcore/flex-box';
+import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+
+export type PillsValue = string | number | boolean;
+
+export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
+  /** Pills size */
+  size?: 'l' | 'm';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Called when the selection is changed */
+  onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
+  /** Value for the selected pill */
+  value?: T;
+  /** Default value for the selected pill */
+  defaultValue?: T;
+}
+
+export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
+  /** Pill value */
+  value?: PillsValue;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Selected state */
+  selected?: boolean;
+  /** Left addon text */
+  addonLeft?: React.ElementType;
+  /** Right addon tag */
+  addonRight?: React.ElementType;
+}
+
+export interface IPillsContext {
+  getItemProps: PropGetterFn;
+}
+
+export interface IPopperHandlers {
+  value: (value: PillsValue) => void;
+}
+
+declare const Pills: (<T, V extends PillsValue = PillsValue>(
+  props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
+) => ReturnEl) & {
+  Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
+    Text: typeof Box;
+    Addon: typeof Box;
+  };
+};
+
+export default Pills;

package/lib/cjs/index.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _Pills = _interopRequireWildcard(require("./Pills"));
-
-Object.keys(_Pills).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Pills[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Pills[key];
-    }
-  });
-});
-
-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 _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 _Pills = _interopRequireDefault(require("./Pills"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './Pills';\n"],"file":"index.js"}

package/lib/cjs/style/pills.shadow.css

@@ -28,9 +28,9 @@ SPill {
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
-  color: var(--gray40);
-  background: #fff;
-  border: 1px solid var(--stone);
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-m);
 
   &::-moz-focus-inner {
     border: none;
@@ -45,18 +45,14 @@ SPill {
   }
 
   &:hover {
-    background: color-mod(var(--stone) a(20%));
+    background: color-mod(var(--gray-400) a(20%));
   }
 }
 
 SPill[selected] {
-  background: color-mod(var(--light-blue) a(20%));
-  border-color: var(--light-blue);
+  background: color-mod(var(--blue-400) a(20%));
+  border-color: var(--blue-400);
   z-index: 1;
-
-  &:enabled:hover {
-    background: color-mod(var(--light-blue) a(20%));
-  }
 }
 
 SPill[disabled] {
@@ -69,55 +65,25 @@ SPill[disabled] {
 }
 
 SPill[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
 }
 
 SText {
-  color: var(--gray20);
+  color: var(--gray-800);
   display: inline-flex;
-  line-height: 1.1;
 }
 
 SAddon {
-  color: var(--gray60);
+  color: var(--gray-500);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  line-height: 1.1;
-}
-
-SPill[size='s'] {
-  height: 18px;
-  min-width: 18px;
-  border-radius: 2px;
-  font-size: 10px;
-
-  & SText {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 4px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 4px;
-    }
-
-    &:only-child {
-      margin-left: -2px;
-      margin-right: -2px;
-    }
-  }
 }
 
 SPill[size='m'] {
-  height: 26px;
-  min-width: 26px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: var(--form-control-m);
+  min-width: var(--form-control-m);
+  font-size: var(--fs-200);
 
   & SText {
     margin-left: 8px;
@@ -134,49 +100,26 @@ SPill[size='m'] {
     }
 
     &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
+      margin-left: 8px;
+      margin-right: 8px;
     }
   }
 }
 
 SPill[size='l'] {
-  height: 32px;
-  min-width: 32px;
-  border-radius: 4px;
-  font-size: 14px;
+  height: var(--form-control-l);
+  min-width: var(--form-control-l);
+  font-size: var(--fs-300);
 
   & SText {
     margin-left: 8px;
     margin-right: 8px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 8px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 8px;
-    }
 
     &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
+      margin-left: 12px;
+      margin-right: 12px;
     }
   }
-}
-
-SPill[size='xl'] {
-  height: 42px;
-  min-width: 42px;
-  border-radius: 5px;
-  font-size: 16px;
-
-  & SText {
-    margin-left: 12px;
-    margin-right: 12px;
-  }
 
   & SAddon {
     &:not(:only-child):first-child {
@@ -188,8 +131,8 @@ SPill[size='xl'] {
     }
 
     &:only-child {
-      margin-left: -6px;
-      margin-right: -6px;
+      margin-left: 12px;
+      margin-right: 12px;
     }
   }
 }

package/lib/es6/Pills.js

@@ -31,25 +31,23 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SPills_1gi6g_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1gi6g_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;color:#666666;background:#fff;border:1px solid #a6b0b3}.___SPill_1gi6g_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1gi6g_gg_:active,.___SPill_1gi6g_gg_:focus,.___SPill_1gi6g_gg_:hover{outline:0;text-decoration:none}.___SPill_1gi6g_gg_:hover{background:rgba(166,176,179,.2)}.___SPill_1gi6g_gg_.__selected_1gi6g_gg_{background:rgba(43,148,225,.2);border-color:#2b94e1;z-index:1}.___SPill_1gi6g_gg_.__selected_1gi6g_gg_:enabled:hover{background:rgba(43,148,225,.2)}.___SPill_1gi6g_gg_.__disabled_1gi6g_gg_{cursor:default;pointer-events:none}.___SPill_1gi6g_gg_.__disabled_1gi6g_gg_>*{opacity:0.3}.___SPill_1gi6g_gg_.__keyboardFocused_1gi6g_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SText_1gi6g_gg_{color:#333333;display:inline-flex;line-height:1.1}.___SAddon_1gi6g_gg_{color:#757575;display:inline-flex;align-items:center;justify-content:center;line-height:1.1}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:4px;margin-right:4px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:4px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:4px}.___SPill_1gi6g_gg_._size_s_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:8px;margin-right:8px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1gi6g_gg_._size_m_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:8px;margin-right:8px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1gi6g_gg_._size_l_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SText_1gi6g_gg_{margin-left:12px;margin-right:12px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SAddon_1gi6g_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1gi6g_gg_._size_xl_1gi6g_gg_ .___SAddon_1gi6g_gg_:only-child{margin-left:-6px;margin-right:-6px}.___SPill_1gi6g_gg_._neighborLocation_right_1gi6g_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1gi6g_gg_._neighborLocation_both_1gi6g_gg_{border-radius:0;margin-left:-1px}.___SPill_1gi6g_gg_._neighborLocation_left_1gi6g_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
+".___SPills_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_1frzm_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1frzm_gg_:active,.___SPill_1frzm_gg_:focus,.___SPill_1frzm_gg_:hover{outline:0;text-decoration:none}.___SPill_1frzm_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1frzm_gg_.__selected_1frzm_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1frzm_gg_.__disabled_1frzm_gg_{cursor:default;pointer-events:none}.___SPill_1frzm_gg_.__disabled_1frzm_gg_>*{opacity:0.3}.___SPill_1frzm_gg_.__keyboardFocused_1frzm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1frzm_gg_{color:#191b23;display:inline-flex}.___SAddon_1frzm_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_._size_m_1frzm_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._neighborLocation_right_1frzm_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1frzm_gg_._neighborLocation_both_1frzm_gg_{border-radius:0;margin-left:-1px}.___SPill_1frzm_gg_._neighborLocation_left_1frzm_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
 /*__inner_css_end__*/
-, "1y1hdgc_gg_")
+, "1dqcagg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPills": "___SPills_1gi6g_gg_",
-  "__SPill": "___SPill_1gi6g_gg_",
-  "_selected": "__selected_1gi6g_gg_",
-  "_disabled": "__disabled_1gi6g_gg_",
-  "_keyboardFocused": "__keyboardFocused_1gi6g_gg_",
-  "__SText": "___SText_1gi6g_gg_",
-  "__SAddon": "___SAddon_1gi6g_gg_",
-  "_size_s": "_size_s_1gi6g_gg_",
-  "_size_m": "_size_m_1gi6g_gg_",
-  "_size_l": "_size_l_1gi6g_gg_",
-  "_size_xl": "_size_xl_1gi6g_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1gi6g_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1gi6g_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1gi6g_gg_"
+  "__SPills": "___SPills_1frzm_gg_",
+  "__SPill": "___SPill_1frzm_gg_",
+  "_selected": "__selected_1frzm_gg_",
+  "_disabled": "__disabled_1frzm_gg_",
+  "_keyboardFocused": "__keyboardFocused_1frzm_gg_",
+  "__SText": "___SText_1frzm_gg_",
+  "__SAddon": "___SAddon_1frzm_gg_",
+  "_size_m": "_size_m_1frzm_gg_",
+  "_size_l": "_size_l_1frzm_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_1frzm_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_1frzm_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1frzm_gg_"
 });
 
 var RootPills = /*#__PURE__*/function (_Component) {
@@ -101,7 +99,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref5;
 
       var SPills = Box;
@@ -128,7 +126,7 @@ _defineProperty(RootPills, "defaultProps", {
 });
 
 function Pill(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref6;
 
   var SPill = Box;
@@ -149,7 +147,7 @@ function Pill(props) {
 Pill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
 
 function Text(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref7;
 
   var SText = Box;
@@ -159,7 +157,7 @@ function Text(props) {
 }
 
 function Addon(props) {
-  var _ref4 = this ? this.asProps : arguments[0],
+  var _ref4 = arguments[0],
       _ref8;
 
   var SAddon = Box;

package/lib/es6/Pills.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Pills.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","keyboardFocusEnhance","addonTextChildren","RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Children","styles","controlsLength","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n  static displayName = 'Pills';\n  static style = style;\n  static defaultProps = {\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value, size, disabled } = this.asProps;\n    return {\n      size,\n      disabled,\n      selected: value === props.value,\n      onClick: this.bindHandlerClick(props.value),\n    };\n  }\n\n  render() {\n    const SPills = Root;\n    const { Children, styles, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <SPills render={Box}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n      </SPills>,\n    );\n  }\n}\n\nfunction Pill(props) {\n  const SPill = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <SPill render={Box} type=\"button\" tag=\"button\">\n      {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n      {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n    </SPill>,\n  );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n  Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}
+{"version":3,"sources":["../../src/Pills.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","keyboardFocusEnhance","addonTextChildren","RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Children","styles","controlsLength","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n  static displayName = 'Pills';\n  static style = style;\n  static defaultProps = {\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value, size, disabled } = this.asProps;\n    return {\n      size,\n      disabled,\n      selected: value === props.value,\n      onClick: this.bindHandlerClick(props.value),\n    };\n  }\n\n  render() {\n    const SPills = Root;\n    const { Children, styles, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <SPills render={Box}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n      </SPills>,\n    );\n  }\n}\n\nfunction Pill(props) {\n  const SPill = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <SPill render={Box} type=\"button\" tag=\"button\">\n      {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n      {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n    </SPill>,\n  );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n  Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}

package/lib/es6/index.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { Box, IBoxProps } from '@semcore/flex-box';
+import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+
+export type PillsValue = string | number | boolean;
+
+export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
+  /** Pills size */
+  size?: 'l' | 'm';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Called when the selection is changed */
+  onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
+  /** Value for the selected pill */
+  value?: T;
+  /** Default value for the selected pill */
+  defaultValue?: T;
+}
+
+export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
+  /** Pill value */
+  value?: PillsValue;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Selected state */
+  selected?: boolean;
+  /** Left addon text */
+  addonLeft?: React.ElementType;
+  /** Right addon tag */
+  addonRight?: React.ElementType;
+}
+
+export interface IPillsContext {
+  getItemProps: PropGetterFn;
+}
+
+export interface IPopperHandlers {
+  value: (value: PillsValue) => void;
+}
+
+declare const Pills: (<T, V extends PillsValue = PillsValue>(
+  props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
+) => ReturnEl) & {
+  Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
+    Text: typeof Box;
+    Addon: typeof Box;
+  };
+};
+
+export default Pills;

package/lib/es6/index.js

@@ -1,3 +1,2 @@
 export { default } from './Pills';
-export * from './Pills';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,cAAc,SAAd","sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB","sourcesContent":["export { default } from './Pills';\n"],"file":"index.js"}

package/lib/es6/style/pills.shadow.css

@@ -28,9 +28,9 @@ SPill {
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
-  color: var(--gray40);
-  background: #fff;
-  border: 1px solid var(--stone);
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-m);
 
   &::-moz-focus-inner {
     border: none;
@@ -45,18 +45,14 @@ SPill {
   }
 
   &:hover {
-    background: color-mod(var(--stone) a(20%));
+    background: color-mod(var(--gray-400) a(20%));
   }
 }
 
 SPill[selected] {
-  background: color-mod(var(--light-blue) a(20%));
-  border-color: var(--light-blue);
+  background: color-mod(var(--blue-400) a(20%));
+  border-color: var(--blue-400);
   z-index: 1;
-
-  &:enabled:hover {
-    background: color-mod(var(--light-blue) a(20%));
-  }
 }
 
 SPill[disabled] {
@@ -69,55 +65,25 @@ SPill[disabled] {
 }
 
 SPill[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
 }
 
 SText {
-  color: var(--gray20);
+  color: var(--gray-800);
   display: inline-flex;
-  line-height: 1.1;
 }
 
 SAddon {
-  color: var(--gray60);
+  color: var(--gray-500);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  line-height: 1.1;
-}
-
-SPill[size='s'] {
-  height: 18px;
-  min-width: 18px;
-  border-radius: 2px;
-  font-size: 10px;
-
-  & SText {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 4px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 4px;
-    }
-
-    &:only-child {
-      margin-left: -2px;
-      margin-right: -2px;
-    }
-  }
 }
 
 SPill[size='m'] {
-  height: 26px;
-  min-width: 26px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: var(--form-control-m);
+  min-width: var(--form-control-m);
+  font-size: var(--fs-200);
 
   & SText {
     margin-left: 8px;
@@ -134,49 +100,26 @@ SPill[size='m'] {
     }
 
     &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
+      margin-left: 8px;
+      margin-right: 8px;
     }
   }
 }
 
 SPill[size='l'] {
-  height: 32px;
-  min-width: 32px;
-  border-radius: 4px;
-  font-size: 14px;
+  height: var(--form-control-l);
+  min-width: var(--form-control-l);
+  font-size: var(--fs-300);
 
   & SText {
     margin-left: 8px;
     margin-right: 8px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 8px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 8px;
-    }
 
     &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
+      margin-left: 12px;
+      margin-right: 12px;
     }
   }
-}
-
-SPill[size='xl'] {
-  height: 42px;
-  min-width: 42px;
-  border-radius: 5px;
-  font-size: 16px;
-
-  & SText {
-    margin-left: 12px;
-    margin-right: 12px;
-  }
 
   & SAddon {
     &:not(:only-child):first-child {
@@ -188,8 +131,8 @@ SPill[size='xl'] {
     }
 
     &:only-child {
-      margin-left: -6px;
-      margin-right: -6px;
+      margin-left: 12px;
+      margin-right: 12px;
     }
   }
 }

package/lib/types/index.d.ts

@@ -8,7 +8,7 @@ export type PillsValue = string | number | boolean;
 
 export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
   /** Pills size */
-  size?: 'xl' | 'l' | 'm' | 's' | false;
+  size?: 'l' | 'm';
   /** Disabled state */
   disabled?: boolean;
   /** Called when the selection is changed */
@@ -20,10 +20,12 @@ export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighbo
 }
 
 export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
+  /** Pill value */
+  value?: PillsValue;
   /** Disabled state */
   disabled?: boolean;
-  /** Pill value */
-  value: PillsValue;
+  /** Selected state */
+  selected?: boolean;
   /** Left addon text */
   addonLeft?: React.ElementType;
   /** Right addon tag */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/pills",
   "description": "SEMRush Pills Component",
-  "version": "3.5.5",
+  "version": "4.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -28,5 +28,10 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/pills"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@semcore/icon": "*",
+    "@semcore/badge": "*"
   }
 }

package/src/index.d.ts

@@ -8,7 +8,7 @@ export type PillsValue = string | number | boolean;
 
 export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
   /** Pills size */
-  size?: 'xl' | 'l' | 'm' | 's' | false;
+  size?: 'l' | 'm';
   /** Disabled state */
   disabled?: boolean;
   /** Called when the selection is changed */
@@ -20,10 +20,12 @@ export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighbo
 }
 
 export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
+  /** Pill value */
+  value?: PillsValue;
   /** Disabled state */
   disabled?: boolean;
-  /** Pill value */
-  value: PillsValue;
+  /** Selected state */
+  selected?: boolean;
   /** Left addon text */
   addonLeft?: React.ElementType;
   /** Right addon tag */

package/src/index.js

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

package/src/style/pills.shadow.css

@@ -28,9 +28,9 @@ SPill {
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
-  color: var(--gray40);
-  background: #fff;
-  border: 1px solid var(--stone);
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-m);
 
   &::-moz-focus-inner {
     border: none;
@@ -45,18 +45,14 @@ SPill {
   }
 
   &:hover {
-    background: color-mod(var(--stone) a(20%));
+    background: color-mod(var(--gray-400) a(20%));
   }
 }
 
 SPill[selected] {
-  background: color-mod(var(--light-blue) a(20%));
-  border-color: var(--light-blue);
+  background: color-mod(var(--blue-400) a(20%));
+  border-color: var(--blue-400);
   z-index: 1;
-
-  &:enabled:hover {
-    background: color-mod(var(--light-blue) a(20%));
-  }
 }
 
 SPill[disabled] {
@@ -69,55 +65,25 @@ SPill[disabled] {
 }
 
 SPill[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
 }
 
 SText {
-  color: var(--gray20);
+  color: var(--gray-800);
   display: inline-flex;
-  line-height: 1.1;
 }
 
 SAddon {
-  color: var(--gray60);
+  color: var(--gray-500);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  line-height: 1.1;
-}
-
-SPill[size='s'] {
-  height: 18px;
-  min-width: 18px;
-  border-radius: 2px;
-  font-size: 10px;
-
-  & SText {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 4px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 4px;
-    }
-
-    &:only-child {
-      margin-left: -2px;
-      margin-right: -2px;
-    }
-  }
 }
 
 SPill[size='m'] {
-  height: 26px;
-  min-width: 26px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: var(--form-control-m);
+  min-width: var(--form-control-m);
+  font-size: var(--fs-200);
 
   & SText {
     margin-left: 8px;
@@ -134,49 +100,26 @@ SPill[size='m'] {
     }
 
     &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
+      margin-left: 8px;
+      margin-right: 8px;
     }
   }
 }
 
 SPill[size='l'] {
-  height: 32px;
-  min-width: 32px;
-  border-radius: 4px;
-  font-size: 14px;
+  height: var(--form-control-l);
+  min-width: var(--form-control-l);
+  font-size: var(--fs-300);
 
   & SText {
     margin-left: 8px;
     margin-right: 8px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 8px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 8px;
-    }
 
     &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
+      margin-left: 12px;
+      margin-right: 12px;
     }
   }
-}
-
-SPill[size='xl'] {
-  height: 42px;
-  min-width: 42px;
-  border-radius: 5px;
-  font-size: 16px;
-
-  & SText {
-    margin-left: 12px;
-    margin-right: 12px;
-  }
 
   & SAddon {
     &:not(:only-child):first-child {
@@ -188,8 +131,8 @@ SPill[size='xl'] {
     }
 
     &:only-child {
-      margin-left: -6px;
-      margin-right: -6px;
+      margin-left: 12px;
+      margin-right: 12px;
     }
   }
 }