@snack-uikit/tag 0.4.10-preview-104ad22c.0

package/dist/components/Tag/styles.module.css

@@ -0,0 +1,270 @@
+.tag{
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+}
+.tag .tagButton{
+  cursor:pointer;
+  position:relative;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  background:none;
+  border:none;
+}
+.tag .tagButton:focus{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+}
+.tag .tagButton:active{
+  outline:none;
+}
+.tag .icon{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}
+.tag[data-size=xs]{
+  padding-left:var(--space-tag-xs-from-label, 8px);
+  padding-right:var(--space-tag-xs-from-label, 8px);
+  height:var(--size-tag-xs, 24px);
+  border-radius:var(--radius-tag-xs, 4px);
+}
+.tag[data-size=xs][data-removable=true]{
+  padding-left:var(--space-tag-xs-from-label, 8px);
+  padding-right:var(--space-tag-xs-from-button, 0px);
+  height:var(--size-tag-xs, 24px);
+  border-radius:var(--radius-tag-xs, 4px);
+  gap:var(--space-tag-xs-gap, 2px);
+}
+.tag[data-size=xs] .label{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.tag[data-size=xs] .tagButton{
+  border-radius:var(--radius-tag-xs, 4px);
+  height:var(--size-tag-xs, 24px);
+  width:var(--size-tag-xs, 24px);
+}
+.tag[data-size=s]{
+  padding-left:var(--space-tag-s-from-label, 16px);
+  padding-right:var(--space-tag-s-from-label, 16px);
+  height:var(--size-tag-s, 32px);
+  border-radius:var(--radius-tag-s, 8px);
+}
+.tag[data-size=s][data-removable=true]{
+  padding-left:var(--space-tag-s-from-label, 16px);
+  padding-right:var(--space-tag-s-from-button, 0px);
+  height:var(--size-tag-s, 32px);
+  border-radius:var(--radius-tag-s, 8px);
+  gap:var(--space-tag-s-gap, 2px);
+}
+.tag[data-size=s] .label{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.tag[data-size=s] .tagButton{
+  border-radius:var(--radius-tag-s, 8px);
+  height:var(--size-tag-s, 32px);
+  width:var(--size-tag-s, 32px);
+}
+.tag[data-appearance=neutral]{
+  background-color:var(--sys-neutral-decor-default, #dedede);
+}
+.tag[data-appearance=neutral][data-removable=false]{
+  background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.tag[data-appearance=neutral] .label{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.tag[data-appearance=neutral] .tagButton{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.tag[data-appearance=neutral] .tagButton:focus, .tag[data-appearance=neutral] .tagButton:hover, .tag[data-appearance=neutral] .tagButton:active{
+  color:var(--sys-neutral-text-main, #333333);
+}
+.tag[data-appearance=neutral] .tagButton:focus, .tag[data-appearance=neutral] .tagButton:hover{
+  background-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+}
+.tag[data-appearance=neutral] .tagButton:active{
+  background-color:var(--sys-neutral-decor-activated, #b8b8b8);
+}
+.tag[data-appearance=primary]{
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.tag[data-appearance=primary][data-removable=false]{
+  background-color:var(--sys-primary-decor-disabled, #f0e7fd);
+}
+.tag[data-appearance=primary] .label{
+  color:var(--sys-primary-text-support, #5b4796);
+}
+.tag[data-appearance=primary] .tagButton{
+  color:var(--sys-primary-text-light, #997adc);
+}
+.tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover, .tag[data-appearance=primary] .tagButton:active{
+  color:var(--sys-primary-text-main, #382a62);
+}
+.tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover{
+  background-color:var(--sys-primary-decor-hovered, #decdfb);
+}
+.tag[data-appearance=primary] .tagButton:active{
+  background-color:var(--sys-primary-decor-activated, #c5b2f1);
+}
+.tag[data-appearance=red]{
+  background-color:var(--sys-red-decor-default, #ffd8d0);
+}
+.tag[data-appearance=red][data-removable=false]{
+  background-color:var(--sys-red-decor-disabled, #fee4de);
+}
+.tag[data-appearance=red] .label{
+  color:var(--sys-red-text-support, #a93936);
+}
+.tag[data-appearance=red] .tagButton{
+  color:var(--sys-red-text-light, #ec7465);
+}
+.tag[data-appearance=red] .tagButton:focus, .tag[data-appearance=red] .tagButton:hover, .tag[data-appearance=red] .tagButton:active{
+  color:var(--sys-red-text-main, #621c1e);
+}
+.tag[data-appearance=red] .tagButton:focus, .tag[data-appearance=red] .tagButton:hover{
+  background-color:var(--sys-red-decor-hovered, #fcc4b6);
+}
+.tag[data-appearance=red] .tagButton:active{
+  background-color:var(--sys-red-decor-activated, #ffa491);
+}
+.tag[data-appearance=orange]{
+  background-color:var(--sys-orange-decor-default, #fedeaf);
+}
+.tag[data-appearance=orange][data-removable=false]{
+  background-color:var(--sys-orange-decor-disabled, #fde8c4);
+}
+.tag[data-appearance=orange] .label{
+  color:var(--sys-orange-text-support, #a2532f);
+}
+.tag[data-appearance=orange] .tagButton{
+  color:var(--sys-orange-text-light, #d98135);
+}
+.tag[data-appearance=orange] .tagButton:focus, .tag[data-appearance=orange] .tagButton:hover, .tag[data-appearance=orange] .tagButton:active{
+  color:var(--sys-orange-text-main, #572212);
+}
+.tag[data-appearance=orange] .tagButton:focus, .tag[data-appearance=orange] .tagButton:hover{
+  background-color:var(--sys-orange-decor-hovered, #f6ce98);
+}
+.tag[data-appearance=orange] .tagButton:active{
+  background-color:var(--sys-orange-decor-activated, #f6bd75);
+}
+.tag[data-appearance=yellow]{
+  background-color:var(--sys-yellow-decor-default, #f9e5ad);
+}
+.tag[data-appearance=yellow][data-removable=false]{
+  background-color:var(--sys-yellow-decor-disabled, #f7ecc0);
+}
+.tag[data-appearance=yellow] .label{
+  color:var(--sys-yellow-text-support, #80461b);
+}
+.tag[data-appearance=yellow] .tagButton{
+  color:var(--sys-yellow-text-light, #be7d3c);
+}
+.tag[data-appearance=yellow] .tagButton:focus, .tag[data-appearance=yellow] .tagButton:hover, .tag[data-appearance=yellow] .tagButton:active{
+  color:var(--sys-yellow-text-main, #54290f);
+}
+.tag[data-appearance=yellow] .tagButton:focus, .tag[data-appearance=yellow] .tagButton:hover{
+  background-color:var(--sys-yellow-decor-hovered, #f6d997);
+}
+.tag[data-appearance=yellow] .tagButton:active{
+  background-color:var(--sys-yellow-decor-activated, #f3cd81);
+}
+.tag[data-appearance=green]{
+  background-color:var(--sys-green-decor-default, #cdebe3);
+}
+.tag[data-appearance=green][data-removable=false]{
+  background-color:var(--sys-green-decor-disabled, #dbefe9);
+}
+.tag[data-appearance=green] .label{
+  color:var(--sys-green-text-support, #335747);
+}
+.tag[data-appearance=green] .tagButton{
+  color:var(--sys-green-text-light, #4d9e80);
+}
+.tag[data-appearance=green] .tagButton:focus, .tag[data-appearance=green] .tagButton:hover, .tag[data-appearance=green] .tagButton:active{
+  color:var(--sys-green-text-main, #1f392a);
+}
+.tag[data-appearance=green] .tagButton:focus, .tag[data-appearance=green] .tagButton:hover{
+  background-color:var(--sys-green-decor-hovered, #b6e1d5);
+}
+.tag[data-appearance=green] .tagButton:active{
+  background-color:var(--sys-green-decor-activated, #9fd7c4);
+}
+.tag[data-appearance=blue]{
+  background-color:var(--sys-blue-decor-default, #d5e7f6);
+}
+.tag[data-appearance=blue][data-removable=false]{
+  background-color:var(--sys-blue-decor-disabled, #e0eef8);
+}
+.tag[data-appearance=blue] .label{
+  color:var(--sys-blue-text-support, #4265ab);
+}
+.tag[data-appearance=blue] .tagButton{
+  color:var(--sys-blue-text-light, #6b9fe3);
+}
+.tag[data-appearance=blue] .tagButton:focus, .tag[data-appearance=blue] .tagButton:hover, .tag[data-appearance=blue] .tagButton:active{
+  color:var(--sys-blue-text-main, #1f3361);
+}
+.tag[data-appearance=blue] .tagButton:focus, .tag[data-appearance=blue] .tagButton:hover{
+  background-color:var(--sys-blue-decor-hovered, #c4ddf9);
+}
+.tag[data-appearance=blue] .tagButton:active{
+  background-color:var(--sys-blue-decor-activated, #abcdf4);
+}
+.tag[data-appearance=violet]{
+  background-color:var(--sys-violet-decor-default, #f8dffc);
+}
+.tag[data-appearance=violet][data-removable=false]{
+  background-color:var(--sys-violet-decor-disabled, #f8e8fb);
+}
+.tag[data-appearance=violet] .label{
+  color:var(--sys-violet-text-support, #864b8e);
+}
+.tag[data-appearance=violet] .tagButton{
+  color:var(--sys-violet-text-light, #c982d1);
+}
+.tag[data-appearance=violet] .tagButton:focus, .tag[data-appearance=violet] .tagButton:hover, .tag[data-appearance=violet] .tagButton:active{
+  color:var(--sys-violet-text-main, #51255f);
+}
+.tag[data-appearance=violet] .tagButton:focus, .tag[data-appearance=violet] .tagButton:hover{
+  background-color:var(--sys-violet-decor-hovered, #f2d3f8);
+}
+.tag[data-appearance=violet] .tagButton:active{
+  background-color:var(--sys-violet-decor-activated, #eabfee);
+}
+.tag[data-appearance=pink]{
+  background-color:var(--sys-pink-decor-default, #fddde7);
+}
+.tag[data-appearance=pink][data-removable=false]{
+  background-color:var(--sys-pink-decor-disabled, #fde8ee);
+}
+.tag[data-appearance=pink] .label{
+  color:var(--sys-pink-text-support, #a23f69);
+}
+.tag[data-appearance=pink] .tagButton{
+  color:var(--sys-pink-text-light, #e988ad);
+}
+.tag[data-appearance=pink] .tagButton:focus, .tag[data-appearance=pink] .tagButton:hover, .tag[data-appearance=pink] .tagButton:active{
+  color:var(--sys-pink-text-main, #5e1937);
+}
+.tag[data-appearance=pink] .tagButton:focus, .tag[data-appearance=pink] .tagButton:hover{
+  background-color:var(--sys-pink-decor-hovered, #fdd1de);
+}
+.tag[data-appearance=pink] .tagButton:active{
+  background-color:var(--sys-pink-decor-activated, #f7bcd0);
+}

package/dist/components/TagRow/TagRow.d.ts

@@ -0,0 +1,22 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance, Size } from '../../constants';
+import { TagRowItem } from '../../types';
+export type TagRowProps = WithSupportProps<{
+    /** Массив тэгов */
+    items: TagRowItem[];
+    /** Лимит количества рядов тэгов. При достижении лимита тэги скрываются под кнопкой. Отсутствие лимита или значение равное нулю отобразит весь список */
+    rowLimit?: number;
+    /** Размер */
+    size?: Size;
+    /** Текст кнопки, при наведении на которую отображается список скрытых тэгов */
+    moreButtonLabel?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Коллбэк на клик по удалению тэга */
+    onItemRemove?(item: string): void;
+}>;
+export declare function TagRow({ items, rowLimit, size, ...props }: TagRowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TagRow {
+    var sizes: typeof Size;
+    var appearances: typeof Appearance;
+}

package/dist/components/TagRow/TagRow.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Appearance, Size } from '../../constants';
+import { TagRowSimple, TagRowTruncated } from '../../helperComponents';
+import { mapTagRowItem } from './utils';
+export function TagRow(_a) {
+    var { items, rowLimit, size = Size.Xs } = _a, props = __rest(_a, ["items", "rowLimit", "size"]);
+    const coloredItems = items.map(mapTagRowItem);
+    if (rowLimit) {
+        return _jsx(TagRowTruncated, Object.assign({ items: coloredItems, rowLimit: rowLimit, size: size }, props));
+    }
+    return _jsx(TagRowSimple, Object.assign({ items: coloredItems, size: size }, props));
+}
+TagRow.sizes = Size;
+TagRow.appearances = Appearance;

package/dist/components/TagRow/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const TAG_ROW_TEST_IDS: {
+    moreButton: string;
+    visibleTagsWrapper: string;
+    droplistTagsWrapper: string;
+};

package/dist/components/TagRow/constants.js

@@ -0,0 +1,5 @@
+export const TAG_ROW_TEST_IDS = {
+    moreButton: 'tag-row__more-button',
+    visibleTagsWrapper: 'tag-row__visible-row',
+    droplistTagsWrapper: 'tag-row__droplist-contents',
+};

package/dist/components/TagRow/index.d.ts

@@ -0,0 +1 @@
+export * from './TagRow';

package/dist/components/TagRow/index.js

@@ -0,0 +1 @@
+export * from './TagRow';

package/dist/components/TagRow/utils.d.ts

@@ -0,0 +1,2 @@
+import { TagRowItem, TagRowItemInner } from '../../types';
+export declare const mapTagRowItem: ({ label, color }: TagRowItem) => TagRowItemInner;

package/dist/components/TagRow/utils.js

@@ -0,0 +1,13 @@
+import { Appearance } from '../../constants';
+export const mapTagRowItem = ({ label, color }) => {
+    if (color) {
+        return {
+            label,
+            color,
+        };
+    }
+    return {
+        label,
+        color: Appearance.Neutral,
+    };
+};

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tag';
+export * from './TagRow';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from './Tag';
+export * from './TagRow';

package/dist/constants.d.ts

@@ -0,0 +1,15 @@
+export declare enum Appearance {
+    Neutral = "neutral",
+    Primary = "primary",
+    Red = "red",
+    Orange = "orange",
+    Yellow = "yellow",
+    Green = "green",
+    Blue = "blue",
+    Violet = "violet",
+    Pink = "pink"
+}
+export declare enum Size {
+    Xs = "xs",
+    S = "s"
+}

package/dist/constants.js

@@ -0,0 +1,17 @@
+export var Appearance;
+(function (Appearance) {
+    Appearance["Neutral"] = "neutral";
+    Appearance["Primary"] = "primary";
+    Appearance["Red"] = "red";
+    Appearance["Orange"] = "orange";
+    Appearance["Yellow"] = "yellow";
+    Appearance["Green"] = "green";
+    Appearance["Blue"] = "blue";
+    Appearance["Violet"] = "violet";
+    Appearance["Pink"] = "pink";
+})(Appearance || (Appearance = {}));
+export var Size;
+(function (Size) {
+    Size["Xs"] = "xs";
+    Size["S"] = "s";
+})(Size || (Size = {}));

package/dist/helperComponents/TagList/TagList.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+import { Size } from '../../constants';
+import { TagRowItemInner } from '../../types';
+type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
+type TagListProps = {
+    items: TagRowItemInner[];
+    size?: Size;
+    onItemRemove?(item: string): void;
+    setTagRef?: SetTagRef;
+};
+export declare function TagList({ items, size, onItemRemove, setTagRef }: TagListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/TagList/TagList.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tag } from '../../components';
+import { Size } from '../../constants';
+function renderTag(size, handleRemoveItem, setRef) {
+    return function TagRowItem(item, index) {
+        return (_jsx("div", Object.assign({ ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index) }, { children: _jsx(Tag, { label: item.label, appearance: item.color, size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }) }), item.label));
+    };
+}
+export function TagList({ items, size = Size.Xs, onItemRemove, setTagRef }) {
+    const handleRemoveItem = onItemRemove ? (item) => () => onItemRemove(item.label) : undefined;
+    return _jsx(_Fragment, { children: items.map(renderTag(size, handleRemoveItem, setTagRef)) });
+}

package/dist/helperComponents/TagList/index.d.ts

@@ -0,0 +1 @@
+export * from './TagList';

package/dist/helperComponents/TagList/index.js

@@ -0,0 +1 @@
+export * from './TagList';

package/dist/helperComponents/TagMore/TagMore.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+import { Size } from '../../constants';
+import { TagRowItemInner } from '../../types';
+type TagMoreProps = {
+    items: TagRowItemInner[];
+    size: Size;
+    text?: string;
+    buttonRef?: Ref<HTMLButtonElement>;
+    onItemRemove?(item: string): void;
+};
+export declare function TagMore({ items, text, size, buttonRef, onItemRemove }: TagMoreProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/TagMore/TagMore.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PopoverPrivate } from '@snack-uikit/popover-private';
+import { Scroll } from '@snack-uikit/scroll';
+import { TAG_ROW_TEST_IDS } from '../../components/TagRow/constants';
+import { Size } from '../../constants';
+import { TagRowSimple } from '../TagRowSimple';
+import styles from './styles.module.css';
+export function TagMore({ items, text = '', size = Size.Xs, buttonRef, onItemRemove }) {
+    return (_jsx(PopoverPrivate, Object.assign({ placement: PopoverPrivate.placements.BottomEnd, trigger: PopoverPrivate.triggers.HoverAndFocusVisible, triggerClassName: styles.triggerClassName, popoverContent: _jsx("div", Object.assign({ className: styles.tagRowDroplistContainer, "data-size": size }, { children: _jsx(Scroll, Object.assign({ className: styles.tagRowDroplistScroll, size: Scroll.sizes.S, barHideStrategy: Scroll.barHideStrategies.Move, resize: Scroll.resizes.None }, { children: _jsx(TagRowSimple, { items: items, size: size, onItemRemove: onItemRemove, "data-test-id": TAG_ROW_TEST_IDS.droplistTagsWrapper }) })) })), hasArrow: false }, { children: _jsx("button", Object.assign({ type: 'button', className: styles.button, ref: buttonRef, "data-size": size, "data-test-id": TAG_ROW_TEST_IDS.moreButton }, { children: `${text}${items.length}` })) })));
+}

package/dist/helperComponents/TagMore/index.d.ts

@@ -0,0 +1 @@
+export * from './TagMore';

package/dist/helperComponents/TagMore/index.js

@@ -0,0 +1 @@
+export * from './TagMore';

package/dist/helperComponents/TagMore/styles.module.css

@@ -0,0 +1,69 @@
+.button{
+  cursor:pointer;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-support, #565656);
+  white-space:nowrap;
+  background:none;
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+  border-style:solid;
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.button:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.button[data-size=xs]{
+  padding-left:var(--space-tag-more-xs-from-label, 4px);
+  padding-right:var(--space-tag-more-xs-from-label, 4px);
+  height:var(--size-tag-xs, 24px);
+  border-radius:var(--radius-tag-xs, 4px);
+  border-width:var(--border-width-tag-more-single, 2px);
+}
+.button[data-size=s]{
+  padding-left:var(--space-tag-more-s-from-label, 8px);
+  padding-right:var(--space-tag-more-s-from-label, 8px);
+  height:var(--size-tag-s, 32px);
+  border-radius:var(--radius-tag-s, 8px);
+  border-width:var(--border-width-tag-more-single, 2px);
+}
+
+.tagRowDroplistContainer{
+  padding-top:var(--radius-drop-list-container, 8px);
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  border-radius:var(--radius-drop-list-container, 8px);
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  box-shadow:var(--box-shadow-elevation-level4, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 16px 16px 0px rgba(0, 0, 0, 0.0784313725));
+}
+.tagRowDroplistContainer[data-size=xs]{
+  padding-right:var(--radius-drop-list-container, 8px);
+  padding-left:var(--radius-drop-list-container, 8px);
+  max-width:var(--size-tag-list-max-width-xs, 256px);
+}
+.tagRowDroplistContainer[data-size=s]{
+  padding-right:var(--radius-drop-list-container, 8px);
+  padding-left:var(--radius-drop-list-container, 8px);
+  max-width:var(--size-tag-list-max-width-s, 280px);
+}
+
+.tagRowDroplistScroll{
+  max-height:200px;
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}

package/dist/helperComponents/TagRowSimple/TagRowSimple.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+import { Size } from '../../constants';
+import { TagRowItemInner } from '../../types';
+type TagRowSimpleProps = {
+    items: TagRowItemInner[];
+    size: Size;
+    onItemRemove?(item: string): void;
+    setTagRef?(item: TagRowItemInner): Ref<HTMLDivElement>;
+    className?: string;
+};
+export declare function TagRowSimple({ items, size, onItemRemove, setTagRef, className, ...rest }: TagRowSimpleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/TagRowSimple/TagRowSimple.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { TagList } from '../TagList';
+import styles from './styles.module.css';
+export function TagRowSimple(_a) {
+    var { items, size, onItemRemove, setTagRef, className } = _a, rest = __rest(_a, ["items", "size", "onItemRemove", "setTagRef", "className"]);
+    return (_jsx("div", Object.assign({ className: cn(styles.tagRowSimpleWrapper, className) }, extractSupportProps(rest), { "data-size": size }, { children: _jsx(TagList, { items: items, size: size, onItemRemove: onItemRemove, setTagRef: setTagRef }) })));
+}

package/dist/helperComponents/TagRowSimple/index.d.ts

@@ -0,0 +1 @@
+export * from './TagRowSimple';

package/dist/helperComponents/TagRowSimple/index.js

@@ -0,0 +1 @@
+export * from './TagRowSimple';

package/dist/helperComponents/TagRowSimple/styles.module.css

@@ -0,0 +1,10 @@
+.tagRowSimpleWrapper{
+  display:flex;
+  flex-wrap:wrap;
+}
+.tagRowSimpleWrapper[data-size=xs]{
+  gap:var(--space-tag-row-xs-gap, 2px);
+}
+.tagRowSimpleWrapper[data-size=s]{
+  gap:var(--space-tag-row-s-gap, 2px);
+}

package/dist/helperComponents/TagRowTruncated/TagRowTruncated.d.ts

@@ -0,0 +1,13 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+import { TagRowItemInner } from '../../types';
+type TagRowTruncatedProps = WithSupportProps<{
+    items: TagRowItemInner[];
+    rowLimit: number;
+    moreButtonLabel?: string;
+    size: Size;
+    className?: string;
+    onItemRemove?(item: string): void;
+}>;
+export declare function TagRowTruncated({ items, rowLimit, size, moreButtonLabel, className, onItemRemove, ...rest }: TagRowTruncatedProps): import("react/jsx-runtime").JSX.Element;
+export {};