@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-5e1c3.0

package/internal/ResizeDetector/ResizeDetector.styles.d.ts

@@ -1,8 +1,7 @@
-/** Правила — в `ResizeDetector.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    root: string;
-    iframe: string;
-    content: string;
-    fullHeight: string;
-    flex: string;
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    iframe(): string;
+    content(): string;
+    fullHeight(): string;
+    flex(): string;
 }>;

package/internal/ResizeDetector/ResizeDetector.styles.js

@@ -1,10 +1,27 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `ResizeDetector.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    root: 'react-ui-ResizeDetector-root',
-    iframe: 'react-ui-ResizeDetector-iframe',
-    content: 'react-ui-ResizeDetector-content',
-    fullHeight: 'react-ui-ResizeDetector-fullHeight',
-    flex: 'react-ui-ResizeDetector-flex',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n    "], ["\n      position: relative;\n      height: 100%;\n    "])));
+        },
+        iframe: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "], ["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "])));
+        },
+        content: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+        },
+        fullHeight: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      height: 100%;\n    "], ["\n      height: 100%;\n    "])));
+        },
+        flex: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
+        },
+    });
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=ResizeDetector.styles.js.map

package/internal/ResizeDetector/ResizeDetector.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeDetector.styles.js","sourceRoot":"","sources":["ResizeDetector.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,oEAAoE;AACpE,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,8BAA8B;IACpC,MAAM,EAAE,gCAAgC;IACxC,OAAO,EAAE,iCAAiC;IAC1C,UAAU,EAAE,oCAAoC;IAChD,IAAI,EAAE,8BAA8B;CACrC,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `ResizeDetector.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-ResizeDetector-root',\n  iframe: 'react-ui-ResizeDetector-iframe',\n  content: 'react-ui-ResizeDetector-content',\n  fullHeight: 'react-ui-ResizeDetector-fullHeight',\n  flex: 'react-ui-ResizeDetector-flex',\n});\n"]}
+{"version":3,"file":"ResizeDetector.styles.js","sourceRoot":"","sources":["ResizeDetector.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,2HAAA,wDAGT,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,wRAAA,qNAWT,KAAC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,UAAU;YACR,OAAO,GAAG,gGAAA,6BAET,KAAC;QACJ,CAAC;QAED,IAAI;YACF,OAAO,GAAG,iGAAA,8BAET,KAAC;QACJ,CAAC;KACF,CAAC;AAxC8D,CAwC9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      position: relative;\n      height: 100%;\n    `;\n  },\n\n  iframe() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    `;\n  },\n\n  content() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  fullHeight() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  flex() {\n    return css`\n      display: flex;\n    `;\n  },\n}));\n"]}

package/internal/SpinnerIcon/SpinnerIcon.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { getStyles } from './SpinnerIcon.styles.js';
 export var sizes = {
     large: {
@@ -27,6 +26,7 @@ export var SpinnerIcon = function (_a) {
     var size = _a.size, className = _a.className, inline = _a.inline, width = _a.width, color = _a.color;
     var _size = isSizeAlias(size) ? sizes[size] : size;
     var currentSize = inline ? sizes.small : _size;
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     return (React.createElement("span", { className: cx(styles.root(), (_b = {}, _b[styles.rootInline()] = inline, _b)) },
         React.createElement("svg", { viewBox: "0 0 ".concat(currentSize.size, " ").concat(currentSize.size), className: cx(styles.icon(), className, (_c = {},

package/internal/SpinnerIcon/SpinnerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerIcon.js","sourceRoot":"","sources":["SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,gBAAgB,IAAI,EAAE,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAgBpD,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC;KACV;CACO,CAAC;AAEX,IAAM,WAAW,GAAG,UAAC,IAAa;IAChC,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;;QAAzD,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA;IACjE,IAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAEjD,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,YAAI,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM,MAAG;QACnE,6BACE,OAAO,EAAE,cAAO,WAAW,CAAC,IAAI,cAAI,WAAW,CAAC,IAAI,CAAE,EACtD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,SAAS;gBACpC,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM;oBAC7B,EACF,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,MAAM,EAAE,WAAW,CAAC,IAAI,EACxB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,UAAG,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,eAAK,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAE,EACrF,gBAAgB,EAAC,GAAG,EACpB,WAAW,EAAE,KAAK,IAAI,WAAW,CAAC,KAAK,EACvC,SAAS,EAAC,OAAO,iBACL,MAAM;YAElB,gCAAQ,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAI,CACjF,CACD,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport { getStyles } from './SpinnerIcon.styles.js';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  large: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  medium: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  small: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.small : _size;\n\n  const styles = useStyles(getStyles);\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"]}
+{"version":3,"file":"SpinnerIcon.js","sourceRoot":"","sources":["SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAgBpD,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC;KACV;CACO,CAAC;AAEX,IAAM,WAAW,GAAG,UAAC,IAAa;IAChC,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;;QAAzD,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA;IACjE,IAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,YAAI,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM,MAAG;QACnE,6BACE,OAAO,EAAE,cAAO,WAAW,CAAC,IAAI,cAAI,WAAW,CAAC,IAAI,CAAE,EACtD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,SAAS;gBACpC,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM;oBAC7B,EACF,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,MAAM,EAAE,WAAW,CAAC,IAAI,EACxB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,UAAG,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,eAAK,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAE,EACrF,gBAAgB,EAAC,GAAG,EACpB,WAAW,EAAE,KAAK,IAAI,WAAW,CAAC,KAAK,EACvC,SAAS,EAAC,OAAO,iBACL,MAAM;YAElB,gCAAQ,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAI,CACjF,CACD,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { getStyles } from './SpinnerIcon.styles.js';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  large: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  medium: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  small: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.small : _size;\n\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"]}

package/internal/SpinnerIcon/SpinnerIcon.styles.d.ts

@@ -1,7 +1,6 @@
-/** Правила — в `SpinnerIcon.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    root: string;
-    rootInline: string;
-    icon: string;
-    iconInline: string;
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    rootInline(): string;
+    icon(): string;
+    iconInline(): string;
 }>;

package/internal/SpinnerIcon/SpinnerIcon.styles.js

@@ -1,9 +1,24 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `SpinnerIcon.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    root: 'react-ui-SpinnerIcon-root',
-    rootInline: 'react-ui-SpinnerIcon-rootInline',
-    icon: 'react-ui-SpinnerIcon-icon',
-    iconInline: 'react-ui-SpinnerIcon-iconInline',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    "], ["\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    "])));
+        },
+        rootInline: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    "], ["\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    "])));
+        },
+        icon: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    "], ["\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    "])));
+        },
+        iconInline: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    "], ["\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    "])));
+        },
+    });
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=SpinnerIcon.styles.js.map

package/internal/SpinnerIcon/SpinnerIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerIcon.styles.js","sourceRoot":"","sources":["SpinnerIcon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,iEAAiE;AACjE,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,2BAA2B;IACjC,UAAU,EAAE,iCAAiC;IAC7C,IAAI,EAAE,2BAA2B;IACjC,UAAU,EAAE,iCAAiC;CAC9C,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `SpinnerIcon.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-SpinnerIcon-root',\n  rootInline: 'react-ui-SpinnerIcon-rootInline',\n  icon: 'react-ui-SpinnerIcon-icon',\n  iconInline: 'react-ui-SpinnerIcon-iconInline',\n});\n"]}
+{"version":3,"file":"SpinnerIcon.styles.js","sourceRoot":"","sources":["SpinnerIcon.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,8JAAA,2FAIT,KAAC;QACJ,CAAC;QACD,UAAU;YACR,OAAO,GAAG,kKAAA,+FAGT,KAAC;QACJ,CAAC;QAED,IAAI;YACF,OAAO,GAAG,4JAAA,yFAIT,KAAC;QACJ,CAAC;QAED,UAAU;YACR,OAAO,GAAG,6OAAA,0KAKT,KAAC;QACJ,CAAC;KACF,CAAC;AA/B8D,CA+B9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    `;\n  },\n  rootInline() {\n    return css`\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    `;\n  },\n\n  icon() {\n    return css`\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    `;\n  },\n\n  iconInline() {\n    return css`\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    `;\n  },\n}));\n"]}

package/internal/TextWidthHelper/TextWidthHelper.d.ts

@@ -7,6 +7,7 @@ interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private emotion;
     private jsStyles;
     render(): React.JSX.Element;
     getTextWidth(): number;

package/internal/TextWidthHelper/TextWidthHelper.js

@@ -38,7 +38,7 @@ var TextWidthHelper = /** @class */ (function (_super) {
         return _this;
     }
     TextWidthHelper.prototype.render = function () {
-        this.jsStyles = getJsStyles();
+        this.jsStyles = getJsStyles(this.emotion);
         return (React.createElement("div", { className: this.jsStyles.root() },
             React.createElement("div", { className: this.jsStyles.textContainer(), ref: this.elementRef }, this.props.text || THIN_SPACE)));
     };

package/internal/TextWidthHelper/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,IAAM,UAAU,GAAG,QAAQ,CAAC;AAK5B;;GAEG;AAEH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAuBtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAvBQ,gCAAM,GAAb;QACE,IAAI,CAAC,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE9B,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YAClC,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAC1B,CACF,CACP,CAAC;IACJ,CAAC;IAEM,sCAAY,GAAnB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,uCAAa,GAApB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACzC,CAAC;IAtBU,eAAe;QAD3B,qBAAqB;OACT,eAAe,CA2B3B;IAAD,sBAAC;CAAA,AA3BD,CAAqC,KAAK,CAAC,SAAS,GA2BnD;SA3BY,eAAe","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getJsStyles } from './TextWidthHelper.styles.js';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n\n  public render() {\n    this.jsStyles = getJsStyles();\n\n    return (\n      <div className={this.jsStyles.root()}>\n        <div className={this.jsStyles.textContainer()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => {\n    this.element = node;\n  };\n}\n"]}
+{"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,IAAM,UAAU,GAAG,QAAQ,CAAC;AAK5B;;GAEG;AAEH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAwBtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAvBQ,gCAAM,GAAb;QACE,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YAClC,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAC1B,CACF,CACP,CAAC;IACJ,CAAC;IAEM,sCAAY,GAAnB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,uCAAa,GAApB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACzC,CAAC;IAvBU,eAAe;QAD3B,qBAAqB;OACT,eAAe,CA4B3B;IAAD,sBAAC;CAAA,AA5BD,CAAqC,KAAK,CAAC,SAAS,GA4BnD;SA5BY,eAAe","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getJsStyles } from './TextWidthHelper.styles.js';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n  private emotion!: Emotion;\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n\n  public render() {\n    this.jsStyles = getJsStyles(this.emotion);\n\n    return (\n      <div className={this.jsStyles.root()}>\n        <div className={this.jsStyles.textContainer()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => {\n    this.element = node;\n  };\n}\n"]}

package/internal/TextWidthHelper/TextWidthHelper.styles.d.ts

@@ -1,5 +1,4 @@
-/** Правила — в `TextWidthHelper.css`; здесь только имена классов. */
-export declare const getJsStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    root: string;
-    textContainer: string;
+export declare const getJsStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    textContainer(): string;
 }>;

