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

package/dist/components/Span/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Span/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAI/D,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,sBAAsB,EAAoB,MAAM,WAAW,CAAC;AAGrE,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,kBAAkB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IAC1C;;;;;;;;;;;;;;;;;OAiBG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,UAAU,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,gJAuCtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Span/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAM/D,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,sBAAsB,EAAoB,MAAM,WAAW,CAAC;AAGrE,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,kBAAkB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IAC1C;;;;;;;;;;;;;;;;;OAiBG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,UAAU,KAUtB,CAAC;AAEF,eAAO,MAAM,UAAU,gJA8CtB,CAAC"}

package/dist/components/Span/index.js

@@ -14,6 +14,39 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)
@@ -25,28 +58,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReqoreSpan = exports.StyledSpan = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var styled_components_1 = __importDefault(require("styled-components"));
 var sizes_1 = require("../../constants/sizes");
-var styled_1 = require("../../helpers/styled");
+var styled_1 = __importStar(require("../../helpers/styled"));
+var colors_1 = require("../../helpers/colors");
 var utils_1 = require("../../helpers/utils");
+var SurfaceContext_1 = require("../../context/SurfaceContext");
 var useTheme_1 = require("../../hooks/useTheme");
 var Effect_1 = require("../Effect");
 var TooltipComponent_1 = require("../TooltipComponent");
 // Styling props of the span (and of `ReqoreLink`, built on it). A tag drops them on its own; a
 // component given as `as` — a router link — would receive them and write them onto its `<a>`.
-exports.StyledSpan = (0, styled_components_1.default)(Effect_1.StyledTextEffect).withConfig({
+exports.StyledSpan = (0, styled_1.default)(Effect_1.StyledTextEffect).withConfig({
     shouldForwardProp: (0, styled_1.omitStyleProps)('_size', 'inline', 'maxWidth'),
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  vertical-align: ", ";\n  max-width: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  vertical-align: ", ";\n  max-width: ", ";\n"])), function (_a) {
-    var _b;
-    var theme = _a.theme, intent = _a.intent;
-    return intent ? theme.intents[intent] : ((_b = theme.text) === null || _b === void 0 ? void 0 : _b.color) || 'inherit';
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* An intent colours the text in a shade of it that reads on what the span is drawn on\n     ($textColor: worked out once per render by the component). */\n  color: ", ";\n  font-size: ", ";\n  vertical-align: ", ";\n  max-width: ", ";\n"], ["\n  /* An intent colours the text in a shade of it that reads on what the span is drawn on\n     ($textColor: worked out once per render by the component). */\n  color: ", ";\n  font-size: ", ";\n  vertical-align: ", ";\n  max-width: ", ";\n"])), function (_a) {
+    var theme = _a.theme, intent = _a.intent, $surface = _a.$surface, $textColor = _a.$textColor;
+    return $textColor !== null && $textColor !== void 0 ? $textColor : (0, colors_1.getReadableTextColor)(theme, intent, $surface);
 }, function (_a) {
     var _size = _a._size;
     return ((0, utils_1.isStringSize)(_size) ? "".concat(sizes_1.TEXT_FROM_SIZE[_size], "px") : _size);
@@ -60,7 +90,9 @@ exports.StyledSpan = (0, styled_components_1.default)(Effect_1.StyledTextEffect)
 exports.ReqoreSpan = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
     var size = _a.size, children = _a.children, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, intent = _a.intent, className = _a.className, _b = _a.inline, inline = _b === void 0 ? false : _b, maxWidth = _a.maxWidth, tooltip = _a.tooltip, props = __rest(_a, ["size", "children", "customTheme", "inheritCustomTheme", "intent", "className", "inline", "maxWidth", "tooltip"]);
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent, undefined, inheritCustomTheme);
-    return ((0, jsx_runtime_1.jsx)(TooltipComponent_1.ReqoreTooltipComponent, __assign({ ref: ref, as: 'span', theme: theme, color: theme.text.color, intent: intent, inline: inline }, props, { Component: exports.StyledSpan, maxWidth: maxWidth, tooltip: tooltip, _size: size, className: "".concat(className || '', " reqore-span"), children: children })));
+    var surface = (0, SurfaceContext_1.useReqoreSurface)();
+    var textColor = (0, react_1.useMemo)(function () { return (0, colors_1.getReadableTextColor)(theme, intent, surface); }, [theme, intent, surface]);
+    return ((0, jsx_runtime_1.jsx)(TooltipComponent_1.ReqoreTooltipComponent, __assign({ ref: ref, as: 'span', theme: theme, "$surface": surface, "$textColor": textColor, color: theme.text.color, intent: intent, inline: inline }, props, { Component: exports.StyledSpan, maxWidth: maxWidth, tooltip: tooltip, _size: size, className: "".concat(className || '', " reqore-span"), children: children })));
 }));
 var templateObject_1;
 //# sourceMappingURL=index.js.map

