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

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;AAkDhD,eAAe,MAAM,CAAC"}

package/lib/components/Tag/schema.js

@@ -16,7 +16,9 @@ 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'),
   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"}

package/lib/components/Tag/styles.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = exports.Content = 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 = _interopRequireWildcard(require("@decisiv/design-tokens"));
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _palette = require("../../modifiers/palette");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
+var _Action = _interopRequireWildcard(require("./Action"));
+
+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; } }
+
+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 Content = _styledComponents.default.div.withConfig({
+  displayName: "styles__Content",
+  componentId: "sc-1sm93ik-0"
+})(["height:100%;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), 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: _palette.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);
+
+exports.Content = Content;
+
+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 actionColors = {
+  normal: (0, _toColorString.default)(interactionColors.indianOcean),
+  danger: (0, _toColorString.default)(statusColors.danger.medium)
+};
+
+var actionColor = function actionColor(_ref4) {
+  var actionIntent = _ref4.actionIntent;
+  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
+};
+
+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: _palette.BORDER_OPACITY[palette]
+  });
+
+  return (0, _styledComponents.css)(["", " ", " ", ""], (0, _palette.withBorderedPalette)(props), (0, _styleModifiers.when)('variant', 'outline', (0, _styledComponents.css)(["", ""], (0, _color.default)(_objectSpread({}, _designTokens.color.base.snowWhite, {
+    fg: _designTokens.color.base.alaskanHusky
+  })))), (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 ", ";::before{", ";}}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{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 sizeModifiers = function sizeModifiers(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  if (size === 'small') return undefined;
+  var mediumHeight = (0, _rem.default)(25);
+  var mediumRadius = (0, _rem.default)(15);
+  var mediumBorderRadius = "0 ".concat(mediumRadius, " ").concat(mediumRadius, " 0");
+  return (0, _styledComponents.css)(["height:", ";border-radius:", ";&:focus{::before{border-radius:", ";}}", "{padding-right:", ";}", ",", "{border-radius:", ";}"], mediumHeight, mediumRadius, mediumRadius, _Action.default, (0, _rem.default)(2), _Action.default, _Action.ActionContainer, mediumBorderRadius);
+};
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1sm93ik-1"
+})(["position:relative;font-family:", ";font-size:", ";font-weight:", ";align-items:center;justify-content:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";background-color:transparent;padding:0;", " &:focus{border:1px solid ", ";&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';border-radius:", ";", ";}}&: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, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["cursor:pointer;"])), (0, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _rem.default)(10), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.default, actionColor, sizeModifiers, colorModifiers, variantModifiers, contentSVGColor);
+
+exports.Container = Container;

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

@@ -1,13 +1,15 @@
-import React, { Ref, RefAttributes, ButtonHTMLAttributes } from 'react';
+import React, { Ref, RefAttributes, AriaAttributes, DOMAttributes } from 'react';
 import { CSSObject } from 'styled-components';
 import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 export declare type TagRef = HTMLDivElement;
-export declare type TagActionButtonRef = HTMLButtonElement;
+export declare type TagActionRef = HTMLDivElement;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
-declare type ActionHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => unknown;
+export declare type ActionHandler = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => unknown;
 export declare type BaseProps = {
     color?: CommonUIColorKeys;
+    size?: 'medium' | 'small';
+    palette?: 'pastel' | 'bright' | 'dark';
     variant?: 'normal' | 'outline';
     style?: CSSObject;
 };
@@ -34,14 +36,11 @@ declare type ConditionalProps = Text & {
 } | Icon & {
     action?: never;
 } | Text & Icon | Text & Action & ActionIcon | Text & Icon & Action & ActionIcon;
-export declare type ActionButtonContainerProps = {
-    isFocused: boolean;
-};
-export declare type ActionButtonExtraProps = {
-    actionRef?: Ref<TagActionButtonRef>;
+export declare type ActionExtraProps = {
+    actionRef?: Ref<TagActionRef>;
     actionIntent?: 'normal' | 'danger';
-    actionAttributes?: ButtonHTMLAttributes<HTMLButtonElement>;
+    actionAttributes?: AriaAttributes & DOMAttributes<HTMLDivElement>;
 };
-export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionButtonExtraProps;
+export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionExtraProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC;AACnD,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,aAAK,aAAa,GAAG,CACnB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KACnD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,0BAA0B,GAAG;IACvC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,sBAAsB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAChD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;CACnE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}

package/lib/components/Tag/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BaseInputFieldProps } from '../../atoms/InputField';
+export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
+    hiddenLabel?: boolean;
+    defaultTags?: string[];
+    tags?: string[];
+    onChange?: (value: string[]) => void;
+}
+export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, ...props }: TagInputProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAeA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMzE,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,eAqMf"}