@qoretechnologies/reqore 0.78.6-pr.715.gdfefa70 → 0.78.7-pr.717.gae33bdc

package/dist/components/Tag/index.js

@@ -58,27 +58,142 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTag = exports.getTagAppearanceColors = exports.TAG_SOFT_BACKGROUND_OPACITY = void 0;
+exports.StyledTag = exports.REQORE_TAG_STYLE_PROPS = exports.getTagAppearanceColors = exports.TAG_SOFT_BACKGROUND_OPACITY = exports.getTagPaint = exports.getTagSolidColors = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
 var size_1 = __importDefault(require("lodash/size"));
 var polished_1 = require("polished");
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = require("styled-components");
 var __1 = require("../..");
 var colors_1 = require("../../constants/colors");
 var fonts_1 = require("../../constants/fonts");
 var sizes_1 = require("../../constants/sizes");
 var colors_2 = require("../../helpers/colors");
-var styled_1 = require("../../helpers/styled");
+var SurfaceContext_1 = require("../../context/SurfaceContext");
+var styled_1 = __importStar(require("../../helpers/styled"));
+var iconProps_1 = require("../../helpers/iconProps");
 var styles_1 = require("../../styles");
 var Effect_1 = require("../Effect");
 var Icon_1 = __importDefault(require("../Icon"));
 var TooltipComponent_1 = require("../TooltipComponent");
+/**
+ * The fill a solid tag paints, at rest or hovered: its colour (the theme's a step lighter without one), or a wash
+ * of it when minimal. A colour the helpers cannot read (a CSS variable) is washed by the browser.
+ */
+var getTagFill = function (theme, color, minimal, hover) {
+    return minimal
+        ? color
+            ? (0, colors_2.getColorAtAlpha)(color, hover ? 0.5 : 0.2)
+            : (0, colors_2.getColorAtAlpha)((0, colors_2.changeLightness)('#000000', 0.05), hover ? 0.4 : 0.3)
+        : color || (0, colors_2.changeLightness)(theme.main, hover ? 0.15 : 0.1);
+};
+/**
+ * What a solid tag is drawn on and in, at rest or hovered: its fill as drawn over the theme's surface (a minimal
+ * tag's wash, a translucent colour, each colour of a gradient), the key darkened over it, and a label and a key
+ * that read on them. A minimal tag with a colour keeps the colour in its label, in a shade that reads.
+ */
+var getTagSolidColors = function (theme, color, minimal, labelKey, effect, hovered, surface) {
+    if (hovered === void 0) { hovered = false; }
+    // what the tag is drawn on: one color, or each color of a gradient (a button's, a panel's)
+    var unders = (0, colors_2.getThemeSurfaces)(theme, surface);
+    var named = color && color !== 'transparent' ? color : undefined;
+    var gradient = (0, Effect_1.getPrimaryGradient)(effect === null || effect === void 0 ? void 0 : effect.gradient);
+    var paint = function (hover) {
+        return unders.flatMap(function (under) {
+            /* A gradient is read as it is painted: a minimal one's translucent fill shows its ring and the tag's own
+               wash through it. */
+            return gradient
+                ? (0, Effect_1.getEffectGradientBackgrounds)(theme, gradient.colors, minimal, getTagFill(theme, named, minimal, false), under)
+                : [(0, colors_2.getDrawnColor)(getTagFill(theme, named, minimal, hover), under)];
+        });
+    };
+    var backgrounds = paint(hovered);
+    /* The key is drawn darker than the label, so it has a text colour of its own: black at 30% (10% minimal) over
+       the fill, or darker, as far as it takes for one text colour to read on all of it - over a light colour the key
+       lands in the mid-tones, where neither light nor dark text reads. The shade is the one the tag is painted with
+       at rest, hovered too. */
+    var shadeOver = function (fill, alpha) {
+        return fill.map(function (background) { return (0, colors_2.getDrawnColor)((0, polished_1.rgba)('#000000', alpha), background); });
+    };
+    var readsOn = function (fill) {
+        var text = (0, colors_2.getReadableColorOn)(fill);
+        return fill.every(function (background) { return (0, colors_2.getContrastRatio)(text, background) >= colors_2.READABLE_TEXT_CONTRAST; });
+    };
+    var resting = hovered ? paint(false) : backgrounds;
+    var keyAlpha = minimal ? 0.1 : 0.3;
+    while (labelKey && keyAlpha < 0.8 && !readsOn(shadeOver(resting, keyAlpha))) {
+        keyAlpha = Math.round((keyAlpha + 0.05) * 100) / 100;
+    }
+    var keyShade = (0, polished_1.rgba)('#000000', keyAlpha);
+    var keyBackgrounds = labelKey ? shadeOver(backgrounds, keyAlpha) : backgrounds;
+    if (minimal && named && !(0, colors_2.isAchromatic)(named) && !hovered && !gradient) {
+        // a colour the helpers cannot read is as it is given: its label is written in it, on the wash of it
+        var text = (0, colors_2.getReadableAccentColorOn)((0, colors_2.getSaturatedTint)(named, 0.8), backgrounds);
+        return {
+            backgrounds: backgrounds,
+            keyBackgrounds: keyBackgrounds,
+            keyShade: keyShade,
+            text: text,
+            keyText: (0, colors_2.getReadableAccentColorOn)(text, keyBackgrounds),
+        };
+    }
+    return {
+        backgrounds: backgrounds,
+        keyBackgrounds: keyBackgrounds,
+        keyShade: keyShade,
+        text: (0, colors_2.getReadableColorOn)(backgrounds),
+        keyText: (0, colors_2.getReadableColorOn)(keyBackgrounds),
+    };
+};
+exports.getTagSolidColors = getTagSolidColors;
+/**
+ * Everything a tag is painted with (`IReqoreTagPaint`), and the solid colours it is worked out from: `resting`,
+ * and `hovered` when the tag answers the pointer. A soft or text tag (`solid` false) has its own colours
+ * (`getTagAppearanceColors`), so none of the solid ones are worked out for it.
+ */
+var getTagPaint = function (theme, color, minimal, labelKey, effect, interactive, surface, solid) {
+    var own = color || theme.main;
+    var paint = {
+        edge: (0, colors_2.changeLightness)(own, 0.2),
+        outline: (0, colors_2.changeLightness)(own, 0.25),
+    };
+    if (!solid) {
+        return { paint: paint };
+    }
+    var resting = (0, exports.getTagSolidColors)(theme, color, minimal, labelKey, effect, false, surface);
+    var hovered = interactive
+        ? (0, exports.getTagSolidColors)(theme, color, minimal, labelKey, effect, true, surface)
+        : undefined;
+    paint.rest = {
+        background: getTagFill(theme, color, minimal, false),
+        text: resting.text,
+        keyShade: resting.keyShade,
+        keyText: resting.keyText,
+    };
+    if (hovered) {
+        paint.hover = {
+            background: getTagFill(theme, color, minimal, true),
+            text: hovered.text,
+            keyText: hovered.keyText,
+        };
+    }
+    return { paint: paint, resting: resting, hovered: hovered };
+};
+exports.getTagPaint = getTagPaint;
 /** Share of the colour laid over the surface behind a soft tag. */
 exports.TAG_SOFT_BACKGROUND_OPACITY = 0.2;
 /**
@@ -89,38 +204,123 @@ exports.TAG_SOFT_BACKGROUND_OPACITY = 0.2;
  * is the tag's own colour pushed lighter (dark theme) or darker (light theme) until it
  * reaches a 4.5:1 contrast there — a green label stays green, only a shade that reads.
  * With no colour at all the tag is neutral: the surface's readable text colour plays
- * the part of the colour.
+ * the part of the colour. The surface is `drawnOn` when the tag knows what it is drawn on
+ * (`useReqoreSurface`; every colour of a gradient), the theme's surface otherwise
+ * (`getThemeSurfaces`). A colour the helpers cannot read (a CSS variable) is drawn as it
+ * is given: the label in it, over a wash of it the browser mixes.
  */
