@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-6344a.0

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.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 = (\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/TimeInput.css.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    rightIcon(): string;
+    rightIconInteractive(): string;
+    rightIconDefault(t: Theme): string;
+    rightIconDisabled(t: Theme): string;
+}>;

package/internal/TimeInput/TimeInput.css.js

@@ -0,0 +1,3 @@
+
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({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":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAG3F,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,SAAS;YACP,OAAO,GAAG,kNAAA,+IAMT,KAAC;QACJ,CAAC;QAED,oBAAoB;YAClB,OAAO,GAAG,mGAAA,gCAET,KAAC;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,+FAAA,iBACC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,iBAAiB,YAAC,CAAQ;YACxB,OAAO,GAAG,+FAAA,iBACC,EAAwB,SAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;KACF,CAAC;AA5B8D,CA4B9D,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  rightIcon() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      user-select: none;\n    `;\n  },\n\n  rightIconInteractive() {\n    return css`\n      cursor: pointer;\n    `;\n  },\n\n  rightIconDefault(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n\n  rightIconDisabled(t: Theme) {\n    return css`\n      color: ${t.inputTextColorDisabled};\n    `;\n  },\n}));\n\nfinalizeStaticStyles();\n"]}

package/internal/TimeInput/TimeInput.js

@@ -25,16 +25,16 @@ import { getTimePickerInputMinWidth, getTimePickerSuffixMargin, } from '../../co
 import { getTimeSegments, } from '../../components/TimePicker/helpers/TimePicker.shared.js';
 import { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.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 { InputLikeText } from '../InputLikeText/index.js';
 import { TimeFragments } from './TimeFragments.js';
-import { getStyles } from './TimeInput.styles.js';
+import { getStyles } 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);
@@ -91,8 +91,8 @@ export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
         };
     }, []);
     var resolvedRightIcon = rightIcon === undefined ? (React.createElement("span", { className: cx(styles.rightIcon(), (_a = {},
-            _a[styles.rightIconDefault()] = !disabled,
-            _a[styles.rightIconDisabled()] = disabled,
+            _a[styles.rightIconDefault(theme)] = !disabled,
+            _a[styles.rightIconDisabled(theme)] = disabled,
             _a[styles.rightIconInteractive()] = hasDropdown && !disabled,
             _a)) },
         React.createElement(TimeClockIcon, { size: size }))) : (rightIcon);

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 { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.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 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()]: !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"]}
+{"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.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 { 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"]}

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

@@ -0,0 +1,3 @@
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    centeredIcon(): string;
+}>;

package/internal/icons2022/BaseIcon.css.js

@@ -0,0 +1,3 @@
+
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({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":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,YAAY;YACV,OAAO,GAAG,4LAAA,oGAKM,EAAoB,mBAEnC,KAFe,oBAAoB,EAElC;QACJ,CAAC;KACF,CAAC;AAX8D,CAW9D,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars.js';\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  centeredIcon() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '${ZERO_WIDTH_SPACE_CSS}';\n      }\n    `;\n  },\n}));\n\nfinalizeStaticStyles();\n"]}

package/internal/icons2022/BaseIcon.js

