@skbkontur/react-ui 6.4.6 → 6.4.7-25ce4.0

package/internal/SpinnerIcon/SpinnerIcon.css.js

@@ -0,0 +1,6 @@
+
+export var icon = 'react-ui-SpinnerIcon__icon';
+export var iconInline = 'react-ui-SpinnerIcon__iconInline';
+export var root = 'react-ui-SpinnerIcon__root';
+export var rootInline = 'react-ui-SpinnerIcon__rootInline';
+export var styles = {root:'react-ui-SpinnerIcon__root',rootInline:'react-ui-SpinnerIcon__rootInline',icon:'react-ui-SpinnerIcon__icon',iconInline:'react-ui-SpinnerIcon__iconInline'};

package/internal/SpinnerIcon/SpinnerIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerIcon.css.js","sourceRoot":"","sources":["SpinnerIcon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAExF,MAAM,CAAC,IAAM,UAAU,GAAG,KAAK,CAAC;IAC9B,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,uBAAuB;CACrC,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;AAE1F,MAAM,CAAC,IAAM,UAAU,GAAG,KAAK,CAAC;IAC9B,MAAM,EAAE,sBAAsB;IAC9B,KAAK,EAAE,sBAAsB;IAC7B,YAAY,EAAE,uBAAuB;IACrC,WAAW,EAAE,uBAAuB;CACrC,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,MAAM,GAAG,EAAE,IAAI,MAAA,EAAE,UAAU,YAAA,EAAE,IAAI,MAAA,EAAE,UAAU,YAAA,EAAE,CAAC","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const root = style({ display: 'inline-block', marginLeft: -1, marginRight: -1 });\n\nexport const rootInline = style({\n  marginLeft: '-0.0714285714285714em',\n  marginRight: '-0.0714285714285714em',\n});\n\nexport const icon = style({ marginBottom: -3, borderRadius: '50%', overflow: 'visible' });\n\nexport const iconInline = style({\n  height: '1.1428571428571428em',\n  width: '1.1428571428571428em',\n  marginBottom: '-0.2428571428571428em',\n  strokeWidth: '0.10714285714285714em',\n});\n\nexport const styles = { root, rootInline, icon, iconInline };\n"]}