-var getTagAppearanceColors = function (theme, appearance, color) {
-    var surface = (0, colors_2.getOpaqueColor)(theme.main);
-    var base = (0, colors_2.getOpaqueColor)(color && color !== 'transparent' ? color : (0, colors_2.getReadableColorFrom)(surface));
+var getTagAppearanceColors = function (theme, appearance, color, drawnOn) {
+    var surfaces = (0, colors_2.getThemeSurfaces)(theme, drawnOn);
+    var neutral = (0, colors_2.getReadableColorOn)(surfaces);
+    var base = (0, colors_2.getOpaqueColor)(color && color !== 'transparent' ? color : neutral);
     if (appearance === 'soft') {
-        var background = (0, polished_1.mix)(exports.TAG_SOFT_BACKGROUND_OPACITY, base, surface);
-        var text_1 = (0, colors_2.getReadableAccentColor)(base, background);
+        // the wash as drawn over each color of the surface; over what it cannot be read on, the surface
+        var backgrounds = (0, colors_2.isReadableColor)(base)
+            ? surfaces.map(function (surface) { return (0, polished_1.mix)(exports.TAG_SOFT_BACKGROUND_OPACITY, base, surface); })
+            : surfaces;
+        var text_1 = (0, colors_2.getReadableAccentColorOn)(base, backgrounds);
+        var keyBackground_1 = (0, colors_2.getColorAtAlpha)(base, 0.15);
+        var drawnKeyBackgrounds_1 = backgrounds.map(function (background) {
+            return (0, colors_2.getDrawnColor)(keyBackground_1, background);
+        });
         return {
             text: text_1,
-            background: (0, polished_1.rgba)(base, exports.TAG_SOFT_BACKGROUND_OPACITY),
-            hoverBackground: (0, polished_1.rgba)(base, exports.TAG_SOFT_BACKGROUND_OPACITY + 0.1),
-            border: (0, polished_1.rgba)(text_1, 0.6),
-            keyBackground: (0, polished_1.rgba)(base, 0.15),
-            buttonHoverBackground: (0, polished_1.rgba)(base, 0.25),
+            background: (0, colors_2.getColorAtAlpha)(base, exports.TAG_SOFT_BACKGROUND_OPACITY),
+            hoverBackground: (0, colors_2.getColorAtAlpha)(base, exports.TAG_SOFT_BACKGROUND_OPACITY + 0.1),
+            border: (0, colors_2.getColorAtAlpha)(text_1, 0.6),
+            keyBackground: keyBackground_1,
+            keyText: (0, colors_2.getReadableAccentColorOn)(text_1, drawnKeyBackgrounds_1),
+            drawnBackground: backgrounds[0],
+            drawnBackgrounds: backgrounds,
+            drawnKeyBackground: drawnKeyBackgrounds_1[0],
+            drawnKeyBackgrounds: drawnKeyBackgrounds_1,
+            buttonHoverBackground: (0, colors_2.getColorAtAlpha)(base, 0.25),
         };
     }
-    var text = (0, colors_2.getReadableAccentColor)(base, surface);
+    var text = (0, colors_2.getReadableAccentColorOn)(base, surfaces);
+    var keyBackground = (0, colors_2.getColorAtAlpha)(neutral, 0.08);
+    var drawnKeyBackgrounds = surfaces.map(function (surface) { return (0, colors_2.getDrawnColor)(keyBackground, surface); });
     return {
         text: text,
         background: 'transparent',
-        hoverBackground: (0, polished_1.rgba)(text, 0.1),
-        keyBackground: (0, polished_1.rgba)((0, colors_2.getReadableColorFrom)(surface), 0.08),
-        buttonHoverBackground: (0, polished_1.rgba)(text, 0.15),
+        hoverBackground: (0, colors_2.getColorAtAlpha)(text, 0.1),
+        keyBackground: keyBackground,
+        keyText: (0, colors_2.getReadableAccentColorOn)(text, drawnKeyBackgrounds),
+        drawnBackground: surfaces[0],
+        drawnBackgrounds: surfaces,
+        drawnKeyBackground: drawnKeyBackgrounds[0],
+        drawnKeyBackgrounds: drawnKeyBackgrounds,
+        buttonHoverBackground: (0, colors_2.getColorAtAlpha)(text, 0.15),
     };
 };
 exports.getTagAppearanceColors = getTagAppearanceColors;
-// `fill` is handed down by a containing `ReqoreControlGroup`; it is an SVG attribute, so a
-// `span` would keep it. `width` sizes the tag through its styles.
-exports.StyledTag = (0, styled_components_1.default)(Effect_1.StyledEffect).withConfig({
-    shouldForwardProp: (0, styled_1.omitStyleProps)('fill', 'width'),
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  flex-shrink: 0;\n  align-items: stretch;\n  /* Only when the caller has not asked for a family. StyledTag extends StyledEffect,\n     so an unconditional declaration here always won the cascade over effect.fontFamily\n     \u2014 which is why ReqoreDataView had to force monospace back on with a specificity-\n     boosted descendant override instead of just setting the effect.\n     NO BACKTICKS in this comment: it lives inside a template literal and they end it. */\n  ", "\n  overflow: hidden;\n  vertical-align: ", ";\n  font-size: ", "px;\n  line-height: 1.1;\n\n  min-width: ", "px;\n  /* An explicit cap wins over the implicit one: a caller asking for 30ch means 30ch\n     even inside a container wider than that, and 100% would let the tag grow past it. */\n  max-width: ", ";\n  flex: ", ";\n  justify-self: ", ";\n  border: ", ";\n  /* Same flat !== false guard as EntityRow / FeatureCard / Callout: the inset\n     highlight and the border are two ways of drawing the same edge, so a tag that\n     already has a border does not also get the raised shading. */\n  ", "\n  border-radius: ", ";\n  width: ", ";\n  transition: all 0.2s ease-out;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  /* How a MINIMAL tag colours its label.\n\n     Minimal paints the colour at 20% alpha, so what the label actually sits on\n     is mostly the surface underneath \u2014 not the colour. For a CHROMATIC colour a\n     light tint of it reads on either theme. For an ACHROMATIC one there is no\n     tint to take: a 20% wash of grey over the surface IS the surface, so the\n     label is read against the surface, exactly as the no-colour case does.\n\n     It used to fall through to the readable colour for the colour at FULL\n     strength. A near-white muted intent is light, so that returned BLACK, and\n     the tag rendered black text on a 20% wash over a near-black page \u2014 reported\n     as \"black text on a dark grey background; it's very hard to read\", and true\n     of every minimal tag with a grey intent. */\n  ", "\n\n  ", "\n\n  /* Soft and text tags: the colour draws the label (and, soft, the ring and a wash)\n     instead of filling the tag. The ring is an inset shadow rather than a border so a\n     soft tag keeps the exact box of a solid one \u2014 side by side in a group they line\n     up \u2014 and it replaces any flat={false} border and the raised shading. */\n  ", "\n\n  ", "\n\n  /* Read only is NOT disabled: the tag keeps its pointer events, so its tooltip and\n     its actions still answer \u2014 it only stops advertising itself as something to\n     press. Same meaning the prop has on ReqoreButton, ReqoreCheckbox and\n     ReqoreRating. Last, so it wins over the interactive block's cursor: pointer. */\n  ", "\n\n  /* Only gate on hover where hover exists \u2014 see the same guard on ReqorePanel.\n     On touch a `show: 'hover'` tag action would otherwise be display:none with\n     no route to it at all. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-tag-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &:focus,\n  &:active {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  flex-shrink: 0;\n  align-items: stretch;\n  /* Only when the caller has not asked for a family. StyledTag extends StyledEffect,\n     so an unconditional declaration here always won the cascade over effect.fontFamily\n     \u2014 which is why ReqoreDataView had to force monospace back on with a specificity-\n     boosted descendant override instead of just setting the effect.\n     NO BACKTICKS in this comment: it lives inside a template literal and they end it. */\n  ", "\n  overflow: hidden;\n  vertical-align: ", ";\n  font-size: ", "px;\n  line-height: 1.1;\n\n  min-width: ", "px;\n  /* An explicit cap wins over the implicit one: a caller asking for 30ch means 30ch\n     even inside a container wider than that, and 100% would let the tag grow past it. */\n  max-width: ", ";\n  flex: ", ";\n  justify-self: ", ";\n  border: ", ";\n  /* Same flat !== false guard as EntityRow / FeatureCard / Callout: the inset\n     highlight and the border are two ways of drawing the same edge, so a tag that\n     already has a border does not also get the raised shading. */\n  ", "\n  border-radius: ", ";\n  width: ", ";\n  transition: all 0.2s ease-out;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  /* How a MINIMAL tag colours its label.\n\n     Minimal paints the colour at 20% alpha, so what the label actually sits on\n     is mostly the surface underneath \u2014 not the colour. For a CHROMATIC colour a\n     light tint of it reads on either theme. For an ACHROMATIC one there is no\n     tint to take: a 20% wash of grey over the surface IS the surface, so the\n     label is read against the surface, exactly as the no-colour case does.\n\n     It used to fall through to the readable colour for the colour at FULL\n     strength. A near-white muted intent is light, so that returned BLACK, and\n     the tag rendered black text on a 20% wash over a near-black page \u2014 reported\n     as \"black text on a dark grey background; it's very hard to read\", and true\n     of every minimal tag with a grey intent. */\n  ", "\n\n  ", "\n\n  /* Soft and text tags: the colour draws the label (and, soft, the ring and a wash)\n     instead of filling the tag. The ring is an inset shadow rather than a border so a\n     soft tag keeps the exact box of a solid one \u2014 side by side in a group they line\n     up \u2014 and it replaces any flat={false} border and the raised shading. */\n  ", "\n\n  ", "\n\n  /* Read only is NOT disabled: the tag keeps its pointer events, so its tooltip and\n     its actions still answer \u2014 it only stops advertising itself as something to\n     press. Same meaning the prop has on ReqoreButton, ReqoreCheckbox and\n     ReqoreRating. Last, so it wins over the interactive block's cursor: pointer. */\n  ", "\n\n  /* Only gate on hover where hover exists \u2014 see the same guard on ReqorePanel.\n     On touch a \\`show: 'hover'\\` tag action would otherwise be display:none with\n     no route to it at all. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-tag-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &:focus,\n  &:active {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"])), function (_a) {
+/**
+ * What a styled tag is painted with: what the tag worked out for this render, or - a `StyledTag` rendered on its
+ * own - worked out from its props.
+ */
+var getStyledTagPaint = function (props) {
+    var _a;
+    return (_a = props.$paint) !== null && _a !== void 0 ? _a : (0, exports.getTagPaint)(props.theme, props.color, props.minimal, !!props.labelKey, props.effect, !!props.interactive, props.$surface, !props.$appearanceColors).paint;
+};
+/**
+ * Every tag prop that only styles or configures the tag. None of them reaches the rendered
+ * element — the `span`, or a component given as `as`. The compiler checks the record against
+ * `IReqoreTagStyle`, so a new prop that is not added here fails the build instead of leaking.
+ */
+exports.REQORE_TAG_STYLE_PROPS = (0, styled_1.listReqoreStyleProps)({
+    actions: true,
+    align: true,
+    appearance: true,
+    asBadge: true,
+    compact: true,
+    customTheme: true,
+    disabled: true,
+    effect: true,
+    fixed: true,
+    flat: true,
+    fluid: true,
+    icon: true,
+    iconColor: true,
+    inheritCustomTheme: true,
+    intent: true,
+    interactive: true,
+    label: true,
+    labelAlign: true,
+    labelEffect: true,
+    labelKey: true,
+    labelKeyAlign: true,
+    labelKeyEffect: true,
+    leftIconColor: true,
+    leftIconProps: true,
+    loading: true,
+    loadingIconType: true,
+    maxWidth: true,
+    minimal: true,
+    onRemoveClick: true,
+    paddingSize: true,
+    radiusSize: true,
+    raised: true,
+    readOnly: true,
+    removable: true,
+    removeTooltip: true,
+    rightIcon: true,
+    rightIconColor: true,
+    rightIconProps: true,
+    rounded: true,
+    size: true,
+    skeleton: true,
+    theme: true,
+    tooltip: true,
+    truncate: true,
+    verticalAlign: true,
+    width: true,
+    wrap: true,
+});
+// The layout flags a containing `ReqoreControlGroup` hands the tag are not the element's either
+// (`fill` is an SVG attribute, so a `span` would keep it).
+exports.StyledTag = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
+    shouldForwardProp: styled_1.omitStyleProps.apply(void 0, __spreadArray(__spreadArray([], exports.REQORE_TAG_STYLE_PROPS, false), styled_1.REQORE_CONTROL_GROUP_CHILD_PROPS, false)),
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  flex-shrink: 0;\n  align-items: stretch;\n  /* Only when the caller has not asked for a family. StyledTag extends StyledEffect,\n     so an unconditional declaration here always won the cascade over effect.fontFamily\n     \u2014 which is why ReqoreDataView had to force monospace back on with a specificity-\n     boosted descendant override instead of just setting the effect.\n     NO BACKTICKS in this comment: it lives inside a template literal and they end it. */\n  ", "\n  overflow: hidden;\n  vertical-align: ", ";\n  font-size: ", "px;\n  line-height: 1.1;\n\n  min-width: ", "px;\n  /* An explicit cap wins over the implicit one: a caller asking for 30ch means 30ch\n     even inside a container wider than that, and 100% would let the tag grow past it. */\n  max-width: ", ";\n  flex: ", ";\n  justify-self: ", ";\n  border: ", ";\n  /* Same flat !== false guard as EntityRow / FeatureCard / Callout: the inset\n     highlight and the border are two ways of drawing the same edge, so a tag that\n     already has a border does not also get the raised shading. */\n  ", "\n  border-radius: ", ";\n  width: ", ";\n  transition: all 0.2s ease-out;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  /* How a solid tag colours its label: against what it is actually drawn on\n     (getTagSolidColors), never against the colour it is made from.\n\n     Minimal paints the colour at 20% alpha, so what the label actually sits on\n     is mostly the surface underneath \u2014 not the colour. For a CHROMATIC colour a\n     tint of it, in a shade that reads there, keeps the colour in the label. For\n     an ACHROMATIC one there is no tint to take: a 20% wash of grey over the\n     surface IS the surface, so the label is read against that.\n\n     It used to fall through to the readable colour for the colour at FULL\n     strength. A near-white muted intent is light, so that returned BLACK, and\n     the tag rendered black text on a 20% wash over a near-black page \u2014 reported\n     as \"black text on a dark grey background; it's very hard to read\", and true\n     of every minimal tag with a grey intent. The key beside the label is drawn\n     darker, so it has a text colour of its own. */\n  ", "\n\n  ", "\n\n  /* Soft and text tags: the colour draws the label (and, soft, the ring and a wash)\n     instead of filling the tag. The ring is an inset shadow rather than a border so a\n     soft tag keeps the exact box of a solid one \u2014 side by side in a group they line\n     up \u2014 and it replaces any flat={false} border and the raised shading. */\n  ", "\n\n  ", "\n\n  /* Read only is NOT disabled: the tag keeps its pointer events, so its tooltip and\n     its actions still answer \u2014 it only stops advertising itself as something to\n     press. Same meaning the prop has on ReqoreButton, ReqoreCheckbox and\n     ReqoreRating. Last, so it wins over the interactive block's cursor: pointer. */\n  ", "\n\n  /* Only gate on hover where hover exists \u2014 see the same guard on ReqorePanel.\n     On touch a `show: 'hover'` tag action would otherwise be display:none with\n     no route to it at all. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-tag-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &:focus,\n  &:active {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  flex-shrink: 0;\n  align-items: stretch;\n  /* Only when the caller has not asked for a family. StyledTag extends StyledEffect,\n     so an unconditional declaration here always won the cascade over effect.fontFamily\n     \u2014 which is why ReqoreDataView had to force monospace back on with a specificity-\n     boosted descendant override instead of just setting the effect.\n     NO BACKTICKS in this comment: it lives inside a template literal and they end it. */\n  ", "\n  overflow: hidden;\n  vertical-align: ", ";\n  font-size: ", "px;\n  line-height: 1.1;\n\n  min-width: ", "px;\n  /* An explicit cap wins over the implicit one: a caller asking for 30ch means 30ch\n     even inside a container wider than that, and 100% would let the tag grow past it. */\n  max-width: ", ";\n  flex: ", ";\n  justify-self: ", ";\n  border: ", ";\n  /* Same flat !== false guard as EntityRow / FeatureCard / Callout: the inset\n     highlight and the border are two ways of drawing the same edge, so a tag that\n     already has a border does not also get the raised shading. */\n  ", "\n  border-radius: ", ";\n  width: ", ";\n  transition: all 0.2s ease-out;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  /* How a solid tag colours its label: against what it is actually drawn on\n     (getTagSolidColors), never against the colour it is made from.\n\n     Minimal paints the colour at 20% alpha, so what the label actually sits on\n     is mostly the surface underneath \u2014 not the colour. For a CHROMATIC colour a\n     tint of it, in a shade that reads there, keeps the colour in the label. For\n     an ACHROMATIC one there is no tint to take: a 20% wash of grey over the\n     surface IS the surface, so the label is read against that.\n\n     It used to fall through to the readable colour for the colour at FULL\n     strength. A near-white muted intent is light, so that returned BLACK, and\n     the tag rendered black text on a 20% wash over a near-black page \u2014 reported\n     as \"black text on a dark grey background; it's very hard to read\", and true\n     of every minimal tag with a grey intent. The key beside the label is drawn\n     darker, so it has a text colour of its own. */\n  ", "\n\n  ", "\n\n  /* Soft and text tags: the colour draws the label (and, soft, the ring and a wash)\n     instead of filling the tag. The ring is an inset shadow rather than a border so a\n     soft tag keeps the exact box of a solid one \u2014 side by side in a group they line\n     up \u2014 and it replaces any flat={false} border and the raised shading. */\n  ", "\n\n  ", "\n\n  /* Read only is NOT disabled: the tag keeps its pointer events, so its tooltip and\n     its actions still answer \u2014 it only stops advertising itself as something to\n     press. Same meaning the prop has on ReqoreButton, ReqoreCheckbox and\n     ReqoreRating. Last, so it wins over the interactive block's cursor: pointer. */\n  ", "\n\n  /* Only gate on hover where hover exists \u2014 see the same guard on ReqorePanel.\n     On touch a \\`show: 'hover'\\` tag action would otherwise be display:none with\n     no route to it at all. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-tag-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &:focus,\n  &:active {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"])), function (_a) {
     var effect = _a.effect;
     return !(effect === null || effect === void 0 ? void 0 : effect.fontFamily) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n    "], ["\n      font-family: ", ";\n    "])), fonts_1.SYSTEM_FONT);
 }, function (_a) {
@@ -141,10 +341,7 @@ exports.StyledTag = (0, styled_components_1.default)(Effect_1.StyledEffect).with
 }, function (_a) {
     var fixed = _a.fixed, fluid = _a.fluid;
     return fixed === true ? 'flex-start' : fluid ? 'stretch' : undefined;
-}, function (_a) {
-    var theme = _a.theme, color = _a.color, _b = _a.flat, flat = _b === void 0 ? true : _b;
-    return !flat ? "1px solid ".concat((0, colors_2.changeLightness)(color || theme.main, 0.2)) : 0;
-}, function (_a) {
+}, function (props) { var _a; return !((_a = props.flat) !== null && _a !== void 0 ? _a : true) ? "1px solid ".concat(getStyledTagPaint(props).edge) : 0; }, function (_a) {
     var raised = _a.raised, _b = _a.flat, flat = _b === void 0 ? true : _b;
     return raised && flat !== false && styles_1.RaisedElement;
 }, function (_a) {
@@ -178,52 +375,33 @@ exports.StyledTag = (0, styled_components_1.default)(Effect_1.StyledEffect).with
         var size = _a.size, asBadge = _a.asBadge;
         return asBadge ? sizes_1.BADGE_SIZE_TO_PX[size] : sizes_1.TAG_SIZE_TO_PX[size];
     });
-}, function (_a) {
-    var theme = _a.theme, color = _a.color, labelKey = _a.labelKey, minimal = _a.minimal, $appearanceColors = _a.$appearanceColors;
-    if ($appearanceColors) {
+}, function (props) {
+    var rest = getStyledTagPaint(props).rest;
+    if (props.$appearanceColors || !rest) {
         return undefined;
     }
-    return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n\n      ", " {\n        background-color: ", ";\n      }\n    "], ["\n      background-color: ", ";\n      color: ", ";\n\n      ", " {\n        background-color: ", ";\n      }\n    "])), minimal
-        ? color
-            ? (0, polished_1.rgba)(color, 0.2)
-            : (0, polished_1.rgba)((0, colors_2.changeLightness)('#000000', 0.05), 0.3)
-        : color || (0, colors_2.changeLightness)(theme.main, 0.1), minimal && color && color !== 'transparent'
-        ? (0, colors_2.isAchromatic)(color)
-            ? (0, colors_2.getReadableColorFrom)((0, colors_2.changeLightness)(theme.main, 0.1))
-            : (0, polished_1.saturate)(1, (0, polished_1.tint)(0.8, color))
-        : color && color !== 'transparent'
-            ? (0, colors_2.getReadableColorFrom)(color)
-            : (0, colors_2.getReadableColorFrom)((0, colors_2.changeLightness)(theme.main, 0.1)), StyledTagKeyWrapper, labelKey ? (0, polished_1.rgba)('#000000', minimal ? 0.1 : 0.3) : undefined);
-}, function (_a) {
-    var theme = _a.theme, color = _a.color, interactive = _a.interactive, minimal = _a.minimal, effect = _a.effect, $appearanceColors = _a.$appearanceColors;
+    return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n\n      ", " {\n        background-color: ", ";\n        color: ", ";\n      }\n    "], ["\n      background-color: ", ";\n      color: ", ";\n\n      ", " {\n        background-color: ", ";\n        color: ", ";\n      }\n    "])), rest.background, rest.text, StyledTagKeyWrapper, props.labelKey ? rest.keyShade : undefined, props.labelKey ? rest.keyText : undefined);
+}, function (props) {
+    var interactive = props.interactive, effect = props.effect, labelKey = props.labelKey, $appearanceColors = props.$appearanceColors;
+    var hover = (interactive && !$appearanceColors ? getStyledTagPaint(props) : {}).hover;
     return interactive && !$appearanceColors
-        ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          cursor: pointer;\n          &:hover {\n            .reqore-tag-content,\n            .reqore-tag-key-content {\n              ", "\n            }\n\n            ", "\n          }\n        "], ["\n          cursor: pointer;\n          &:hover {\n            .reqore-tag-content,\n            .reqore-tag-key-content {\n              ", "\n            }\n\n            ", "\n          }\n        "])), styles_1.ActiveIconScale, !(effect === null || effect === void 0 ? void 0 : effect.gradient) && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n              background-color: ", ";\n              color: ", ";\n            "], ["\n              background-color: ", ";\n              color: ", ";\n            "])), minimal
-            ? color
-                ? (0, polished_1.rgba)(color, 0.5)
-                : (0, polished_1.rgba)((0, colors_2.changeLightness)('#000000', 0.05), 0.4)
-            : color || (0, colors_2.changeLightness)(theme.main, 0.15), minimal
-            ? (0, colors_2.getReadableColor)(theme, undefined, undefined, false, theme.originalMain)
-            : color
-                ? (0, colors_2.getReadableColorFrom)(color)
-                : (0, colors_2.getReadableColor)(theme, undefined, undefined))) : undefined;
+        ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          cursor: pointer;\n          &:hover {\n            .reqore-tag-content,\n            .reqore-tag-key-content {\n              ", "\n            }\n\n            ", "\n          }\n        "], ["\n          cursor: pointer;\n          &:hover {\n            .reqore-tag-content,\n            .reqore-tag-key-content {\n              ", "\n            }\n\n            ", "\n          }\n        "])), styles_1.ActiveIconScale, !(effect === null || effect === void 0 ? void 0 : effect.gradient) &&
+            hover && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n              background-color: ", ";\n              color: ", ";\n\n              ", " {\n                color: ", ";\n              }\n            "], ["\n              background-color: ", ";\n              color: ", ";\n\n              ", " {\n                color: ", ";\n              }\n            "])), hover.background, hover.text, StyledTagKeyWrapper, labelKey ? hover.keyText : undefined)) : undefined;
 }, function (_a) {
     var $appearance = _a.$appearance, $appearanceColors = _a.$appearanceColors, labelKey = _a.labelKey, interactive = _a.interactive, effect = _a.effect;
-    return $appearanceColors && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      border: 0;\n      box-shadow: ", ";\n\n      ", " {\n        background-color: ", ";\n      }\n\n      ", "\n\n      &:focus,\n      &:active {\n        outline-color: ", ";\n      }\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      border: 0;\n      box-shadow: ", ";\n\n      ", " {\n        background-color: ", ";\n      }\n\n      ", "\n\n      &:focus,\n      &:active {\n        outline-color: ", ";\n      }\n    "])), $appearanceColors.background, $appearanceColors.text, $appearanceColors.border
+    return $appearanceColors && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      border: 0;\n      box-shadow: ", ";\n\n      ", " {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      ", "\n\n      &:focus,\n      &:active {\n        outline-color: ", ";\n      }\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      border: 0;\n      box-shadow: ", ";\n\n      ", " {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      ", "\n\n      &:focus,\n      &:active {\n        outline-color: ", ";\n      }\n    "])), $appearanceColors.background, $appearanceColors.text, $appearanceColors.border
         ? "inset 0 0 0 1px ".concat($appearanceColors.border)
-        : 'none', StyledTagKeyWrapper, labelKey ? $appearanceColors.keyBackground : undefined, interactive && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        cursor: pointer;\n        &:hover {\n          .reqore-tag-content,\n          .reqore-tag-key-content {\n            ", "\n          }\n\n          ", "\n        }\n      "], ["\n        cursor: pointer;\n        &:hover {\n          .reqore-tag-content,\n          .reqore-tag-key-content {\n            ", "\n          }\n\n          ", "\n        }\n      "])), styles_1.ActiveIconScale, !(effect === null || effect === void 0 ? void 0 : effect.gradient) && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n            background-color: ", ";\n          "], ["\n            background-color: ", ";\n          "])), $appearanceColors.hoverBackground)), $appearance === 'soft'
+        : 'none', StyledTagKeyWrapper, labelKey ? $appearanceColors.keyBackground : undefined, labelKey ? $appearanceColors.keyText : undefined, interactive && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        cursor: pointer;\n        &:hover {\n          .reqore-tag-content,\n          .reqore-tag-key-content {\n            ", "\n          }\n\n          ", "\n        }\n      "], ["\n        cursor: pointer;\n        &:hover {\n          .reqore-tag-content,\n          .reqore-tag-key-content {\n            ", "\n          }\n\n          ", "\n        }\n      "])), styles_1.ActiveIconScale, !(effect === null || effect === void 0 ? void 0 : effect.gradient) && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n            background-color: ", ";\n          "], ["\n            background-color: ", ";\n          "])), $appearanceColors.hoverBackground)), $appearance === 'soft'
         ? $appearanceColors.border
-        : (0, polished_1.rgba)($appearanceColors.text, 0.5));
+        : (0, colors_2.getColorAtAlpha)($appearanceColors.text, 0.5));
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: not-allowed;\n    "], ["\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: not-allowed;\n    "])));
 }, function (_a) {
     var $readOnly = _a.$readOnly;
     return $readOnly && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), styles_1.ReadOnlyElement);
-}, function (_a) {
-    var theme = _a.theme, color = _a.color;
-    return (0, colors_2.changeLightness)(color || theme.main, 0.25);
-});
-var StyledTagKeyWrapper = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* A key normally GROWS to share the tag with the label, which is what gives an\n     uncapped key/value tag its even split. Under a cap that split is wrong twice\n     over: the key takes half the width to render four characters, and the label is\n     left with too little room for a tail it is not allowed to shrink \u2014 so the tail\n     runs out past the tag's edge with a hole where the key's unused half was. Capped,\n     the key takes what it needs and the label gets the rest. */\n  flex: ", ";\n  flex-shrink: 0;\n  min-height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* A key normally GROWS to share the tag with the label, which is what gives an\n     uncapped key/value tag its even split. Under a cap that split is wrong twice\n     over: the key takes half the width to render four characters, and the label is\n     left with too little room for a tail it is not allowed to shrink \u2014 so the tail\n     runs out past the tag's edge with a hole where the key's unused half was. Capped,\n     the key takes what it needs and the label gets the rest. */\n  flex: ", ";\n  flex-shrink: 0;\n  min-height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+}, function (props) { return getStyledTagPaint(props).outline; });
+var StyledTagKeyWrapper = styled_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* A key normally GROWS to share the tag with the label, which is what gives an\n     uncapped key/value tag its even split. Under a cap that split is wrong twice\n     over: the key takes half the width to render four characters, and the label is\n     left with too little room for a tail it is not allowed to shrink \u2014 so the tail\n     runs out past the tag's edge with a hole where the key's unused half was. Capped,\n     the key takes what it needs and the label gets the rest. */\n  flex: ", ";\n  flex-shrink: 0;\n  min-height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* A key normally GROWS to share the tag with the label, which is what gives an\n     uncapped key/value tag its even split. Under a cap that split is wrong twice\n     over: the key takes half the width to render four characters, and the label is\n     left with too little room for a tail it is not allowed to shrink \u2014 so the tail\n     runs out past the tag's edge with a hole where the key's unused half was. Capped,\n     the key takes what it needs and the label gets the rest. */\n  flex: ", ";\n  flex-shrink: 0;\n  min-height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var hasKey = _a.hasKey, fixed = _a.fixed, $capped = _a.$capped;
     return hasKey ? (fixed === 'key' || $capped ? '0 0 auto' : 1) : undefined;
 }, function (_a) {
@@ -233,7 +411,7 @@ var StyledTagKeyWrapper = styled_components_1.default.span(templateObject_16 ||
     var size = _a.size, padOnRight = _a.padOnRight;
     return padOnRight && "".concat(sizes_1.TAG_HORIZONTAL_PADDING_FROM_SIZE[size], "px");
 });
