@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.201

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@testing-library/react");
 
@@ -8,7 +8,17 @@ var _ = _interopRequireWildcard(require("."));
 
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 var getVisibleTextContents = function getVisibleTextContents(container) {
   var selectedButton = container.querySelector('[aria-selected="true"]');
@@ -339,4 +349,46 @@ describe('Tabs', function () {
 
     expect(onClick).toBeCalled();
   });
+  it('keeps selected tab when the tab gets re-rendered', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var TestCase, _render14, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            TestCase = function TestCase() {
+              var _useState = (0, _react.useState)('Tab 1'),
+                  _useState2 = _slicedToArray(_useState, 2),
+                  title = _useState2[0],
+                  setTitle = _useState2[1];
+
+              return _react.default.createElement(_react.default.StrictMode, null, _react.default.createElement("button", {
+                onClick: function onClick() {
+                  return setTitle('Tab 1 - Updated');
+                },
+                type: "button"
+              }, "update title"), _react.default.createElement(_.default, {
+                renderHiddenTabsContent: false
+              }, _react.default.createElement(_.Tab, {
+                id: "1",
+                title: title
+              }, _react.default.createElement("div", null, "This is the first tab content."), _react.default.createElement("div", null, "This is the title", title)), _react.default.createElement(_.Tab, {
+                id: "2",
+                title: "Tab 2"
+              }, "This is the second tab content.")));
+            };
+
+            _render14 = (0, _react2.render)(_react.default.createElement(TestCase, null)), container = _render14.container;
+
+            _react2.fireEvent.click((0, _react2.getByText)(container, /update title/i));
+
+            expect((0, _react2.getByText)(container, /this is the first tab content/i)).toBeInTheDocument();
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
 });

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

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,oEAGrB,CAAC;AAEF,eAAO,MAAM,OAAO,oEAInB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAKtB,CAAC"}

package/lib/components/Tabs/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabContent = exports.TabList = exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1o82gsh-0"
+})(["display:flex;flex-direction:column;"]);
+
+exports.Container = Container;
+
+var TabList = _styledComponents.default.div.withConfig({
+  displayName: "styles__TabList",
+  componentId: "sc-1o82gsh-1"
+})(["align-items:flex-end;border-bottom:1px solid ", ";display:flex;"], (0, _toColorString.default)(_color.default.base.quarterMoon));
+
+exports.TabList = TabList;
+
+var TabContent = _styledComponents.default.div.withConfig({
+  displayName: "styles__TabContent",
+  componentId: "sc-1o82gsh-2"
+})(["&:active,&:focus{outline:none;}"]);
+
+exports.TabContent = TabContent;

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

@@ -0,0 +1,4 @@
+declare const Action: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default Action;
+//# sourceMappingURL=Action.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Action.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,MAAM,oEAYX,CAAC;AAEF,eAAO,MAAM,eAAe,oEAK3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Tag/Action.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; } }
+
+var _designTokens$color = _designTokens.default.color,
+    baseColors = _designTokens$color.base,
+    interactionColors = _designTokens$color.interaction;
+var borderRadius = (0, _styledComponents.css)(["border-radius:0 ", " ", " 0;"], (0, _rem.default)(10), (0, _rem.default)(10));
+
+var Action = _styledComponents.default.div.withConfig({
+  displayName: "Action",
+  componentId: "sc-53eucd-0"
+})(["align-items:center;justify-content:center;border:0;color:", ";display:flex;height:100%;width:", ";padding-right:", ";outline:none;", ""], (0, _toColorString.default)(interactionColors.pacificOcean), (0, _rem.default)(_constants.ACTION_WIDTH), (0, _rem.default)(1), borderRadius);
+
+var ActionContainer = _styledComponents.default.div.withConfig({
+  displayName: "Action__ActionContainer",
+  componentId: "sc-53eucd-1"
+})(["height:100%;background-color:", ";", ";"], (0, _toColorString.default)(baseColors.snowWhite), borderRadius);
+
+exports.ActionContainer = ActionContainer;
+var _default = Action;
+exports.default = _default;

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

