@decisiv/ui-components 2.0.1-alpha.156 → 2.0.1-alpha.158

package/lib/components/Tag/index.js

@@ -21,42 +21,28 @@ Object.defineProperty(exports, "TagActionButtonRef", {
     return _types.TagActionRef;
   }
 });
+Object.defineProperty(exports, "IconComponent", {
+  enumerable: true,
+  get: function get() {
+    return _types.IconComponent;
+  }
+});
 exports.default = void 0;
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
 var _Typography = require("../Typography");
 
 var _Action = _interopRequireWildcard(require("./Action"));
 
-var _constants = require("./constants");
-
 var _propTypes = require("./propTypes");
 
-var _types = require("./types");
+var _styles = require("./styles");
 
-var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
-
-var _styleModifiers = require("../../utils/styleModifiers");
+var _types = require("./types");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -71,130 +57,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var _designTokens$color = _designTokens.default.color,
-    interactionColors = _designTokens$color.interaction,
-    statusColors = _designTokens$color.status;
-
-var getContentMaxWidth = function getContentMaxWidth(props) {
-  var isSingleChild = props.isSingleChild,
-      hasIcon = props.hasIcon;
-  var iconWidth = 12;
-  var actionBorder = 1;
-  var containerBorder = 2;
-  var baseWidth = _constants.MAX_CONTAINER_WIDTH - _constants.CONTAINER_X_PADDING - containerBorder;
-  var valuesToSubtract = [];
-  !isSingleChild && valuesToSubtract.push(_constants.ACTION_WIDTH, actionBorder);
-  hasIcon && valuesToSubtract.push(iconWidth, _constants.ICON_CONTENT_MARGIN);
-  return (0, _rem.default)(valuesToSubtract.reduce(function (r, v) {
-    return r - v;
-  }, baseWidth));
-};
-
-var PALETTE_MAPPER = {
-  pastel: 'light',
-  bright: 'medium',
-  dark: 'dark'
-};
-var FG_COLOR = {
-  pastel: _objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: 0.8
-  }),
-  bright: _designTokens.color.base.snowWhite,
-  dark: _designTokens.color.base.snowWhite
-};
-var BORDER_OPACITY = {
-  pastel: 0.1,
-  bright: 0.15,
-  dark: 0.3
-};
-
-var Content = _styledComponents.default.div.withConfig({
-  displayName: "Tag__Content",
-  componentId: "nifm8a-0"
-})(["color:inherit;align-items:center;border:0;display:flex;padding:0 ", ";border-right:1px solid ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING / 2), function (_ref) {
-  var _ref$palette = _ref.palette,
-      palette = _ref$palette === void 0 ? 'bright' : _ref$palette;
-  return (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: BORDER_OPACITY[palette]
-  }));
-}, function (_ref2) {
-  var isSingleChild = _ref2.isSingleChild;
-  return (0, _styledComponents.css)(["max-width:", ";border-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_WIDTH, "px)"), isSingleChild ? '0' : '1px');
-}, (0, _rem.default)(_constants.ICON_CONTENT_MARGIN), getContentMaxWidth);
-
-var contentSVGColor = function contentSVGColor(_ref3) {
-  var variant = _ref3.variant,
-      colorProp = _ref3.color;
-
-  if (variant === 'outline' && colorProp && colorProp in _commonUIColors.commonUIColors) {
-    return (0, _styledComponents.css)(["", " svg{color:", ";}"], Content, (0, _toColorString.default)(_commonUIColors.commonUIColors[colorProp]));
-  }
-
-  return null;
-};
-
-var getColorByProps = function getColorByProps(_ref4) {
-  var variant = _ref4.variant,
-      colorProp = _ref4.color,
-      _ref4$palette = _ref4.palette,
-      palette = _ref4$palette === void 0 ? 'bright' : _ref4$palette;
-  if (variant === 'outline') return _objectSpread({}, _designTokens.color.base.snowWhite, {
-    fg: _designTokens.color.base.alaskanHusky
-  });
-
-  if (colorProp && colorProp in _commonUIColors.commonUIThreeShadeColors) {
-    var baseColor = _commonUIColors.commonUIThreeShadeColors[colorProp];
-    var fgColor = FG_COLOR[palette];
-    var bgColor = baseColor[PALETTE_MAPPER[palette]];
-    return palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
-      fg: fgColor
-    });
-  }
-
-  return _commonUIColors.commonUIColors.licoriceMousse;
-};
-
-var colorModifiers = function colorModifiers(props) {
-  var _props$palette = props.palette,
-      palette = _props$palette === void 0 ? 'bright' : _props$palette;
-
-  var borderColor = _objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: BORDER_OPACITY[palette]
-  });
-
-  return (0, _styledComponents.css)(["", ";border:1px solid ", ";", ""], (0, _color.default)(getColorByProps(props)), (0, _toColorString.default)(borderColor), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:inset 0 0 0 ", " ", ";", "{border-color:transparent;}}"], (0, _rem.default)(100), (0, _toColorString.default)(borderColor), Content)));
-};
-
-var variantModifiers = function variantModifiers(props) {
-  var _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'normal' : _props$variant;
-  if (variant === 'normal') return undefined;
-  return (0, _styledComponents.css)(["border:1px solid ", ";", " &:focus{border:1px solid ", ";", ";}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:none;background-color:", ";}"], (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: 0.07
-  })))), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40));
-};
-
-var actionColors = {
-  normal: (0, _toColorString.default)(interactionColors.indianOcean),
-  danger: (0, _toColorString.default)(statusColors.danger.medium)
-};
-
-var actionColor = function actionColor(_ref5) {
-  var actionIntent = _ref5.actionIntent;
-  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
-};
-
-var Container = (0, _styledComponents.default)(_BaseButton.default).withConfig({
-  displayName: "Tag__Container",
-  componentId: "nifm8a-1"
-})(["font-family:", ";font-size:", ";font-weight:", ";align-items:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";padding:0;background-color:transparent;&:focus{border:1px solid ", ";", ";", "{height:", ";box-shadow:none;}}&:focus-visible{outline:none;}&:hover{", "{color:", ";}}", ";", ";", ";"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), (0, _rem.default)(20), (0, _rem.default)(26), (0, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.ActionContainer, (0, _rem.default)(14), _Action.default, actionColor, colorModifiers, variantModifiers, contentSVGColor);
-
 function Tag(props, containerRef) {
   var action = props.action,
       actionAttributes = props.actionAttributes,
@@ -204,7 +66,9 @@ function Tag(props, containerRef) {
       Icon = props.icon,
       text = props.text,
       palette = props.palette,
-      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text", "palette"]);
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text", "palette", "size"]);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -212,19 +76,19 @@ function Tag(props, containerRef) {
       setIsFocused = _useState2[1];
 
   var onTagFocus = (0, _react.useCallback)(function (e) {
-    var _ref6 = actionAttributes || {
+    var _ref = actionAttributes || {
       onFocus: undefined
     },
-        onFocus = _ref6.onFocus;
+        onFocus = _ref.onFocus;
 
     setIsFocused(true);
     onFocus && onFocus(e);
   }, [actionAttributes]);
   var onTagBlur = (0, _react.useCallback)(function (e) {
-    var _ref7 = actionAttributes || {
+    var _ref2 = actionAttributes || {
       onBlur: undefined
     },
-        onBlur = _ref7.onBlur;
+        onBlur = _ref2.onBlur;
 
     setIsFocused(false);
     onBlur && onBlur(e);
@@ -251,7 +115,9 @@ function Tag(props, containerRef) {
    * seconds content component, and calculate the max width of the container.
    */
 
-  return _react.default.createElement(Container, _extends({}, rest, actionAttributes, {
+  return _react.default.createElement(_styles.Container, _extends({}, rest, actionAttributes, {
+    tabIndex: 0,
+    size: size,
     isSingleChild: contentIsSingleChild,
     palette: palette,
     ref: containerRef,
@@ -260,7 +126,7 @@ function Tag(props, containerRef) {
     onFocus: onTagFocus,
     isFocused: isFocused,
     actionIntent: actionIntent
-  }), _react.default.createElement(Content, {
+  }), _react.default.createElement(_styles.Content, {
     palette: palette,
     hasIcon: !!Icon,
     isSingleChild: contentIsSingleChild
@@ -269,7 +135,7 @@ function Tag(props, containerRef) {
   }), text && _react.default.createElement(_Typography.P, {
     as: "span",
     color: "inherit",
-    size: "small",
+    size: size === 'small' ? 'small' : undefined,
     truncate: true
   }, text)), ActionElement);
 }

package/lib/components/Tag/index.test.js

@@ -2,6 +2,8 @@
 
 var _react = _interopRequireDefault(require("react"));
 
+require("jest-styled-components");
+
 var _react2 = require("@testing-library/react");
 
 var _Home = _interopRequireDefault(require("@decisiv/iconix/lib/components/Home"));
@@ -17,6 +19,7 @@ describe('Tag', function () {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var variant = arguments.length > 1 ? arguments[1] : undefined;
     return (0, _react2.render)(_react.default.createElement(_.default, _extends({
+      "data-testid": "tag",
       text: "text"
     }, props, {
       variant: variant
@@ -83,39 +86,90 @@ describe('Tag', function () {
   describe('Outline variant', function () {
     TestVariant('outline');
   });
+  describe('Size Props', function () {
+    describe('when the size is "small"', function () {
+      it('renders with a height of 1.25rem', function () {
+        var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "small-tag",
+          text: "text",
+          size: "small"
+        })),
+            getByTestId = _render.getByTestId;
+
+        expect(getByTestId('small-tag')).toHaveStyleRule('height', '1.25rem');
+      });
+      it('renders with a font-size of 0.75rem', function () {
+        var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "small-tag",
+          text: "text",
+          size: "small"
+        })),
+            getByText = _render2.getByText;
+
+        expect(getByText(/text/i, {
+          selector: 'span'
+        })).toHaveStyleRule('font-size', '0.75rem');
+      });
+    });
+    describe('when the size is "medium"', function () {
+      it('renders with a height of 1.5625rem', function () {
+        var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "medium-tag",
+          text: "text",
+          size: "medium"
+        })),
+            getByTestId = _render3.getByTestId;
+
+        expect(getByTestId('medium-tag')).toHaveStyleRule('height', '1.5625rem');
+      });
+      it('renders with a font-size of 0.875rem', function () {
+        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "small-tag",
+          text: "text",
+          size: "medium"
+        })),
+            getByText = _render4.getByText;
+
+        expect(getByText(/text/i, {
+          selector: 'span'
+        })).toHaveStyleRule('font-size', '0.875rem');
+      });
+    });
+  });
   describe('Palette variants', function () {
     describe('bright', function () {
       it('renders correctly', function () {
-        var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright"
         })),
-            container = _render.container;
+            container = _render5.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an Icon', function () {
-        var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright",
           icon: _Home.default
         })),
-            container = _render2.container;
+            container = _render6.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with different colors', function () {
-        var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright",
           color: "information"
         })),
-            container = _render3.container;
+            container = _render7.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an action', function () {
-        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "action-tag",
           text: "text",
           palette: "bright",
           action: jest.fn(),
@@ -124,12 +178,14 @@ describe('Tag', function () {
           },
           actionIcon: _Home.default
         })),
-            container = _render4.container;
+            container = _render8.container,
+            getByTestId = _render8.getByTestId;
 
+        expect(getByTestId('action-tag')).toHaveStyleRule('cursor', 'pointer');
         expect(container).toMatchSnapshot();
       });
       it('renders the action correctly with the danger intent', function () {
-        var _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright",
           action: jest.fn(),
@@ -139,43 +195,43 @@ describe('Tag', function () {
           actionIcon: _Home.default,
           actionIntent: "danger"
         })),
-            container = _render5.container;
+            container = _render9.container;
 
         expect(container).toMatchSnapshot();
       });
     });
     describe('pastel', function () {
       it('renders correctly', function () {
-        var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel"
         })),
-            container = _render6.container;
+            container = _render10.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an Icon', function () {
-        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           icon: _Home.default
         })),