package/internal/SpinnerIcon/SpinnerIcon.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
-import { getStyles } from './SpinnerIcon.styles.js';
+import { cx } from '../../lib/cx.js';
+import { styles } from './SpinnerIcon.css.js';
 export var sizes = {
     large: {
         size: 96,
@@ -26,11 +26,9 @@ 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 = {},
-                _c[styles.iconInline()] = inline,
+    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 = {},
+                _c[styles.iconInline] = inline,
                 _c)), width: currentSize.size, height: currentSize.size, fill: "none", stroke: color, strokeDasharray: "".concat((10 * currentSize.radius) / 6, ", ").concat((27 * currentSize.radius) / 6), strokeDashoffset: "0", strokeWidth: width || currentSize.width, focusable: "false", "aria-hidden": "true" },
             React.createElement("circle", { cx: currentSize.size / 2, cy: currentSize.size / 2, r: currentSize.radius }))));
 };

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,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"]}
+{"version":3,"file":"SpinnerIcon.js","sourceRoot":"","sources":["SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAgB9C,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,OAAO,CACL,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,YAAI,GAAC,MAAM,CAAC,UAAU,IAAG,MAAM,MAAG;QAC/D,6BACE,OAAO,EAAE,cAAO,WAAW,CAAC,IAAI,cAAI,WAAW,CAAC,IAAI,CAAE,EACtD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS;gBAClC,GAAC,MAAM,CAAC,UAAU,IAAG,MAAM;oBAC3B,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 { cx } from '../../lib/cx.js';\nimport { styles } from './SpinnerIcon.css.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  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/TextWidthHelper/TextWidthHelper.css.d.ts

@@ -0,0 +1,6 @@
+export declare const root: string;
+export declare const textContainer: string;
+export declare const jsStyles: {
+    root: string;
+    textContainer: string;
+};

package/internal/TextWidthHelper/TextWidthHelper.css.js

@@ -0,0 +1,4 @@
+
+export var jsStyles = {root:'react-ui-TextWidthHelper__root',textContainer:'react-ui-TextWidthHelper__textContainer'};
+export var root = 'react-ui-TextWidthHelper__root';
+export var textContainer = 'react-ui-TextWidthHelper__textContainer';

package/internal/TextWidthHelper/TextWidthHelper.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextWidthHelper.css.js","sourceRoot":"","sources":["TextWidthHelper.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC;IACxB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,aAAa,GAAG,KAAK,CAAC;IACjC,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,QAAQ,GAAG,EAAE,IAAI,MAAA,EAAE,aAAa,eAAA,EAAE,CAAC","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const root = style({\n  display: 'flex',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  visibility: 'hidden',\n  overflow: 'hidden',\n});\n\nexport const textContainer = style({\n  wordBreak: 'break-all',\n  whiteSpace: 'nowrap',\n});\n\nexport const jsStyles = { root, textContainer };\n"]}

package/internal/TextWidthHelper/TextWidthHelper.d.ts

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

package/internal/TextWidthHelper/TextWidthHelper.js

@@ -13,16 +13,9 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 import React from 'react';
 import { getDOMRect } from '../../lib/dom/getDOMRect.js';
-import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
-import { getJsStyles } from './TextWidthHelper.styles.js';
+import { jsStyles } from './TextWidthHelper.css.js';
 var THIN_SPACE = '\u2009';
 /**
  * Херпер позволяет вычислить размеры блока с текстом
@@ -38,9 +31,8 @@ var TextWidthHelper = /** @class */ (function (_super) {
         return _this;
     }
     TextWidthHelper.prototype.render = function () {
-        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)));
+        return (React.createElement("div", { className: jsStyles.root },
+            React.createElement("div", { className: jsStyles.textContainer, ref: this.elementRef }, this.props.text || THIN_SPACE)));
     };
     TextWidthHelper.prototype.getTextWidth = function () {
         return getDOMRect(this.element).width;
@@ -48,9 +40,6 @@ var TextWidthHelper = /** @class */ (function (_super) {
     TextWidthHelper.prototype.getTextHeight = function () {
         return getDOMRect(this.element).height;
     };
-    TextWidthHelper = __decorate([
-        withRenderEnvironment
-    ], TextWidthHelper);
     return TextWidthHelper;
 }(React.Component));
 export { TextWidthHelper };

package/internal/TextWidthHelper/TextWidthHelper.js.map

@@ -1 +1 @@
-{"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"]}
+{"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,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,IAAM,UAAU,GAAG,QAAQ,CAAC;AAK5B;;GAEG;AACH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAoBtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IArBQ,gCAAM,GAAb;QACE,OAAO,CACL,6BAAK,SAAS,EAAE,QAAQ,CAAC,IAAI;YAC3B,6BAAK,SAAS,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IACzD,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;IAKH,sBAAC;AAAD,CAAC,AAxBD,CAAqC,KAAK,CAAC,SAAS,GAwBnD","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { jsStyles } from './TextWidthHelper.css.js';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={jsStyles.root}>\n        <div className={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/TimeInput/TimeFragments.css.d.ts

@@ -0,0 +1,47 @@
+export declare const root: string;
+/**
+ * Резервируют место под время, когда значения нет: без этого поле с suffix
+ * сужается на ширину времени, а при вводе снова расширяется.
+ * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
+ * но не попадает в текст поля и не читается скринридером.
+ * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
+ * по одному `letter-spacing` на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
+ */
+export declare const emptyPlaceholderSmall: string;
+export declare const emptyPlaceholderMedium: string;
+export declare const emptyPlaceholderLarge: string;
+export declare const emptyPlaceholderWithSecondsSmall: string;
+export declare const emptyPlaceholderWithSecondsMedium: string;
+export declare const emptyPlaceholderWithSecondsLarge: string;
+export declare const mask: string;
+export declare const segment: string;
+export declare const separator: string;
+/**
+ * Разделитель рисует псевдоэлемент, а сам текст только держит место и попадает в выделение.
+ * В задизейбленном поле `-webkit-text-fill-color` приходит по наследству и перебивает `color`,
+ * поэтому гасим и его — иначе двоеточие отрисуется дважды.
+ */
+export declare const separatorText: string;
+export declare const separatorSmall: string;
+export declare const separatorMedium: string;
+export declare const separatorLarge: string;
+export declare const separatorFilled: string;
+export declare const selected: string;
+export declare const styles: {
+    root: string;
+    emptyPlaceholderSmall: string;
+    emptyPlaceholderMedium: string;
+    emptyPlaceholderLarge: string;
+    emptyPlaceholderWithSecondsSmall: string;
+    emptyPlaceholderWithSecondsMedium: string;
+    emptyPlaceholderWithSecondsLarge: string;
+    selected: string;
+    mask: string;
+    segment: string;
+    separator: string;
+    separatorText: string;
+    separatorSmall: string;
+    separatorMedium: string;
+    separatorLarge: string;
+    separatorFilled: string;
+};

package/internal/TimeInput/TimeFragments.css.js

@@ -0,0 +1,18 @@
+
+export var emptyPlaceholderLarge = 'react-ui-TimeFragments__emptyPlaceholderLarge';
+export var emptyPlaceholderMedium = 'react-ui-TimeFragments__emptyPlaceholderMedium';
+export var emptyPlaceholderSmall = 'react-ui-TimeFragments__emptyPlaceholderSmall';
+export var emptyPlaceholderWithSecondsLarge = 'react-ui-TimeFragments__emptyPlaceholderWithSecondsLarge';
+export var emptyPlaceholderWithSecondsMedium = 'react-ui-TimeFragments__emptyPlaceholderWithSecondsMedium';
+export var emptyPlaceholderWithSecondsSmall = 'react-ui-TimeFragments__emptyPlaceholderWithSecondsSmall';
+export var mask = 'react-ui-TimeFragments__mask';
+export var root = 'react-ui-TimeFragments__root';
+export var segment = 'react-ui-TimeFragments__segment';
+export var selected = 'react-ui-TimeFragments__selected';
+export var separator = 'react-ui-TimeFragments__separator';
+export var separatorFilled = 'react-ui-TimeFragments__separatorFilled';
+export var separatorLarge = 'react-ui-TimeFragments__separatorLarge';
+export var separatorMedium = 'react-ui-TimeFragments__separatorMedium';
+export var separatorSmall = 'react-ui-TimeFragments__separatorSmall';
+export var separatorText = 'react-ui-TimeFragments__separatorText';
+export var styles = {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',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',separatorFilled:'react-ui-TimeFragments__separatorFilled'};

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFragments.css.js","sourceRoot":"","sources":["TimeFragments.css.ts"],"names":[],"mappings":"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","sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nimport { getEmptyDisplayValue } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { t, whenThemeSets } from '../../lib/theming/vanilla.js';\n\nexport const root = style({\n  cursor: 'text',\n  fontVariantNumeric: 'tabular-nums',\n  whiteSpace: 'nowrap',\n});\n\n/**\n * Резервируют место под время, когда значения нет: без этого поле с suffix\n * сужается на ширину времени, а при вводе снова расширяется.\n * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,\n * но не попадает в текст поля и не читается скринридером.\n * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:\n * по одному `letter-spacing` на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.\n */\nexport const emptyPlaceholderSmall = style({});\nexport const emptyPlaceholderMedium = style({});\nexport const emptyPlaceholderLarge = style({});\nexport const emptyPlaceholderWithSecondsSmall = style({});\nexport const emptyPlaceholderWithSecondsMedium = style({});\nexport const emptyPlaceholderWithSecondsLarge = style({});\n\nexport const mask = style({ color: t.timePickerMaskColor });\n\nexport const segment = style({ display: 'inline', whiteSpace: 'pre' });\n\nexport const separator = style({ display: 'inline', position: 'relative' });\n\n/**\n * Разделитель рисует псевдоэлемент, а сам текст только держит место и попадает в выделение.\n * В задизейбленном поле `-webkit-text-fill-color` приходит по наследству и перебивает `color`,\n * поэтому гасим и его — иначе двоеточие отрисуется дважды.\n */\nexport const separatorText = style({ color: 'transparent', WebkitTextFillColor: 'transparent' });\n\nexport const separatorSmall = style({ letterSpacing: t.timePickerSeparatorPaddingXSmall });\n\nexport const separatorMedium = style({ letterSpacing: t.timePickerSeparatorPaddingXMedium });\n\nexport const separatorLarge = style({ letterSpacing: t.timePickerSeparatorPaddingXLarge });\n\nexport const separatorFilled = style({ color: 'inherit' });\n\n// порядок вызова в cx(...): модификаторы после базовых\nexport const selected = style({ cursor: 'text' });\n\n// вложенные правила — после баз всех классов файла, как было в склеенном CSS Emotion\nconst emptyPlaceholder = (className: string, format: 'HH:mm' | 'HH:mm:ss', paddingRight: string) =>\n  globalStyle(`${className}::before`, {\n    content: `'${getEmptyDisplayValue(format)}'`,\n    visibility: 'hidden',\n    paddingRight,\n  });\n\nemptyPlaceholder(emptyPlaceholderSmall, 'HH:mm', t.timePickerSeparatorPaddingXSmall);\nemptyPlaceholder(emptyPlaceholderMedium, 'HH:mm', t.timePickerSeparatorPaddingXMedium);\nemptyPlaceholder(emptyPlaceholderLarge, 'HH:mm', t.timePickerSeparatorPaddingXLarge);\nemptyPlaceholder(emptyPlaceholderWithSecondsSmall, 'HH:mm:ss', `calc(${t.timePickerSeparatorPaddingXSmall} * 2)`);\nemptyPlaceholder(emptyPlaceholderWithSecondsMedium, 'HH:mm:ss', `calc(${t.timePickerSeparatorPaddingXMedium} * 2)`);\nemptyPlaceholder(emptyPlaceholderWithSecondsLarge, 'HH:mm:ss', `calc(${t.timePickerSeparatorPaddingXLarge} * 2)`);\n\n/*\n * Отрисованный разделитель центрируем по строке: у абсолютного псевдоэлемента\n * своя строка с полулидингом, поэтому от верхнего края он оказался бы ниже текста сегментов.\n */\nglobalStyle(`${separator}::before`, {\n  content: [\"':'\", \"':' / ''\"],\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  width: '100%',\n  transform: 'translate(-50%, -50%)',\n  pointerEvents: 'none',\n  letterSpacing: 'normal',\n  textAlign: 'center',\n});\n\nglobalStyle(`${separatorSmall}::before`, { marginTop: t.timePickerSeparatorOffsetTopSmall });\nglobalStyle(`${separatorMedium}::before`, { marginTop: t.timePickerSeparatorOffsetTopMedium });\nglobalStyle(`${separatorLarge}::before`, { marginTop: t.timePickerSeparatorOffsetTopLarge });\n\nwhenThemeSets('timePickerSelectedBgColor', selected, (background) => ({ background }), ' ::selection');\nwhenThemeSets('timePickerSelectedTextColor', selected, (color) => ({ color }), ' ::selection');\n\nexport const styles = {\n  root,\n  emptyPlaceholderSmall,\n  emptyPlaceholderMedium,\n  emptyPlaceholderLarge,\n  emptyPlaceholderWithSecondsSmall,\n  emptyPlaceholderWithSecondsMedium,\n  emptyPlaceholderWithSecondsLarge,\n  selected,\n  mask,\n  segment,\n  separator,\n  separatorText,\n  separatorSmall,\n  separatorMedium,\n  separatorLarge,\n  separatorFilled,\n};\n"]}

package/internal/TimeInput/TimeFragments.js

@@ -1,55 +1,51 @@
-import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useRef } from 'react';
 import { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';
 import { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';
+import { cx } from '../../lib/cx.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.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) {
+import { styles } from './TimeFragments.css.js';
+var getEmptyPlaceholderClassName = function (size, format) {
     if (format === 'HH:mm:ss') {
         switch (size) {
             case 'large':
-                return styles.emptyPlaceholderWithSecondsLarge(theme);
+                return styles.emptyPlaceholderWithSecondsLarge;
             case 'medium':
-                return styles.emptyPlaceholderWithSecondsMedium(theme);
+                return styles.emptyPlaceholderWithSecondsMedium;
             case 'small':
             default:
-                return styles.emptyPlaceholderWithSecondsSmall(theme);
+                return styles.emptyPlaceholderWithSecondsSmall;
         }
     }
     switch (size) {
         case 'large':
-            return styles.emptyPlaceholderLarge(theme);
+            return styles.emptyPlaceholderLarge;
         case 'medium':
-            return styles.emptyPlaceholderMedium(theme);
+            return styles.emptyPlaceholderMedium;
         case 'small':
         default:
-            return styles.emptyPlaceholderSmall(theme);
+            return styles.emptyPlaceholderSmall;
     }
 };
-var getSeparatorSizeClassName = function (styles, theme, size) {
+var getSeparatorSizeClassName = function (size) {
     switch (size) {
         case 'large':
-            return styles.separatorLarge(theme);
+            return styles.separatorLarge;
         case 'medium':
-            return styles.separatorMedium(theme);
+            return styles.separatorMedium;
         case 'small':
         default:
-            return styles.separatorSmall(theme);
+            return styles.separatorSmall;
     }
 };
 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(theme), (_a = {},
-        _a[getEmptyPlaceholderClassName(styles, theme, size, format)] = !value,
+    var rootClassName = cx(styles.root, styles.selected, (_a = {},
+        _a[getEmptyPlaceholderClassName(size, format)] = !value,
         _a));
-    var maskClassName = styles.mask(theme);
-    var separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);
+    var maskClassName = styles.mask;
+    var separatorSizeClassName = getSeparatorSizeClassName(size);
     var getSegment = useCallback(function (el) {
         var _a;
         var rootNode = rootRef.current;
@@ -77,15 +73,15 @@ export var TimeFragments = forwardRefAndName('TimeFragments', function (props, r
                 .join('');
             var placeholderLength = segmentValue.length - valueMask.length;
             var nodes = [
-                React.createElement("span", { key: segment, "data-fragment": '', className: styles.segment(), onMouseUp: function (event) { return onSelectSegment === null || onSelectSegment === void 0 ? void 0 : onSelectSegment(segment, event); } },
+                React.createElement("span", { key: segment, "data-fragment": '', className: styles.segment, onMouseUp: function (event) { return onSelectSegment === null || onSelectSegment === void 0 ? void 0 : onSelectSegment(segment, event); } },
                     valueMask,
                     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(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
-                        _a[styles.separatorFilled()] = !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)));
+                    React.createElement("span", { "aria-hidden": true, className: styles.separatorText }, TIME_SEPARATOR)));
             }
             return nodes;
         })

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 { 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"]}
+{"version":3,"file":"TimeFragments.js","sourceRoot":"","sources":["TimeFragments.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, 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 { cx } from '../../lib/cx.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { styles } from './TimeFragments.css.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 = (size: SizeProp, format: TimeFormat): 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 = (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 rootRef = useRef<HTMLSpanElement>(null);\n\n  const rootClassName = cx(styles.root, styles.selected, {\n    [getEmptyPlaceholderClassName(size, format)]: !value,\n  });\n  const maskClassName = styles.mask;\n  const separatorSizeClassName = getSeparatorSizeClassName(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/TimeInput.css.d.ts

@@ -0,0 +1,10 @@
+export declare const rightIcon: string;
+export declare const rightIconInteractive: string;
+export declare const rightIconDefault: string;
+export declare const rightIconDisabled: string;
+export declare const styles: {
+    rightIcon: string;
+    rightIconInteractive: string;
+    rightIconDefault: string;
+    rightIconDisabled: string;
+};

package/internal/TimeInput/TimeInput.css.js

@@ -0,0 +1,6 @@
+
+export var rightIcon = 'react-ui-TimeInput__rightIcon';
+export var rightIconDefault = 'react-ui-TimeInput__rightIconDefault';
+export var rightIconDisabled = 'react-ui-TimeInput__rightIconDisabled';
+export var rightIconInteractive = 'react-ui-TimeInput__rightIconInteractive';
+export var styles = {rightIcon:'react-ui-TimeInput__rightIcon',rightIconInteractive:'react-ui-TimeInput__rightIconInteractive',rightIconDefault:'react-ui-TimeInput__rightIconDefault',rightIconDisabled:'react-ui-TimeInput__rightIconDisabled'};

package/internal/TimeInput/TimeInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.css.js","sourceRoot":"","sources":["TimeInput.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAEjD,MAAM,CAAC,IAAM,SAAS,GAAG,KAAK,CAAC;IAC7B,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;AAEjE,MAAM,CAAC,IAAM,gBAAgB,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAErE,MAAM,CAAC,IAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,CAAC,CAAC;AAE5E,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,SAAS,WAAA;IACT,oBAAoB,sBAAA;IACpB,gBAAgB,kBAAA;IAChB,iBAAiB,mBAAA;CAClB,CAAC","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { t } from '../../lib/theming/vanilla.js';\n\nexport const rightIcon = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  userSelect: 'none',\n});\n\nexport const rightIconInteractive = style({ cursor: 'pointer' });\n\nexport const rightIconDefault = style({ color: t.textColorDefault });\n\nexport const rightIconDisabled = style({ color: t.inputTextColorDisabled });\n\nexport const styles = {\n  rightIcon,\n  rightIconInteractive,\n  rightIconDefault,\n  rightIconDisabled,\n};\n"]}

package/internal/TimeInput/TimeInput.js

@@ -24,18 +24,16 @@ import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react
 import { getTimePickerInputMinWidth, getTimePickerSuffixMargin, } from '../../components/TimePicker/helpers/TimePicker.layout.js';
 import { getTimeSegments, } from '../../components/TimePicker/helpers/TimePicker.shared.js';
 import { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';
+import { cx } from '../../lib/cx.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { InputLikeText } from '../InputLikeText/index.js';
 import { TimeFragments } from './TimeFragments.js';
-import { getStyles } from './TimeInput.styles.js';
+import { styles } from './TimeInput.css.js';
 export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
     var _a;
     var _b = props.hasDropdown, hasDropdown = _b === void 0 ? false : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, disabled = props.disabled, autoFocus = props.autoFocus, suffix = props.suffix, style = props.style, width = props.width, corners = props.corners, rightIcon = props.rightIcon, format = props.format, value = props.value, onSelectSegment = props.onSelectSegment, rest = __rest(props, ["hasDropdown", "size", "disabled", "autoFocus", "suffix", "style", "width", "corners", "rightIcon", "format", "value", "onSelectSegment"]);
     var theme = useContext(ThemeContext);
-    var cx = useEmotion().cx;
-    var styles = useStyles(getStyles);
     var inputLikeTextRef = useRef(null);
     var fragmentsRef = useRef(null);
     useImperativeHandle(ref, function () { return ({
@@ -90,10 +88,10 @@ export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
             clearTimeout(timer);
         };
     }, []);
-    var resolvedRightIcon = rightIcon === undefined ? (React.createElement("span", { className: cx(styles.rightIcon(), (_a = {},
-            _a[styles.rightIconDefault(theme)] = !disabled,
-            _a[styles.rightIconDisabled(theme)] = disabled,
-            _a[styles.rightIconInteractive()] = hasDropdown && !disabled,
+    var resolvedRightIcon = rightIcon === undefined ? (React.createElement("span", { className: cx(styles.rightIcon, (_a = {},
+            _a[styles.rightIconDefault] = !disabled,
+            _a[styles.rightIconDisabled] = disabled,
+            _a[styles.rightIconInteractive] = hasDropdown && !disabled,
             _a)) },
         React.createElement(TimeClockIcon, { size: size }))) : (rightIcon);
     var suffixMarginLeft = getTimePickerSuffixMargin(size, theme);

package/internal/TimeInput/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport type { InputProps } from '../../components/Input/index.js';\nimport {\n  getTimePickerInputMinWidth,\n  getTimePickerSuffixMargin,\n} from '../../components/TimePicker/helpers/TimePicker.layout.js';\nimport {\n  getTimeSegments,\n  type TimeFormat,\n  type TimeSegment,\n} from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { InputLikeText } from '../InputLikeText/index.js';\nimport type { TimeFragmentsRef } from './TimeFragments.js';\nimport { TimeFragments } from './TimeFragments.js';\nimport { getStyles } from './TimeInput.styles.js';\n\nexport interface TimeInputRef {\n  focus(): void;\n  blur(): void;\n  blink(): void;\n  isAllSelected(): boolean;\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n  selectSegment(segment: TimeSegment): void;\n  selectAll(): void;\n  getNode(): HTMLElement | null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {\n  hasDropdown?: boolean;\n  format: TimeFormat;\n  value: string;\n  'aria-placeholder'?: string;\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n  const {\n    hasDropdown = false,\n    size = 'small',\n    disabled,\n    autoFocus,\n    suffix,\n    style,\n    width,\n    corners,\n    rightIcon,\n    format,\n    value,\n    onSelectSegment,\n    ...rest\n  } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const { cx } = useEmotion();\n\n  const styles = useStyles(getStyles);\n\n  const inputLikeTextRef = useRef<InputLikeText>(null);\n  const fragmentsRef = useRef<TimeFragmentsRef>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => inputLikeTextRef.current?.focus(),\n      blur: () => inputLikeTextRef.current?.blur(),\n      blink: () => inputLikeTextRef.current?.blink(),\n      getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n      getSegment: (el) => fragmentsRef.current?.getSegment(el) ?? null,\n      selectAll: () => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n      },\n\n      isAllSelected: () => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return false;\n        }\n\n        const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n          return false;\n        }\n\n        const range = selection.getRangeAt(0);\n        const text = rootNode.textContent ?? '';\n\n        return (\n          range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n        );\n      },\n\n      selectSegment: (segment) => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        const segmentIndex = getTimeSegments(format).indexOf(segment);\n        const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n        const end = start + 1;\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n      },\n    }),\n    [format],\n  );\n\n  useEffect(() => {\n    if (!autoFocus || disabled) {\n      return;\n    }\n\n    const timer = setTimeout(() => {\n      inputLikeTextRef.current?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, []);\n\n  const resolvedRightIcon =\n    rightIcon === undefined ? (\n      <span\n        className={cx(styles.rightIcon(), {\n          [styles.rightIconDefault(theme)]: !disabled,\n          [styles.rightIconDisabled(theme)]: disabled,\n          [styles.rightIconInteractive()]: hasDropdown && !disabled,\n        })}\n      >\n        <TimeClockIcon size={size} />\n      </span>\n    ) : (\n      rightIcon\n    );\n  const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n  const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n  return (\n    <InputLikeText\n      ref={inputLikeTextRef}\n      {...rest}\n      takeContentWidth\n      disabled={disabled}\n      size={size}\n      inputMode={'numeric'}\n      width={width ?? 'auto'}\n      suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n      style={{ ...style, minWidth: inputMinWidth, ...corners }}\n      rightIcon={resolvedRightIcon}\n      value={value}\n    >\n      <TimeFragments ref={fragmentsRef} format={format} size={size} value={value} onSelectSegment={onSelectSegment} />\n    </InputLikeText>\n  );\n});\n"]}
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport type { InputProps } from '../../components/Input/index.js';\nimport {\n  getTimePickerInputMinWidth,\n  getTimePickerSuffixMargin,\n} from '../../components/TimePicker/helpers/TimePicker.layout.js';\nimport {\n  getTimeSegments,\n  type TimeFormat,\n  type TimeSegment,\n} from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';\nimport { cx } from '../../lib/cx.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { InputLikeText } from '../InputLikeText/index.js';\nimport type { TimeFragmentsRef } from './TimeFragments.js';\nimport { TimeFragments } from './TimeFragments.js';\nimport { styles } from './TimeInput.css.js';\n\nexport interface TimeInputRef {\n  focus(): void;\n  blur(): void;\n  blink(): void;\n  isAllSelected(): boolean;\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n  selectSegment(segment: TimeSegment): void;\n  selectAll(): void;\n  getNode(): HTMLElement | null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {\n  hasDropdown?: boolean;\n  format: TimeFormat;\n  value: string;\n  'aria-placeholder'?: string;\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n  const {\n    hasDropdown = false,\n    size = 'small',\n    disabled,\n    autoFocus,\n    suffix,\n    style,\n    width,\n    corners,\n    rightIcon,\n    format,\n    value,\n    onSelectSegment,\n    ...rest\n  } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const inputLikeTextRef = useRef<InputLikeText>(null);\n  const fragmentsRef = useRef<TimeFragmentsRef>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => inputLikeTextRef.current?.focus(),\n      blur: () => inputLikeTextRef.current?.blur(),\n      blink: () => inputLikeTextRef.current?.blink(),\n      getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n      getSegment: (el) => fragmentsRef.current?.getSegment(el) ?? null,\n      selectAll: () => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n      },\n\n      isAllSelected: () => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return false;\n        }\n\n        const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n          return false;\n        }\n\n        const range = selection.getRangeAt(0);\n        const text = rootNode.textContent ?? '';\n\n        return (\n          range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n        );\n      },\n\n      selectSegment: (segment) => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        const segmentIndex = getTimeSegments(format).indexOf(segment);\n        const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n        const end = start + 1;\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n      },\n    }),\n    [format],\n  );\n\n  useEffect(() => {\n    if (!autoFocus || disabled) {\n      return;\n    }\n\n    const timer = setTimeout(() => {\n      inputLikeTextRef.current?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, []);\n\n  const resolvedRightIcon =\n    rightIcon === undefined ? (\n      <span\n        className={cx(styles.rightIcon, {\n          [styles.rightIconDefault]: !disabled,\n          [styles.rightIconDisabled]: disabled,\n          [styles.rightIconInteractive]: hasDropdown && !disabled,\n        })}\n      >\n        <TimeClockIcon size={size} />\n      </span>\n    ) : (\n      rightIcon\n    );\n  const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n  const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n  return (\n    <InputLikeText\n      ref={inputLikeTextRef}\n      {...rest}\n      takeContentWidth\n      disabled={disabled}\n      size={size}\n      inputMode={'numeric'}\n      width={width ?? 'auto'}\n      suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n      style={{ ...style, minWidth: inputMinWidth, ...corners }}\n      rightIcon={resolvedRightIcon}\n      value={value}\n    >\n      <TimeFragments ref={fragmentsRef} format={format} size={size} value={value} onSelectSegment={onSelectSegment} />\n    </InputLikeText>\n  );\n});\n"]}

package/internal/icons2022/BaseIcon.css.d.ts

@@ -0,0 +1,4 @@
+export declare const centeredIcon: string;
+export declare const styles: {
+    centeredIcon: string;
+};

package/internal/icons2022/BaseIcon.css.js

@@ -0,0 +1,3 @@
+
+export var centeredIcon = 'react-ui-BaseIcon__centeredIcon';
+export var styles = {centeredIcon:'react-ui-BaseIcon__centeredIcon'};

package/internal/icons2022/BaseIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseIcon.css.js","sourceRoot":"","sources":["BaseIcon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;AAEpF,WAAW,CAAC,UAAG,YAAY,aAAU,EAAE,EAAE,OAAO,EAAE,WAAI,oBAAoB,MAAG,EAAE,CAAC,CAAC;AAEjF,MAAM,CAAC,IAAM,MAAM,GAAG,EAAE,YAAY,cAAA,EAAE,CAAC","sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars.js';\n\nexport const centeredIcon = style({ display: 'inline-flex', alignItems: 'center' });\n\nglobalStyle(`${centeredIcon}::before`, { content: `'${ZERO_WIDTH_SPACE_CSS}'` });\n\nexport const styles = { centeredIcon };\n"]}

package/internal/icons2022/BaseIcon.js

@@ -22,14 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { getStyles } from './BaseIcon.styles.js';
+import { styles } from './BaseIcon.css.js';
 export var BaseIcon = forwardRefAndName('BaseIcon', function (_a, ref) {
     var color = _a.color, size = _a.size, style = _a.style, _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.viewBoxSize, viewBoxSize = _c === void 0 ? 16 : _c, _d = _a.align, align = _d === void 0 ? 'center' : _d, children = _a.children, rest = __rest(_a, ["color", "size", "style", 'aria-hidden', "viewBoxSize", "align", "children"]);
-    var styles = useStyles(getStyles);
     var icon = (React.createElement("svg", __assign({ ref: ref, width: size || viewBoxSize, height: size || viewBoxSize, style: __assign({ fill: color !== null && color !== void 0 ? color : 'currentColor', marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em', flexShrink: 0 }, style), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 ".concat(viewBoxSize, " ").concat(viewBoxSize), "aria-hidden": ariaHidden }, rest), children));
     if (align === 'center') {
-        return React.createElement("span", { className: styles.centeredIcon() }, icon);
+        return React.createElement("span", { className: styles.centeredIcon }, icon);
     }
     return icon;
 });

package/internal/icons2022/BaseIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAmBjD,MAAM,CAAC,IAAM,QAAQ,GAAG,iBAAiB,CACvC,UAAU,EACV,UACE,EAA+G,EAC/G,GAAG;IADD,IAAA,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,sBAAgC,EAAjB,UAAU,mBAAG,IAAI,KAAA,EAAE,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAAE,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAA7G,6EAA+G,CAAF;IAG7G,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,IAAI,GAAG,CACX,sCACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,IAAI,WAAW,EAC1B,MAAM,EAAE,IAAI,IAAI,WAAW,EAC3B,KAAK,aACH,IAAI,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,cAAc,EAC7B,YAAY,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EACtE,UAAU,EAAE,CAAC,IACV,KAAK,GAEV,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,cAAO,WAAW,cAAI,WAAW,CAAE,iBAC/B,UAAU,IACnB,IAAI,GAEP,QAAQ,CACL,CACP,CAAC;IAEF,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;QACvB,OAAO,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,IAAG,IAAI,CAAQ,CAAC;IAC/D,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ReactUIComponentWithRef } from '../../lib/forwardRefAndName.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { getStyles } from './BaseIcon.styles.js';\n\nexport interface SvgIconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: string;\n  size?: string | number;\n  ref?: any;\n}\n\nexport type IconProps = {\n  size?: number;\n  viewBoxSize?: number;\n  color?: string;\n  align?: 'center' | 'baseline' | 'none';\n} & React.SVGAttributes<SVGElement>;\n\nexport type BothIconType =\n  | ReactUIComponentWithRef<HTMLElement, SvgIconProps>\n  | ReactUIComponentWithRef<SVGSVGElement, IconProps>;\n\nexport const BaseIcon = forwardRefAndName<SVGSVGElement, IconProps>(\n  'BaseIcon',\n  (\n    { color, size, style, 'aria-hidden': ariaHidden = true, viewBoxSize = 16, align = 'center', children, ...rest },\n    ref,\n  ) => {\n    const styles = useStyles(getStyles);\n    const icon = (\n      <svg\n        ref={ref}\n        width={size || viewBoxSize}\n        height={size || viewBoxSize}\n        style={{\n          fill: color ?? 'currentColor',\n          marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',\n          flexShrink: 0,\n          ...style,\n        }}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        aria-hidden={ariaHidden}\n        {...rest}\n      >\n        {children}\n      </svg>\n    );\n\n    if (align === 'center') {\n      return <span className={styles.centeredIcon()}>{icon}</span>;\n    }\n\n    return icon;\n  },\n);\n"]}
+{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAmB3C,MAAM,CAAC,IAAM,QAAQ,GAAG,iBAAiB,CACvC,UAAU,EACV,UACE,EAA+G,EAC/G,GAAG;IADD,IAAA,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,sBAAgC,EAAjB,UAAU,mBAAG,IAAI,KAAA,EAAE,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAAE,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAA7G,6EAA+G,CAAF;IAG7G,IAAM,IAAI,GAAG,CACX,sCACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,IAAI,WAAW,EAC1B,MAAM,EAAE,IAAI,IAAI,WAAW,EAC3B,KAAK,aACH,IAAI,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,cAAc,EAC7B,YAAY,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EACtE,UAAU,EAAE,CAAC,IACV,KAAK,GAEV,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,cAAO,WAAW,cAAI,WAAW,CAAE,iBAC/B,UAAU,IACnB,IAAI,GAEP,QAAQ,CACL,CACP,CAAC;IAEF,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;QACvB,OAAO,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY,IAAG,IAAI,CAAQ,CAAC;IAC7D,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ReactUIComponentWithRef } from '../../lib/forwardRefAndName.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { styles } from './BaseIcon.css.js';\n\nexport interface SvgIconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: string;\n  size?: string | number;\n  ref?: any;\n}\n\nexport type IconProps = {\n  size?: number;\n  viewBoxSize?: number;\n  color?: string;\n  align?: 'center' | 'baseline' | 'none';\n} & React.SVGAttributes<SVGElement>;\n\nexport type BothIconType =\n  | ReactUIComponentWithRef<HTMLElement, SvgIconProps>\n  | ReactUIComponentWithRef<SVGSVGElement, IconProps>;\n\nexport const BaseIcon = forwardRefAndName<SVGSVGElement, IconProps>(\n  'BaseIcon',\n  (\n    { color, size, style, 'aria-hidden': ariaHidden = true, viewBoxSize = 16, align = 'center', children, ...rest },\n    ref,\n  ) => {\n    const icon = (\n      <svg\n        ref={ref}\n        width={size || viewBoxSize}\n        height={size || viewBoxSize}\n        style={{\n          fill: color ?? 'currentColor',\n          marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',\n          flexShrink: 0,\n          ...style,\n        }}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        aria-hidden={ariaHidden}\n        {...rest}\n      >\n        {children}\n      </svg>\n    );\n\n    if (align === 'center') {\n      return <span className={styles.centeredIcon}>{icon}</span>;\n    }\n\n    return icon;\n  },\n);\n"]}