@@ -1,5 +1,5 @@
-export declare const ACTION_BUTTON_WIDTH = 22;
-export declare const CONTAINER_X_PADDING = 14;
+export declare const ACTION_WIDTH = 22;
+export declare const CONTAINER_X_PADDING = 8;
 export declare const ICON_CONTENT_MARGIN = 5;
 export declare const MAX_CONTAINER_WIDTH = 300;
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}

package/lib/components/Tag/constants.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_BUTTON_WIDTH = void 0;
-var ACTION_BUTTON_WIDTH = 22;
-exports.ACTION_BUTTON_WIDTH = ACTION_BUTTON_WIDTH;
-var CONTAINER_X_PADDING = 14;
+exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_WIDTH = void 0;
+var ACTION_WIDTH = 22;
+exports.ACTION_WIDTH = ACTION_WIDTH;
+var CONTAINER_X_PADDING = 8;
 exports.CONTAINER_X_PADDING = CONTAINER_X_PADDING;
 var ICON_CONTENT_MARGIN = 5;
 exports.ICON_CONTENT_MARGIN = ICON_CONTENT_MARGIN;

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

@@ -1,8 +1,6 @@
 import { RefForwardingComponent } from 'react';
-import { CommonUIColors } from '../../utils/commonUIColors';
 import { TagProps, TagRef } from './types';
-export { TagProps, TagRef, TagActionButtonRef } from './types';
-export declare type ColorKeys = keyof CommonUIColors;
 declare const TagWithRef: RefForwardingComponent<TagRef, TagProps>;
+export { TagProps, TagRef, TagActionRef as TagActionButtonRef, IconComponent, } from './types';
 export default TagWithRef;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAkB,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAY5E,OAAO,EAA4B,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/D,oBAAY,SAAS,GAAG,MAAM,cAAc,CAAC;AA6L7C,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAiB,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAqG1D,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,OAAO,EACL,QAAQ,EACR,MAAM,EACN,YAAY,IAAI,kBAAkB,EAClC,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,eAAe,UAAU,CAAC"}

package/lib/components/Tag/index.js