-            container = _render7.container;
+            container = _render11.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with different colors', function () {
-        var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           color: "information"
         })),
-            container = _render8.container;
+            container = _render12.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an action', function () {
-        var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           action: jest.fn(),
@@ -184,12 +240,12 @@ describe('Tag', function () {
           },
           actionIcon: _Home.default
         })),
-            container = _render9.container;
+            container = _render13.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders the action correctly with the danger intent', function () {
-        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           action: jest.fn(),
@@ -199,43 +255,43 @@ describe('Tag', function () {
           actionIcon: _Home.default,
           actionIntent: "danger"
         })),
-            container = _render10.container;
+            container = _render14.container;
 
         expect(container).toMatchSnapshot();
       });
     });
     describe('dark', function () {
       it('renders correctly', function () {
-        var _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark"
         })),
-            container = _render11.container;
+            container = _render15.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an Icon', function () {
-        var _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render16 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           icon: _Home.default
         })),
-            container = _render12.container;
+            container = _render16.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with different colors', function () {
-        var _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render17 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           color: "information"
         })),
-            container = _render13.container;
+            container = _render17.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an action', function () {
-        var _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render18 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           action: jest.fn(),
@@ -244,12 +300,12 @@ describe('Tag', function () {
           },
           actionIcon: _Home.default
         })),