package/dist/components/Span/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Span/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyC;AACzC,wEAAuC;AACvC,+CAA+D;AAC/D,+CAAsD;AACtD,6CAAmD;AACnD,iDAAsD;AAOtD,oCAAqE;AACrE,wDAA6D;AA+B7D,+FAA+F;AAC/F,8FAA8F;AACjF,QAAA,UAAU,GAAG,IAAA,2BAAM,EAAC,yBAAgB,CAAC,CAAC,UAAU,CAAC;IAC5D,iBAAiB,EAAE,IAAA,uBAAc,EAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;CACjE,CAAC,wJAAA,aACS,EACwD,kBACpD,EAA2E,uBACtE,EAA+C,kBACpD,EAAuC,KACrD,KALU,UAAC,EAAiB;;QAAf,KAAK,WAAA,EAAE,MAAM,YAAA;IACvB,OAAA,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,KAAK,KAAI,SAAS,CAAA;CAAA,EACpD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,CAAC,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAG,sBAAc,CAAC,KAAK,CAAC,OAAI,CAAC,CAAC,CAAC,KAAK,CAAC;AAA5D,CAA4D,EACtE,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;AAA/B,CAA+B,EACpD,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,SAAS;AAArB,CAAqB,EACpD;AAEW,QAAA,UAAU,GAAG,IAAA,YAAI,EAC5B,IAAA,kBAAU,EACR,UACE,EAWmB,EACnB,GAAG;IAXD,IAAA,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,MAAM,YAAA,EACN,SAAS,eAAA,EACT,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,QAAQ,cAAA,EACR,OAAO,aAAA,EACJ,KAAK,cAVV,iHAWC,CADS;IAIV,IAAM,KAAK,GAAG,IAAA,yBAAc,EAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAEzF,OAAO,CACL,uBAAC,yCAAsB,aACrB,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACvB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,IACV,KAAK,IACT,SAAS,EAAE,kBAAU,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAG,SAAS,IAAI,EAAE,iBAAc,YAE1C,QAAQ,IACc,CAC1B,CAAC;AACJ,CAAC,CACF,CACF,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Span/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAkD;AAClD,+CAA+D;AAC/D,6DAA8D;AAC9D,+CAA4D;AAC5D,6CAAmD;AACnD,+DAAgE;AAChE,iDAAsD;AAOtD,oCAAqE;AACrE,wDAA6D;AA+B7D,+FAA+F;AAC/F,8FAA8F;AACjF,QAAA,UAAU,GAAG,IAAA,gBAAM,EAAC,yBAAgB,CAAC,CAAC,UAAU,CAAC;IAC5D,iBAAiB,EAAE,IAAA,uBAAc,EAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;CACjE,CAAC,sTAAA,2KAGS,EACoD,kBAChD,EAA2E,uBACtE,EAA+C,kBACpD,EAAuC,KACrD,KALU,UAAC,EAAuC;QAArC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA;IAC7C,OAAA,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,IAAA,6BAAoB,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC;AAA3D,CAA2D,EAChD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,CAAC,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAG,sBAAc,CAAC,KAAK,CAAC,OAAI,CAAC,CAAC,CAAC,KAAK,CAAC;AAA5D,CAA4D,EACtE,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;AAA/B,CAA+B,EACpD,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,SAAS;AAArB,CAAqB,EACpD;AAEW,QAAA,UAAU,GAAG,IAAA,YAAI,EAC5B,IAAA,kBAAU,EACR,UACE,EAWmB,EACnB,GAAG;IAXD,IAAA,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,MAAM,YAAA,EACN,SAAS,eAAA,EACT,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,QAAQ,cAAA,EACR,OAAO,aAAA,EACJ,KAAK,cAVV,iHAWC,CADS;IAIV,IAAM,KAAK,GAAG,IAAA,yBAAc,EAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,CAAC,CAAC;IACzF,IAAM,OAAO,GAAG,IAAA,iCAAgB,GAAE,CAAC;IACnC,IAAM,SAAS,GAAG,IAAA,eAAO,EACvB,cAAM,OAAA,IAAA,6BAAoB,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAA5C,CAA4C,EAClD,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CACzB,CAAC;IAEF,OAAO,CACL,uBAAC,yCAAsB,aACrB,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,KAAK,cACF,OAAO,gBACL,SAAS,EACrB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACvB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,IACV,KAAK,IACT,SAAS,EAAE,kBAAU,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAG,SAAS,IAAI,EAAE,iBAAc,YAE1C,QAAQ,IACc,CAC1B,CAAC;AACJ,CAAC,CACF,CACF,CAAC"}

package/dist/components/StackedBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StackedBar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAIpE,OAAO,EACL,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAgB,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAwB7D,MAAM,WAAW,qBAAqB;IACpC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB;IACpB,qEAAqE;IACrE,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sGAAsG;IACtG,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAwGD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,gBAAgB,6JA6IrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StackedBar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAapE,OAAO,EACL,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAgB,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAwB7D,MAAM,WAAW,qBAAqB;IACpC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB;IACpB,qEAAqE;IACrE,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sGAAsG;IACtG,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AA2HD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,gBAAgB,6JAwKrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/StackedBar/index.js

@@ -14,39 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 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)
@@ -58,12 +25,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var polished_1 = require("polished");
 var react_1 = require("react");
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = require("styled-components");
+var styled_1 = __importDefault(require("../../helpers/styled"));
 var sizes_1 = require("../../constants/sizes");
+var SurfaceContext_1 = require("../../context/SurfaceContext");
 var colors_1 = require("../../helpers/colors");
 var useTheme_1 = require("../../hooks/useTheme");
 var styles_1 = require("../../styles");
@@ -88,9 +60,13 @@ var STACKED_BAR_HEIGHT_FROM_SIZE = {
 var MIN_VALUE_HEIGHT = 18;
 /** Min height when the label is stacked under the value (two lines). */
 var MIN_VALUE_AND_LABEL_HEIGHT = 34;
+/** The track's own color, under the segments: a 10% wash of the theme's text. */
+var getTrackColor = function (theme) {
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)(theme, undefined, undefined, true), 0.1);
+};
 // Extends `StyledEffect` so the standard `effect` prop (gradients, glow,
 // filters, …) works exactly as it does on every other Reqore surface.
