glints-aries 4.0.321 → 4.0.323

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/es/@next/Card/Card.d.ts +2 -0
  2. package/es/@next/Card/Card.js +11 -7
  3. package/es/@next/Card/Card.stories.d.ts +1 -0
  4. package/es/@next/Tag/Tag.d.ts +3 -0
  5. package/es/@next/Tag/Tag.js +14 -5
  6. package/es/@next/Tag/Tag.stories.d.ts +1 -0
  7. package/es/@next/Tag/TagStyle.d.ts +1 -0
  8. package/es/@next/Tag/TagStyle.js +12 -8
  9. package/lib/@next/Card/Card.d.ts +2 -0
  10. package/lib/@next/Card/Card.js +11 -7
  11. package/lib/@next/Card/Card.stories.d.ts +1 -0
  12. package/lib/@next/Tag/Tag.d.ts +3 -0
  13. package/lib/@next/Tag/Tag.js +13 -4
  14. package/lib/@next/Tag/Tag.stories.d.ts +1 -0
  15. package/lib/@next/Tag/TagStyle.d.ts +1 -0
  16. package/lib/@next/Tag/TagStyle.js +12 -7
  17. package/package.json +1 -1
package/es/@next/Card/Card.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare type CardProps = {
9
9
  headerPrimaryAction?: ComponentAction;
10
10
  headerSecondaryAction?: ComponentAction;
11
11
  actionsAlignment?: 'left' | 'right';
12
+ /** Defining custom actions will not show primary and secondary actions */
13
+ customActions?: React.ReactNode;
12
14
  };
13
15
  export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
14
16
  Section: ({ children }: {
package/es/@next/Card/Card.js CHANGED
@@ -12,6 +12,7 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
12
12
  subheading = _ref.subheading,
13
13
  primaryAction = _ref.primaryAction,
14
14
  secondaryAction = _ref.secondaryAction,
15
+ customActions = _ref.customActions,
15
16
  headerPrimaryAction = _ref.headerPrimaryAction,
16
17
  headerSecondaryAction = _ref.headerSecondaryAction,
17
18
  _ref$actionsAlignment = _ref.actionsAlignment,
@@ -34,8 +35,14 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
34
35
  }
35
36
  return /*#__PURE__*/React.createElement(StyledCardHeaderSection, null, subHeadingMarkup);
36
37
  };
38
+ var defaultActionContent = /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({
39
+ onClick: secondaryAction.action
40
+ }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({
41
+ onClick: primaryAction.action
42
+ }, primaryAction), primaryAction.label));
43
+ var actionsContent = customActions ? customActions : defaultActionContent;
37
44
  var showHeader = !!heading || !!subheading;
38
- var showActions = !!primaryAction || !!secondaryAction;
45
+ var showActions = !!customActions || !!primaryAction || !!secondaryAction;
39
46
  return /*#__PURE__*/React.createElement(StyledCardContainer, {
40
47
  ref: ref
41
48
  }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, null, /*#__PURE__*/React.createElement(StyledCardHeaderLeftContainer, null, headerMarkup()), /*#__PURE__*/React.createElement(StyledCardHeaderRightContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
@@ -50,12 +57,9 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
50
57
  }, headerPrimaryAction), headerPrimaryAction.label)))), /*#__PURE__*/React.createElement(StyledCardContentWrapper, {
51
58
  "data-actions": showActions
52
59
  }, children), showActions && /*#__PURE__*/React.createElement(StyledCardActionWrapper, {
53
- "data-align": actionsAlignment
54
- }, /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({
55
- onClick: secondaryAction.action
56
- }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({
57
- onClick: primaryAction.action
58
- }, primaryAction), primaryAction.label))));
60
+ "data-align": actionsAlignment,
61
+ className: "card-actions-wrapper"
62
+ }, actionsContent));
59
63
  });