package/internal/icons2022/LoadingIcon.js

@@ -10,16 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { getStyles } from '../../components/Spinner/Spinner.styles.js';
-import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { styles } from '../../components/Spinner/Spinner.css.js';
+import { cx } from '../../lib/cx.js';
 import { SpinnerIcon } from '../SpinnerIcon/SpinnerIcon.js';
 import { iconSizer } from './iconSizer.js';
 var Icon = function (props) {
-    var cx = useEmotion().cx;
-    var styles = useStyles(getStyles);
-    var theme = React.useContext(ThemeContext);
-    return (React.createElement(SpinnerIcon, __assign({ className: cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation()) }, props)));
+    return (React.createElement(SpinnerIcon, __assign({ className: cx(styles.circle, styles.circleDimmedColor, styles.circleWithoutColorAnimation) }, props)));
 };
 export var LoadingIcon = iconSizer({
     small: function () { return React.createElement(Icon, { size: "small" }); },

package/internal/icons2022/LoadingIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIcon.js","sourceRoot":"","sources":["LoadingIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,KAAuB;IAC3B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,WAAW,aACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,2BAA2B,EAAE,CAAC,IACtG,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,SAAS,CAClC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EAArB,CAAqB;IAClC,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARa,CAQb;IACD,KAAK,EAAE,cAAM,OAAA,CACX,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARY,CAQZ;CACF,EACD,aAAa,CACd,CAAC","sourcesContent":["import React from 'react';\n\nimport { getStyles } from '../../components/Spinner/Spinner.styles.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { SpinnerIcon } from '../SpinnerIcon/SpinnerIcon.js';\nimport type { SpinnerIconProps } from '../SpinnerIcon/SpinnerIcon.js';\nimport { iconSizer } from './iconSizer.js';\n\nconst Icon = (props: SpinnerIconProps) => {\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = React.useContext(ThemeContext);\n  return (\n    <SpinnerIcon\n      className={cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation())}\n      {...props}\n    />\n  );\n};\n\nexport const LoadingIcon = iconSizer<Omit<SpinnerIconProps, 'size'>>(\n  {\n    small: () => <Icon size=\"small\" />,\n    medium: () => (\n      <Icon\n        size={{\n          size: 20,\n          width: 1,\n          radius: 6,\n        }}\n      />\n    ),\n    large: () => (\n      <Icon\n        size={{\n          size: 24,\n          width: 1.5,\n          radius: 8,\n        }}\n      />\n    ),\n  },\n  'LoadingIcon',\n);\n"]}
+{"version":3,"file":"LoadingIcon.js","sourceRoot":"","sources":["LoadingIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,KAAuB;IACnC,OAAO,CACL,oBAAC,WAAW,aACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,2BAA2B,CAAC,IACtF,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,SAAS,CAClC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EAArB,CAAqB;IAClC,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARa,CAQb;IACD,KAAK,EAAE,cAAM,OAAA,CACX,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARY,CAQZ;CACF,EACD,aAAa,CACd,CAAC","sourcesContent":["import React from 'react';\n\nimport { styles } from '../../components/Spinner/Spinner.css.js';\nimport { cx } from '../../lib/cx.js';\nimport { SpinnerIcon } from '../SpinnerIcon/SpinnerIcon.js';\nimport type { SpinnerIconProps } from '../SpinnerIcon/SpinnerIcon.js';\nimport { iconSizer } from './iconSizer.js';\n\nconst Icon = (props: SpinnerIconProps) => {\n  return (\n    <SpinnerIcon\n      className={cx(styles.circle, styles.circleDimmedColor, styles.circleWithoutColorAnimation)}\n      {...props}\n    />\n  );\n};\n\nexport const LoadingIcon = iconSizer<Omit<SpinnerIconProps, 'size'>>(\n  {\n    small: () => <Icon size=\"small\" />,\n    medium: () => (\n      <Icon\n        size={{\n          size: 20,\n          width: 1,\n          radius: 6,\n        }}\n      />\n    ),\n    large: () => (\n      <Icon\n        size={{\n          size: 24,\n          width: 1.5,\n          radius: 8,\n        }}\n      />\n    ),\n  },\n  'LoadingIcon',\n);\n"]}