-var StyledStackedBarTrack = (0, styled_components_1.default)(Effect_1.StyledEffect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  width: ", ";\n  height: ", "px;\n  border-radius: ", ";\n  background-color: ", ";\n  border: ", ";\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  width: ", ";\n  height: ", "px;\n  border-radius: ", ";\n  background-color: ", ";\n  border: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var StyledStackedBarTrack = (0, styled_1.default)(Effect_1.StyledEffect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  width: ", ";\n  height: ", "px;\n  border-radius: ", ";\n  background-color: ", ";\n  border: ", ";\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  width: ", ";\n  height: ", "px;\n  border-radius: ", ";\n  background-color: ", ";\n  border: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var $fluid = _a.$fluid;
     return ($fluid ? '100%' : '200px');
 }, function (_a) {
@@ -101,9 +77,7 @@ var StyledStackedBarTrack = (0, styled_components_1.default)(Effect_1.StyledEffe
     return ($rounded === false ? 0 : "".concat($radius, "px"));
 }, function (_a) {
     var theme = _a.theme, $transparent = _a.$transparent;
-    return $transparent
-        ? 'transparent'
-        : (0, polished_1.rgba)((0, colors_1.getReadableColor)(theme, undefined, undefined, true), 0.1);
+    return $transparent ? 'transparent' : getTrackColor(theme);
 }, function (_a) {
     var $flat = _a.$flat, theme = _a.theme;
     return $flat === false
@@ -116,21 +90,30 @@ var StyledStackedBarTrack = (0, styled_components_1.default)(Effect_1.StyledEffe
     var $disabled = _a.$disabled;
     return $disabled && styles_1.DisabledElement;
 });
-var StyledStackedBarSegment = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  width: ", "%;\n  min-width: 0;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1px;\n  padding: 0 5px;\n  overflow: hidden;\n  color: #ffffff;\n  line-height: 1;\n  text-shadow: 0 1px 1px ", ";\n  white-space: nowrap;\n  transition: width 0.3s ease-out, filter 0.15s ease-out;\n  cursor: ", ";\n\n  &:hover {\n    ", "\n  }\n"], ["\n  height: 100%;\n  width: ", "%;\n  min-width: 0;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1px;\n  padding: 0 5px;\n  overflow: hidden;\n  color: #ffffff;\n  line-height: 1;\n  text-shadow: 0 1px 1px ", ";\n  white-space: nowrap;\n  transition: width 0.3s ease-out, filter 0.15s ease-out;\n  cursor: ", ";\n\n  &:hover {\n    ", "\n  }\n"])), function (_a) {
+var StyledStackedBarSegment = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  width: ", "%;\n  min-width: 0;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1px;\n  padding: 0 5px;\n  overflow: hidden;\n  color: ", ";\n  line-height: 1;\n  ", "\n\n  .reqore-stacked-bar-segment-label {\n    opacity: ", ";\n  }\n  white-space: nowrap;\n  transition: width 0.3s ease-out, filter 0.15s ease-out;\n  cursor: ", ";\n\n  &:hover {\n    ", "\n  }\n"], ["\n  height: 100%;\n  width: ", "%;\n  min-width: 0;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1px;\n  padding: 0 5px;\n  overflow: hidden;\n  color: ", ";\n  line-height: 1;\n  ", "\n\n  .reqore-stacked-bar-segment-label {\n    opacity: ", ";\n  }\n  white-space: nowrap;\n  transition: width 0.3s ease-out, filter 0.15s ease-out;\n  cursor: ", ";\n\n  &:hover {\n    ", "\n  }\n"])), function (_a) {
     var $percent = _a.$percent;
     return $percent;
 }, function (_a) {
     var $color = _a.$color;
     return $color;
-}, (0, polished_1.rgba)('#000000', 0.35), function (_a) {
+}, function (_a) {
+    var $text = _a.$text;
+    return $text;
+}, function (_a) {
+    var $shadow = _a.$shadow;
+    return $shadow && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      text-shadow: 0 1px 1px ", ";\n    "], ["\n      text-shadow: 0 1px 1px ", ";\n    "])), (0, polished_1.rgba)('#000000', 0.35));
+}, function (_a) {
+    var $labelOpacity = _a.$labelOpacity;
+    return $labelOpacity;
+}, function (_a) {
     var $interactive = _a.$interactive;
     return ($interactive ? 'pointer' : 'default');
 }, function (_a) {
     var $interactive = _a.$interactive;
-    return $interactive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        filter: brightness(1.1);\n      "], ["\n        filter: brightness(1.1);\n      "])));
+    return $interactive && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        filter: brightness(1.1);\n      "], ["\n        filter: brightness(1.1);\n      "])));
 });
-var StyledSegmentValue = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n"], ["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n"])));
-var StyledSegmentLabel = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 9px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n  opacity: 0.82;\n"], ["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 9px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n  opacity: 0.82;\n"])));
+var StyledSegmentValue = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n"], ["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n"])));
+var StyledSegmentLabel = styled_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 9px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n"], ["\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 9px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n"])));
 /**
  * A horizontal bar split into proportional, individually-coloured segments —
  * the multi-value counterpart to `ReqoreProgress`. Each segment can carry its
@@ -145,6 +128,16 @@ var StyledSegmentLabel = styled_components_1.default.span(templateObject_5 || (t
 var ReqoreStackedBar = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
     var items = _a.items, total = _a.total, _b = _a.size, size = _b === void 0 ? 'normal' : _b, intent = _a.intent, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, effect = _a.effect, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.rounded, rounded = _d === void 0 ? true : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.flat, flat = _f === void 0 ? true : _f, _g = _a.raised, raised = _g === void 0 ? false : _g, height = _a.height, disabled = _a.disabled, _h = _a.minSegmentPercent, minSegmentPercent = _h === void 0 ? 2 : _h, _j = _a.showValues, showValues = _j === void 0 ? false : _j, _k = _a.showLabels, showLabels = _k === void 0 ? false : _k, _l = _a.valueLabelMinPercent, valueLabelMinPercent = _l === void 0 ? 8 : _l, emptyContent = _a.emptyContent, className = _a.className, tooltip = _a.tooltip, rest = __rest(_a, ["items", "total", "size", "intent", "customTheme", "inheritCustomTheme", "effect", "fluid", "rounded", "transparent", "flat", "raised", "height", "disabled", "minSegmentPercent", "showValues", "showLabels", "valueLabelMinPercent", "emptyContent", "className", "tooltip"]);
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent, undefined, inheritCustomTheme);
+    /* What the segments are drawn over: the track (unless transparent) over what the bar is
+       drawn on - every color of a gradient. A translucent segment's text is read on it as it
+       is drawn there. */
+    var around = (0, SurfaceContext_1.useReqoreSurface)();
+    var underSegments = (0, react_1.useMemo)(function () {
+        var surfaces = (0, colors_1.getThemeSurfaces)(theme, around);
+        return transparent
+            ? surfaces
+            : surfaces.map(function (surface) { return (0, colors_1.getDrawnColor)(getTrackColor(theme), surface); });
+    }, [theme, around, transparent]);
     var resolvedHeight = (0, react_1.useMemo)(function () {
         var base = height !== null && height !== void 0 ? height : STACKED_BAR_HEIGHT_FROM_SIZE[size];
         if (showLabels)
@@ -171,9 +164,16 @@ var ReqoreStackedBar = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, r
                 (0, colors_1.getReadableColor)(theme, undefined, undefined, true);
             var tooltipContent = (_a = item.tooltip) !== null && _a !== void 0 ? _a : (item.label !== undefined ? "".concat(item.label, ": ").concat(item.value) : "".concat(item.value));
             var fits = rawPercent >= valueLabelMinPercent;
+            // the segment as it is drawn (a translucent color over the track) and what reads on it
+            var drawn = underSegments.map(function (under) { return (0, colors_1.getDrawnColor)(color, under); });
+            var text = (0, colors_1.getReadableColorOn)(drawn);
             return {
                 key: (_b = item.id) !== null && _b !== void 0 ? _b : "".concat((_c = item.label) !== null && _c !== void 0 ? _c : 'segment', "-").concat(index),
                 color: color,
+                text: text,
+                // the dark shadow only lifts light text: under dark text it blurred it
+                shadow: (0, colors_1.isReadableColor)(text) && (0, polished_1.getLuminance)(text) > 0.5,
+                labelOpacity: (0, colors_1.getReadableAlpha)(text, drawn, 0.82),
                 percent: percent,
                 value: item.value,
                 label: item.label,
@@ -188,13 +188,14 @@ var ReqoreStackedBar = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, r
         resolvedTotal,
         minSegmentPercent,
         theme,
+        underSegments,
         showValues,
         showLabels,
         valueLabelMinPercent,
     ]);
-    return ((0, jsx_runtime_1.jsx)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { Component: StyledStackedBarTrack, tooltip: tooltip, ref: ref, as: 'div', theme: theme, effect: effect, "$height": resolvedHeight, "$radius": trackRadius, "$rounded": rounded, "$transparent": transparent, "$flat": flat, "$fluid": fluid, "$raised": raised, "$disabled": disabled, className: "".concat(className || '', " reqore-stacked-bar"), role: 'img', children: segments.length === 0
+    return ((0, jsx_runtime_1.jsx)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { Component: StyledStackedBarTrack, tooltip: tooltip, ref: ref, as: 'div', theme: theme, effect: effect, "$height": resolvedHeight, "$radius": trackRadius, "$rounded": rounded, "$transparent": transparent, "$flat": flat, "$fluid": fluid, "$raised": raised, "$disabled": disabled, "aria-disabled": disabled ? true : rest['aria-disabled'], className: "".concat(className || '', " reqore-stacked-bar"), role: 'img', children: segments.length === 0
             ? emptyContent !== null && emptyContent !== void 0 ? emptyContent : null
-            : segments.map(function (segment) { return ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, { Component: StyledStackedBarSegment, tooltip: segment.tooltip, "$color": segment.color, "$percent": segment.percent, "$interactive": !!segment.onClick, onClick: segment.onClick, className: 'reqore-stacked-bar-segment', role: segment.onClick ? 'button' : undefined, tabIndex: segment.onClick ? 0 : undefined, onKeyDown: segment.onClick
+            : segments.map(function (segment) { return ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, { Component: StyledStackedBarSegment, tooltip: segment.tooltip, "$color": segment.color, "$text": segment.text, "$labelOpacity": segment.labelOpacity, "$shadow": segment.shadow, "$percent": segment.percent, "$interactive": !!segment.onClick, onClick: segment.onClick, className: 'reqore-stacked-bar-segment', role: segment.onClick ? 'button' : undefined, tabIndex: segment.onClick ? 0 : undefined, onKeyDown: segment.onClick
                     ? function (event) {
                         var _a;
                         if (event.key === 'Enter' || event.key === ' ') {
@@ -202,8 +203,8 @@ var ReqoreStackedBar = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, r
                             (_a = segment.onClick) === null || _a === void 0 ? void 0 : _a.call(segment);
                         }
                     }
-                    : undefined, children: [segment.showValue ? (0, jsx_runtime_1.jsx)(StyledSegmentValue, { children: segment.value }) : null, segment.showLabel ? ((0, jsx_runtime_1.jsx)(StyledSegmentLabel, { children: segment.label })) : null] }, segment.key)); }) })));
+                    : undefined, children: [segment.showValue ? (0, jsx_runtime_1.jsx)(StyledSegmentValue, { children: segment.value }) : null, segment.showLabel ? ((0, jsx_runtime_1.jsx)(StyledSegmentLabel, { className: 'reqore-stacked-bar-segment-label', children: segment.label })) : null] }, segment.key)); }) })));
 }));
 exports.default = ReqoreStackedBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 //# sourceMappingURL=index.js.map

package/dist/components/StackedBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/StackedBar/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/StackedBar/index.tsx"],"names":[],"mappings":"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"}

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

@@ -72,14 +72,6 @@ export interface IReqoreStatisticProps extends Omit<React.HTMLAttributes<HTMLDiv
     countUp?: boolean | IReqoreStatisticCountUp;
     /** Effect applied to the label text */
     labelEffect?: IReqoreEffect;
-    /**
-     * A line under the value — what the number is measured against, or where it came from
-     * ("+5.9% vs the day before", "Last 24 hours"). Smaller and quieter than the value; a string,
-     * a number or any node. Rendered in `.reqore-statistic-description`.
-     */
-    description?: React.ReactNode;
-    /** Effect applied to the description, over its defaults (`{ opacity: 0.6 }`). */
-    descriptionEffect?: IReqoreEffect;
     /** Effect applied to the card background (supports gradients) */
     effect?: IReqoreEffect;
     /** Text alignment */

package/dist/components/Statistic/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Statistic/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Statistic/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Statistic/index.js

@@ -14,39 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 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)
@@ -65,17 +32,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var polished_1 = require("polished");
 var react_1 = require("react");
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = require("styled-components");
+var styled_1 = __importDefault(require("../../helpers/styled"));
 var sizes_1 = require("../../constants/sizes");
 var colors_1 = require("../../helpers/colors");
+var SurfaceContext_1 = require("../../context/SurfaceContext");
 var utils_1 = require("../../helpers/utils");
 var useCountUp_1 = require("../../hooks/useCountUp");
+var useDrawnSurface_1 = require("../../hooks/useDrawnSurface");
 var useTheme_1 = require("../../hooks/useTheme");
 var styles_1 = require("../../styles");
 var ControlGroup_1 = __importDefault(require("../ControlGroup"));
 var Effect_1 = require("../Effect");
 var Header_1 = require("../Header");
 var Icon_1 = __importDefault(require("../Icon"));
+var surface_1 = require("../../helpers/surface");
 var Span_1 = require("../Span");
 var TooltipComponent_1 = require("../TooltipComponent");
 var HEADING_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -89,7 +60,7 @@ var TREND_DEFAULT_INTENTS = {
     down: 'danger',
     neutral: 'muted',
 };
-var StyledStatisticWrapper = (0, styled_components_1.default)(Effect_1.StyledEffect)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* ---- Layout --------------------------------------------------------\n     The Statistic is rendered as a real div (see the as=div on the JSX)\n     rather than the default StyledEffect span. A span containing block\n     children (the value row and the trend group are both divs) is the\n     wrong content model and produced a box that did not establish a\n     proper containment context, so overflow + min-width did not hold\n     the inner text inside the tile. With a div root the wrapper can be\n     a proper flex column container. */\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  justify-content: ", ";\n  width: ", ";\n  /* ---- Overflow safety ----------------------------------------------\n     Statistic tiles are commonly laid out inside flex or grid parents\n     (KPI strips, dashboards). Without bounding the tile intrinsic\n     width to its column, the widest unbreakable token in the value,\n     trend or label can push past the column edge and bleed into the\n     neighbouring tile. min-width 0 lets flex-shrink do its job,\n     max-width 100% caps the box at the column it lives in, and\n     overflow hidden clips any child that refuses to honour the cap.\n     With a div root these all behave as documented. */\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  & .reqore-statistic-label,\n  & .reqore-statistic-value-row,\n  & .reqore-statistic-trend {\n    max-width: 100%;\n    min-width: 0;\n  }\n  /* The trend slot is a ReqoreControlGroup which defaults to\n     \"flex: 0 0 auto\" (ControlGroup/index.tsx). That kills flex-shrink\n     so the group keeps its intrinsic content width and would push the\n     tile past its grid track when the trend copy is long. Forcing the\n     group to shrink lets the text-leaf wrap rules below take effect. */\n  & .reqore-statistic-trend {\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n  }\n  /* Wrap rather than ellipsis \u2014 KPI tiles benefit from the operator\n     seeing the whole sub-line rather than a clipped fragment.\n     overflow-wrap anywhere covers identifiers, URLs and long codes\n     with no natural break point. */\n  & .reqore-statistic-label,\n  & .reqore-statistic-value,\n  & .reqore-statistic-prefix,\n  & .reqore-statistic-suffix {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    max-width: 100%;\n  }\n  & .reqore-statistic-trend > span {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  /* ---- Layout --------------------------------------------------------\n     The Statistic is rendered as a real div (see the as=div on the JSX)\n     rather than the default StyledEffect span. A span containing block\n     children (the value row and the trend group are both divs) is the\n     wrong content model and produced a box that did not establish a\n     proper containment context, so overflow + min-width did not hold\n     the inner text inside the tile. With a div root the wrapper can be\n     a proper flex column container. */\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  justify-content: ", ";\n  width: ", ";\n  /* ---- Overflow safety ----------------------------------------------\n     Statistic tiles are commonly laid out inside flex or grid parents\n     (KPI strips, dashboards). Without bounding the tile intrinsic\n     width to its column, the widest unbreakable token in the value,\n     trend or label can push past the column edge and bleed into the\n     neighbouring tile. min-width 0 lets flex-shrink do its job,\n     max-width 100% caps the box at the column it lives in, and\n     overflow hidden clips any child that refuses to honour the cap.\n     With a div root these all behave as documented. */\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  & .reqore-statistic-label,\n  & .reqore-statistic-value-row,\n  & .reqore-statistic-trend {\n    max-width: 100%;\n    min-width: 0;\n  }\n  /* The trend slot is a ReqoreControlGroup which defaults to\n     \"flex: 0 0 auto\" (ControlGroup/index.tsx). That kills flex-shrink\n     so the group keeps its intrinsic content width and would push the\n     tile past its grid track when the trend copy is long. Forcing the\n     group to shrink lets the text-leaf wrap rules below take effect. */\n  & .reqore-statistic-trend {\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n  }\n  /* Wrap rather than ellipsis \u2014 KPI tiles benefit from the operator\n     seeing the whole sub-line rather than a clipped fragment.\n     overflow-wrap anywhere covers identifiers, URLs and long codes\n     with no natural break point. */\n  & .reqore-statistic-label,\n  & .reqore-statistic-value,\n  & .reqore-statistic-prefix,\n  & .reqore-statistic-suffix {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    max-width: 100%;\n  }\n  & .reqore-statistic-trend > span {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var StyledStatisticWrapper = (0, styled_1.default)(Effect_1.StyledEffect)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* ---- Layout --------------------------------------------------------\n     The Statistic is rendered as a real div (see the as=div on the JSX)\n     rather than the default StyledEffect span. A span containing block\n     children (the value row and the trend group are both divs) is the\n     wrong content model and produced a box that did not establish a\n     proper containment context, so overflow + min-width did not hold\n     the inner text inside the tile. With a div root the wrapper can be\n     a proper flex column container. */\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  justify-content: ", ";\n  width: ", ";\n  /* ---- Overflow safety ----------------------------------------------\n     Statistic tiles are commonly laid out inside flex or grid parents\n     (KPI strips, dashboards). Without bounding the tile intrinsic\n     width to its column, the widest unbreakable token in the value,\n     trend or label can push past the column edge and bleed into the\n     neighbouring tile. min-width 0 lets a flex or grid row narrow the\n     tile to its share - without it a tile is never narrower than the\n     longest word of its label, and four tiles in a 320px row reached\n     past it - max-width 100% caps the box at the column it lives in,\n     and overflow clip clips any child that refuses to honour the cap.\n     A tile with room keeps its label's words whole: they break only\n     where one alone is wider than the tile (the label rule below). */\n  min-width: 0;\n  max-width: 100%;\n  overflow: clip;\n  & .reqore-statistic-content,\n  & .reqore-statistic-label,\n  & .reqore-statistic-value-row,\n  & .reqore-statistic-trend {\n    max-width: 100%;\n    min-width: 0;\n  }\n  /* The trend slot is a ReqoreControlGroup which defaults to\n     \"flex: 0 0 auto\" (ControlGroup/index.tsx). That kills flex-shrink\n     so the group keeps its intrinsic content width and would push the\n     tile past its grid track when the trend copy is long. Forcing the\n     group to shrink lets the text-leaf wrap rules below take effect. */\n  & .reqore-statistic-trend {\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n  }\n  /* Wrap rather than ellipsis \u2014 KPI tiles benefit from the operator\n     seeing the whole sub-line rather than a clipped fragment. A label\n     is words: it wraps between them, and a word breaks only when it\n     alone is wider than the tile (break-word; anywhere, or\n     word-break: break-all, broke words that had room - \"DEPEND / ENCI /\n     ES\" on a 120px tile). */\n  /* A label that wraps is aligned as its tile is (centred by default): its box is centred by\n     align-items, but its lines were left-aligned inside it, so a broken label sat to the left of\n     its value and of the tiles beside it whose labels fit on one line. */\n  & .reqore-statistic-label {\n    white-space: normal;\n    overflow-wrap: break-word;\n    word-break: normal;\n    max-width: 100%;\n    text-align: ", ";\n  }\n  /* overflow-wrap anywhere covers identifiers, URLs and long codes\n     with no natural break point. */\n  & .reqore-statistic-value,\n  & .reqore-statistic-prefix,\n  & .reqore-statistic-suffix {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    max-width: 100%;\n  }\n  & .reqore-statistic-trend > span {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  /* ---- Layout --------------------------------------------------------\n     The Statistic is rendered as a real div (see the as=div on the JSX)\n     rather than the default StyledEffect span. A span containing block\n     children (the value row and the trend group are both divs) is the\n     wrong content model and produced a box that did not establish a\n     proper containment context, so overflow + min-width did not hold\n     the inner text inside the tile. With a div root the wrapper can be\n     a proper flex column container. */\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  justify-content: ", ";\n  width: ", ";\n  /* ---- Overflow safety ----------------------------------------------\n     Statistic tiles are commonly laid out inside flex or grid parents\n     (KPI strips, dashboards). Without bounding the tile intrinsic\n     width to its column, the widest unbreakable token in the value,\n     trend or label can push past the column edge and bleed into the\n     neighbouring tile. min-width 0 lets a flex or grid row narrow the\n     tile to its share - without it a tile is never narrower than the\n     longest word of its label, and four tiles in a 320px row reached\n     past it - max-width 100% caps the box at the column it lives in,\n     and overflow clip clips any child that refuses to honour the cap.\n     A tile with room keeps its label's words whole: they break only\n     where one alone is wider than the tile (the label rule below). */\n  min-width: 0;\n  max-width: 100%;\n  overflow: clip;\n  & .reqore-statistic-content,\n  & .reqore-statistic-label,\n  & .reqore-statistic-value-row,\n  & .reqore-statistic-trend {\n    max-width: 100%;\n    min-width: 0;\n  }\n  /* The trend slot is a ReqoreControlGroup which defaults to\n     \"flex: 0 0 auto\" (ControlGroup/index.tsx). That kills flex-shrink\n     so the group keeps its intrinsic content width and would push the\n     tile past its grid track when the trend copy is long. Forcing the\n     group to shrink lets the text-leaf wrap rules below take effect. */\n  & .reqore-statistic-trend {\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n  }\n  /* Wrap rather than ellipsis \u2014 KPI tiles benefit from the operator\n     seeing the whole sub-line rather than a clipped fragment. A label\n     is words: it wraps between them, and a word breaks only when it\n     alone is wider than the tile (break-word; anywhere, or\n     word-break: break-all, broke words that had room - \"DEPEND / ENCI /\n     ES\" on a 120px tile). */\n  /* A label that wraps is aligned as its tile is (centred by default): its box is centred by\n     align-items, but its lines were left-aligned inside it, so a broken label sat to the left of\n     its value and of the tiles beside it whose labels fit on one line. */\n  & .reqore-statistic-label {\n    white-space: normal;\n    overflow-wrap: break-word;\n    word-break: normal;\n    max-width: 100%;\n    text-align: ", ";\n  }\n  /* overflow-wrap anywhere covers identifiers, URLs and long codes\n     with no natural break point. */\n  & .reqore-statistic-value,\n  & .reqore-statistic-prefix,\n  & .reqore-statistic-suffix {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    max-width: 100%;\n  }\n  & .reqore-statistic-trend > span {\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var $align = _a.$align;
     return $align === 'center'
         ? 'center'
@@ -103,10 +74,13 @@ var StyledStatisticWrapper = (0, styled_components_1.default)(Effect_1.StyledEff
     var $fluid = _a.$fluid;
     return ($fluid ? '100%' : undefined);
 }, function (_a) {
-    var $hasBackground = _a.$hasBackground, theme = _a.theme, size = _a.size, rounded = _a.rounded, radiusSize = _a.radiusSize, flat = _a.flat, intent = _a.intent, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b, $padded = _a.$padded, $paddingSize = _a.$paddingSize;
-    return $hasBackground && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      border-radius: ", "px;\n      border: ", ";\n      color: ", ";\n      padding: ", ";\n    "], ["\n      background-color: ", ";\n      border-radius: ", "px;\n      border: ", ";\n      color: ", ";\n      padding: ", ";\n    "])), (0, polished_1.rgba)((0, colors_1.getPanelBackgroundColor)(theme), opacity), rounded ? (0, sizes_1.resolveRadius)(size, radiusSize) : 0, flat
+    var $align = _a.$align;
+    return $align === 'center' ? 'center' : $align === 'flex-end' ? 'right' : 'left';
+}, function (_a) {
+    var $hasBackground = _a.$hasBackground, theme = _a.theme, size = _a.size, rounded = _a.rounded, radiusSize = _a.radiusSize, flat = _a.flat, intent = _a.intent, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b, $padded = _a.$padded, $paddingSize = _a.$paddingSize, $text = _a.$text;
+    return $hasBackground && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      border-radius: ", "px;\n      border: ", ";\n      color: ", ";\n      padding: ", ";\n    "], ["\n      background-color: ", ";\n      border-radius: ", "px;\n      border: ", ";\n      color: ", ";\n      padding: ", ";\n    "])), (0, polished_1.rgba)((0, colors_1.changeDarkness)((0, colors_1.getMainBackgroundColor)(theme), 0.03), opacity), rounded ? (0, sizes_1.resolveRadius)(size, radiusSize) : 0, flat
         ? undefined
-        : "1px solid ".concat(intent ? (0, colors_1.changeLightness)(theme.intents[intent], 0.08) : (0, colors_1.getPanelHairlineColor)(theme)), (0, colors_1.getReadableColor)(theme, undefined, undefined, true), (0, utils_1.resolvePadding)({
+        : "1px solid ".concat((0, colors_1.changeLightness)(intent ? theme.intents[intent] : (0, colors_1.getMainBackgroundColor)(theme), 0.08)), $text, (0, utils_1.resolvePadding)({
         padded: $padded,
         paddingSize: $paddingSize,
         verticalMultiplier: 3,
@@ -123,13 +97,14 @@ var StyledStatisticWrapper = (0, styled_components_1.default)(Effect_1.StyledEff
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), styles_1.DisabledElement);
 });
-var StyledStatisticValueRow = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  flex-wrap: nowrap;\n\n  /* valueAs: the row is the one element the value is written in. A heading or a paragraph\n     brings the browser's margins, which the value never had; and the weight the headings\n     used to bring is the row's to give where it is not a heading. */\n  ", "\n"], ["\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  flex-wrap: nowrap;\n\n  /* valueAs: the row is the one element the value is written in. A heading or a paragraph\n     brings the browser's margins, which the value never had; and the weight the headings\n     used to bring is the row's to give where it is not a heading. */\n  ", "\n"])), function (_a) {
+var StyledStatisticValueRow = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  flex-wrap: nowrap;\n\n  /* valueAs: the row is the one element the value is written in. A heading or a paragraph\n     brings the browser's margins, which the value never had; and the weight the headings\n     used to bring is the row's to give where it is not a heading. */\n  ", "\n"], ["\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  flex-wrap: nowrap;\n\n  /* valueAs: the row is the one element the value is written in. A heading or a paragraph\n     brings the browser's margins, which the value never had; and the weight the headings\n     used to bring is the row's to give where it is not a heading. */\n  ", "\n"])), function (_a) {
     var $element = _a.$element;
     return $element && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin: 0;\n      padding: 0;\n      font-size: inherit;\n      ", "\n    "], ["\n      margin: 0;\n      padding: 0;\n      font-size: inherit;\n      ", "\n    "])), !HEADING_ELEMENTS.includes($element) && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        font-weight: bold;\n      "], ["\n        font-weight: bold;\n      "]))));
 });
 /** The value itself while it counts: there for screen readers, not on screen. */