package/internal/TextWidthHelper/TextWidthHelper.styles.js

@@ -1,7 +1,18 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `TextWidthHelper.css`; здесь только имена классов. */
-export var getJsStyles = staticStyles({
-    root: 'react-ui-TextWidthHelper-Js-root',
-    textContainer: 'react-ui-TextWidthHelper-Js-textContainer',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getJsStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "], ["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "])));
+        },
+        textContainer: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      word-break: break-all;\n      white-space: nowrap;\n    "], ["\n      word-break: break-all;\n      white-space: nowrap;\n    "])));
+        },
+    });
 });
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=TextWidthHelper.styles.js.map

package/internal/TextWidthHelper/TextWidthHelper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextWidthHelper.styles.js","sourceRoot":"","sources":["TextWidthHelper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,qEAAqE;AACrE,MAAM,CAAC,IAAM,WAAW,GAAG,YAAY,CAAC;IACtC,IAAI,EAAE,kCAAkC;IACxC,aAAa,EAAE,2CAA2C;CAC3D,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `TextWidthHelper.css`; здесь только имена классов. */\nexport const getJsStyles = staticStyles({\n  root: 'react-ui-TextWidthHelper-Js-root',\n  textContainer: 'react-ui-TextWidthHelper-Js-textContainer',\n});\n"]}
+{"version":3,"file":"TextWidthHelper.styles.js","sourceRoot":"","sources":["TextWidthHelper.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QACjE,IAAI;YACF,OAAO,GAAG,gOAAA,6JAQT,KAAC;QACJ,CAAC;QACD,aAAa;YACX,OAAO,GAAG,qIAAA,kEAGT,KAAC;QACJ,CAAC;KACF,CAAC;AAlBgE,CAkBhE,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    `;\n  },\n  textContainer() {\n    return css`\n      word-break: break-all;\n      white-space: nowrap;\n    `;\n  },\n}));\n"]}