-var StyledTagContentWrapper = styled_components_1.default.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: ", ";\n  min-height: 100%;\n\n  /* This wrapper is what makes a capped tag possible, and by default it is what makes\n     it impossible. It refuses to shrink so a label is never squashed inside a fluid\n     tag \u2014 correct when the tag sizes to its content, but with a cap it means the box\n     cannot get narrower than the text, so the tag's own overflow:hidden clips it. And\n     because the content is CENTRED, it clips at BOTH ends: \"https://host/a/b\" renders\n     as \"ps://host/a/\", and a label key disappears off the left entirely.\n\n     min-width is the other half: a flex item defaults to min-width:auto, which is its\n     content's width, so flex-shrink alone still cannot take it below the text. */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: ", ";\n  min-height: 100%;\n\n  /* This wrapper is what makes a capped tag possible, and by default it is what makes\n     it impossible. It refuses to shrink so a label is never squashed inside a fluid\n     tag \u2014 correct when the tag sizes to its content, but with a cap it means the box\n     cannot get narrower than the text, so the tag's own overflow:hidden clips it. And\n     because the content is CENTRED, it clips at BOTH ends: \"https://host/a/b\" renders\n     as \"ps://host/a/\", and a label key disappears off the left entirely.\n\n     min-width is the other half: a flex item defaults to min-width:auto, which is its\n     content's width, so flex-shrink alone still cannot take it below the text. */\n  ", "\n"])), function (_a) {
+var StyledTagContentWrapper = styled_1.default.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: ", ";\n  min-height: 100%;\n\n  /* This wrapper is what makes a capped tag possible, and by default it is what makes\n     it impossible. It refuses to shrink so a label is never squashed inside a fluid\n     tag \u2014 correct when the tag sizes to its content, but with a cap it means the box\n     cannot get narrower than the text, so the tag's own overflow:hidden clips it. And\n     because the content is CENTRED, it clips at BOTH ends: \"https://host/a/b\" renders\n     as \"ps://host/a/\", and a label key disappears off the left entirely.\n\n     min-width is the other half: a flex item defaults to min-width:auto, which is its\n     content's width, so flex-shrink alone still cannot take it below the text. */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: ", ";\n  min-height: 100%;\n\n  /* This wrapper is what makes a capped tag possible, and by default it is what makes\n     it impossible. It refuses to shrink so a label is never squashed inside a fluid\n     tag \u2014 correct when the tag sizes to its content, but with a cap it means the box\n     cannot get narrower than the text, so the tag's own overflow:hidden clips it. And\n     because the content is CENTRED, it clips at BOTH ends: \"https://host/a/b\" renders\n     as \"ps://host/a/\", and a label key disappears off the left entirely.\n\n     min-width is the other half: a flex item defaults to min-width:auto, which is its\n     content's width, so flex-shrink alone still cannot take it below the text. */\n  ", "\n"])), function (_a) {
     var fixed = _a.fixed;
     return (fixed === 'label' ? '0 0 auto' : 1);
 }, function (_a) {
@@ -241,7 +419,7 @@ var StyledTagContentWrapper = styled_components_1.default.span(templateObject_19
     return $capped
         ? (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          flex-shrink: 1;\n          min-width: 0;\n          justify-content: flex-start;\n        "], ["\n          flex-shrink: 1;\n          min-width: 0;\n          justify-content: flex-start;\n        "]))) : (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          flex-shrink: 0;\n        "], ["\n          flex-shrink: 0;\n        "])));
 });