-var StyledStatisticValueFinal = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n"])));
-var PREFIX_SUFFIX_EFFECT = { opacity: 0.6 };
+var StyledStatisticValueFinal = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n"])));
+/** How faint the prefix and the suffix are beside the value, as far as they stay readable. */
+var PREFIX_SUFFIX_OPACITY = 0.6;
 /**
  * The prefix, the value or the suffix. Without `valueAs` each is its own heading, as it always
  * was. With it the row is the element and each part is a span inside it, styled exactly as the
@@ -140,7 +115,7 @@ var StatisticValuePart = (0, react_1.memo)(function (_a) {
     return as ? ((0, jsx_runtime_1.jsx)(Header_1.StyledHeader, { as: 'span', _size: sizes_1.HEADER_SIZE_TO_NUMBER[size], theme: theme, effect: effect, className: className, children: children })) : ((0, jsx_runtime_1.jsx)(Header_1.ReqoreHeading, { size: size, className: className, effect: effect, children: children }));
 });
 var ReqoreStatistic = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
-    var value = _a.value, label = _a.label, icon = _a.icon, iconColor = _a.iconColor, iconProps = _a.iconProps, prefix = _a.prefix, suffix = _a.suffix, trend = _a.trend, valueEffect = _a.valueEffect, valueAs = _a.valueAs, countUp = _a.countUp, labelEffect = _a.labelEffect, description = _a.description, descriptionEffect = _a.descriptionEffect, effect = _a.effect, _b = _a.align, align = _b === void 0 ? 'center' : _b, _c = _a.size, size = _c === void 0 ? 'normal' : _c, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, intent = _a.intent, fluid = _a.fluid, flat = _a.flat, disabled = _a.disabled, tooltip = _a.tooltip, rounded = _a.rounded, radiusSize = _a.radiusSize, transparent = _a.transparent, opacity = _a.opacity, raised = _a.raised, _d = _a.padded, padded = _d === void 0 ? true : _d, paddingSize = _a.paddingSize, className = _a.className, rest = __rest(_a, ["value", "label", "icon", "iconColor", "iconProps", "prefix", "suffix", "trend", "valueEffect", "valueAs", "countUp", "labelEffect", "description", "descriptionEffect", "effect", "align", "size", "customTheme", "inheritCustomTheme", "intent", "fluid", "flat", "disabled", "tooltip", "rounded", "radiusSize", "transparent", "opacity", "raised", "padded", "paddingSize", "className"]);
+    var value = _a.value, label = _a.label, icon = _a.icon, iconColor = _a.iconColor, iconProps = _a.iconProps, prefix = _a.prefix, suffix = _a.suffix, trend = _a.trend, valueEffect = _a.valueEffect, valueAs = _a.valueAs, countUp = _a.countUp, labelEffect = _a.labelEffect, effect = _a.effect, _b = _a.align, align = _b === void 0 ? 'center' : _b, _c = _a.size, size = _c === void 0 ? 'normal' : _c, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, intent = _a.intent, fluid = _a.fluid, flat = _a.flat, disabled = _a.disabled, tooltip = _a.tooltip, rounded = _a.rounded, radiusSize = _a.radiusSize, transparent = _a.transparent, opacity = _a.opacity, raised = _a.raised, _d = _a.padded, padded = _d === void 0 ? true : _d, paddingSize = _a.paddingSize, className = _a.className, rest = __rest(_a, ["value", "label", "icon", "iconColor", "iconProps", "prefix", "suffix", "trend", "valueEffect", "valueAs", "countUp", "labelEffect", "effect", "align", "size", "customTheme", "inheritCustomTheme", "intent", "fluid", "flat", "disabled", "tooltip", "rounded", "radiusSize", "transparent", "opacity", "raised", "padded", "paddingSize", "className"]);
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent, undefined, inheritCustomTheme);
     // What a ReqoreHeading resolves for itself: the value's text never takes the intent.
     var valueTheme = (0, useTheme_1.useReqoreTheme)('main');
@@ -153,8 +128,13 @@ var ReqoreStatistic = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, re
     var hasBackground = (0, react_1.useMemo)(function () {
         return !!(effect || rounded || flat !== undefined || transparent || opacity !== undefined || raised);
     }, [effect, rounded, flat, transparent, opacity, raised]);
-    var trendIntent = (0, react_1.useMemo)(function () { return (trend ? trend.intent || TREND_DEFAULT_INTENTS[trend.direction] : undefined); }, [trend]);
-    var trendIcon = (0, react_1.useMemo)(function () { return (trend ? trend.icon || TREND_ICONS[trend.direction] : undefined); }, [trend]);
+    // the opacity its surface is drawn at: none when transparent
+    var drawnOpacity = transparent ? 0 : opacity;
+    /* What the statistic is drawn on and in: its own surface, at the opacity it is drawn at, over what is under
+       it when it has one. What it holds is read against that, and its label and prefix and suffix fade only as
+       far as they stay readable there. Painting nothing, it is on what is around it: what a component there
+       says, or its customTheme's main. What it paints: with an intent, its gradient is ringed in the intent's
+       color. */
     var transformedEffect = (0, react_1.useMemo)(function () {
         if (!effect)
             return undefined;
@@ -166,6 +146,25 @@ var ReqoreStatistic = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, re
         }
         return newEffect;
     }, [effect, intent, theme]);
