glints-aries 4.0.184 → 4.0.186

package/es/@next/Tag/Tag.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    value?: string;
+    onRemove?: (() => void) | null;
+}
+export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
+export declare const Tag: ({ children, onRemove, value, ...props }: TagProps) => JSX.Element;

package/es/@next/Tag/Tag.js

@@ -1,16 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children"];
+var _excluded = ["children", "onRemove", "value"];
 import React from 'react';
+import { Icon } from '../Icon';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
-import { TagStyle } from './TagStyle';
+import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle } from './TagStyle';
 export var Tag = function Tag(_ref) {
   var children = _ref.children,
+    onRemove = _ref.onRemove,
+    value = _ref.value,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
     color: Neutral.B18,
     as: 'span'
   }, children) : children;
-  return /*#__PURE__*/React.createElement(TagStyle, props, content);
+  var removeButton = onRemove && /*#__PURE__*/React.createElement(TagRemoveContainerStyle, null, /*#__PURE__*/React.createElement(TagIconWrapper, {
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close",
+    fill: Neutral.B40,
+    height: 20,
+    onClick: onRemove
+  })));
+  return /*#__PURE__*/React.createElement(TagStyle, _extends({}, props, {
+    value: value
+  }), /*#__PURE__*/React.createElement(TagContentStyle, {
+    "data-removeable": !!onRemove
+  }, content), removeButton);
 };

package/es/@next/Tag/Tag.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const Removeable: any;

package/es/@next/Tag/TagStyle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TagProps, TagRemoveContainerProps } from './Tag';
+export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
+export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
+export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;

package/es/@next/Tag/TagStyle.js

@@ -1,9 +1,21 @@
 import styled from 'styled-components';
 import { Breakpoints } from '..';
-import { borderRadius4 } from '../utilities/borderRadius';
-import { Blue } from '../utilities/colors';
+import { borderRadius4, borderRadiusHalf } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
 import { space4, space8 } from '../utilities/spacing';
+export var TagContentStyle = styled.span.withConfig({
+  displayName: "TagStyle__TagContentStyle",
+  componentId: "sc-r1wv7a-0"
+})(["padding:", " ", ";&[data-removeable='true']{padding-right:0;}"], space4, space8);
+export var TagRemoveContainerStyle = styled.div.withConfig({
+  displayName: "TagStyle__TagRemoveContainerStyle",
+  componentId: "sc-r1wv7a-1"
+})(["padding:", ";display:flex;"], space4);
+export var TagIconWrapper = styled.div.withConfig({
+  displayName: "TagStyle__TagIconWrapper",
+  componentId: "sc-r1wv7a-2"
+})(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], Blue.S100, borderRadius4);
 export var TagStyle = styled.div.withConfig({
   displayName: "TagStyle",
-  componentId: "sc-r1wv7a-0"
-})(["display:inline-flex;background-color:", ";width:fit-content;padding:", " ", ";border-radius:", ";@media (max-width:", "){font-size:12px;}"], Blue.S08, space4, space8, borderRadius4, Breakpoints.large);
+  componentId: "sc-r1wv7a-3"
+})(["display:inline-flex;align-items:center;background-color:", ";border-radius:", ";width:fit-content;@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], Blue.S08, borderRadius4, Breakpoints.large, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf);