intergalactic 15.99.0-prerelease.1 → 15.100.0-prerelease.0

package/tag/lib/cjs/style/tag.shadow.css

@@ -1,4 +1,5 @@
-STag {
+STag,
+STagContainerClose {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -13,8 +14,9 @@ STag {
   font-weight: var(--intergalactic-medium, 500);
   color: var(--tag-color);
 
-  &[interactive]:has(SText:focus) {
+  &[interactive][keyboardFocused] {
     box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+    z-index: 1;
   }
 
   &::before {
@@ -52,27 +54,19 @@ STag {
   }
 }
 
-STag[interactive][keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-  z-index: 1;
-}
-
-STag[interactive][keyboardFocused]:has(:focus) {
-  box-shadow: none;
-}
-
-
-STag[disabled] {
+STag[disabled],
+STagContainerClose[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;
   pointer-events: none;
 }
 
-STag[interactive] {
+STag[interactiveView] {
   cursor: pointer;
 }
 
-STag[size='m'] {
+STag[size='m'],
+STagContainerClose[size='m'] {
   height: 20px;
   min-width: 20px;
 
@@ -90,7 +84,8 @@ STag[size='m'] {
   }
 }
 
-STag[size='l'] {
+STag[size='l'],
+STagContainerClose[size='l'] {
   height: 28px;
   min-width: 28px;
 
@@ -100,9 +95,11 @@ STag[size='l'] {
   }
 }
 
-STag[size='xl'] {
+STag[size='xl'],
+STagContainerClose[size='xl'] {
   height: 40px;
   min-width: 40px;
+  padding: 0 var(--intergalactic-spacing-2x, 8px);
 
   & SText {
     font-size: var(--intergalactic-fs-300, 16px);
@@ -110,7 +107,8 @@ STag[size='xl'] {
   }
 }
 
-STag[theme='primary'] {
+STag[theme='primary'],
+STagContainerClose[theme='primary'] {
   &::before {
     top: -1px;
     left: -1px;
@@ -122,8 +120,8 @@ STag[theme='primary'] {
     display: none;
   }
 
-  &[interactive]:hover,
-  &[interactive]:active,
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
   &[active] {
     &:before {
       opacity: 0.3;
@@ -132,13 +130,15 @@ STag[theme='primary'] {
 }
 
 STag[theme='secondary'],
-STag[theme='additional'] {
+STagContainerClose[theme='secondary'],
+STag[theme='additional'],
+STagContainerClose[theme='additional'] {
   &::before {
     opacity: 0.01;
   }
 
-  &[interactive]:hover,
-  &[interactive]:active,
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
   &[active] {
     &:before {
       opacity: 0.1;
@@ -147,21 +147,28 @@ STag[theme='additional'] {
 }
 
 STag[theme='secondary'],
+STagContainerClose[theme='secondary'],
 STag[theme='additional'],
+STagContainerClose[theme='additional'],
 STag[theme='secondary-invert'],
-STag[theme='additional-invert'] {
+STagContainerClose[theme='secondary-invert'],
+STag[theme='additional-invert'],
+STagContainerClose[theme='additional-invert'] {
   &::after {
     opacity: 0.5;
   }
 }
 
-STag[theme='primary-invert'] {
+STag[theme='primary-invert'],
+STagContainerClose[theme='primary-invert'] {
   background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
   color: var(--intergalactic-text-primary-invert, #ffffff);
 }
 
 STag[theme='secondary-invert'],
-STag[theme='additional-invert'] {
+STagContainerClose[theme='secondary-invert'],
+STag[theme='additional-invert'],
+STagContainerClose[theme='additional-invert'] {
   color: var(--intergalactic-text-primary-invert, #ffffff);
 }
 
@@ -182,7 +189,7 @@ SText {
   position: relative;
 }
 
-STag[interactive] SText[keyboardFocused] {
+SText[keyboardFocused] {
   box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
   z-index: 1;
 }
@@ -258,4 +265,70 @@ SClose {
   &:hover path {
     opacity: 1;
   }
+}
+
+STagContainer {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  STag {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-right: var(--intergalactic-spacing-05x, 2px);
+
+    &::before,
+    &::after {
+      border-right: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-right: -1px;
+    }
+
+    SText {
+      padding-right: 0;
+    }
+  }
+
+  STagContainerClose {
+    cursor: pointer;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding-left: 0;
+    padding-right: 0;
+    min-width: 20px;
+
+    &::before,
+    &::after {
+      border-left: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &::before {
+      left: -1px;
+    }
+
+    svg {
+      padding-left: 0;
+      padding-right: var(--intergalactic-spacing-1x, 4px);
+    }
+
+    svg path {
+      opacity: 0.5;
+    }
+
+    &:hover svg path {
+      opacity: 1;
+    }
+  }
+
+  STagContainerClose[size='xl'] {
+    svg {
+      padding-left: var(--intergalactic-spacing-1x, 4px);
+      padding-right: var(--intergalactic-spacing-2x, 8px);
+    }
+
+  }
 }

package/tag/lib/cjs/translations/en.json

@@ -1,3 +1,3 @@
 {
-  "remove": "tap to remove tag"
+  "remove": "Remove"
 }

package/tag/lib/es6/Tag.js

@@ -6,6 +6,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from 'intergalactic/utils/lib/core/index';
+import { assignProps as _assignProps7 } from 'intergalactic/core';
+import { assignProps as _assignProps6 } from 'intergalactic/core';
 import { assignProps as _assignProps5 } from 'intergalactic/core';
 import { assignProps as _assignProps4 } from 'intergalactic/core';
 import { assignProps as _assignProps3 } from 'intergalactic/core';
@@ -22,29 +24,32 @@ import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
 import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
 import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
+import log from 'intergalactic/utils/lib/logger';
 /*__reshadow-styles__:"./style/tag.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STag_1vpi8_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_1vpi8)}.___STag_1vpi8_gg_.__interactive_1vpi8_gg_:has(.___SText_1vpi8_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_1vpi8_gg_::after,.___STag_1vpi8_gg_::before{content:\"\";position:absolute;border-radius:var(--intergalactic-tag-rounded, 24px);filter:brightness(150%)}.___STag_1vpi8_gg_::before{top:0;left:0;right:0;bottom:0;background-color:var(--tag-color_1vpi8);opacity:.2}.___STag_1vpi8_gg_::after{top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border:1px solid var(--tag-color_1vpi8);opacity:.1}.___STag_1vpi8_gg_:active,.___STag_1vpi8_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STag_1vpi8_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STag_1vpi8_gg_.__interactive_1vpi8_gg_.__keyboardFocused_1vpi8_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___STag_1vpi8_gg_.__interactive_1vpi8_gg_.__keyboardFocused_1vpi8_gg_:has(:focus){box-shadow:none}.___STag_1vpi8_gg_.__disabled_1vpi8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_1vpi8_gg_.__interactive_1vpi8_gg_{cursor:pointer}.___STag_1vpi8_gg_._size_m_1vpi8_gg_{height:20px;min-width:20px}.___STag_1vpi8_gg_._size_m_1vpi8_gg_ .___SCircle_1vpi8_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_1vpi8_gg_._size_m_1vpi8_gg_ .___SCircle_1vpi8_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_1vpi8_gg_._size_m_1vpi8_gg_ .___SText_1vpi8_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_1vpi8_gg_._size_l_1vpi8_gg_{height:28px;min-width:28px}.___STag_1vpi8_gg_._size_l_1vpi8_gg_ .___SText_1vpi8_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_1vpi8_gg_._size_xl_1vpi8_gg_{height:40px;min-width:40px}.___STag_1vpi8_gg_._size_xl_1vpi8_gg_ .___SText_1vpi8_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_1vpi8_gg_._theme_primary_1vpi8_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STag_1vpi8_gg_._theme_primary_1vpi8_gg_:after{display:none}.___STag_1vpi8_gg_._theme_primary_1vpi8_gg_.__active_1vpi8_gg_:before,.___STag_1vpi8_gg_._theme_primary_1vpi8_gg_.__interactive_1vpi8_gg_:active:before{opacity:.3}@media (hover:hover){.___STag_1vpi8_gg_._theme_primary_1vpi8_gg_.__interactive_1vpi8_gg_:hover:before{opacity:.3}}.___STag_1vpi8_gg_._theme_additional_1vpi8_gg_::before,.___STag_1vpi8_gg_._theme_secondary_1vpi8_gg_::before{opacity:.01}.___STag_1vpi8_gg_._theme_additional_1vpi8_gg_.__active_1vpi8_gg_:before,.___STag_1vpi8_gg_._theme_additional_1vpi8_gg_.__interactive_1vpi8_gg_:active:before,.___STag_1vpi8_gg_._theme_secondary_1vpi8_gg_.__active_1vpi8_gg_:before,.___STag_1vpi8_gg_._theme_secondary_1vpi8_gg_.__interactive_1vpi8_gg_:active:before{opacity:.1}@media (hover:hover){.___STag_1vpi8_gg_._theme_additional_1vpi8_gg_.__interactive_1vpi8_gg_:hover:before,.___STag_1vpi8_gg_._theme_secondary_1vpi8_gg_.__interactive_1vpi8_gg_:hover:before{opacity:.1}}.___SClose_1vpi8_gg_ path,.___STag_1vpi8_gg_._theme_additional-invert_1vpi8_gg_::after,.___STag_1vpi8_gg_._theme_additional_1vpi8_gg_::after,.___STag_1vpi8_gg_._theme_secondary-invert_1vpi8_gg_::after,.___STag_1vpi8_gg_._theme_secondary_1vpi8_gg_::after{opacity:.5}.___STag_1vpi8_gg_._theme_primary-invert_1vpi8_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15))}.___STag_1vpi8_gg_._theme_additional-invert_1vpi8_gg_,.___STag_1vpi8_gg_._theme_primary-invert_1vpi8_gg_,.___STag_1vpi8_gg_._theme_secondary-invert_1vpi8_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_1vpi8_gg_._theme_additional_1vpi8_gg_::after{border-style:dashed}.___SText_1vpi8_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___STag_1vpi8_gg_.__interactive_1vpi8_gg_ .___SText_1vpi8_gg_.__keyboardFocused_1vpi8_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_1vpi8_gg_:not(:only-child):first-child{padding-right:0}.___SText_1vpi8_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1vpi8_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1vpi8_gg_,.___SCircle_1vpi8_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1vpi8_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_1vpi8_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_1vpi8_gg_:first-child{margin-left:0}.___SCircle_1vpi8_gg_:last-child{margin-right:0}.___SCircle_1vpi8_gg_._size_m_1vpi8_gg_{width:16px;height:16px}.___SCircle_1vpi8_gg_._size_l_1vpi8_gg_,.___SCircle_1vpi8_gg_._size_xl_1vpi8_gg_{width:20px;height:20px}.___SClose_1vpi8_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px);position:relative}@media (hover:hover){.___SClose_1vpi8_gg_:hover path{opacity:1}}" /*__inner_css_end__*/, "1vpi8_gg_") /*__reshadow_css_end__*/, {
-  "__STag": "___STag_1vpi8_gg_",
-  "_interactive": "__interactive_1vpi8_gg_",
-  "_keyboardFocused": "__keyboardFocused_1vpi8_gg_",
-  "_disabled": "__disabled_1vpi8_gg_",
-  "_theme_primary-invert": "_theme_primary-invert_1vpi8_gg_",
-  "_theme_secondary-invert": "_theme_secondary-invert_1vpi8_gg_",
-  "_theme_additional-invert": "_theme_additional-invert_1vpi8_gg_",
-  "__SText": "___SText_1vpi8_gg_",
-  "__SAddon": "___SAddon_1vpi8_gg_",
-  "__SCircle": "___SCircle_1vpi8_gg_",
-  "_size_m": "_size_m_1vpi8_gg_",
-  "_size_l": "_size_l_1vpi8_gg_",
-  "_size_xl": "_size_xl_1vpi8_gg_",
-  "--tag-color": "--tag-color_1vpi8",
-  "_theme_primary": "_theme_primary_1vpi8_gg_",
-  "_active": "__active_1vpi8_gg_",
-  "_theme_secondary": "_theme_secondary_1vpi8_gg_",
-  "_theme_additional": "_theme_additional_1vpi8_gg_",
-  "__SClose": "___SClose_1vpi8_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STagContainerClose_9qjw2_gg_,.___STag_9qjw2_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_9qjw2)}.___STagContainerClose_9qjw2_gg_.__interactive_9qjw2_gg_.__keyboardFocused_9qjw2_gg_,.___STag_9qjw2_gg_.__interactive_9qjw2_gg_.__keyboardFocused_9qjw2_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___STagContainerClose_9qjw2_gg_::before,.___STag_9qjw2_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--intergalactic-tag-rounded, 24px);background-color:var(--tag-color_9qjw2);opacity:.2;filter:brightness(150%)}.___STagContainerClose_9qjw2_gg_::after,.___STag_9qjw2_gg_::after{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--intergalactic-tag-rounded, 24px);pointer-events:none;border:1px solid var(--tag-color_9qjw2);opacity:.1;filter:brightness(150%)}.___STagContainerClose_9qjw2_gg_:active,.___STagContainerClose_9qjw2_gg_:focus,.___STag_9qjw2_gg_:active,.___STag_9qjw2_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STagContainerClose_9qjw2_gg_:hover,.___STag_9qjw2_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STagContainerClose_9qjw2_gg_.__disabled_9qjw2_gg_,.___STag_9qjw2_gg_.__disabled_9qjw2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_9qjw2_gg_.__interactiveView_9qjw2_gg_{cursor:pointer}.___STagContainerClose_9qjw2_gg_._size_m_9qjw2_gg_,.___STag_9qjw2_gg_._size_m_9qjw2_gg_{height:20px;min-width:20px}.___STagContainerClose_9qjw2_gg_._size_m_9qjw2_gg_ .___SCircle_9qjw2_gg_:first-child,.___STag_9qjw2_gg_._size_m_9qjw2_gg_ .___SCircle_9qjw2_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STagContainerClose_9qjw2_gg_._size_m_9qjw2_gg_ .___SCircle_9qjw2_gg_:last-child,.___STag_9qjw2_gg_._size_m_9qjw2_gg_ .___SCircle_9qjw2_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STagContainerClose_9qjw2_gg_._size_m_9qjw2_gg_ .___SText_9qjw2_gg_,.___STag_9qjw2_gg_._size_m_9qjw2_gg_ .___SText_9qjw2_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STagContainerClose_9qjw2_gg_._size_l_9qjw2_gg_,.___STag_9qjw2_gg_._size_l_9qjw2_gg_{height:28px;min-width:28px}.___STagContainerClose_9qjw2_gg_._size_l_9qjw2_gg_ .___SText_9qjw2_gg_,.___STag_9qjw2_gg_._size_l_9qjw2_gg_ .___SText_9qjw2_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STagContainerClose_9qjw2_gg_._size_xl_9qjw2_gg_,.___STag_9qjw2_gg_._size_xl_9qjw2_gg_{height:40px;min-width:40px;padding:0 var(--intergalactic-spacing-2x, 8px)}.___STagContainerClose_9qjw2_gg_._size_xl_9qjw2_gg_ .___SText_9qjw2_gg_,.___STag_9qjw2_gg_._size_xl_9qjw2_gg_ .___SText_9qjw2_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STagContainerClose_9qjw2_gg_._theme_primary_9qjw2_gg_::before,.___STag_9qjw2_gg_._theme_primary_9qjw2_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STagContainerClose_9qjw2_gg_._theme_primary_9qjw2_gg_:after,.___STag_9qjw2_gg_._theme_primary_9qjw2_gg_:after{display:none}.___STagContainerClose_9qjw2_gg_._theme_primary_9qjw2_gg_.__active_9qjw2_gg_:before,.___STagContainerClose_9qjw2_gg_._theme_primary_9qjw2_gg_.__interactiveView_9qjw2_gg_:active:before,.___STag_9qjw2_gg_._theme_primary_9qjw2_gg_.__active_9qjw2_gg_:before,.___STag_9qjw2_gg_._theme_primary_9qjw2_gg_.__interactiveView_9qjw2_gg_:active:before{opacity:.3}@media (hover:hover){.___STagContainerClose_9qjw2_gg_._theme_primary_9qjw2_gg_.__interactiveView_9qjw2_gg_:hover:before,.___STag_9qjw2_gg_._theme_primary_9qjw2_gg_.__interactiveView_9qjw2_gg_:hover:before{opacity:.3}}.___STagContainerClose_9qjw2_gg_._theme_additional_9qjw2_gg_::before,.___STagContainerClose_9qjw2_gg_._theme_secondary_9qjw2_gg_::before,.___STag_9qjw2_gg_._theme_additional_9qjw2_gg_::before,.___STag_9qjw2_gg_._theme_secondary_9qjw2_gg_::before{opacity:.01}.___STagContainerClose_9qjw2_gg_._theme_additional_9qjw2_gg_.__active_9qjw2_gg_:before,.___STagContainerClose_9qjw2_gg_._theme_additional_9qjw2_gg_.__interactiveView_9qjw2_gg_:active:before,.___STagContainerClose_9qjw2_gg_._theme_secondary_9qjw2_gg_.__active_9qjw2_gg_:before,.___STagContainerClose_9qjw2_gg_._theme_secondary_9qjw2_gg_.__interactiveView_9qjw2_gg_:active:before,.___STag_9qjw2_gg_._theme_additional_9qjw2_gg_.__active_9qjw2_gg_:before,.___STag_9qjw2_gg_._theme_additional_9qjw2_gg_.__interactiveView_9qjw2_gg_:active:before,.___STag_9qjw2_gg_._theme_secondary_9qjw2_gg_.__active_9qjw2_gg_:before,.___STag_9qjw2_gg_._theme_secondary_9qjw2_gg_.__interactiveView_9qjw2_gg_:active:before{opacity:.1}@media (hover:hover){.___STagContainerClose_9qjw2_gg_._theme_additional_9qjw2_gg_.__interactiveView_9qjw2_gg_:hover:before,.___STagContainerClose_9qjw2_gg_._theme_secondary_9qjw2_gg_.__interactiveView_9qjw2_gg_:hover:before,.___STag_9qjw2_gg_._theme_additional_9qjw2_gg_.__interactiveView_9qjw2_gg_:hover:before,.___STag_9qjw2_gg_._theme_secondary_9qjw2_gg_.__interactiveView_9qjw2_gg_:hover:before{opacity:.1}}.___SClose_9qjw2_gg_ path,.___STagContainerClose_9qjw2_gg_._theme_additional-invert_9qjw2_gg_::after,.___STagContainerClose_9qjw2_gg_._theme_additional_9qjw2_gg_::after,.___STagContainerClose_9qjw2_gg_._theme_secondary-invert_9qjw2_gg_::after,.___STagContainerClose_9qjw2_gg_._theme_secondary_9qjw2_gg_::after,.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_ svg path,.___STag_9qjw2_gg_._theme_additional-invert_9qjw2_gg_::after,.___STag_9qjw2_gg_._theme_additional_9qjw2_gg_::after,.___STag_9qjw2_gg_._theme_secondary-invert_9qjw2_gg_::after,.___STag_9qjw2_gg_._theme_secondary_9qjw2_gg_::after{opacity:.5}.___STagContainerClose_9qjw2_gg_._theme_primary-invert_9qjw2_gg_,.___STag_9qjw2_gg_._theme_primary-invert_9qjw2_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));color:var(--intergalactic-text-primary-invert, #ffffff)}.___STagContainerClose_9qjw2_gg_._theme_additional-invert_9qjw2_gg_,.___STagContainerClose_9qjw2_gg_._theme_secondary-invert_9qjw2_gg_,.___STag_9qjw2_gg_._theme_additional-invert_9qjw2_gg_,.___STag_9qjw2_gg_._theme_secondary-invert_9qjw2_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_9qjw2_gg_._theme_additional_9qjw2_gg_::after{border-style:dashed}.___SText_9qjw2_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___SText_9qjw2_gg_.__keyboardFocused_9qjw2_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_9qjw2_gg_:not(:only-child):first-child{padding-right:0}.___SText_9qjw2_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_9qjw2_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_9qjw2_gg_,.___SCircle_9qjw2_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_9qjw2_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_9qjw2_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_9qjw2_gg_:first-child{margin-left:0}.___SCircle_9qjw2_gg_:last-child{margin-right:0}.___SCircle_9qjw2_gg_._size_m_9qjw2_gg_{width:16px;height:16px}.___SCircle_9qjw2_gg_._size_l_9qjw2_gg_,.___SCircle_9qjw2_gg_._size_xl_9qjw2_gg_{width:20px;height:20px}.___SClose_9qjw2_gg_{cursor:pointer;flex-shrink:0;padding:var(--intergalactic-spacing-1x, 4px)}@media (hover:hover){.___SClose_9qjw2_gg_:hover path{opacity:1}}.___SClose_9qjw2_gg_,.___STagContainer_9qjw2_gg_{display:inline-flex;position:relative;align-items:center;justify-content:center}.___STagContainer_9qjw2_gg_ .___STag_9qjw2_gg_{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:var(--intergalactic-spacing-05x, 2px)}.___STagContainer_9qjw2_gg_ .___STag_9qjw2_gg_::after,.___STagContainer_9qjw2_gg_ .___STag_9qjw2_gg_::before{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.___STagContainer_9qjw2_gg_ .___STag_9qjw2_gg_ .___SText_9qjw2_gg_{padding-right:0}.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_{cursor:pointer;border-top-left-radius:0;border-bottom-left-radius:0;padding-left:0;padding-right:0;min-width:20px}.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_::after,.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_::before{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_::before{left:-1px}.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_ svg{padding-left:0;padding-right:var(--intergalactic-spacing-1x, 4px)}@media (hover:hover){.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_:hover svg path{opacity:1}}.___STagContainer_9qjw2_gg_ .___STagContainerClose_9qjw2_gg_._size_xl_9qjw2_gg_ svg{padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "9qjw2_gg_") /*__reshadow_css_end__*/, {
+  "__STag": "___STag_9qjw2_gg_",
+  "_disabled": "__disabled_9qjw2_gg_",
+  "__STagContainerClose": "___STagContainerClose_9qjw2_gg_",
+  "_interactiveView": "__interactiveView_9qjw2_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_9qjw2_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_9qjw2_gg_",
+  "_theme_additional-invert": "_theme_additional-invert_9qjw2_gg_",
+  "__SText": "___SText_9qjw2_gg_",
+  "_keyboardFocused": "__keyboardFocused_9qjw2_gg_",
+  "__SAddon": "___SAddon_9qjw2_gg_",
+  "__SCircle": "___SCircle_9qjw2_gg_",
+  "_size_m": "_size_m_9qjw2_gg_",
+  "_size_l": "_size_l_9qjw2_gg_",
+  "_size_xl": "_size_xl_9qjw2_gg_",
+  "--tag-color": "--tag-color_9qjw2",
+  "_interactive": "__interactive_9qjw2_gg_",
+  "_theme_primary": "_theme_primary_9qjw2_gg_",
+  "_active": "__active_9qjw2_gg_",
+  "_theme_secondary": "_theme_secondary_9qjw2_gg_",
+  "_theme_additional": "_theme_additional_9qjw2_gg_",
+  "__SClose": "___SClose_9qjw2_gg_",
+  "__STagContainer": "___STagContainer_9qjw2_gg_"
 });
-import { callAllEventHandlers } from 'intergalactic/utils/lib/assignProps';
 var legacyThemeRecommendedMigration = {
   primary: {
     muted: 'gray-500',
@@ -108,7 +113,8 @@ var RootTag = /*#__PURE__*/function (_Component) {
       var focusable = this.state.focusable;
       return {
         tabIndex: focusable === 'text' && interactive ? 0 : -1,
-        id: "".concat(id, "-text")
+        id: "".concat(id, "-text"),
+        role: focusable === 'text' && interactive ? 'button' : undefined
       };
     }
   }, {
@@ -121,7 +127,6 @@ var RootTag = /*#__PURE__*/function (_Component) {
         id: "".concat(id, "-clear"),
         'aria-labelledby': "".concat(id, "-clear ").concat(id, "-text"),
         'aria-label': getI18nText('remove'),
-        'aria-hidden': 'true',
         onMount: this.handleCloseMount,
         onUnmount: this.handleCloseUnmount
       };
@@ -130,7 +135,7 @@ var RootTag = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-        _ref6;
+        _ref8;
       var STag = Box;
       var _this$asProps = this.asProps,
         Children = _this$asProps.Children,
@@ -145,13 +150,16 @@ var RootTag = /*#__PURE__*/function (_Component) {
         uid = _this$asProps.uid;
       var focusable = this.state.focusable;
       var id = outerId || "igc-".concat(uid, "-tag");
-      return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STag, _ref6.cn("STag", _objectSpread({}, _assignProps({
+      var isInteractiveView = !disabled && interactive;
+      var isInteractive = !disabled && interactive && focusable === 'container';
+      return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(STag, _ref8.cn("STag", _objectSpread({}, _assignProps({
         "id": id,
-        "use:interactive": !disabled && interactive,
-        "role": interactive ? 'button' : undefined,
+        "use:interactive": isInteractive,
+        "use:interactiveView": isInteractiveView,
         "tag-color": resolveColor(color),
         "onKeyDown": this.handleKeyDown,
-        "use:tabIndex": interactive && focusable === 'container' ? 0 : -1
+        "use:tabIndex": isInteractive ? 0 : -1,
+        "role": isInteractive ? 'button' : undefined
       }, _ref))), addonLeft ? /*#__PURE__*/React.createElement(Tag.Addon, {
         tag: addonLeft
       }) : null, addonTextChildren(Children, Tag.Text, Tag.Addon), addonRight ? /*#__PURE__*/React.createElement(Tag.Addon, {
@@ -171,24 +179,153 @@ _defineProperty(RootTag, "defaultProps", {
   i18n: localizedMessages,
   locale: 'en'
 });
+var RootTagContainer = /*#__PURE__*/function (_Component2) {
+  _inherits(RootTagContainer, _Component2);
+  var _super2 = _createSuper(RootTagContainer);
+  function RootTagContainer() {
+    _classCallCheck(this, RootTagContainer);
+    return _super2.apply(this, arguments);
+  }
+  _createClass(RootTagContainer, [{
+    key: "getTagProps",
+    value: function getTagProps() {
+      var _this$asProps2 = this.asProps,
+        size = _this$asProps2.size,
+        theme = _this$asProps2.theme,
+        color = _this$asProps2.color,
+        disabled = _this$asProps2.disabled,
+        active = _this$asProps2.active,
+        uid = _this$asProps2.uid,
+        outerId = _this$asProps2.id;
+      var id = outerId || "igc-".concat(uid, "-tag");
+      return {
+        id: "".concat(id, "-text"),
+        disabled: disabled,
+        size: size,
+        theme: theme,
+        color: color,
+        active: active
+      };
+    }
+  }, {
+    key: "getCloseProps",
+    value: function getCloseProps() {
+      var _this$asProps3 = this.asProps,
+        size = _this$asProps3.size,
+        theme = _this$asProps3.theme,
+        color = _this$asProps3.color,
+        disabled = _this$asProps3.disabled,
+        active = _this$asProps3.active,
+        uid = _this$asProps3.uid,
+        outerId = _this$asProps3.id,
+        getI18nText = _this$asProps3.getI18nText;
+      var id = outerId || "igc-".concat(uid, "-tag");
+      return {
+        disabled: disabled,
+        size: size,
+        theme: theme,
+        color: color,
+        active: active,
+        id: "".concat(id, "-clear"),
+        'aria-labelledby': "".concat(id, "-clear ").concat(id, "-text"),
+        'aria-label': getI18nText('remove')
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref2 = this.asProps,
+        _ref9;
+      var STagContainer = Box;
+      var _this$asProps4 = this.asProps,
+        styles = _this$asProps4.styles,
+        Children = _this$asProps4.Children;
+      return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(STagContainer, _ref9.cn("STagContainer", _objectSpread({}, _assignProps2({}, _ref2))), /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {})));
+    }
+  }]);
+  return RootTagContainer;
+}(Component);
+_defineProperty(RootTagContainer, "displayName", 'TagContainer');
+_defineProperty(RootTagContainer, "style", style);
+_defineProperty(RootTagContainer, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
+var RootCloseTagContainer = /*#__PURE__*/function (_Component3) {
+  _inherits(RootCloseTagContainer, _Component3);
+  var _super3 = _createSuper(RootCloseTagContainer);
+  function RootCloseTagContainer() {
+    var _this2;
+    _classCallCheck(this, RootCloseTagContainer);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this2 = _super3.call.apply(_super3, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "handleKeyDown", function (event) {
+      var _this2$asProps = _this2.asProps,
+        onKeyDown = _this2$asProps.onKeyDown,
+        onClick = _this2$asProps.onClick;
+      if (onKeyDown) {
+        return onKeyDown(event);
+      }
+      if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+        event.preventDefault();
+        onClick(event);
+      }
+    });
+    return _this2;
+  }
+  _createClass(RootCloseTagContainer, [{
+    key: "render",
+    value: function render() {
+      var _ref3 = this.asProps,
+        _ref10;
+      var STagContainerClose = Box;
+      var _this$asProps5 = this.asProps,
+        Children = _this$asProps5.Children,
+        styles = _this$asProps5.styles,
+        color = _this$asProps5.color,
+        resolveColor = _this$asProps5.resolveColor;
+      return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(STagContainerClose, _ref10.cn("STagContainerClose", _objectSpread({}, _assignProps3({
+        "tag": 'button',
+        "interactive": true,
+        "interactiveView": true,
+        "tag-color": resolveColor(color),
+        "onKeyDown": this.handleKeyDown
+      }, _ref3))), /*#__PURE__*/React.createElement(Children, _ref10.cn("Children", {})));
+    }
+  }]);
+  return RootCloseTagContainer;
+}(Component);
+_defineProperty(RootCloseTagContainer, "displayName", 'CloseTagContainer');
+_defineProperty(RootCloseTagContainer, "style", style);
+_defineProperty(RootCloseTagContainer, "defaultProps", function () {
+  return {
+    theme: 'primary',
+    color: 'gray-500',
+    size: 'm',
+    i18n: localizedMessages,
+    locale: 'en',
+    children: /*#__PURE__*/React.createElement(CloseTagContainer.Close, null)
+  };
+});
+_defineProperty(RootCloseTagContainer, "enhance", [resolveColorEnhance(), keyboardFocusEnhance()]);
 function Text(props) {
-  var _ref2 = arguments[0],
-    _ref7;
+  var _ref4 = arguments[0],
+    _ref11;
   var SText = Box;
   var styles = props.styles;
-  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", _objectSpread({}, _assignProps2({
+  return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref11.cn("SText", _objectSpread({}, _assignProps4({
     "tag": 'span'
-  }, _ref2))));
+  }, _ref4))));
 }
 Text.enhance = [keyboardFocusEnhance()];
 function Close(props) {
-  var _ref3 = arguments[0],
-    _ref8;
+  var _ref5 = arguments[0],
+    _ref12;
   var SClose = Box;
   var styles = props.styles;
   React.useEffect(function () {
     var _props$onMount;
     (_props$onMount = props.onMount) === null || _props$onMount === void 0 ? void 0 : _props$onMount.call(props);
+    log.warn(true, 'Tag.Close is deprecated and will be removed in the next major release. Please, use TagContainer and TagContainer.Close', 'Tag.Close');
     return function () {
       var _props$onUnmount;
       return (_props$onUnmount = props.onUnmount) === null || _props$onUnmount === void 0 ? void 0 : _props$onUnmount.call(props);
@@ -203,29 +340,29 @@ function Close(props) {
       props.onClick(event);
     }
   }, [props.onKeyDown, props.onClick]);
-  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, _assignProps3({
+  return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SClose, _ref12.cn("SClose", _objectSpread({}, _assignProps5({
     "tag": CloseM,
     "interactive": true,
     "onKeyDown": onKeyDown
-  }, _ref3))));
+  }, _ref5))));
 }
 function Addon(props) {
-  var _ref4 = arguments[0],
-    _ref9;
+  var _ref6 = arguments[0],
+    _ref13;
   var SAddon = Box;
   var styles = props.styles;
-  return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(SAddon, _ref9.cn("SAddon", _objectSpread({}, _assignProps4({
+  return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SAddon, _ref13.cn("SAddon", _objectSpread({}, _assignProps6({
     "tag": 'span'
-  }, _ref4))));
+  }, _ref6))));
 }
 function Circle(props) {
-  var _ref5 = arguments[0],
-    _ref10;
+  var _ref7 = arguments[0],
+    _ref14;
   var SCircle = Box;
   var styles = props.styles;
-  return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SCircle, _ref10.cn("SCircle", _objectSpread({}, _assignProps5({
+  return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SCircle, _ref14.cn("SCircle", _objectSpread({}, _assignProps7({
     "tag": 'span'
-  }, _ref5))));
+  }, _ref7))));
 }
 var Tag = createComponent(RootTag, {
   Text: Text,
@@ -233,5 +370,12 @@ var Tag = createComponent(RootTag, {
   Close: Close,
   Circle: Circle
 });
+var CloseTagContainer = createComponent(RootCloseTagContainer, {
+  Close: CloseM
+});
+export var TagContainer = createComponent(RootTagContainer, {
+  Tag: Tag,
+  Close: CloseTagContainer
+});
 export default Tag;
 //# sourceMappingURL=Tag.js.map