+    /* Painting nothing, it is on what is around it; else its fill, and the gradient it paints - the one it
+       draws (`transformedEffect`), not the effect as given: an intent rings it, and a ringed gradient is drawn
+       without its own surface color. */
+    var _f = (0, useDrawnSurface_1.useReqoreDrawnSurface)({
+        theme: theme,
+        customTheme: customTheme,
+        transparent: !hasBackground || drawnOpacity === 0,
+        fill: (0, polished_1.rgba)((0, colors_1.changeDarkness)((0, colors_1.getMainBackgroundColor)(theme), 0.03), drawnOpacity !== null && drawnOpacity !== void 0 ? drawnOpacity : 1),
+        effect: hasBackground ? transformedEffect : undefined,
+    }), backgrounds = _f.backgrounds, text = _f.text;
+    /* fainter than the value, as far as it stays readable in the color it is drawn in, unless the caller gives
+       its opacity: one object while it holds, for a memo component */
+    var labelLook = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return (__assign(__assign({ uppercase: true, spaced: 1 }, labelEffect), { opacity: (_a = labelEffect === null || labelEffect === void 0 ? void 0 : labelEffect.opacity) !== null && _a !== void 0 ? _a : (0, colors_1.getReadableAlpha)((_b = (0, surface_1.getDrawnEffectTextColor)(theme, labelEffect === null || labelEffect === void 0 ? void 0 : labelEffect.color, backgrounds)) !== null && _b !== void 0 ? _b : text, backgrounds, 0.7) }));
+    }, [labelEffect, theme, text, backgrounds]);
+    var prefixSuffixEffect = (0, react_1.useMemo)(function () { return ({ opacity: (0, colors_1.getReadableAlpha)(text, backgrounds, PREFIX_SUFFIX_OPACITY) }); }, [text, backgrounds]);
+    var trendIntent = (0, react_1.useMemo)(function () { return (trend ? trend.intent || TREND_DEFAULT_INTENTS[trend.direction] : undefined); }, [trend]);
+    var trendIcon = (0, react_1.useMemo)(function () { return (trend ? trend.icon || TREND_ICONS[trend.direction] : undefined); }, [trend]);
     return ((0, jsx_runtime_1.jsx)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { 
         // Render as a real block-level `<div>`. The base styled
         // element (`StyledEffect`) is a `<span>`, which is wrong
@@ -176,7 +175,7 @@ var ReqoreStatistic = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, re
         // resulting box doesn't establish containment cleanly,
         // which is why `overflow: hidden` + `min-width: 0` didn't
         // hold their text inside the tile.
-        as: 'div', Component: StyledStatisticWrapper, tooltip: tooltip, ref: ref, theme: theme, size: size, "$fluid": fluid, disabled: disabled, "$hasBackground": hasBackground, "$interactive": interactive, "$align": flexAlign, rounded: rounded, radiusSize: radiusSize, flat: flat, intent: intent, opacity: transparent ? 0 : opacity, "$raised": raised, "$padded": padded, "$paddingSize": paddingSize !== null && paddingSize !== void 0 ? paddingSize : size, effect: transformedEffect, className: "".concat(className || '', " reqore-statistic"), children: (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, horizontalAlign: flexAlign, className: 'reqore-statistic-content', children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, iconProps, { icon: icon, size: size, color: iconColor, intent: iconColor ? undefined : intent, className: 'reqore-statistic-icon' }))), label && ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { size: secondarySize, className: 'reqore-statistic-label', effect: __assign({ opacity: 0.7, uppercase: true, spaced: 1 }, labelEffect), children: label })), (0, jsx_runtime_1.jsxs)(StyledStatisticValueRow, { ref: valueRowRef, as: valueAs, "$element": valueAs, className: 'reqore-statistic-value-row', children: [prefix && ((0, jsx_runtime_1.jsx)(StatisticValuePart, { as: valueAs, size: valueSize, theme: valueTheme, className: 'reqore-statistic-prefix', effect: PREFIX_SUFFIX_EFFECT, children: prefix })), (0, jsx_runtime_1.jsx)(StatisticValuePart, { as: valueAs, size: valueSize, theme: valueTheme, className: 'reqore-statistic-value', effect: valueEffect, children: counting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'reqore-statistic-value-count', children: display }), (0, jsx_runtime_1.jsx)(StyledStatisticValueFinal, { className: 'reqore-statistic-value-final', children: final })] })) : (display) }), suffix && ((0, jsx_runtime_1.jsx)(StatisticValuePart, { as: valueAs, size: valueSize, theme: valueTheme, className: 'reqore-statistic-suffix', effect: PREFIX_SUFFIX_EFFECT, children: suffix }))] }), trend && ((0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { gapSize: 'micro', verticalAlign: 'center', className: 'reqore-statistic-trend', children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { icon: trendIcon, size: secondarySize, intent: trendIntent }), trend.value !== undefined && ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { size: secondarySize, intent: trendIntent, children: trend.value }))] })), description !== undefined && description !== null && description !== '' && ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { size: secondarySize, className: 'reqore-statistic-description', effect: __assign({ opacity: 0.6 }, descriptionEffect), children: description }))] }) })));
+        as: 'div', Component: StyledStatisticWrapper, tooltip: tooltip, ref: ref, theme: theme, size: size, "$fluid": fluid, disabled: disabled, "aria-disabled": disabled ? true : rest['aria-disabled'], "$hasBackground": hasBackground, "$text": text, "$backgrounds": backgrounds, "$interactive": interactive, "$align": flexAlign, rounded: rounded, radiusSize: radiusSize, flat: flat, intent: intent, opacity: drawnOpacity, "$raised": raised, "$padded": padded, "$paddingSize": paddingSize !== null && paddingSize !== void 0 ? paddingSize : size, effect: transformedEffect, className: "".concat(className || '', " reqore-statistic"), children: (0, jsx_runtime_1.jsx)(SurfaceContext_1.ReqoreSurfaceProvider, { color: backgrounds, children: (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, horizontalAlign: flexAlign, className: 'reqore-statistic-content', children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, iconProps, { icon: icon, size: size, color: iconColor, intent: iconColor ? undefined : intent, className: 'reqore-statistic-icon' }))), label && ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { size: secondarySize, className: 'reqore-statistic-label', effect: labelLook, children: label })), (0, jsx_runtime_1.jsxs)(StyledStatisticValueRow, { ref: valueRowRef, as: valueAs, "$element": valueAs, className: 'reqore-statistic-value-row', children: [prefix && ((0, jsx_runtime_1.jsx)(StatisticValuePart, { as: valueAs, size: valueSize, theme: valueTheme, className: 'reqore-statistic-prefix', effect: prefixSuffixEffect, children: prefix })), (0, jsx_runtime_1.jsx)(StatisticValuePart, { as: valueAs, size: valueSize, theme: valueTheme, className: 'reqore-statistic-value', effect: valueEffect, children: counting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'reqore-statistic-value-count', children: display }), (0, jsx_runtime_1.jsx)(StyledStatisticValueFinal, { className: 'reqore-statistic-value-final', children: final })] })) : (display) }), suffix && ((0, jsx_runtime_1.jsx)(StatisticValuePart, { as: valueAs, size: valueSize, theme: valueTheme, className: 'reqore-statistic-suffix', effect: prefixSuffixEffect, children: suffix }))] }), trend && ((0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { gapSize: 'micro', verticalAlign: 'center', className: 'reqore-statistic-trend', children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { icon: trendIcon, size: secondarySize, intent: trendIntent }), trend.value !== undefined && ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { size: secondarySize, intent: trendIntent, children: trend.value }))] }))] }) }) })));
 }));
 exports.default = ReqoreStatistic;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;