-var StyledTagContent = (0, styled_components_1.default)(Effect_1.StyledTextEffect)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n  padding: ", "px\n    ", "px;\n  min-height: 100%;\n  display: flex;\n  align-items: center;\n  flex: 1;\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n  padding: ", "px\n    ", "px;\n  min-height: 100%;\n  display: flex;\n  align-items: center;\n  flex: 1;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var StyledTagContent = (0, styled_1.default)(Effect_1.StyledTextEffect)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n  padding: ", "px\n    ", "px;\n  min-height: 100%;\n  display: flex;\n  align-items: center;\n  flex: 1;\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n  padding: ", "px\n    ", "px;\n  min-height: 100%;\n  display: flex;\n  align-items: center;\n  flex: 1;\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var $capped = _a.$capped;
     return $capped && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      min-width: 0;\n    "], ["\n      min-width: 0;\n    "])));
 }, function (_a) {
@@ -262,7 +440,7 @@ var StyledTagContent = (0, styled_components_1.default)(Effect_1.StyledTextEffec
     return !$wrap && !$hasWidth
         ? (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        "], ["\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        "]))) : (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n          word-break: break-word;\n        "], ["\n          word-break: break-word;\n        "])));
 });
-var StyledTagContentKey = (0, styled_components_1.default)(StyledTagContent)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  flex: 1;\n\n  ", "\n"], ["\n  flex: 1;\n\n  ", "\n"])), function (_a) {
+var StyledTagContentKey = (0, styled_1.default)(StyledTagContent)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  flex: 1;\n\n  ", "\n"], ["\n  flex: 1;\n\n  ", "\n"])), function (_a) {
     var $wrap = _a.$wrap, $hasWidth = _a.$hasWidth;
     return !$wrap && !$hasWidth
         ? undefined
