@synerise/ds-tag 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+---
+id: tag
+title: Tag
+---
+
+Tag UI Component
+
+## Installation
+```
+npm i @synerise/ds-tag
+or
+yarn add @synerise/ds-tag
+```
+
+## Usage
+```
+import Tag from '@synerise/ds-tag'
+
+<Tag />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-tag--default"></iframe>
+
+## API
+
+| Property  | Description                              | Type                              | Default                |
+| --------- | ---------------------------------------- | --------------------------------- | ---------------------- |
+| className | tag container class                      | string                            | -                      |
+| color     | primary color (background/border) of tag | string                            | -                      |
+| disabled  | whether tag should be disabled           | boolean                           | -                      |
+| id        | id of tag (necessary if using Tags)      | string / number                   | -                      |
+| name      | title of tag                             | string                            | -                      |
+| onClick   | onClick event on tag body                | () => void                        | -                      |
+| onRemove  | callback when tag is removed             | (tagKey: string / number) => void | -                      |
+| removable | show remove button                       | boolean                           | -                      |
+| shape     | shape of the tag                         | TagShape                          | TagShape.DEFAULT_ROUND |
+| textColor | color of tag name label                  | string                            | -                      |
+| dashed    | make border dashed                       | boolean                           | -                      |
+
+## TagShape Enum
+
+| Property                         |
+| -------------------------------- |
+| TagShape.SINGLE_CHARACTER_ROUND  |
+| TagShape.SINGLE_CHARACTER_SQUARE |
+| TagShape.DEFAULT_ROUND           |
+| TagShape.DEFAULT_SQUARE          |
+| TagShape.SMALL_ROUND             |
+| TagShape.SMALL_SQUARE            |
+| TagShape.STATUS_NEUTRAL          |
+| TagShape.STATUS_SUCCESS          |
+| TagShape.STATUS_ERROR            |
+| TagShape.STATUS_WARNING          |

package/dist/Tag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TagProps } from './Tag.types';
+declare const Tag: ({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: TagProps) => React.JSX.Element;
+export default Tag;

package/dist/Tag.js

@@ -0,0 +1,105 @@
+var _excluded = ["id", "name", "className", "disabled", "removable", "image", "shape", "color", "textColor", "onRemove", "onClick", "prefixel", "suffixel", "texts", "asPill", "dashed"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
+import React, { useState } from 'react';
+import Icon, { CloseS } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
+import Tooltip from '@synerise/ds-tooltip';
+import { TagShape } from './Tag.types';
+import * as S from './Tag.styles';
+import { getColorText } from './Tag.styles';
+var Tag = function Tag(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    removable = _ref.removable,
+    image = _ref.image,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? TagShape.DEFAULT_ROUND && TagShape.DEFAULT_SQUARE : _ref$shape,
+    color = _ref.color,
+    textColor = _ref.textColor,
+    onRemove = _ref.onRemove,
+    onClick = _ref.onClick,
+    prefixel = _ref.prefixel,
+    suffixel = _ref.suffixel,
+    texts = _ref.texts,
+    asPill = _ref.asPill,
+    dashed = _ref.dashed,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var isDefaultType = shape && [TagShape.DEFAULT_ROUND, TagShape.DEFAULT_SQUARE].includes(shape);
+  var isDefaultRound = shape === TagShape.DEFAULT_ROUND;
+  var isDefaultSquare = shape === TagShape.DEFAULT_SQUARE;
+  var isStatusShape = shape && [TagShape.STATUS_ERROR, TagShape.STATUS_NEUTRAL, TagShape.STATUS_SUCCESS, TagShape.STATUS_WARNING].includes(shape);
+  var isRemovable = removable && (isDefaultRound || isDefaultSquare);
+  var isActionable = !disabled && isRemovable;
+  var _useState = useState(false),
+    isIconHovered = _useState[0],
+    setIsIconHovered = _useState[1];
+  var onRemoveCall = function onRemoveCall() {
+    return !!onRemove && !!id && onRemove(id);
+  };
+  var renderPrefixel = function renderPrefixel() {
+    if (typeof prefixel === 'string' || typeof prefixel === 'number') {
+      return /*#__PURE__*/React.createElement(S.PrefixWrapper, {
+        iconHover: isIconHovered
+      }, prefixel);
+    }
+    return /*#__PURE__*/React.createElement(S.DefaultPrefixWrapper, {
+      iconHover: isIconHovered
+    }, prefixel);
+  };
+  var renderSuffixel = function renderSuffixel() {
+    if (typeof suffixel === 'string' || typeof suffixel === 'number') {
+      return /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel);
+    }
+    return /*#__PURE__*/React.createElement(S.DefaultSuffixWrapper, null, suffixel);
+  };
+  var handleMouseOver = function handleMouseOver(event) {
+    setIsIconHovered(true);
+    // eslint-disable-next-line no-unused-expressions
+    htmlAttributes.onMouseOver == null || htmlAttributes.onMouseOver(event);
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    setIsIconHovered(false);
+    // eslint-disable-next-line no-unused-expressions
+    htmlAttributes.onMouseLeave == null || htmlAttributes.onMouseLeave(event);
+  };
+  return /*#__PURE__*/React.createElement(S.Tag, _extends({
+    className: "ds-tag " + (className != null ? className : ''),
+    isStatusShape: isStatusShape,
+    shape: shape,
+    color: color,
+    textColor: textColor,
+    removable: removable,
+    disabled: disabled,
+    isActionable: isActionable,
+    onClick: onClick,
+    "data-testid": typeof id !== 'undefined' ? "tag-" + id : 'tag',
+    preffixel: !!prefixel,
+    suffixel: !!suffixel,
+    hasImage: !!image,
+    iconHover: isIconHovered,
+    asPill: asPill,
+    dashed: dashed
+  }, htmlAttributes), /*#__PURE__*/React.createElement(S.Content, {
+    iconHover: isIconHovered
+  }, image && isDefaultType && /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: ""
+  }), !!prefixel && renderPrefixel(), /*#__PURE__*/React.createElement(S.TagName, null, name), !!suffixel && renderSuffixel(), isRemovable && /*#__PURE__*/React.createElement(Tooltip, {
+    title: (texts == null ? void 0 : texts.deleteTooltip) || 'Delete',
+    visible: isIconHovered
+  }, /*#__PURE__*/React.createElement(S.RemoveButton, {
+    onClick: onRemoveCall,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-testid": "remove-btn"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "icon",
+    component: /*#__PURE__*/React.createElement(CloseS, null),
+    size: 24,
+    color: getColorText(theme, color)
+  })))));
+};
+export default Tag;

package/dist/Tag.styles.d.ts

@@ -0,0 +1,32 @@
+import { ThemeProps, ThemePropsVars } from '@synerise/ds-core';
+import { TagShape } from './Tag.types';
+export declare const getColorText: (theme: ThemePropsVars, color?: string) => string;
+export declare const TagName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const RemoveButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {
+    iconHover?: boolean | undefined;
+}, never>;
+export declare const PrefixWrapper: import("styled-components").StyledComponent<"div", any, {
+    iconHover?: boolean | undefined;
+}, never>;
+export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DefaultSuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DefaultPrefixWrapper: import("styled-components").StyledComponent<"div", any, {
+    iconHover?: boolean | undefined;
+}, never>;
+export declare const Tag: import("styled-components").StyledComponent<"div", any, {
+    isStatusShape?: boolean | undefined;
+    shape?: TagShape | undefined;
+    color?: string | undefined;
+    textColor?: string | undefined;
+    removable?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isActionable?: boolean | undefined;
+    suffixel?: boolean | undefined;
+    preffixel?: boolean | undefined;
+    hasImage?: boolean | undefined;
+    iconHover?: boolean | undefined;
+    asPill?: boolean | undefined;
+    dashed?: boolean | undefined;
+} & ThemeProps, never>;
+export declare const DeleteButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Tag.styles.js

@@ -0,0 +1,131 @@
+import styled, { css } from 'styled-components';
+import { TagShape } from './Tag.types';
+var defaultStatusStyles = css(["border-radius:9px;font-size:10px;height:18px;font-weight:500;line-height:18px;text-transform:uppercase;letter-spacing:0.1px;padding:0 8px;line-height:18px;"]);
+export var getColorText = function getColorText(theme, color) {
+  return color === theme.palette['grey-200'] ? theme.palette['grey-600'] : theme.palette.white;
+};
+var getWidthOnHover = function getWidthOnHover(props) {
+  if (props.suffixel && props.preffixel || props.hasImage) {
+    return 'calc(100% - 23px)';
+  }
+  if (props.preffixel) {
+    return 'calc(100% - 35px)';
+  }
+  if (props.suffixel) {
+    return 'calc(100% - 4px)';
+  }
+  return 'calc(100% - 10px)';
+};
+var getFilterColor = function getFilterColor(props) {
+  if (props.iconHover && props.color === props.theme.palette['grey-200']) {
+    return 'brightness(100%)';
+  }
+  if (props.color === props.theme.palette['grey-200']) {
+    return 'brightness(90%)';
+  }
+  if (props.iconHover) {
+    return 'brightness(100%)';
+  }
+  return 'brightness(110%)';
+};
+var addonStyles = function addonStyles(props) {
+  return "\n  border: 1px solid;\n  border-radius: 10px;\n  height: 50%;\n  padding: 0 3px;\n  border-color: " + props.theme.palette.white + ";\n  font-size: 9px;\n  line-height: 10px;\n  text-align: center;\n";
+};
+export var TagName = styled.span.withConfig({
+  displayName: "Tagstyles__TagName",
+  componentId: "sc-1xw3den-0"
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+export var RemoveButton = styled.div.withConfig({
+  displayName: "Tagstyles__RemoveButton",
+  componentId: "sc-1xw3den-1"
+})(["color:", ";height:18px;width:18px;border-radius:10px;padding:0;border:none;outline:none;margin:3px 3px 3px 5px;text-align:center;cursor:pointer;position:relative;overflow:hidden;display:none;opacity:0.8;&:before{color:", ";filter:brightness(70%);opacity:0.3;content:'';position:absolute;top:0;left:0;width:100%;height:100%;}&&&:hover{.ds-icon svg{fill:", " !important;}}.icon{&&{transform:translate(1px,-3px);}}"], function (_ref) {
+  var color = _ref.color,
+    theme = _ref.theme;
+  return getColorText(theme, color);
+}, function (props) {
+  return props.color || props.theme.palette['red-600'];
+}, function (props) {
+  return props.theme.palette['red-600'];
+});
+var insertShapeStyles = function insertShapeStyles(props) {
+  switch (props.shape) {
+    case TagShape.SMALL_SQUARE:
+      return css(["color:", ";border-radius:3px;font-size:10px;height:14px;line-height:14px;text-transform:uppercase;font-weight:500;letter-spacing:0.1px;padding:0 4px;"], props.textColor || '#fff');
+    case TagShape.SMALL_ROUND:
+      return css(["color:", ";border-radius:8px;font-size:10px;height:14px;line-height:14px;text-transform:uppercase;letter-spacing:0.1px;padding:0 4px;"], props.textColor || '#fff');
+    case TagShape.MEDIUM_ROUND:
+      return css(["color:", ";", ""], props.textColor || getColorText(props.theme, props.color), defaultStatusStyles);
+    case TagShape.DEFAULT_ROUND:
+      return css(["color:", ";border-radius:12px;font-size:13px;height:24px;line-height:24px;padding:", ";", "{padding:", ";padding-left:", ";padding-right:", ";}", ""], props.textColor || getColorText(props.theme, props.color), props.removable ? '0' : '0 12px', TagName, props.removable ? '0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '4px', props.isActionable && css(["&:hover{padding:", ";", "{display:inline-block;padding:", ";padding-left:", ";padding-right:", ";width:", ";}padding-right:", ";", "{margin-left:0px;margin-right:", ";.icon{position:absolute;left:-3px;top:-3px;}}}"], props.removable && props.suffixel && '0 15px 0 0px', TagName, props.removable ? '0 7px 0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '10px', getWidthOnHover(props), !props.suffixel && '5px', RemoveButton, props.suffixel ? '2px' : '-2px'));
+    case TagShape.DEFAULT_SQUARE:
+      return css(["color:", ";border-radius:3px;font-size:13px;height:24px;line-height:24px;padding:", ";", "{padding:", ";padding-left:", ";padding-right:", ";}", ""], props.textColor || getColorText(props.theme, props.color), props.removable ? '0' : '0 12px', TagName, props.removable ? '0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '4px', props.isActionable && css(["&:hover{padding-right:", ";", "{display:inline-block;padding:", ";padding-left:", ";padding-right:", ";width:", ";}padding-right:", ";", "{margin-left:0px;margin-right:", ";.icon{position:absolute;left:-3px;top:-3px;}}}"], props.removable && props.suffixel && '15px', TagName, props.removable ? '0 7px 0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '10px', getWidthOnHover(props), !props.suffixel && '5px', RemoveButton, props.suffixel ? '2px' : '-2px'));
+    case TagShape.SINGLE_CHARACTER_ROUND:
+      return css(["color:", ";border-radius:12px;font-size:13px;height:24px;width:24px;line-height:24px;justify-content:center;"], props.textColor || getColorText(props.theme, props.color));
+    case TagShape.SINGLE_CHARACTER_SQUARE:
+      return css(["color:", ";border-radius:3px;font-size:13px;height:24px;width:24px;line-height:24px;justify-content:center;"], props.textColor || getColorText(props.theme, props.color));
+    case TagShape.STATUS_NEUTRAL:
+      return css(["border:1px solid ", ";color:", ";", ""], props.color || props.theme.palette['grey-500'], props.textColor || props.color || props.theme.palette['grey-500'], defaultStatusStyles);
+    case TagShape.STATUS_SUCCESS:
+      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette['green-600'], props.theme.palette['green-600'], defaultStatusStyles);
+    case TagShape.STATUS_ERROR:
+      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette['red-600'], props.theme.palette['red-600'], defaultStatusStyles);
+    case TagShape.STATUS_WARNING:
+      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette['yellow-600'], props.theme.palette['yellow-600'], defaultStatusStyles);
+    default:
+      return css([""]);
+  }
+};
+export var Content = styled.div.withConfig({
+  displayName: "Tagstyles__Content",
+  componentId: "sc-1xw3den-2"
+})(["position:relative;display:flex;align-items:center;flex-grow:0;flex-shrink:1;max-width:100%;", ""], function (props) {
+  return !!props.iconHover && "\n    &&& {\n     color:" + props.theme.palette['red-600'] + ";\n   }\n";
+});
+export var PrefixWrapper = styled.div.withConfig({
+  displayName: "Tagstyles__PrefixWrapper",
+  componentId: "sc-1xw3den-3"
+})(["", ";", ""], function (props) {
+  return addonStyles(props);
+}, function (props) {
+  return !!props.iconHover && ".ant-scroll-number{ \n    color: " + props.theme.palette['red-600'] + "!important;\n    box-shadow: 0 0 0 1px " + props.theme.palette['red-600'] + "!important;\n    }\n  .ds-icon svg {\n  fill: " + props.theme.palette['red-600'] + ";\n}";
+});
+export var SuffixWrapper = styled.div.withConfig({
+  displayName: "Tagstyles__SuffixWrapper",
+  componentId: "sc-1xw3den-4"
+})(["", ";"], function (props) {
+  return addonStyles(props);
+});
+export var DefaultSuffixWrapper = styled.div.withConfig({
+  displayName: "Tagstyles__DefaultSuffixWrapper",
+  componentId: "sc-1xw3den-5"
+})([""]);
+export var DefaultPrefixWrapper = styled.div.withConfig({
+  displayName: "Tagstyles__DefaultPrefixWrapper",
+  componentId: "sc-1xw3den-6"
+})(["", ""], function (props) {
+  return !!props.iconHover && ".ant-scroll-number{ \n    color: " + props.theme.palette['red-600'] + "!important;\n    box-shadow: 0 0 0 1px " + props.theme.palette['red-600'] + "!important;\n    }\n.ds-icon svg {\n  fill: " + props.theme.palette['red-600'] + ";\n}";
+});
+export var Tag = styled.div.withConfig({
+  displayName: "Tagstyles__Tag",
+  componentId: "sc-1xw3den-7"
+})(["position:relative;margin:4px;display:inline-flex;font-weight:500;overflow:hidden;cursor:default;", " ", ";", " ", " ", " .icon1{margin:0 -2px 0 1px;}", ";&:last-of-type{margin-right:0;}", ",", "{margin:", ";}", ",", "{margin:", ";}"], function (props) {
+  return !props.asPill && css(["cursor:pointer;&:hover:before{filter:", ";}"], getFilterColor);
+}, function (props) {
+  return insertShapeStyles(props);
+}, function (props) {
+  return !!props.iconHover && "\n    &&&:before{\n     background-color:" + props.theme.palette['red-050'] + ";\n   }\n";
+}, function (props) {
+  return !!props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
+}, function (props) {
+  return !props.isStatusShape && css(["&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";}", ";"], props.color || props.theme.palette['grey-500'], props.isActionable && css(["&:hover:before{filter:", ";}"], getFilterColor));
+}, function (props) {
+  return !!props.isActionable && css(["&:hover{", ",", "{display:none;}", "{position:absolute;top:0;right:", ";display:inline-block;}}"], SuffixWrapper, DefaultSuffixWrapper, RemoveButton, props.removable && props.suffixel ? '-15px' : '0');
+}, SuffixWrapper, DefaultSuffixWrapper, function (props) {
+  return !props.removable && props.suffixel ? '0px -8px 3px 5px' : '0 4px 3px 1px';
+}, PrefixWrapper, DefaultPrefixWrapper, function (props) {
+  return !props.removable && props.preffixel ? '0px 5px 3px -8px' : '0 1px 3px 4px';
+});
+export var DeleteButton = styled.div.withConfig({
+  displayName: "Tagstyles__DeleteButton",
+  componentId: "sc-1xw3den-8"
+})([""]);

package/dist/Tag.types.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+export type TagTexts = {
+    addButtonLabel?: ReactNode;
+    searchPlaceholder?: string;
+    manageLinkLabel?: ReactNode;
+    createTagButtonLabel?: ReactNode;
+    dropdownNoTags?: ReactNode;
+    clearTooltip?: ReactNode;
+    deleteTooltip?: ReactNode;
+    noResultsLabel?: ReactNode;
+};
+export type TagProps = WithHTMLAttributes<HTMLDivElement, {
+    id?: string | number;
+    name?: string;
+    textColor?: string;
+    color?: string;
+    image?: string;
+    shape?: TagShape;
+    removable?: boolean;
+    className?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    onRemove?: (tag: string | number) => void;
+    prefixel?: ReactNode;
+    suffixel?: ReactNode;
+    texts?: TagTexts;
+    asPill?: boolean;
+    dashed?: boolean;
+}>;
+export declare enum TagShape {
+    SINGLE_CHARACTER_ROUND = "single_character_round",
+    SINGLE_CHARACTER_SQUARE = "single_character_square",
+    DEFAULT_ROUND = "default_round",
+    DEFAULT_SQUARE = "default_square",
+    MEDIUM_ROUND = "medium_round",
+    SMALL_ROUND = "small_round",
+    SMALL_SQUARE = "small_square",
+    STATUS_NEUTRAL = "status_custom",
+    STATUS_SUCCESS = "status_active",
+    STATUS_ERROR = "status_inactive",
+    STATUS_WARNING = "status_paused"
+}

package/dist/Tag.types.js

@@ -0,0 +1,14 @@
+export var TagShape;
+(function (TagShape) {
+  TagShape["SINGLE_CHARACTER_ROUND"] = "single_character_round";
+  TagShape["SINGLE_CHARACTER_SQUARE"] = "single_character_square";
+  TagShape["DEFAULT_ROUND"] = "default_round";
+  TagShape["DEFAULT_SQUARE"] = "default_square";
+  TagShape["MEDIUM_ROUND"] = "medium_round";
+  TagShape["SMALL_ROUND"] = "small_round";
+  TagShape["SMALL_SQUARE"] = "small_square";
+  TagShape["STATUS_NEUTRAL"] = "status_custom";
+  TagShape["STATUS_SUCCESS"] = "status_active";
+  TagShape["STATUS_ERROR"] = "status_inactive";
+  TagShape["STATUS_WARNING"] = "status_paused";
+})(TagShape || (TagShape = {}));

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Tag';
+export type { TagProps, TagTexts } from './Tag.types';
+export { TagShape } from './Tag.types';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default } from './Tag';
+export { TagShape } from './Tag.types';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@synerise/ds-tag",
+  "version": "1.0.0",
+  "description": "Tag UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^1.0.0",
+    "@synerise/ds-tooltip": "^1.0.0",
+    "@synerise/ds-utils": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "405e8d42fe3535bc45bbc996485c3d4e1bef27a6"
+}