@decisiv/ui-components 2.0.1-alpha.99 → 2.0.1

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

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,12 +86,246 @@ 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 _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright"
+        })),
+            container = _render5.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an Icon', function () {
+        var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright",
+          icon: _Home.default
+        })),
+            container = _render6.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with different colors', function () {
+        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright",
+          color: "information"
+        })),
+            container = _render7.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an action', function () {
+        var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "action-tag",
+          text: "text",
+          palette: "bright",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default
+        })),
+            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 _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default,
+          actionIntent: "danger"
+        })),
+            container = _render9.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('pastel', function () {
+      it('renders correctly', function () {
+        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel"
+        })),
+            container = _render10.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an Icon', function () {
+        var _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          icon: _Home.default
+        })),
+            container = _render11.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with different colors', function () {
+        var _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          color: "information"
+        })),
+            container = _render12.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an action', function () {
+        var _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default
+        })),
+            container = _render13.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders the action correctly with the danger intent', function () {
+        var _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default,
+          actionIntent: "danger"
+        })),
+            container = _render14.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('dark', function () {
+      it('renders correctly', function () {
+        var _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark"
+        })),
+            container = _render15.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an Icon', function () {
+        var _render16 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          icon: _Home.default
+        })),
+            container = _render16.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with different colors', function () {
+        var _render17 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          color: "information"
+        })),
+            container = _render17.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an action', function () {
+        var _render18 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default
+        })),
+            container = _render18.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders the action correctly with the danger intent', function () {
+        var _render19 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default,
+          actionIntent: "danger"
+        })),
+            container = _render19.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
   describe('Common', function () {
     it('does not render a provided action if there is not text', function () {
       jest.spyOn(console, 'error').mockImplementation(function () {});
 
       var _renderTag6 = renderTag({
-        icon: _Home.default,
         text: undefined,
         action: function action() {
           return null;
@@ -100,7 +337,7 @@ describe('Tag', function () {
       }, 'normal'),
           container = _renderTag6.container;
 
-      expect(container.querySelectorAll('button').length).toBe(0);
+      expect(container.querySelectorAll('svg').length).toBe(0);
       expect(console.error).toHaveBeenCalled(); // @ts-ignore
 
       console.error.mockRestore();

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

@@ -7,8 +7,10 @@ export declare const propTypes: {
     actionAttributes: any;
     actionIntent: PropTypes.Requireable<string>;
     actionRef: PropTypes.Requireable<any>;
-    color: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
+    color: PropTypes.Requireable<"danger" | "success" | "information" | "warning" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
     variant: PropTypes.Requireable<string>;
+    palette: PropTypes.Requireable<string>;
+    size: PropTypes.Requireable<string>;
 };
 export declare const defaultProps: {
     action: undefined;
@@ -20,5 +22,6 @@ export declare const defaultProps: {
     icon: undefined;
     text: undefined;
     variant: string;
+    palette: string;
 };
 //# sourceMappingURL=propTypes.d.ts.map

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;;;;;;;;;;CA0BrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;CAUxB,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

@@ -40,7 +40,9 @@ var propTypes = {
   actionIntent: _propTypes.default.oneOf(['normal', 'danger']),
   actionRef: _propTypes.default.any,
   color: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
-  variant: _propTypes.default.oneOf(['normal', 'outline'])
+  variant: _propTypes.default.oneOf(['normal', 'outline']),
+  palette: _propTypes.default.oneOf(['pastel', 'bright', 'dark']),
+  size: _propTypes.default.oneOf(['small', 'medium'])
 };
 exports.propTypes = propTypes;
 var defaultProps = {
@@ -52,6 +54,7 @@ var defaultProps = {
   color: undefined,
   icon: undefined,
   text: undefined,
-  variant: 'normal'
+  variant: 'normal',
+  palette: 'bright'
 };
 exports.defaultProps = 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;AA2ChD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AAoDhD,eAAe,MAAM,CAAC"}

package/lib/components/Tag/schema.js

@@ -14,9 +14,11 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'Tag'
 });
 schema.propTypes = {
-  text: _reactDesc.PropTypes.string.description("The tag's text"),
+  text: _reactDesc.PropTypes.node.description('Content to render inside the tag (string or any React node)'),
   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'),
   action: _reactDesc.PropTypes.func.description('A function to callback when the action button is clicked'),
   actionRef: _reactDesc.PropTypes.any.description('Provide a "React Ref" to get a reference to the action\'s DOM node'),

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":"AAeA,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;AAkBhF,eAAO,MAAM,OAAO,8EAkCnB,CAAC;AAqHF,eAAO,MAAM,SAAS,gFAqDrB,CAAC"}