@@ -282,7 +460,7 @@ var StyledTagContentKey = (0, styled_components_1.default)(StyledTagContent)(tem
  * tag: the slot clips, the text-bearing element inside it ellipsizes, and only the
  * LABEL is wrapped so the icons and the label key keep their natural width.
  */
-var StyledTruncatedLabel = styled_components_1.default.span(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  min-width: 0;\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+var StyledTruncatedLabel = styled_1.default.span(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  min-width: 0;\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 /**
  * A label that drops its MIDDLE rather than its tail.
  *
@@ -295,10 +473,10 @@ var StyledTruncatedLabel = styled_components_1.default.span(templateObject_27 ||
  * complete value and a screen reader reads it out whole. That is the part a JS
  * shortener cannot match: it deletes the characters it hides.
  */
-var StyledMiddleTruncatedLabel = styled_components_1.default.span(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n  display: flex;\n  white-space: nowrap;\n"], ["\n  min-width: 0;\n  max-width: 100%;\n  display: flex;\n  white-space: nowrap;\n"])));
-var StyledTruncatedLabelHead = styled_components_1.default.span(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+var StyledMiddleTruncatedLabel = styled_1.default.span(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n  display: flex;\n  white-space: nowrap;\n"], ["\n  min-width: 0;\n  max-width: 100%;\n  display: flex;\n  white-space: nowrap;\n"])));
+var StyledTruncatedLabelHead = styled_1.default.span(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 /* Never shrinks: it is the half the caller asked to keep. */
-var StyledTruncatedLabelTail = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  flex-shrink: 0;\n  white-space: nowrap;\n"], ["\n  flex-shrink: 0;\n  white-space: nowrap;\n"])));
+var StyledTruncatedLabelTail = styled_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  flex-shrink: 0;\n  white-space: nowrap;\n"], ["\n  flex-shrink: 0;\n  white-space: nowrap;\n"])));
 /**
  * Where to cut a label whose middle is dropped.
  *
@@ -319,7 +497,7 @@ var splitTagLabel = function (label) {
         characters.slice(characters.length - tailLength).join(''),
     ];
 };
-var StyledButtonWrapper = styled_components_1.default.span.withConfig({
+var StyledButtonWrapper = styled_1.default.span.withConfig({
     shouldForwardProp: (0, styled_1.omitStyleProps)('color'),
 })(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  flex-shrink: 0;\n  font-size: ", "px;\n  width: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.2s ease-out;\n\n  ", "\n"], ["\n  flex-shrink: 0;\n  font-size: ", "px;\n  width: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.2s ease-out;\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
@@ -335,10 +513,11 @@ var StyledButtonWrapper = styled_components_1.default.span.withConfig({
             ? (0, colors_2.changeLightness)(color, 0.09)
             : (0, polished_1.rgba)('#000000', 0.2));
 });
-var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c;
-    var tooltip = _a.tooltip, label = _a.label, labelKey = _a.labelKey, icon = _a.icon, rightIcon = _a.rightIcon, className = _a.className, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 'normal' : _d, paddingSize = _a.paddingSize, onRemoveClick = _a.onRemoveClick, actions = _a.actions, asBadge = _a.asBadge, intent = _a.intent, color = _a.color, minimal = _a.minimal, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, _e = _a.wrap, wrap = _e === void 0 ? false : _e, width = _a.width, maxWidth = _a.maxWidth, _f = _a.truncate, truncate = _f === void 0 ? 'end' : _f, leftIconColor = _a.leftIconColor, rightIconColor = _a.rightIconColor, iconColor = _a.iconColor, _g = _a.labelKeyAlign, labelKeyAlign = _g === void 0 ? 'left' : _g, labelAlign = _a.labelAlign, labelEffect = _a.labelEffect, labelKeyEffect = _a.labelKeyEffect, leftIconProps = _a.leftIconProps, rightIconProps = _a.rightIconProps, loading = _a.loading, loadingIconType = _a.loadingIconType, compact = _a.compact, readOnly = _a.readOnly, _h = _a.removeTooltip, removeTooltip = _h === void 0 ? 'Remove' : _h, _j = _a.appearance, appearance = _j === void 0 ? 'solid' : _j, rest = __rest(_a, ["tooltip", "label", "labelKey", "icon", "rightIcon", "className", "onClick", "size", "paddingSize", "onRemoveClick", "actions", "asBadge", "intent", "color", "minimal", "customTheme", "inheritCustomTheme", "wrap", "width", "maxWidth", "truncate", "leftIconColor", "rightIconColor", "iconColor", "labelKeyAlign", "labelAlign", "labelEffect", "labelKeyEffect", "leftIconProps", "rightIconProps", "loading", "loadingIconType", "compact", "readOnly", "removeTooltip", "appearance"]);
+var ReqoreTagComponent = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var tooltip = _a.tooltip, label = _a.label, labelKey = _a.labelKey, icon = _a.icon, rightIcon = _a.rightIcon, className = _a.className, onClick = _a.onClick, _m = _a.size, size = _m === void 0 ? 'normal' : _m, paddingSize = _a.paddingSize, onRemoveClick = _a.onRemoveClick, actions = _a.actions, asBadge = _a.asBadge, intent = _a.intent, color = _a.color, minimal = _a.minimal, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, _o = _a.wrap, wrap = _o === void 0 ? false : _o, width = _a.width, maxWidth = _a.maxWidth, _p = _a.truncate, truncate = _p === void 0 ? 'end' : _p, leftIconColor = _a.leftIconColor, rightIconColor = _a.rightIconColor, iconColor = _a.iconColor, _q = _a.labelKeyAlign, labelKeyAlign = _q === void 0 ? 'left' : _q, labelAlign = _a.labelAlign, labelEffect = _a.labelEffect, labelKeyEffect = _a.labelKeyEffect, leftIconProps = _a.leftIconProps, rightIconProps = _a.rightIconProps, loading = _a.loading, loadingIconType = _a.loadingIconType, compact = _a.compact, readOnly = _a.readOnly, _r = _a.removeTooltip, removeTooltip = _r === void 0 ? 'Remove' : _r, _s = _a.appearance, appearance = _s === void 0 ? 'solid' : _s, rest = __rest(_a, ["tooltip", "label", "labelKey", "icon", "rightIcon", "className", "onClick", "size", "paddingSize", "onRemoveClick", "actions", "asBadge", "intent", "color", "minimal", "customTheme", "inheritCustomTheme", "wrap", "width", "maxWidth", "truncate", "leftIconColor", "rightIconColor", "iconColor", "labelKeyAlign", "labelAlign", "labelEffect", "labelKeyEffect", "leftIconProps", "rightIconProps", "loading", "loadingIconType", "compact", "readOnly", "removeTooltip", "appearance"]);
     var theme = (0, __1.useReqoreTheme)('main', customTheme, undefined, undefined, inheritCustomTheme);
+    var surface = (0, SurfaceContext_1.useReqoreSurface)();
     // If color or intent was specified, set the color
     var getCustomColor = (0, react_1.useCallback)(function (itemIntent) {
         var customColor = itemIntent
@@ -377,9 +556,9 @@ var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
         (((_b = rest.effect) === null || _b === void 0 ? void 0 : _b.color) ? (0, colors_2.getColorFromMaybeString)(theme, rest.effect.color) : undefined);
     var appearanceColors = (0, react_1.useMemo)(function () {
         return appearance === 'soft' || appearance === 'text'
-            ? (0, exports.getTagAppearanceColors)(theme, appearance, appearanceColor)
+            ? (0, exports.getTagAppearanceColors)(theme, appearance, appearanceColor, surface)
             : undefined;
-    }, [appearance, theme, appearanceColor]);
+    }, [appearance, theme, appearanceColor, surface]);
     /* When effect.color IS the soft / text tag's colour, it has been turned into a
        readable shade already — left in the effect it would repaint the label in the
        raw colour, which is what the appearance exists to avoid. */
@@ -388,18 +567,71 @@ var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
         var _a;
         return (__assign(__assign(__assign({}, rest.effect), (effectColorIsTagColor ? { color: undefined } : {})), { gradient: intent ? undefined : (_a = rest.effect) === null || _a === void 0 ? void 0 : _a.gradient, interactive: interactive }));
     }, [intent, interactive, effectColorIsTagColor, JSON.stringify(rest.effect)]);
-    return ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { Component: exports.StyledTag, tooltip: tooltip, theme: theme, effect: effect, width: width, "$maxWidth": maxWidth, labelKey: labelKey, color: tagColor, "$appearance": appearanceColors ? appearance : undefined, "$appearanceColors": appearanceColors, className: "".concat(className || '', " reqore-tag"), size: size, ref: ref, asBadge: asBadge, minimal: minimal, removable: !!onRemoveClick, interactive: interactive, "$readOnly": readOnly, 
+    /* What the tag is painted with, worked out once per render rather than in each of its
+       style rules: a solid tag's colours at rest and, when it answers the pointer, hovered. */
+    var _t = (0, react_1.useMemo)(function () {
+        return (0, exports.getTagPaint)(theme, tagColor, minimal, !!labelKey, effect, interactive, surface, !appearanceColors);
+    }, [theme, tagColor, minimal, labelKey, effect, interactive, surface, appearanceColors]), paint = _t.paint, resting = _t.resting, hovered = _t.hovered;
+    /* The icons stand out from what they are drawn on, as the text does: the left one
+       sits in the key, the right one and the actions beside the label. */
+    var sides = (0, react_1.useMemo)(function () {
+        if (appearanceColors) {
+            var label_1 = {
+                backgrounds: appearanceColors.drawnBackgrounds,
+                text: appearanceColors.text,
+            };
+            return {
+                // the key's own wash is drawn only with a key: an icon alone sits on the tag
+                key: labelKey
+                    ? { backgrounds: appearanceColors.drawnKeyBackgrounds, text: appearanceColors.keyText }
+                    : label_1,
+                label: label_1,
+            };
+        }
+        var hover = hovered !== null && hovered !== void 0 ? hovered : resting;
+        return {
+            key: {
+                backgrounds: __spreadArray(__spreadArray([], resting.keyBackgrounds, true), hover.keyBackgrounds, true),
+                text: resting.keyText,
+            },
+            label: {
+                backgrounds: __spreadArray(__spreadArray([], resting.backgrounds, true), hover.backgrounds, true),
+                text: resting.text,
+            },
+        };
+    }, [appearanceColors, labelKey, resting, hovered]);
+    // an icon's own color: in its props (which win, as they are spread over the rest), else the tag's
+    var _u = (0, iconProps_1.splitIconColor)(leftIconProps), leftIconPropsColor = _u[0], leftIconRest = _u[1];
+    var _v = (0, iconProps_1.splitIconColor)(rightIconProps), rightIconPropsColor = _v[0], rightIconRest = _v[1];
+    var leftIconOwn = leftIconPropsColor || leftIconColor || iconColor;
+    var rightIconOwn = rightIconPropsColor || rightIconColor || iconColor;
+    var hasActions = !!(0, size_1.default)(actions);
+    // only for the icons the tag draws
+    var iconLooks = (0, react_1.useMemo)(function () {
+        var look = function (side, own) {
+            return (0, colors_2.getReadableIconLook)(theme, side.backgrounds, side.text, colors_1.CONTROL_ICON_OPACITY, own);
+        };
+        return {
+            left: hasLeftIcon ? look(sides.key, leftIconOwn) : undefined,
+            right: hasRightIcon ? look(sides.label, rightIconOwn) : undefined,
+            action: hasActions ? look(sides.label) : undefined,
+        };
+    }, [sides, theme, leftIconOwn, rightIconOwn, hasLeftIcon, hasRightIcon, hasActions]);
+    // one object per icon for as long as its opacity holds: an icon is a memo component
+    var leftIconEffect = (0, react_1.useMemo)(function () { var _a; return ({ opacity: (_a = iconLooks.left) === null || _a === void 0 ? void 0 : _a.opacity }); }, [(_d = iconLooks.left) === null || _d === void 0 ? void 0 : _d.opacity]);
+    var rightIconEffect = (0, react_1.useMemo)(function () { var _a; return ({ opacity: (_a = iconLooks.right) === null || _a === void 0 ? void 0 : _a.opacity }); }, [(_e = iconLooks.right) === null || _e === void 0 ? void 0 : _e.opacity]);
+    var actionIconEffect = (0, react_1.useMemo)(function () { var _a; return ({ opacity: (_a = iconLooks.action) === null || _a === void 0 ? void 0 : _a.opacity }); }, [(_f = iconLooks.action) === null || _f === void 0 ? void 0 : _f.opacity]);
+    return ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { Component: exports.StyledTag, tooltip: tooltip, theme: theme, "$surface": surface, "$backgrounds": sides.label.backgrounds, "$paint": paint, effect: effect, width: width, "$maxWidth": maxWidth, labelKey: labelKey, color: tagColor, "$appearance": appearanceColors ? appearance : undefined, "$appearanceColors": appearanceColors, className: "".concat(className || '', " reqore-tag"), size: size, ref: ref, asBadge: asBadge, minimal: minimal, removable: !!onRemoveClick, interactive: interactive, "$readOnly": readOnly, 
         /* `interactive`, not `onClick`, decides the tab stop. A read-only tag
            keeps its handler — refusing the CHANGE is the picker's job, not the
            tag's — but it has stopped advertising itself as something to press,
            and a tab stop is that same advertisement made to the keyboard. Wired
            off the one flag so the cursor, the hover effect and the tab order
-           cannot disagree about whether this tag is pressable. */
-        tabIndex: interactive ? 0 : undefined, "$wrap": wrap, "$hasWidth": !!width, children: [labelKey || hasLeftIcon ? ((0, jsx_runtime_1.jsxs)(StyledTagKeyWrapper, { size: size, className: 'reqore-tag-key-content', onClick: rest.disabled ? undefined : onClick, "$wrap": wrap, "$hasWidth": !!width, "$capped": capped, hasKey: !!labelKey, hasIcon: hasLeftIcon, padOnRight: !label && !labelKey && !hasRightIcon, fixed: rest.fixed, children: [leftIcon || (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.image) ? ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ size: "".concat(sizes_1.TAG_ICON_FROM_SIZE[size], "px"), color: leftIconColor || iconColor, compact: compact, effect: {
-                            opacity: colors_1.CONTROL_ICON_OPACITY,
-                        } }, leftIconProps, { animation: loading ? 'spin' : leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.animation, icon: leftIcon }))) : null, labelKey && ((0, jsx_runtime_1.jsx)(StyledTagContentKey, { "$wrap": wrap, "$hasWidth": !!width, size: size, "$paddingSize": paddingSize, labelAlign: labelKeyAlign, compact: compact, effect: __assign({ weight: 'bold' }, labelKeyEffect), children: labelKey }))] })) : null, label || label === 0 || hasRightIcon ? ((0, jsx_runtime_1.jsxs)(StyledTagContentWrapper, { size: size, className: 'reqore-tag-content', onClick: rest.disabled ? undefined : onClick, "$wrap": wrap, "$hasWidth": !!width, "$capped": capped, hasKey: !!labelKey, fixed: rest.fixed, children: [label || label === 0 ? ((0, jsx_runtime_1.jsx)(StyledTagContent, { size: size, "$paddingSize": paddingSize, "$wrap": wrap, "$hasWidth": !!width, "$capped": capped, labelAlign: labelAlign || (labelKey ? 'left' : 'center'), compact: compact, effect: __assign({ weight: 'bold' }, labelEffect), children: !capped ? (label) : middleParts ? ((0, jsx_runtime_1.jsxs)(StyledMiddleTruncatedLabel, { className: 'reqore-tag-label', children: [(0, jsx_runtime_1.jsx)(StyledTruncatedLabelHead, { className: 'reqore-tag-label-head', children: middleParts[0] }), (0, jsx_runtime_1.jsx)(StyledTruncatedLabelTail, { className: 'reqore-tag-label-tail', children: middleParts[1] })] })) : ((0, jsx_runtime_1.jsx)(StyledTruncatedLabel, { className: 'reqore-tag-label', children: label })) })) : null, hasRightIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ icon: rightIcon, size: "".concat(sizes_1.TAG_ICON_FROM_SIZE[size], "px"), margin: label || (!icon && !labelKey) ? 'right' : 'both', color: rightIconColor || iconColor, compact: compact, effect: {
-                            opacity: colors_1.CONTROL_ICON_OPACITY,
-                        } }, rightIconProps))) : null] })) : null, (0, size_1.default)(actions)
+           cannot disagree about whether this tag is pressable. A pressable tag
+           keeps a `tabIndex` it is given, as a button does: a tag inside a
+           control that is itself the tab stop (a chip in a text editor) is
+           reached with that control's own keys, not with Tab. */
+        tabIndex: interactive ? ((_g = rest.tabIndex) !== null && _g !== void 0 ? _g : 0) : undefined, "aria-disabled": rest.disabled ? true : undefined, "$wrap": wrap, "$hasWidth": !!width, children: [labelKey || hasLeftIcon ? ((0, jsx_runtime_1.jsxs)(StyledTagKeyWrapper, { size: size, className: 'reqore-tag-key-content', onClick: rest.disabled ? undefined : onClick, "$wrap": wrap, "$hasWidth": !!width, "$capped": capped, hasKey: !!labelKey, hasIcon: hasLeftIcon, padOnRight: !label && !labelKey && !hasRightIcon, fixed: rest.fixed, children: [leftIcon || (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.image) ? ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ size: "".concat(sizes_1.TAG_ICON_FROM_SIZE[size], "px"), color: (_j = (_h = iconLooks.left) === null || _h === void 0 ? void 0 : _h.color) !== null && _j !== void 0 ? _j : leftIconOwn, compact: compact, effect: leftIconEffect }, leftIconRest, { animation: loading ? 'spin' : leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.animation, icon: leftIcon }))) : null, labelKey && ((0, jsx_runtime_1.jsx)(StyledTagContentKey, { "$wrap": wrap, "$hasWidth": !!width, size: size, "$paddingSize": paddingSize, labelAlign: labelKeyAlign, compact: compact, "$backgrounds": sides.key.backgrounds, effect: __assign({ weight: 'bold' }, labelKeyEffect), children: labelKey }))] })) : null, label || label === 0 || hasRightIcon ? ((0, jsx_runtime_1.jsxs)(StyledTagContentWrapper, { size: size, className: 'reqore-tag-content', onClick: rest.disabled ? undefined : onClick, "$wrap": wrap, "$hasWidth": !!width, "$capped": capped, hasKey: !!labelKey, fixed: rest.fixed, children: [label || label === 0 ? ((0, jsx_runtime_1.jsx)(StyledTagContent, { size: size, "$paddingSize": paddingSize, "$wrap": wrap, "$hasWidth": !!width, "$capped": capped, labelAlign: labelAlign || (labelKey ? 'left' : 'center'), compact: compact, "$backgrounds": sides.label.backgrounds, effect: __assign({ weight: 'bold' }, labelEffect), children: !capped ? (label) : middleParts ? ((0, jsx_runtime_1.jsxs)(StyledMiddleTruncatedLabel, { className: 'reqore-tag-label', children: [(0, jsx_runtime_1.jsx)(StyledTruncatedLabelHead, { className: 'reqore-tag-label-head', children: middleParts[0] }), (0, jsx_runtime_1.jsx)(StyledTruncatedLabelTail, { className: 'reqore-tag-label-tail', children: middleParts[1] })] })) : ((0, jsx_runtime_1.jsx)(StyledTruncatedLabel, { className: 'reqore-tag-label', children: label })) })) : null, hasRightIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ icon: rightIcon, size: "".concat(sizes_1.TAG_ICON_FROM_SIZE[size], "px"), margin: label || (!icon && !labelKey) ? 'right' : 'both', color: (_l = (_k = iconLooks.right) === null || _k === void 0 ? void 0 : _k.color) !== null && _l !== void 0 ? _l : rightIconOwn, compact: compact, effect: rightIconEffect }, rightIconRest))) : null] })) : null, (0, size_1.default)(actions)
                 ? actions
                     .filter(function (action) { return action.show !== false; })
                     .map(function (_a, index) {
@@ -413,9 +645,7 @@ var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
                             ? typeof tooltip === 'string'
                                 ? { tooltip: tooltip }
                                 : tooltip
-                            : {}), { isReqoreComponent: true, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon, size: "".concat(sizes_1.TAG_ICON_FROM_SIZE[size], "px"), effect: {
-                                    opacity: colors_1.CONTROL_ICON_OPACITY,
-                                } }) })) }, index));
+                            : {}), { isReqoreComponent: true, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon, size: "".concat(sizes_1.TAG_ICON_FROM_SIZE[size], "px"), effect: actionIconEffect }) })) }, index));
                 })
                 : null, onRemoveClick && !rest.disabled ? ((0, jsx_runtime_1.jsx)(__1.ReqorePopover, { component: StyledButtonWrapper, componentProps: {
                     size: size,
@@ -426,6 +656,8 @@ var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
                     $appearanceColors: appearanceColors,
                 }, isReqoreComponent: true, content: removeTooltip, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: 'CloseLine', size: size }) })) : null] })));
 });
+/** A memo component, as Reqore's components are: a tag re-renders when its props or what it reads change. */
+var ReqoreTag = (0, react_1.memo)(ReqoreTagComponent);
 exports.default = ReqoreTag;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
 //# sourceMappingURL=index.js.map