60
64
  export var Card = Object.assign(CardComponent, {
61
65
  Section: Section
package/es/@next/Card/Card.stories.d.ts CHANGED
@@ -7,3 +7,4 @@ export declare const PrimaryActionOnly: any;
7
7
  export declare const SecondaryActionOnly: any;
8
8
  export declare const DisabledActions: any;
9
9
  export declare const CustomHeadingSubHeading: any;
10
+ export declare const CustomActions: any;
package/es/@next/Tag/Tag.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import React from 'react';
2
+ import { IconNames } from '../Icon/icons/icons';
2
3
  export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
3
4
  children?: React.ReactNode;
4
5
  value?: string;
5
6
  onRemove?: (() => void) | null | void;
6
7
  textColor?: string;
7
8
  disabled?: boolean;
9
+ contentType?: 'neutral' | 'success' | 'warning';
10
+ iconName?: IconNames;
8
11
  }
9
12
  export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
10
13
  export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
package/es/@next/Tag/Tag.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
3
+ var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled", "contentType", "iconName"];
4
4
  import React from 'react';
5
5
  import { Icon } from '../Icon';
6
6
  import { Typography } from '../Typography';
7
7
  import { Neutral } from '../utilities/colors';
8
- import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle } from './TagStyle';
8
+ import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle, TagContentWrapper } from './TagStyle';
9
9
  export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
10
10
  var children = _ref.children,
11
11
  onRemove = _ref.onRemove,
@@ -13,6 +13,9 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
13
13
  textColor = _ref.textColor,
14
14
  onClick = _ref.onClick,
15
15
  disabled = _ref.disabled,
16
+ _ref$contentType = _ref.contentType,
17
+ contentType = _ref$contentType === void 0 ? 'neutral' : _ref$contentType,
18
+ iconName = _ref.iconName,
16
19
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
17
20
  var handleTextColor = function handleTextColor() {
18
21
  if (disabled) {
@@ -34,8 +37,8 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
34
37
  }, /*#__PURE__*/React.createElement(Icon, {
35
38
  name: "ri-close",
36
39
  fill: Neutral.B40,
37
- height: 20,
38
- onClick: onRemove
40
+ onClick: onRemove,
41
+ className: "remove-button-icon"
39
42
  })));
40
43
  return /*#__PURE__*/React.createElement(TagStyle, _extends({
41
44
  ref: ref
@@ -43,10 +46,16 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
43
46
  value: value,
44
47
  onClick: !disabled && onClick,
45
48
  "data-clickable": !!onClick,
49
+ "data-removeable": !!onRemove,
50
+ "data-content-type": contentType,
46
51
  role: !!onClick ? 'button' : undefined,
47
52
  "data-disabled": disabled,
48
53
  as: !!onClick ? 'button' : 'div'
49
54
  }), /*#__PURE__*/React.createElement(TagContentStyle, {
50
55
  "data-removeable": !!onRemove
51
- }, content), removeButton);
56
+ }, iconName && /*#__PURE__*/React.createElement(Icon, {
57
+ name: iconName,
58
+ fill: Neutral.B40,
59
+ height: 20
60
+ }), /*#__PURE__*/React.createElement(TagContentWrapper, null, content)), removeButton);
52
61
  });
package/es/@next/Tag/Tag.stories.d.ts CHANGED
@@ -2,6 +2,7 @@ import { Meta } from '@storybook/react';
2
2
  declare const _default: Meta<import("@storybook/react").Args>;
3
3
  export default _default;
4
4
  export declare const Default: any;
5
+ export declare const WithIcon: any;
5
6
  export declare const Removeable: any;
6
7
  export declare const Clickable: any;
7
8
  export declare const ClickableDisabled: any;
package/es/@next/Tag/TagStyle.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { TagProps, TagRemoveContainerProps } from './Tag';
3
3
  export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
4
+ export declare const TagContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
5
  export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
5
6
  export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
7
  export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;
package/es/@next/Tag/TagStyle.js CHANGED
@@ -1,21 +1,25 @@
1
1
  import styled from 'styled-components';
2
2
  import { Breakpoints } from '..';
3
3
  import { borderRadius4, borderRadiusHalf } from '../utilities/borderRadius';
4
- import { Blue, Neutral } from '../utilities/colors';
5
- import { space4, space8 } from '../utilities/spacing';
4
+ import { Blue, Green, Orange, Neutral } from '../utilities/colors';
5
+ import { space4 } from '../utilities/spacing';
6
6
  export var TagContentStyle = styled.span.withConfig({
7
7
  displayName: "TagStyle__TagContentStyle",
8
8
  componentId: "sc-r1wv7a-0"
9
- })(["padding:", " ", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4, space8);
9
+ })(["display:inline-flex;padding:", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4);
10
+ export var TagContentWrapper = styled.div.withConfig({
11
+ displayName: "TagStyle__TagContentWrapper",
12
+ componentId: "sc-r1wv7a-1"
13
+ })(["padding:0 ", ";"], space4);
10
14
  export var TagRemoveContainerStyle = styled.div.withConfig({
11
15
  displayName: "TagStyle__TagRemoveContainerStyle",
12
- componentId: "sc-r1wv7a-1"
13
- })(["padding:", ";display:flex;"], space4);
16
+ componentId: "sc-r1wv7a-2"
17
+ })(["padding:", " ", " ", " 0;display:flex;.remove-button-icon{svg{width:20px;height:20px;}}@media (max-width:", "){.remove-button-icon{svg{width:18px;height:18px;}}}"], space4, space4, space4, Breakpoints.large);
14
18
  export var TagIconWrapper = styled.div.withConfig({
15
19
  displayName: "TagStyle__TagIconWrapper",
16
- componentId: "sc-r1wv7a-2"
20
+ componentId: "sc-r1wv7a-3"
17
21
  })(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], Blue.S100, borderRadius4);
18
22
  export var TagStyle = styled.div.withConfig({
19
23
  displayName: "TagStyle",
20
- componentId: "sc-r1wv7a-3"
21
- })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@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, Blue.S100, Blue.S100, Blue.S100, Neutral.B100, Blue.S54, Neutral.B95, Breakpoints.large, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf);
24
+ componentId: "sc-r1wv7a-4"
25
+ })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&:not([data-removeable='true']):not([data-clickable='true']){&[data-content-type='neutral']{background-color:", ";}&[data-content-type='success']{background-color:", ";}&[data-content-type='warning']{background-color:", ";}}&[data-clickable='true']{cursor:pointer;background-color:", ";&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}& svg{padding:0;width:20px;height:20px;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}@media (max-width:", "){& svg{width:18px;height:18px;}}"], Blue.S08, borderRadius4, Neutral.B95, Green.B89, Orange.S21, Blue.S08, Blue.S100, Blue.S100, Blue.S100, Neutral.B100, Blue.S54, Neutral.B95, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf, Breakpoints.large);
package/lib/@next/Card/Card.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare type CardProps = {
9
9
  headerPrimaryAction?: ComponentAction;
10
10
  headerSecondaryAction?: ComponentAction;
11
11
  actionsAlignment?: 'left' | 'right';
12
+ /** Defining custom actions will not show primary and secondary actions */
13
+ customActions?: React.ReactNode;
12
14
  };
13
15
  export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
14
16
  Section: ({ children }: {
package/lib/@next/Card/Card.js CHANGED
@@ -17,6 +17,7 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
17
17
  subheading = _ref.subheading,
18
18
  primaryAction = _ref.primaryAction,
19
19
  secondaryAction = _ref.secondaryAction,
20
+ customActions = _ref.customActions,
20
21
  headerPrimaryAction = _ref.headerPrimaryAction,
21
22
  headerSecondaryAction = _ref.headerSecondaryAction,
22
23
  _ref$actionsAlignment = _ref.actionsAlignment,
@@ -39,8 +40,14 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
39
40
  }
40
41
  return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderSection, null, subHeadingMarkup);
41
42
  };
43
+ var defaultActionContent = /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({
44
+ onClick: secondaryAction.action
45
+ }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, (0, _extends2["default"])({
46
+ onClick: primaryAction.action
47
+ }, primaryAction), primaryAction.label));
48
+ var actionsContent = customActions ? customActions : defaultActionContent;
42
49
  var showHeader = !!heading || !!subheading;
43
- var showActions = !!primaryAction || !!secondaryAction;
50
+ var showActions = !!customActions || !!primaryAction || !!secondaryAction;
44
51
  return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContainer, {
45
52
  ref: ref
46
53
  }, showHeader && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderLeftContainer, null, headerMarkup()), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderRightContainer, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, {
@@ -55,12 +62,9 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
55
62
  }, headerPrimaryAction), headerPrimaryAction.label)))), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContentWrapper, {
56
63
  "data-actions": showActions
57
64
  }, children), showActions && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardActionWrapper, {
58
- "data-align": actionsAlignment
59
- }, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({
60
- onClick: secondaryAction.action
61
- }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, (0, _extends2["default"])({
62
- onClick: primaryAction.action
63
- }, primaryAction), primaryAction.label))));
65
+ "data-align": actionsAlignment,
66
+ className: "card-actions-wrapper"
67
+ }, actionsContent));
64
68
  });
65
69
  var Card = Object.assign(CardComponent, {
66
70
  Section: _Section.Section
package/lib/@next/Card/Card.stories.d.ts CHANGED
@@ -7,3 +7,4 @@ export declare const PrimaryActionOnly: any;
7
7
  export declare const SecondaryActionOnly: any;
8
8
  export declare const DisabledActions: any;
9
9
  export declare const CustomHeadingSubHeading: any;
10
+ export declare const CustomActions: any;
package/lib/@next/Tag/Tag.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import React from 'react';
2
+ import { IconNames } from '../Icon/icons/icons';
2
3
  export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
3
4
  children?: React.ReactNode;
4
5
  value?: string;
5
6
  onRemove?: (() => void) | null | void;
6
7
  textColor?: string;
7
8
  disabled?: boolean;
9
+ contentType?: 'neutral' | 'success' | 'warning';
10
+ iconName?: IconNames;
8
11
  }
9
12
  export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
10
13
  export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
package/lib/@next/Tag/Tag.js CHANGED
@@ -10,7 +10,7 @@ var _Icon = require("../Icon");
10
10
  var _Typography = require("../Typography");
11
11
  var _colors = require("../utilities/colors");
12
12
  var _TagStyle = require("./TagStyle");
13
- var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
13
+ var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled", "contentType", "iconName"];
14
14
  var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
15
15
  var children = _ref.children,
16
16
  onRemove = _ref.onRemove,
@@ -18,6 +18,9 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
18
18
  textColor = _ref.textColor,
19
19
  onClick = _ref.onClick,
20
20
  disabled = _ref.disabled,
21
+ _ref$contentType = _ref.contentType,
22
+ contentType = _ref$contentType === void 0 ? 'neutral' : _ref$contentType,
23
+ iconName = _ref.iconName,
21
24
  props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
22
25
  var handleTextColor = function handleTextColor() {
23
26
  if (disabled) {
@@ -39,8 +42,8 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
39
42
  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
40
43
  name: "ri-close",
41
44
  fill: _colors.Neutral.B40,
42
- height: 20,
43
- onClick: onRemove
45
+ onClick: onRemove,
46
+ className: "remove-button-icon"
44
47
  })));
45
48
  return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, (0, _extends2["default"])({
46
49
  ref: ref
@@ -48,11 +51,17 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
48
51
  value: value,
49
52
  onClick: !disabled && onClick,
50
53
  "data-clickable": !!onClick,
54
+ "data-removeable": !!onRemove,
55
+ "data-content-type": contentType,
51
56
  role: !!onClick ? 'button' : undefined,
52
57
  "data-disabled": disabled,
53
58
  as: !!onClick ? 'button' : 'div'
54
59
  }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentStyle, {
55
60
  "data-removeable": !!onRemove
56
- }, content), removeButton);
61
+ }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
62
+ name: iconName,
63
+ fill: _colors.Neutral.B40,
64
+ height: 20
65
+ }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentWrapper, null, content)), removeButton);
57
66
  });
58
67
  exports.Tag = Tag;
package/lib/@next/Tag/Tag.stories.d.ts CHANGED
@@ -2,6 +2,7 @@ import { Meta } from '@storybook/react';
2
2
  declare const _default: Meta<import("@storybook/react").Args>;
3
3
  export default _default;
4
4
  export declare const Default: any;
5
+ export declare const WithIcon: any;
5
6
  export declare const Removeable: any;
6
7
  export declare const Clickable: any;
7
8
  export declare const ClickableDisabled: any;
package/lib/@next/Tag/TagStyle.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { TagProps, TagRemoveContainerProps } from './Tag';
3
3
  export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
4
+ export declare const TagContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
5
  export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
5
6
  export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
7
  export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;
package/lib/@next/Tag/TagStyle.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  exports.__esModule = true;
5
- exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentStyle = void 0;
5
+ exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentWrapper = exports.TagContentStyle = void 0;
6
6
  var _styledComponents = _interopRequireDefault(require("styled-components"));
7
7
  var _ = require("..");
8
8
  var _borderRadius = require("../utilities/borderRadius");
@@ -11,20 +11,25 @@ var _spacing = require("../utilities/spacing");
11
11
  var TagContentStyle = _styledComponents["default"].span.withConfig({
12
12
  displayName: "TagStyle__TagContentStyle",
13
13
  componentId: "sc-r1wv7a-0"
14
- })(["padding:", " ", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
14
+ })(["display:inline-flex;padding:", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4);
15
15
  exports.TagContentStyle = TagContentStyle;
16
+ var TagContentWrapper = _styledComponents["default"].div.withConfig({
17
+ displayName: "TagStyle__TagContentWrapper",
18
+ componentId: "sc-r1wv7a-1"
19
+ })(["padding:0 ", ";"], _spacing.space4);
20
+ exports.TagContentWrapper = TagContentWrapper;
16
21
  var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
17
22
  displayName: "TagStyle__TagRemoveContainerStyle",
18
- componentId: "sc-r1wv7a-1"
19
- })(["padding:", ";display:flex;"], _spacing.space4);
23
+ componentId: "sc-r1wv7a-2"
24
+ })(["padding:", " ", " ", " 0;display:flex;.remove-button-icon{svg{width:20px;height:20px;}}@media (max-width:", "){.remove-button-icon{svg{width:18px;height:18px;}}}"], _spacing.space4, _spacing.space4, _spacing.space4, _.Breakpoints.large);
20
25
  exports.TagRemoveContainerStyle = TagRemoveContainerStyle;
21
26
  var TagIconWrapper = _styledComponents["default"].div.withConfig({
22
27
  displayName: "TagStyle__TagIconWrapper",
23
- componentId: "sc-r1wv7a-2"
28
+ componentId: "sc-r1wv7a-3"
24
29
  })(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], _colors.Blue.S100, _borderRadius.borderRadius4);
25
30
  exports.TagIconWrapper = TagIconWrapper;
26
31
  var TagStyle = _styledComponents["default"].div.withConfig({
27
32
  displayName: "TagStyle",
28
- componentId: "sc-r1wv7a-3"
29
- })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@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:", ";}"], _colors.Blue.S08, _borderRadius.borderRadius4, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S100, _colors.Neutral.B100, _colors.Blue.S54, _colors.Neutral.B95, _.Breakpoints.large, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf);
33
+ componentId: "sc-r1wv7a-4"
34
+ })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&:not([data-removeable='true']):not([data-clickable='true']){&[data-content-type='neutral']{background-color:", ";}&[data-content-type='success']{background-color:", ";}&[data-content-type='warning']{background-color:", ";}}&[data-clickable='true']{cursor:pointer;background-color:", ";&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}& svg{padding:0;width:20px;height:20px;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}@media (max-width:", "){& svg{width:18px;height:18px;}}"], _colors.Blue.S08, _borderRadius.borderRadius4, _colors.Neutral.B95, _colors.Green.B89, _colors.Orange.S21, _colors.Blue.S08, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S100, _colors.Neutral.B100, _colors.Blue.S54, _colors.Neutral.B95, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf, _.Breakpoints.large);
30
35
  exports.TagStyle = TagStyle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.321",
3
+ "version": "4.0.323",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",