package/internal/TimeInput/TimeFragments.js

@@ -2,57 +2,53 @@ import React, { useCallback, useContext, useImperativeHandle, useRef } from 'rea
 import { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';
 import { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { getStyles } from './TimeFragments.styles.js';
 var getEmptyPlaceholderClassName = function (styles, theme, size, format) {
     if (format === 'HH:mm:ss') {
         switch (size) {
             case 'large':
-                return styles.emptyPlaceholderWithSecondsLarge();
+                return styles.emptyPlaceholderWithSecondsLarge(theme);
             case 'medium':
-                return styles.emptyPlaceholderWithSecondsMedium();
+                return styles.emptyPlaceholderWithSecondsMedium(theme);
             case 'small':
             default:
-                return styles.emptyPlaceholderWithSecondsSmall();
+                return styles.emptyPlaceholderWithSecondsSmall(theme);
         }
     }
     switch (size) {
         case 'large':
-            return styles.emptyPlaceholderLarge();
+            return styles.emptyPlaceholderLarge(theme);
         case 'medium':
-            return styles.emptyPlaceholderMedium();
+            return styles.emptyPlaceholderMedium(theme);
         case 'small':
         default:
-            return styles.emptyPlaceholderSmall();
+            return styles.emptyPlaceholderSmall(theme);
     }
 };
 var getSeparatorSizeClassName = function (styles, theme, size) {
     switch (size) {
         case 'large':
-            return styles.separatorLarge();
+            return styles.separatorLarge(theme);
         case 'medium':
-            return styles.separatorMedium();
+            return styles.separatorMedium(theme);
         case 'small':
         default:
-            return styles.separatorSmall();
+            return styles.separatorSmall(theme);
     }
 };
 export var TimeFragments = forwardRefAndName('TimeFragments', function (props, ref) {
     var _a;
     var value = props.value, format = props.format, size = props.size, onSelectSegment = props.onSelectSegment;
     var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var rootRef = useRef(null);
-    var rootClassName = cx(styles.root(), styles.selected(), (_a = {},
-        // Пустой токен отключает объявление целиком — см. пояснение в
-        // TimeFragments.styles.ts. Решение по значению остаётся в JS.
-        _a[styles.selectionBackground()] = Boolean(theme.timePickerSelectedBgColor),
-        _a[styles.selectionColor()] = Boolean(theme.timePickerSelectedTextColor),
+    var rootClassName = cx(styles.root(), styles.selected(theme), (_a = {},
         _a[getEmptyPlaceholderClassName(styles, theme, size, format)] = !value,
         _a));
-    var maskClassName = styles.mask();
+    var maskClassName = styles.mask(theme);
     var separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);
     var getSegment = useCallback(function (el) {
         var _a;
@@ -86,8 +82,8 @@ export var TimeFragments = forwardRefAndName('TimeFragments', function (props, r
                     React.createElement("span", { className: maskClassName }, Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join(''))),
             ];
             if (index < segments.length - 1) {
-                nodes.push(React.createElement("span", { key: "separator-".concat(index), "data-separator": '', className: cx(styles.separator(), separatorSizeClassName, (_a = {},
-                        _a[maskClassName] = segmentValue.includes(TIME_PLACEHOLDER_CHAR),
+                nodes.push(React.createElement("span", { key: "separator-".concat(index), "data-separator": '', className: cx(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
+                        _a[styles.separatorFilled()] = !segmentValue.includes(TIME_PLACEHOLDER_CHAR),
                         _a)) },
                     React.createElement("span", { "aria-hidden": true, className: styles.separatorText() }, TIME_SEPARATOR)));
             }

package/internal/TimeInput/TimeFragments.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeFragments.js","sourceRoot":"","sources":["TimeFragments.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './TimeFragments.styles.js';\n\nexport interface TimeFragmentsRef {\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n  getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsProps {\n  value: string;\n  format: TimeFormat;\n  size: SizeProp;\n\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getEmptyPlaceholderClassName = (\n  styles: ReturnType<typeof getStyles>,\n  theme: Theme,\n  size: SizeProp,\n  format: TimeFormat,\n): string => {\n  if (format === 'HH:mm:ss') {\n    switch (size) {\n      case 'large':\n        return styles.emptyPlaceholderWithSecondsLarge();\n      case 'medium':\n        return styles.emptyPlaceholderWithSecondsMedium();\n      case 'small':\n      default:\n        return styles.emptyPlaceholderWithSecondsSmall();\n    }\n  }\n\n  switch (size) {\n    case 'large':\n      return styles.emptyPlaceholderLarge();\n    case 'medium':\n      return styles.emptyPlaceholderMedium();\n    case 'small':\n    default:\n      return styles.emptyPlaceholderSmall();\n  }\n};\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, theme: Theme, size: SizeProp): string => {\n  switch (size) {\n    case 'large':\n      return styles.separatorLarge();\n    case 'medium':\n      return styles.separatorMedium();\n    case 'small':\n    default:\n      return styles.separatorSmall();\n  }\n};\n\nexport const TimeFragments = forwardRefAndName<TimeFragmentsRef, TimeFragmentsProps>('TimeFragments', (props, ref) => {\n  const { value, format, size, onSelectSegment } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const styles = useStyles(getStyles);\n\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const rootClassName = cx(styles.root(), styles.selected(), {\n    // Пустой токен отключает объявление целиком — см. пояснение в\n    // TimeFragments.styles.ts. Решение по значению остаётся в JS.\n    [styles.selectionBackground()]: Boolean(theme.timePickerSelectedBgColor),\n    [styles.selectionColor()]: Boolean(theme.timePickerSelectedTextColor),\n    [getEmptyPlaceholderClassName(styles, theme, size, format)]: !value,\n  });\n  const maskClassName = styles.mask();\n  const separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);\n\n  const getSegment = useCallback(\n    (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n      const rootNode = rootRef.current;\n\n      if (!rootNode || !el) {\n        return null;\n      }\n\n      const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n      const segments = getTimeSegments(format);\n\n      const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n      return index >= 0 ? (segments[index] ?? null) : null;\n    },\n    [format],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getSegment,\n      getRootNode: () => rootRef.current,\n    }),\n    [getSegment],\n  );\n\n  const segments = getTimeSegments(format);\n  const displaySegments = getDisplaySegments(value, format);\n\n  return (\n    <span ref={rootRef} className={rootClassName}>\n      {value\n        ? segments.flatMap((segment, index) => {\n            const segmentValue = displaySegments[index] ?? '';\n\n            const valueMask = Array.from(segmentValue)\n              .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n              .join('');\n\n            const placeholderLength = segmentValue.length - valueMask.length;\n\n            const nodes = [\n              <span\n                key={segment}\n                data-fragment={''}\n                className={styles.segment()}\n                onMouseUp={(event) => onSelectSegment?.(segment, event)}\n              >\n                {valueMask}\n                <span className={maskClassName}>{Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}</span>\n              </span>,\n            ];\n\n            if (index < segments.length - 1) {\n              nodes.push(\n                <span\n                  key={`separator-${index}`}\n                  data-separator={''}\n                  className={cx(styles.separator(), separatorSizeClassName, {\n                    [maskClassName]: segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n                  })}\n                >\n                  <span aria-hidden className={styles.separatorText()}>\n                    {TIME_SEPARATOR}\n                  </span>\n                </span>,\n              );\n            }\n\n            return nodes;\n          })\n        : null}\n    </span>\n  );\n});\n"]}
+{"version":3,"file":"TimeFragments.js","sourceRoot":"","sources":["TimeFragments.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './TimeFragments.styles.js';\n\nexport interface TimeFragmentsRef {\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n  getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsProps {\n  value: string;\n  format: TimeFormat;\n  size: SizeProp;\n\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getEmptyPlaceholderClassName = (\n  styles: ReturnType<typeof getStyles>,\n  theme: Theme,\n  size: SizeProp,\n  format: TimeFormat,\n): string => {\n  if (format === 'HH:mm:ss') {\n    switch (size) {\n      case 'large':\n        return styles.emptyPlaceholderWithSecondsLarge(theme);\n      case 'medium':\n        return styles.emptyPlaceholderWithSecondsMedium(theme);\n      case 'small':\n      default:\n        return styles.emptyPlaceholderWithSecondsSmall(theme);\n    }\n  }\n\n  switch (size) {\n    case 'large':\n      return styles.emptyPlaceholderLarge(theme);\n    case 'medium':\n      return styles.emptyPlaceholderMedium(theme);\n    case 'small':\n    default:\n      return styles.emptyPlaceholderSmall(theme);\n  }\n};\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, theme: Theme, size: SizeProp): string => {\n  switch (size) {\n    case 'large':\n      return styles.separatorLarge(theme);\n    case 'medium':\n      return styles.separatorMedium(theme);\n    case 'small':\n    default:\n      return styles.separatorSmall(theme);\n  }\n};\n\nexport const TimeFragments = forwardRefAndName<TimeFragmentsRef, TimeFragmentsProps>('TimeFragments', (props, ref) => {\n  const { value, format, size, onSelectSegment } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const { cx } = useEmotion();\n\n  const styles = useStyles(getStyles);\n\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const rootClassName = cx(styles.root(), styles.selected(theme), {\n    [getEmptyPlaceholderClassName(styles, theme, size, format)]: !value,\n  });\n  const maskClassName = styles.mask(theme);\n  const separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);\n\n  const getSegment = useCallback(\n    (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n      const rootNode = rootRef.current;\n\n      if (!rootNode || !el) {\n        return null;\n      }\n\n      const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n      const segments = getTimeSegments(format);\n\n      const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n      return index >= 0 ? (segments[index] ?? null) : null;\n    },\n    [format],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getSegment,\n      getRootNode: () => rootRef.current,\n    }),\n    [getSegment],\n  );\n\n  const segments = getTimeSegments(format);\n  const displaySegments = getDisplaySegments(value, format);\n\n  return (\n    <span ref={rootRef} className={rootClassName}>\n      {value\n        ? segments.flatMap((segment, index) => {\n            const segmentValue = displaySegments[index] ?? '';\n\n            const valueMask = Array.from(segmentValue)\n              .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n              .join('');\n\n            const placeholderLength = segmentValue.length - valueMask.length;\n\n            const nodes = [\n              <span\n                key={segment}\n                data-fragment={''}\n                className={styles.segment()}\n                onMouseUp={(event) => onSelectSegment?.(segment, event)}\n              >\n                {valueMask}\n                <span className={maskClassName}>{Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}</span>\n              </span>,\n            ];\n\n            if (index < segments.length - 1) {\n              nodes.push(\n                <span\n                  key={`separator-${index}`}\n                  data-separator={''}\n                  className={cx(maskClassName, styles.separator(), separatorSizeClassName, {\n                    [styles.separatorFilled()]: !segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n                  })}\n                >\n                  <span aria-hidden className={styles.separatorText()}>\n                    {TIME_SEPARATOR}\n                  </span>\n                </span>,\n              );\n            }\n\n            return nodes;\n          })\n        : null}\n    </span>\n  );\n});\n"]}

package/internal/TimeInput/TimeFragments.styles.d.ts

@@ -1,20 +1,32 @@
-/** Правила — в `TimeFragments.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    root: string;
-    emptyPlaceholderSmall: string;
-    emptyPlaceholderMedium: string;
-    emptyPlaceholderLarge: string;
-    emptyPlaceholderWithSecondsSmall: string;
-    emptyPlaceholderWithSecondsMedium: string;
-    emptyPlaceholderWithSecondsLarge: string;
-    selected: string;
-    selectionBackground: string;
-    selectionColor: string;
-    mask: string;
-    segment: string;
-    separator: string;
-    separatorText: string;
-    separatorSmall: string;
-    separatorMedium: string;
-    separatorLarge: string;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    /**
+     * Резервируют место под время, когда значения нет: без этого поле с suffix
+     * сужается на ширину времени, а при вводе снова расширяется.
+     * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
+     * но не попадает в текст поля и не читается скринридером.
+     * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
+     * по одному `letter-spacing` на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
+     */
+    emptyPlaceholderSmall(t: Theme): string;
+    emptyPlaceholderMedium(t: Theme): string;
+    emptyPlaceholderLarge(t: Theme): string;
+    emptyPlaceholderWithSecondsSmall(t: Theme): string;
+    emptyPlaceholderWithSecondsMedium(t: Theme): string;
+    emptyPlaceholderWithSecondsLarge(t: Theme): string;
+    selected(t: Theme): string;
+    mask(t: Theme): string;
+    segment(): string;
+    separator(): string;
+    /**
+     * Разделитель рисует псевдоэлемент, а сам текст только держит место и попадает в выделение.
+     * В задизейбленном поле `-webkit-text-fill-color` приходит по наследству и перебивает `color`,
+     * поэтому гасим и его — иначе двоеточие отрисуется дважды.
+     */
+    separatorText(): string;
+    separatorSmall(t: Theme): string;
+    separatorMedium(t: Theme): string;
+    separatorLarge(t: Theme): string;
+    separatorFilled(): string;
 }>;

package/internal/TimeInput/TimeFragments.styles.js

@@ -1,22 +1,78 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `TimeFragments.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    root: 'react-ui-TimeFragments-root',
-    emptyPlaceholderSmall: 'react-ui-TimeFragments-emptyPlaceholderSmall',
-    emptyPlaceholderMedium: 'react-ui-TimeFragments-emptyPlaceholderMedium',
-    emptyPlaceholderLarge: 'react-ui-TimeFragments-emptyPlaceholderLarge',
-    emptyPlaceholderWithSecondsSmall: 'react-ui-TimeFragments-emptyPlaceholderWithSecondsSmall',
-    emptyPlaceholderWithSecondsMedium: 'react-ui-TimeFragments-emptyPlaceholderWithSecondsMedium',
-    emptyPlaceholderWithSecondsLarge: 'react-ui-TimeFragments-emptyPlaceholderWithSecondsLarge',
-    selected: 'react-ui-TimeFragments-selected',
-    selectionBackground: 'react-ui-TimeFragments-selectionBackground',
-    selectionColor: 'react-ui-TimeFragments-selectionColor',
-    mask: 'react-ui-TimeFragments-mask',
-    segment: 'react-ui-TimeFragments-segment',
-    separator: 'react-ui-TimeFragments-separator',
-    separatorText: 'react-ui-TimeFragments-separatorText',
-    separatorSmall: 'react-ui-TimeFragments-separatorSmall',
-    separatorMedium: 'react-ui-TimeFragments-separatorMedium',
-    separatorLarge: 'react-ui-TimeFragments-separatorLarge',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { getEmptyDisplayValue } from '../../components/TimePicker/helpers/TimePicker.value.js';
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "], ["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "])));
+        },
+        /**
+         * Резервируют место под время, когда значения нет: без этого поле с suffix
+         * сужается на ширину времени, а при вводе снова расширяется.
+         * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
+         * но не попадает в текст поля и не читается скринридером.
+         * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
+         * по одному `letter-spacing` на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
+         */
+        emptyPlaceholderSmall: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: ", ";\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: ", ";\n      }\n    "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXSmall);
+        },
+        emptyPlaceholderMedium: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: ", ";\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: ", ";\n      }\n    "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXMedium);
+        },
+        emptyPlaceholderLarge: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: ", ";\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: ", ";\n      }\n    "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXLarge);
+        },
+        emptyPlaceholderWithSecondsSmall: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXSmall);
+        },
+        emptyPlaceholderWithSecondsMedium: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXMedium);
+        },
+        emptyPlaceholderWithSecondsLarge: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXLarge);
+        },
+        selected: function (t) {
+            var getSelection = function (background, color) {
+                return (background || color) &&
+                    "& ::selection {\n        background: ".concat(background, ";\n        color: ").concat(color, ";\n      }");
+            };
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      cursor: text;\n      ", "\n    "], ["\n      cursor: text;\n      ", "\n    "])), getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor));
+        },
+        mask: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.timePickerMaskColor);
+        },
+        segment: function () {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      display: inline;\n      white-space: pre;\n    "], ["\n      display: inline;\n      white-space: pre;\n    "])));
+        },
+        separator: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: inline;\n      position: relative;\n\n      /*\n       * \u041E\u0442\u0440\u0438\u0441\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u044C \u0446\u0435\u043D\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u043F\u043E \u0441\u0442\u0440\u043E\u043A\u0435: \u0443 \u0430\u0431\u0441\u043E\u043B\u044E\u0442\u043D\u043E\u0433\u043E \u043F\u0441\u0435\u0432\u0434\u043E\u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430\n       * \u0441\u0432\u043E\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u0441 \u043F\u043E\u043B\u0443\u043B\u0438\u0434\u0438\u043D\u0433\u043E\u043C, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u043E\u0442 \u0432\u0435\u0440\u0445\u043D\u0435\u0433\u043E \u043A\u0440\u0430\u044F \u043E\u043D \u043E\u043A\u0430\u0437\u0430\u043B\u0441\u044F \u0431\u044B \u043D\u0438\u0436\u0435 \u0442\u0435\u043A\u0441\u0442\u0430 \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u043E\u0432.\n       */\n      &::before {\n        content: ':';\n        content: ':' / '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        width: 100%;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        letter-spacing: normal;\n        text-align: center;\n      }\n    "], ["\n      display: inline;\n      position: relative;\n\n      /*\n       * \u041E\u0442\u0440\u0438\u0441\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u044C \u0446\u0435\u043D\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u043F\u043E \u0441\u0442\u0440\u043E\u043A\u0435: \u0443 \u0430\u0431\u0441\u043E\u043B\u044E\u0442\u043D\u043E\u0433\u043E \u043F\u0441\u0435\u0432\u0434\u043E\u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430\n       * \u0441\u0432\u043E\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u0441 \u043F\u043E\u043B\u0443\u043B\u0438\u0434\u0438\u043D\u0433\u043E\u043C, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u043E\u0442 \u0432\u0435\u0440\u0445\u043D\u0435\u0433\u043E \u043A\u0440\u0430\u044F \u043E\u043D \u043E\u043A\u0430\u0437\u0430\u043B\u0441\u044F \u0431\u044B \u043D\u0438\u0436\u0435 \u0442\u0435\u043A\u0441\u0442\u0430 \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u043E\u0432.\n       */\n      &::before {\n        content: ':';\n        content: ':' / '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        width: 100%;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        letter-spacing: normal;\n        text-align: center;\n      }\n    "])));
+        },
+        /**
+         * Разделитель рисует псевдоэлемент, а сам текст только держит место и попадает в выделение.
+         * В задизейбленном поле `-webkit-text-fill-color` приходит по наследству и перебивает `color`,
+         * поэтому гасим и его — иначе двоеточие отрисуется дважды.
+         */
+        separatorText: function () {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      color: transparent;\n      -webkit-text-fill-color: transparent;\n    "], ["\n      color: transparent;\n      -webkit-text-fill-color: transparent;\n    "])));
+        },
+        separatorSmall: function (t) {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      letter-spacing: ", ";\n\n      &::before {\n        margin-top: ", ";\n      }\n    "], ["\n      letter-spacing: ", ";\n\n      &::before {\n        margin-top: ", ";\n      }\n    "])), t.timePickerSeparatorPaddingXSmall, t.timePickerSeparatorOffsetTopSmall);
+        },
+        separatorMedium: function (t) {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      letter-spacing: ", ";\n\n      &::before {\n        margin-top: ", ";\n      }\n    "], ["\n      letter-spacing: ", ";\n\n      &::before {\n        margin-top: ", ";\n      }\n    "])), t.timePickerSeparatorPaddingXMedium, t.timePickerSeparatorOffsetTopMedium);
+        },
+        separatorLarge: function (t) {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      letter-spacing: ", ";\n\n      &::before {\n        margin-top: ", ";\n      }\n    "], ["\n      letter-spacing: ", ";\n\n      &::before {\n        margin-top: ", ";\n      }\n    "])), t.timePickerSeparatorPaddingXLarge, t.timePickerSeparatorOffsetTopLarge);
+        },
+        separatorFilled: function () {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      color: inherit;\n    "], ["\n      color: inherit;\n    "])));
+        },
+    });
 });
+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;
 //# sourceMappingURL=TimeFragments.styles.js.map

package/internal/TimeInput/TimeFragments.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeFragments.styles.js","sourceRoot":"","sources":["TimeFragments.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,mEAAmE;AACnE,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,6BAA6B;IACnC,qBAAqB,EAAE,8CAA8C;IACrE,sBAAsB,EAAE,+CAA+C;IACvE,qBAAqB,EAAE,8CAA8C;IACrE,gCAAgC,EAAE,yDAAyD;IAC3F,iCAAiC,EAAE,0DAA0D;IAC7F,gCAAgC,EAAE,yDAAyD;IAC3F,QAAQ,EAAE,iCAAiC;IAC3C,mBAAmB,EAAE,4CAA4C;IACjE,cAAc,EAAE,uCAAuC;IACvD,IAAI,EAAE,6BAA6B;IACnC,OAAO,EAAE,gCAAgC;IACzC,SAAS,EAAE,kCAAkC;IAC7C,aAAa,EAAE,sCAAsC;IACrD,cAAc,EAAE,uCAAuC;IACvD,eAAe,EAAE,wCAAwC;IACzD,cAAc,EAAE,uCAAuC;CACxD,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `TimeFragments.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-TimeFragments-root',\n  emptyPlaceholderSmall: 'react-ui-TimeFragments-emptyPlaceholderSmall',\n  emptyPlaceholderMedium: 'react-ui-TimeFragments-emptyPlaceholderMedium',\n  emptyPlaceholderLarge: 'react-ui-TimeFragments-emptyPlaceholderLarge',\n  emptyPlaceholderWithSecondsSmall: 'react-ui-TimeFragments-emptyPlaceholderWithSecondsSmall',\n  emptyPlaceholderWithSecondsMedium: 'react-ui-TimeFragments-emptyPlaceholderWithSecondsMedium',\n  emptyPlaceholderWithSecondsLarge: 'react-ui-TimeFragments-emptyPlaceholderWithSecondsLarge',\n  selected: 'react-ui-TimeFragments-selected',\n  selectionBackground: 'react-ui-TimeFragments-selectionBackground',\n  selectionColor: 'react-ui-TimeFragments-selectionColor',\n  mask: 'react-ui-TimeFragments-mask',\n  segment: 'react-ui-TimeFragments-segment',\n  separator: 'react-ui-TimeFragments-separator',\n  separatorText: 'react-ui-TimeFragments-separatorText',\n  separatorSmall: 'react-ui-TimeFragments-separatorSmall',\n  separatorMedium: 'react-ui-TimeFragments-separatorMedium',\n  separatorLarge: 'react-ui-TimeFragments-separatorLarge',\n});\n"]}
+{"version":3,"file":"TimeFragments.styles.js","sourceRoot":"","sources":["TimeFragments.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { getEmptyDisplayValue } from '../../components/TimePicker/helpers/TimePicker.value.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    `;\n  },\n\n  /**\n   * Резервируют место под время, когда значения нет: без этого поле с suffix\n   * сужается на ширину времени, а при вводе снова расширяется.\n   * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,\n   * но не попадает в текст поля и не читается скринридером.\n   * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:\n   * по одному `letter-spacing` на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.\n   */\n  emptyPlaceholderSmall(t: Theme) {\n    return css`\n      &::before {\n        content: '${getEmptyDisplayValue('HH:mm')}';\n        visibility: hidden;\n        padding-right: ${t.timePickerSeparatorPaddingXSmall};\n      }\n    `;\n  },\n\n  emptyPlaceholderMedium(t: Theme) {\n    return css`\n      &::before {\n        content: '${getEmptyDisplayValue('HH:mm')}';\n        visibility: hidden;\n        padding-right: ${t.timePickerSeparatorPaddingXMedium};\n      }\n    `;\n  },\n\n  emptyPlaceholderLarge(t: Theme) {\n    return css`\n      &::before {\n        content: '${getEmptyDisplayValue('HH:mm')}';\n        visibility: hidden;\n        padding-right: ${t.timePickerSeparatorPaddingXLarge};\n      }\n    `;\n  },\n\n  emptyPlaceholderWithSecondsSmall(t: Theme) {\n    return css`\n      &::before {\n        content: '${getEmptyDisplayValue('HH:mm:ss')}';\n        visibility: hidden;\n        padding-right: calc(${t.timePickerSeparatorPaddingXSmall} * 2);\n      }\n    `;\n  },\n\n  emptyPlaceholderWithSecondsMedium(t: Theme) {\n    return css`\n      &::before {\n        content: '${getEmptyDisplayValue('HH:mm:ss')}';\n        visibility: hidden;\n        padding-right: calc(${t.timePickerSeparatorPaddingXMedium} * 2);\n      }\n    `;\n  },\n\n  emptyPlaceholderWithSecondsLarge(t: Theme) {\n    return css`\n      &::before {\n        content: '${getEmptyDisplayValue('HH:mm:ss')}';\n        visibility: hidden;\n        padding-right: calc(${t.timePickerSeparatorPaddingXLarge} * 2);\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    const getSelection = (background: string, color: string) =>\n      (background || color) &&\n      `& ::selection {\n        background: ${background};\n        color: ${color};\n      }`;\n\n    return css`\n      cursor: text;\n      ${getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor)}\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.timePickerMaskColor};\n    `;\n  },\n\n  segment() {\n    return css`\n      display: inline;\n      white-space: pre;\n    `;\n  },\n\n  separator() {\n    return css`\n      display: inline;\n      position: relative;\n\n      /*\n       * Отрисованный разделитель центрируем по строке: у абсолютного псевдоэлемента\n       * своя строка с полулидингом, поэтому от верхнего края он оказался бы ниже текста сегментов.\n       */\n      &::before {\n        content: ':';\n        content: ':' / '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        width: 100%;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        letter-spacing: normal;\n        text-align: center;\n      }\n    `;\n  },\n\n  /**\n   * Разделитель рисует псевдоэлемент, а сам текст только держит место и попадает в выделение.\n   * В задизейбленном поле `-webkit-text-fill-color` приходит по наследству и перебивает `color`,\n   * поэтому гасим и его — иначе двоеточие отрисуется дважды.\n   */\n  separatorText() {\n    return css`\n      color: transparent;\n      -webkit-text-fill-color: transparent;\n    `;\n  },\n\n  separatorSmall(t: Theme) {\n    return css`\n      letter-spacing: ${t.timePickerSeparatorPaddingXSmall};\n\n      &::before {\n        margin-top: ${t.timePickerSeparatorOffsetTopSmall};\n      }\n    `;\n  },\n\n  separatorMedium(t: Theme) {\n    return css`\n      letter-spacing: ${t.timePickerSeparatorPaddingXMedium};\n\n      &::before {\n        margin-top: ${t.timePickerSeparatorOffsetTopMedium};\n      }\n    `;\n  },\n\n  separatorLarge(t: Theme) {\n    return css`\n      letter-spacing: ${t.timePickerSeparatorPaddingXLarge};\n\n      &::before {\n        margin-top: ${t.timePickerSeparatorOffsetTopLarge};\n      }\n    `;\n  },\n\n  separatorFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n}));\n"]}