@@ -23,18 +23,11 @@ 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 { getStyles } 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 className = rest.className, svgProps = __rest(rest, ["className"]);
-    // Цвет — инлайном только когда он задан пропом: по умолчанию `fill`
-    // приходит классом. Класс от вызывающего идёт после базового, чтобы
-    // `fill` можно было задать и им — например значением темы.
-    var inlineStyle = color === undefined && style === undefined ? undefined : __assign({ fill: color }, style);
-    var icon = (React.createElement("svg", __assign({ ref: ref, width: size || viewBoxSize, height: size || viewBoxSize, className: [styles.icon(), align === 'baseline' && styles.baselineAligned(), className]
-            .filter(Boolean)
-            .join(' '), style: inlineStyle, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 ".concat(viewBoxSize, " ").concat(viewBoxSize), "aria-hidden": ariaHidden }, svgProps), children));
+    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);
     }

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;IAC5B,IAAA,SAAS,GAAkB,IAAI,UAAtB,EAAK,QAAQ,UAAK,IAAI,EAAjC,aAA0B,CAAF,CAAU;IACxC,oEAAoE;IACpE,oEAAoE;IACpE,2DAA2D;IAC3D,IAAM,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,YAAG,IAAI,EAAE,KAAK,IAAK,KAAK,CAAE,CAAC;IACvG,IAAM,IAAI,GAAG,CACX,sCACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,IAAI,WAAW,EAC1B,MAAM,EAAE,IAAI,IAAI,WAAW,EAC3B,SAAS,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,KAAK,UAAU,IAAI,MAAM,CAAC,eAAe,EAAE,EAAE,SAAS,CAAC;aACpF,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,KAAK,EAAE,WAAW,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,cAAO,WAAW,cAAI,WAAW,CAAE,iBAC/B,UAAU,IACnB,QAAQ,GAEX,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 { className, ...svgProps } = rest;\n    // Цвет — инлайном только когда он задан пропом: по умолчанию `fill`\n    // приходит классом. Класс от вызывающего идёт после базового, чтобы\n    // `fill` можно было задать и им — например значением темы.\n    const inlineStyle = color === undefined && style === undefined ? undefined : { fill: color, ...style };\n    const icon = (\n      <svg\n        ref={ref}\n        width={size || viewBoxSize}\n        height={size || viewBoxSize}\n        className={[styles.icon(), align === 'baseline' && styles.baselineAligned(), className]\n          .filter(Boolean)\n          .join(' ')}\n        style={inlineStyle}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        aria-hidden={ariaHidden}\n        {...svgProps}\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,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAmB9C,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.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 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"]}

package/internal/icons2022/LoadingIcon.js

@@ -10,14 +10,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { getStyles } from '../../components/Spinner/Spinner.styles.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { getStyles } from '../../components/Spinner/Spinner.css.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { SpinnerIcon } from '../SpinnerIcon/SpinnerIcon.js';
 import { iconSizer } from './iconSizer.js';
 var Icon = function (props) {
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
-    return (React.createElement(SpinnerIcon, __assign({ className: cx(styles.circle(), styles.circleDimmedColor(), styles.circleWithoutColorAnimation()) }, props)));
+    var theme = React.useContext(ThemeContext);
+    return (React.createElement(SpinnerIcon, __assign({ className: cx(styles.circle(theme), styles.circleDimmedColor(theme), 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,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,gBAAgB,IAAI,EAAE,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,KAAuB;IACnC,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CACL,oBAAC,WAAW,aACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,MAAM,CAAC,iBAAiB,EAAE,EAAE,MAAM,CAAC,2BAA2B,EAAE,CAAC,IAC5F,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 { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.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 styles = useStyles(getStyles);\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"]}
+{"version":3,"file":"LoadingIcon.js","sourceRoot":"","sources":["LoadingIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,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.css.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"]}

package/internal/themes/BasicTheme.d.ts

@@ -1262,16 +1262,6 @@ export declare class BasicThemeClass {
     static get checkboxShadowDisabled(): string;
     static checkboxBorder: string;
     static get checkboxBorderWidth(): string;
-    /**
-     * Цвет рамки чекбокса. Рамка рисуется тенью (`checkboxShadow*`), а цвет вынесен
-     * отдельной переменной, чтобы тень собиралась только из переменных темы:
-     * значение из импорта в шаблоне тени лишало её производности целиком, и
-     * переопределение `checkboxBorderWidth` до тени не доходило.
-     */
-    static checkboxBorderColor: string;
-    static checkboxBorderColorHover: string;
-    static checkboxBorderColorActive: string;
-    static checkboxBorderColorDisabled: string;
     static get checkboxShadow(): string;
     static get checkboxShadowHover(): string;
     static checkboxCheckedColor: string;

package/internal/themes/BasicTheme.js

@@ -2808,7 +2808,7 @@ var BasicThemeClass = /** @class */ (function () {
     });
     Object.defineProperty(BasicThemeClass, "checkboxShadowDisabled", {
         get: function () {
-            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(this.checkboxBorderColorDisabled);
+            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(colors.lineNeutralFaint);
         },
         enumerable: false,
         configurable: true
@@ -2822,14 +2822,14 @@ var BasicThemeClass = /** @class */ (function () {
     });
     Object.defineProperty(BasicThemeClass, "checkboxShadow", {
         get: function () {
-            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(this.checkboxBorderColor);
+            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(colors.lineNeutralPale);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(BasicThemeClass, "checkboxShadowHover", {
         get: function () {
-            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(this.checkboxBorderColorHover);
+            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(colors.lineNeutralPaleHover);
         },
         enumerable: false,
         configurable: true
@@ -2892,7 +2892,7 @@ var BasicThemeClass = /** @class */ (function () {
     });
     Object.defineProperty(BasicThemeClass, "checkboxShadowActive", {
         get: function () {
-            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(this.checkboxBorderColorActive);
+            return "0 0 0 ".concat(this.checkboxBorderWidth, " ").concat(colors.lineNeutralPalePressed);
         },
         enumerable: false,
         configurable: true
@@ -3315,8 +3315,7 @@ var BasicThemeClass = /** @class */ (function () {
     });
     Object.defineProperty(BasicThemeClass, "radioDisabledShadow", {
         get: function () {
-            // Цвет тот же, что у выключенного чекбокса, — как и фон строкой выше.
-            return "0 0 0 ".concat(this.radioBorderWidth, " ").concat(this.checkboxBorderColorDisabled);
+            return "0 0 0 ".concat(this.radioBorderWidth, " ").concat(colors.lineNeutralFaint);
         },
         enumerable: false,
         configurable: true
@@ -4376,7 +4375,7 @@ var BasicThemeClass = /** @class */ (function () {
     BasicThemeClass.selectPaddingXLarge = '15px';
     BasicThemeClass.selectRootWidthMobile = 'auto';
     BasicThemeClass.mobileSelectMaxWidth = '100%';
-    BasicThemeClass.selectBorderColorTransition = "box-shadow ".concat(_a.transitionDuration, " ").concat(_a.transitionTimingFunction);
+    BasicThemeClass.selectBorderColorTransition = "box-shadow ".concat(_a.transitionDuration, " ").concat(_a.transitionTimingFunction, ";");
     //#endregion Select
     //#region Tooltip
     BasicThemeClass.tooltipPaddingYSmall = '16px';
@@ -4845,16 +4844,6 @@ var BasicThemeClass = /** @class */ (function () {
     BasicThemeClass.checkboxBgStart = '#fdfdfd';
     BasicThemeClass.checkboxBgEnd = '#ededed';
     BasicThemeClass.checkboxBorder = 'none';
-    /**
-     * Цвет рамки чекбокса. Рамка рисуется тенью (`checkboxShadow*`), а цвет вынесен
-     * отдельной переменной, чтобы тень собиралась только из переменных темы:
-     * значение из импорта в шаблоне тени лишало её производности целиком, и
-     * переопределение `checkboxBorderWidth` до тени не доходило.
-     */
-    BasicThemeClass.checkboxBorderColor = colors.lineNeutralPale;
-    BasicThemeClass.checkboxBorderColorHover = colors.lineNeutralPaleHover;
-    BasicThemeClass.checkboxBorderColorActive = colors.lineNeutralPalePressed;
-    BasicThemeClass.checkboxBorderColorDisabled = colors.lineNeutralFaint;
     BasicThemeClass.checkboxCheckedColor = colors.shapeInvertedNeutralHeavy;
     BasicThemeClass.checkboxBorderRadius = '4px';
     BasicThemeClass.checkboxBg = colors.shapeOtherField;