@@ -18,39 +18,31 @@ Object.defineProperty(exports, "TagRef", {
 Object.defineProperty(exports, "TagActionButtonRef", {
   enumerable: true,
   get: function get() {
-    return _types.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 = require("@decisiv/design-tokens");
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
 var _Typography = require("../Typography");
 
-var _ActionButton = _interopRequireWildcard(require("./ActionButton"));
-
-var _constants = require("./constants");
+var _Action = _interopRequireWildcard(require("./Action"));
 
 var _propTypes = require("./propTypes");
 
+var _styles = require("./styles");
+
 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(); }
@@ -65,61 +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 borderColor = (0, _toColorString.default)(_designTokens.color.opacity.charcoal15);
-
-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_BUTTON_WIDTH, actionBorder);
-  hasIcon && valuesToSubtract.push(iconWidth, _constants.ICON_CONTENT_MARGIN);
-  return (0, _rem.default)(valuesToSubtract.reduce(function (r, v) {
-    return r - v;
-  }, baseWidth));
-};
-
-var colorModifiers = function colorModifiers(_ref) {
-  var variant = _ref.variant,
-      colorProp = _ref.color;
-  return variant === 'outline' ? (0, _color.default)(_objectSpread({}, _designTokens.color.base.snowWhite, {
-    fg: _designTokens.color.base.alaskanHusky
-  })) : (0, _color.default)(colorProp && colorProp in _commonUIColors.commonUIColors ? _commonUIColors.commonUIColors[colorProp] : _commonUIColors.commonUIColors.licoriceMousse);
-};
-
-var Content = _styledComponents.default.div.withConfig({
-  displayName: "Tag__Content",
-  componentId: "nifm8a-0"
-})(["align-items:center;border:0;display:flex;padding:0 ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING / 2), function (_ref2) {
-  var isSingleChild = _ref2.isSingleChild;
-  return (0, _styledComponents.css)(["max-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_BUTTON_WIDTH, "px)"));
-}, (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 Container = _styledComponents.default.div.withConfig({
-  displayName: "Tag__Container",
-  componentId: "nifm8a-1"
-})(["font-family:", ";font-size:", ";font-weight:", ";align-items:center;border-radius:", ";border:1px solid ", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";padding:0;", ";", ";", "{", ";}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), borderColor, (0, _rem.default)(20), (0, _rem.default)(26), colorModifiers, contentSVGColor, _ActionButton.ActionButtonContainer, colorModifiers);
-
 function Tag(props, containerRef) {
   var action = props.action,
       actionAttributes = props.actionAttributes,
@@ -128,50 +65,46 @@ function Tag(props, containerRef) {
       actionRef = props.actionRef,
       Icon = props.icon,
       text = props.text,
-      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text"]);
+      palette = props.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),
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  var onActionFocus = (0, _react.useCallback)(function (e) {
-    var _ref4 = actionAttributes || {
+  var onTagFocus = (0, _react.useCallback)(function (e) {
+    var _ref = actionAttributes || {
       onFocus: undefined
     },
-        onFocus = _ref4.onFocus;
+        onFocus = _ref.onFocus;
 
     setIsFocused(true);
     onFocus && onFocus(e);
   }, [actionAttributes]);
-  var onActionBlur = (0, _react.useCallback)(function (e) {
-    var _ref5 = actionAttributes || {
+  var onTagBlur = (0, _react.useCallback)(function (e) {
+    var _ref2 = actionAttributes || {
       onBlur: undefined
     },
-        onBlur = _ref5.onBlur;
+        onBlur = _ref2.onBlur;
 
     setIsFocused(false);
     onBlur && onBlur(e);
   }, [actionAttributes]);
-  var Action = (0, _react.useMemo)(function () {
+  var ActionElement = (0, _react.useMemo)(function () {
     if (!text || !action || !actionIcon) {
       return null;
     }
 
     var ActionIcon = actionIcon;
-    return _react.default.createElement(_ActionButton.ActionButtonContainer, {
-      isFocused: isFocused
-    }, _react.default.createElement(_ActionButton.default, _extends({}, actionAttributes, {
-      ref: actionRef,
-      type: "button",
-      onBlur: onActionBlur,
-      onClick: action,
-      onFocus: onActionFocus,
-      actionIntent: actionIntent
-    }), _react.default.createElement(ActionIcon, {
+    return _react.default.createElement(_Action.ActionContainer, null, _react.default.createElement(_Action.default, {
+      ref: actionRef
+    }, _react.default.createElement(ActionIcon, {
       size: "small"
     })));
-  }, [text, action, actionRef, isFocused, actionIcon, actionIntent, onActionBlur, onActionFocus, actionAttributes]);
+  }, [text, action, actionRef, actionIcon]);
   var contentIsSingleChild = !action || !!action && !text;
   /**
    * We render the "content" twice below. The first one is visible to the user
@@ -182,9 +115,19 @@ function Tag(props, containerRef) {
    * seconds content component, and calculate the max width of the container.
    */
 
-  return _react.default.createElement(Container, _extends({}, rest, {
-    ref: containerRef
-  }), _react.default.createElement(Content, {
+  return _react.default.createElement(_styles.Container, _extends({}, rest, actionAttributes, {
+    tabIndex: 0,
+    size: size,
+    isSingleChild: contentIsSingleChild,
+    palette: palette,
+    ref: containerRef,
+    onBlur: onTagBlur,
+    onClick: action,
+    onFocus: onTagFocus,
+    isFocused: isFocused,
+    actionIntent: actionIntent
+  }), _react.default.createElement(_styles.Content, {
+    palette: palette,
     hasIcon: !!Icon,
     isSingleChild: contentIsSingleChild
   }, Icon && _react.default.createElement(Icon, {
@@ -192,9 +135,9 @@ function Tag(props, containerRef) {
   }), text && _react.default.createElement(_Typography.P, {
     as: "span",
     color: "inherit",
-    size: "small",
+    size: size === 'small' ? 'small' : undefined,
     truncate: true
-  }, text)), Action);
+  }, text)), ActionElement);
 }
 
 var TagWithRef = (0, _react.forwardRef)(Tag); // @ts-ignore