-            container = _render14.container;
+            container = _render18.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders the action correctly with the danger intent', function () {
-        var _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render19 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           action: jest.fn(),
@@ -259,7 +315,7 @@ describe('Tag', function () {
           actionIcon: _Home.default,
           actionIntent: "danger"
         })),
-            container = _render15.container;
+            container = _render19.container;
 
         expect(container).toMatchSnapshot();
       });

package/lib/components/Tag/propTypes.d.ts

@@ -10,6 +10,7 @@ export declare const propTypes: {
     color: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
     variant: PropTypes.Requireable<string>;
     palette: PropTypes.Requireable<string>;
+    size: PropTypes.Requireable<string>;
 };
 export declare const defaultProps: {
     action: undefined;

package/lib/components/Tag/propTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/propTypes.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,eAAO,MAAM,SAAS;;;;;;;;;;;CA2BrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;CAWxB,CAAC"}
+{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/propTypes.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,eAAO,MAAM,SAAS;;;;;;;;;;;;CA4BrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;CAWxB,CAAC"}

package/lib/components/Tag/propTypes.js

@@ -41,7 +41,8 @@ var propTypes = {
   actionRef: _propTypes.default.any,
   color: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
   variant: _propTypes.default.oneOf(['normal', 'outline']),
-  palette: _propTypes.default.oneOf(['pastel', 'bright', 'dark'])
+  palette: _propTypes.default.oneOf(['pastel', 'bright', 'dark']),
+  size: _propTypes.default.oneOf(['small', 'medium'])
 };
 exports.propTypes = propTypes;
 var defaultProps = {

package/lib/components/Tag/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AA8ChD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AAkDhD,eAAe,MAAM,CAAC"}

package/lib/components/Tag/schema.js

@@ -16,6 +16,7 @@ var schema = (0, _reactDesc.describe)({
 schema.propTypes = {
   text: _reactDesc.PropTypes.string.description("The tag's text"),
   icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render as the main icon'),
+  size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('The size to use for the Tag').defaultValue('small'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The color to use as the tag background or SVG color when outlined').format('string (see notes below)').defaultValue('licoriceMousse'),
   palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel', 'dark']).description('What color variant to render').defaultValue('bright'),
   variant: _reactDesc.PropTypes.oneOf(['normal', 'outline']).description('What tag variant to render').defaultValue('normal'),

package/lib/components/Tag/styles.d.ts

@@ -0,0 +1,13 @@
+import { TagProps } from './types';
+interface ContentProps extends Pick<TagProps, 'palette'> {
+    hasIcon: boolean;
+    isSingleChild: boolean;
+}
+declare type ContainerProps = TagProps & {
+    isFocused: boolean;
+    isSingleChild: boolean;
+};
+export declare const Content: import("styled-components").StyledComponent<"div", any, ContentProps, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/Tag/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAa,QAAQ,EAAoB,MAAM,SAAS,CAAC;AAahE,UAAU,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,aAAK,cAAc,GAAG,QAAQ,GAAG;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,OAAO,CAAA;CAAE,CAAC;AAoChF,eAAO,MAAM,OAAO,8EAkCnB,CAAC;AAmIF,eAAO,MAAM,SAAS,gFAqDrB,CAAC"}