@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

package/hooks/useEffectWithoutInitCall/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/hooks/useEffectWithoutInitCall.js",
+  "module": "useEffectWithoutInitCall",
+  "types": "../useEffectWithoutInitCall.d.ts",
+  "sideEffects": false
+}

package/hooks/useEffectWithoutInitCall/useEffectWithoutInitCall.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+export var useEffectWithoutInitCall = function useEffectWithoutInitCall(effect, deps) {
+  var isMountedRef = useRef(false);
+  useEffect(function () {
+    if (isMountedRef.current) {
+      effect();
+    }
+  }, deps);
+  useEffect(function () {
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+    };
+  }, []);
+};

package/hooks/useEffectWithoutInitCall/useEffectWithoutInitCall.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useEffectWithoutInitCall","effect","deps","isMountedRef","current"],"sources":["useEffectWithoutInitCall.ts"],"sourcesContent":["import type { DependencyList } from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport const useEffectWithoutInitCall = (effect: () => void, deps: DependencyList) => {\n  const isMountedRef = useRef(false);\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      effect();\n    }\n  }, deps);\n\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n};\n"],"mappings":";AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;;AAEzC,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,MAAkB,EAAEC,IAAoB,EAAK;EACpF,IAAMC,YAAY,GAAGJ,MAAM,CAAC,KAAK,CAAC;;EAElCD,SAAS,CAAC,YAAM;IACd,IAAIK,YAAY,CAACC,OAAO,EAAE;MACxBH,MAAM,CAAC,CAAC;IACV;EACF,CAAC,EAAEC,IAAI,CAAC;;EAERJ,SAAS,CAAC,YAAM;IACdK,YAAY,CAACC,OAAO,GAAG,IAAI;IAC3B,OAAO,YAAM;MACXD,YAAY,CAACC,OAAO,GAAG,KAAK;IAC9B,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;AACR,CAAC","ignoreList":[]}

package/hooks/useEffectWithoutInitCall.d.ts

@@ -0,0 +1,2 @@
+import type { DependencyList } from 'react';
+export declare const useEffectWithoutInitCall: (effect: () => void, deps: DependencyList) => void;

package/hooks/useMemoObject/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/hooks/useMemoObject.js",
+  "module": "useMemoObject",
+  "types": "../useMemoObject.d.ts",
+  "sideEffects": false
+}

package/hooks/useMemoObject/useMemoObject.js

@@ -0,0 +1,6 @@
+import { useMemo } from 'react';
+export var useMemoObject = function useMemoObject(objectValue) {
+  return useMemo(function () {
+    return objectValue;
+  }, Object.values(objectValue));
+};

package/hooks/useMemoObject/useMemoObject.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useMemoObject","objectValue","Object","values"],"sources":["useMemoObject.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { AnyObject } from '../lib/utils';\n\nexport const useMemoObject = <TObject extends AnyObject>(objectValue: TObject) => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;;;;AAI/B,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAA+BC,WAAoB,EAAK;EAChF,OAAOF,OAAO,CAAU,oBAAME,WAAW,IAAEC,MAAM,CAACC,MAAM,CAACF,WAAW,CAAC,CAAC;AACxE,CAAC","ignoreList":[]}

package/hooks/useMemoObject.d.ts

@@ -0,0 +1,2 @@
+import type { AnyObject } from '../lib/utils';
+export declare const useMemoObject: <TObject extends AnyObject>(objectValue: TObject) => TObject;

package/index.d.ts

@@ -0,0 +1,60 @@
+export * from './components/Autocomplete';
+export * from './components/Button';
+export * from './components/Calendar';
+export * from './components/Center';
+export * from './components/Checkbox';
+export * from './components/ComboBox';
+export * from './components/CurrencyInput';
+export * from './components/CurrencyLabel';
+export * from './components/DateInput';
+export * from './components/DatePicker';
+export * from './components/DateRangePicker';
+export * from './components/Dropdown';
+export * from './components/DropdownMenu';
+export * from './components/FileUploader';
+export * from './components/FxInput';
+export * from './components/Gapped';
+export * from './components/GlobalLoader';
+export * from './components/Group';
+export * from './components/Hint';
+export * from './components/Input';
+export * from './components/Kebab';
+export * from './components/Link';
+export * from './components/Loader';
+export * from './components/MenuFooter';
+export * from './components/MenuHeader';
+export * from './components/MenuItem';
+export * from './components/MenuSeparator';
+export * from './components/MiniModal';
+export * from './components/Modal';
+export * from './components/Paging';
+export * from './components/PasswordInput';
+export * from './components/Radio';
+export * from './components/RadioGroup';
+export * from './components/ScrollContainer';
+export * from './components/Select';
+export * from './components/SidePage';
+export * from './components/Spinner';
+export * from './components/Sticky';
+export * from './components/Switcher';
+export * from './components/Tabs';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/SingleToast';
+export * from './components/Toggle';
+export * from './components/Token';
+export * from './components/TokenInput';
+export * from './components/Tooltip';
+export * from './components/TooltipMenu';
+export * from './components/ResponsiveLayout';
+export * from './components/MaskedInput';
+export * from './lib/featureFlagsContext';
+export * from './lib/locale';
+export * from './lib/theming/ThemeContext';
+export * from './lib/theming/ThemeFactory';
+export * from './lib/theming/themes/LightTheme';
+export * from './lib/theming/themes/DarkTheme';
+export * from './lib/types/props';
+export * from './internal/Popup/types';
+export * as ColorFunctions from './lib/styles/ColorFunctions';
+export * as DimensionFunctions from './lib/styles/DimensionFunctions';

package/index.js

@@ -0,0 +1,60 @@
+export * from './components/Autocomplete';
+export * from './components/Button';
+export * from './components/Calendar';
+export * from './components/Center';
+export * from './components/Checkbox';
+export * from './components/ComboBox';
+export * from './components/CurrencyInput';
+export * from './components/CurrencyLabel';
+export * from './components/DateInput';
+export * from './components/DatePicker';
+export * from './components/DateRangePicker';
+export * from './components/Dropdown';
+export * from './components/DropdownMenu';
+export * from './components/FileUploader';
+export * from './components/FxInput';
+export * from './components/Gapped';
+export * from './components/GlobalLoader';
+export * from './components/Group';
+export * from './components/Hint';
+export * from './components/Input';
+export * from './components/Kebab';
+export * from './components/Link';
+export * from './components/Loader';
+export * from './components/MenuFooter';
+export * from './components/MenuHeader';
+export * from './components/MenuItem';
+export * from './components/MenuSeparator';
+export * from './components/MiniModal';
+export * from './components/Modal';
+export * from './components/Paging';
+export * from './components/PasswordInput';
+export * from './components/Radio';
+export * from './components/RadioGroup';
+export * from './components/ScrollContainer';
+export * from './components/Select';
+export * from './components/SidePage';
+export * from './components/Spinner';
+export * from './components/Sticky';
+export * from './components/Switcher';
+export * from './components/Tabs';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/SingleToast';
+export * from './components/Toggle';
+export * from './components/Token';
+export * from './components/TokenInput';
+export * from './components/Tooltip';
+export * from './components/TooltipMenu';
+export * from './components/ResponsiveLayout';
+export * from './components/MaskedInput';
+export * from './lib/featureFlagsContext';
+export * from './lib/locale';
+export * from './lib/theming/ThemeContext';
+export * from './lib/theming/ThemeFactory';
+export * from './lib/theming/themes/LightTheme';
+export * from './lib/theming/themes/DarkTheme';
+export * from './lib/types/props';
+export * from './internal/Popup/types';import * as _ColorFunctions from
+'./lib/styles/ColorFunctions';export { _ColorFunctions as ColorFunctions };import * as _DimensionFunctions from
+'./lib/styles/DimensionFunctions';export { _DimensionFunctions as DimensionFunctions };

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ColorFunctions","ColorFunctions","_DimensionFunctions","DimensionFunctions"],"sources":["index.ts"],"sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/DateRangePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuFooter';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/MiniModal';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './components/MaskedInput';\nexport * from './lib/featureFlagsContext';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/LightTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"],"mappings":"AAAA,cAAc,2BAA2B;AACzC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,cAAc,yBAAyB;AACvC,cAAc,8BAA8B;AAC5C,cAAc,uBAAuB;AACrC,cAAc,2BAA2B;AACzC,cAAc,2BAA2B;AACzC,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,qBAAqB;AACnC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,cAAc,oBAAoB;AAClC,cAAc,qBAAqB;AACnC,cAAc,4BAA4B;AAC1C,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,qBAAqB;AACnC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,0BAA0B;AACxC,cAAc,+BAA+B;AAC7C,cAAc,0BAA0B;AACxC,cAAc,2BAA2B;AACzC,cAAc,cAAc;AAC5B,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,iCAAiC;AAC/C,cAAc,gCAAgC;AAC9C,cAAc,mBAAmB;AACjC,cAAc,wBAAwB,CAAC,YAAAA,eAAA;AACP,6BAA6B,UAAAA,eAAA,IAAjDC,cAAc,eAAAC,mBAAA;AACU,iCAAiC,UAAAA,mBAAA,IAAzDC,kBAAkB","ignoreList":[]}

package/internal/BGRuler/BGRuler.js

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { getDOMRect } from "../../lib/dom/getDOMRect";
+import { createPropsGetter } from "../../lib/createPropsGetter";
+
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */
+export var BGRuler = /*#__PURE__*/function (_React$Component) {
+  function BGRuler() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(BGRuler.defaultProps);
+    _this.iframe = null;
+    _this.componentDidMount = function () {
+      if (_this.iframe && _this.iframe.contentWindow) {
+        _this.iframe.contentWindow.addEventListener('resize', _this.update, true);
+      }
+      _this.update();
+    };
+    _this.componentWillUnmount = function () {
+      if (_this.iframe && _this.iframe.contentWindow) {
+        _this.iframe.contentWindow.removeEventListener('resize', _this.update, true);
+      }
+    };
+    _this.update = function () {
+      _this.forceUpdate();
+    };
+    _this.iframeRef = function (ref) {
+      _this.iframe = ref;
+    };
+    return _this;
+  }
+  _inheritsLoose(BGRuler, _React$Component);
+  var _proto = BGRuler.prototype;
+  _proto.render = function render() {
+    var _this$props = this.props,
+      width = _this$props.width,
+      bottom = _this$props.bottom;
+    var _this$getProps = this.getProps(),
+      height = _this$getProps.height,
+      top = _this$getProps.top,
+      left = _this$getProps.left,
+      right = _this$getProps.right,
+      color = _this$getProps.color;
+    var wrapper = {
+      position: 'absolute',
+      width: width,
+      height: height,
+      top: top,
+      bottom: bottom,
+      left: left,
+      right: right,
+      overflow: 'hidden'
+    };
+    var iframe = {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      border: 0,
+      visibility: 'hidden'
+    };
+    var marks = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      backgroundSize: '100px 20px',
+      backgroundRepeat: 'repeat-x'
+    };
+    var highMarks = _extends({}, marks, {
+      height: '100%',
+      backgroundImage: "linear-gradient(90deg, " + color + " 0, " + color + " 1px, transparent 1px)"
+    });
+    var middleMarks = _extends({}, marks, {
+      height: '75%',
+      backgroundImage: "linear-gradient(90deg, transparent 0, transparent 49px, " + color + " 49px, " + color + " 50px, transparent 50px)"
+    });
+    var shortMarks = _extends({}, marks, {
+      height: '40%',
+      backgroundImage: "\n        linear-gradient(90deg, transparent 0, transparent 9px, " + color + " 9px, " + color + " 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, " + color + " 19px, " + color + " 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, " + color + " 29px, " + color + " 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, " + color + " 39px, " + color + " 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, " + color + " 59px, " + color + " 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, " + color + " 69px, " + color + " 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, " + color + " 79px, " + color + " 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, " + color + " 89px, " + color + " 90px, transparent 90px)\n      "
+    });
+    var rulerWidth = getDOMRect(this.iframe).width;
+    var labels = Array(Math.ceil(rulerWidth / 100) + 1).fill(null).map(function (value, index) {
+      var label = {
+        position: 'absolute',
+        fontFamily: 'Arial',
+        fontSize: 10,
+        lineHeight: 1,
+        color: color,
+        bottom: -1,
+        left: index * 100 + 5
+      };
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: label
+      }, index * 100);
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      style: wrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      style: highMarks
+    }), /*#__PURE__*/React.createElement("div", {
+      style: middleMarks
+    }), /*#__PURE__*/React.createElement("div", {
+      style: shortMarks
+    }), labels, /*#__PURE__*/React.createElement("iframe", {
+      title: "BGRuler",
+      style: iframe,
+      ref: this.iframeRef
+    }));
+  };
+  return BGRuler;
+}(React.Component);
+BGRuler.defaultProps = {
+  height: 20,
+  top: 0,
+  left: 0,
+  right: 0,
+  color: '#333'
+};

package/internal/BGRuler/BGRuler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","getDOMRect","createPropsGetter","BGRuler","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","_inheritsLoose","_proto","prototype","render","_this$props","props","width","bottom","_this$getProps","height","top","left","right","color","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","_extends","backgroundImage","middleMarks","shortMarks","rulerWidth","labels","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","createElement","key","style","title","Component"],"sources":["BGRuler.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../lib/createPropsGetter';\n\nexport interface BGRulerProps {\n  width?: string | number;\n  height?: string | number;\n  top?: string | number;\n  bottom?: string | number;\n  right?: string | number;\n  left?: string | number;\n  color?: string;\n}\n\ntype DefaultProps = Required<Pick<BGRulerProps, 'height' | 'top' | 'left' | 'right' | 'color'>>;\n\n/**\n * Компонент рисует пиксельную линейку на заднем фоне.\n * Помогает контролировать размеры элементов при скриншотном тестировании.\n *\n * @see FxInput/__stories__/FxInput.stories.tsx\n */\nexport class BGRuler extends React.Component<BGRulerProps> {\n  public static defaultProps: DefaultProps = {\n    height: 20,\n    top: 0,\n    left: 0,\n    right: 0,\n    color: '#333',\n  };\n\n  private getProps = createPropsGetter(BGRuler.defaultProps);\n\n  private iframe: HTMLIFrameElement | null = null;\n\n  public componentDidMount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.addEventListener('resize', this.update, true);\n    }\n    this.update();\n  };\n\n  public componentWillUnmount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.removeEventListener('resize', this.update, true);\n    }\n  };\n\n  public update = () => {\n    this.forceUpdate();\n  };\n\n  public render() {\n    const { width, bottom } = this.props;\n    const { height, top, left, right, color } = this.getProps();\n    const wrapper: React.CSSProperties = {\n      position: 'absolute',\n      width,\n      height,\n      top,\n      bottom,\n      left,\n      right,\n      overflow: 'hidden',\n    };\n    const iframe: React.CSSProperties = {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      border: 0,\n      visibility: 'hidden',\n    };\n    const marks: React.CSSProperties = {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      backgroundSize: '100px 20px',\n      backgroundRepeat: 'repeat-x',\n    };\n    const highMarks: React.CSSProperties = {\n      ...marks,\n      height: '100%',\n      backgroundImage: `linear-gradient(90deg, ${color} 0, ${color} 1px, transparent 1px)`,\n    };\n    const middleMarks: React.CSSProperties = {\n      ...marks,\n      height: '75%',\n      backgroundImage: `linear-gradient(90deg, transparent 0, transparent 49px, ${color} 49px, ${color} 50px, transparent 50px)`,\n    };\n    const shortMarks: React.CSSProperties = {\n      ...marks,\n      height: '40%',\n      backgroundImage: `\n        linear-gradient(90deg, transparent 0, transparent 9px, ${color} 9px, ${color} 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, ${color} 19px, ${color} 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, ${color} 29px, ${color} 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, ${color} 39px, ${color} 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, ${color} 59px, ${color} 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, ${color} 69px, ${color} 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, ${color} 79px, ${color} 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, ${color} 89px, ${color} 90px, transparent 90px)\n      `,\n    };\n    const rulerWidth = getDOMRect(this.iframe).width;\n    const labels = Array(Math.ceil(rulerWidth / 100) + 1)\n      .fill(null)\n      .map((value, index) => {\n        const label: React.CSSProperties = {\n          position: 'absolute',\n          fontFamily: 'Arial',\n          fontSize: 10,\n          lineHeight: 1,\n          color,\n          bottom: -1,\n          left: index * 100 + 5,\n        };\n        return (\n          <span key={index} style={label}>\n            {index * 100}\n          </span>\n        );\n      });\n    return (\n      <div style={wrapper}>\n        <div style={highMarks} />\n        <div style={middleMarks} />\n        <div style={shortMarks} />\n        {labels}\n        <iframe title=\"BGRuler\" style={iframe} ref={this.iframeRef} />\n      </div>\n    );\n  }\n\n  private iframeRef = (ref: HTMLIFrameElement | null) => {\n    this.iframe = ref;\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/internal/BGRuler/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/internal/BGRuler.js",
+  "module": "BGRuler",
+  "types": "../BGRuler.d.ts",
+  "sideEffects": false
+}

package/internal/BGRuler.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface BGRulerProps {
+    width?: string | number;
+    height?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+    right?: string | number;
+    left?: string | number;
+    color?: string;
+}
+type DefaultProps = Required<Pick<BGRulerProps, 'height' | 'top' | 'left' | 'right' | 'color'>>;
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */
+export declare class BGRuler extends React.Component<BGRulerProps> {
+    static defaultProps: DefaultProps;
+    private getProps;
+    private iframe;
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    update: () => void;
+    render(): React.JSX.Element;
+    private iframeRef;
+}
+export {};

package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["size", "style"];
+import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../CommonWrapper";
+import { styles } from "../ClearCrossIcon.styles";
+import { CrossIcon } from "../CrossIcon";
+export var ClearCrossIcon = function ClearCrossIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    style = _ref.style,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var theme = React.useContext(ThemeContext);
+  var getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 'large':
+        return styles.clearCrossLarge(theme);
+      case 'medium':
+        return styles.clearCrossMedium(theme);
+      case 'small':
+      default:
+        return styles.clearCrossSmall(theme);
+    }
+  };
+  var _React$useState = React.useState(false),
+    focusedByTab = _React$useState[0],
+    setFocusedByTab = _React$useState[1];
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener so we should check tabPressed in async way
+    globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+  var handleBlur = function handleBlur() {
+    return setFocusedByTab(false);
+  };
+  return /*#__PURE__*/(
+    React.createElement(CommonWrapper, rest, /*#__PURE__*/
+    React.createElement("button", _extends({
+      type: "button",
+      tabIndex: -1,
+      className: cx(styles.root(theme),
+      // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
+      focusedByTab && styles.focus(theme), getSizeClassName(size)),
+      style: style,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }, rest), /*#__PURE__*/
+
+    React.createElement(CrossIcon, {
+      size: size,
+      focusable: true
+    })))
+  );
+};
+ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';
+ClearCrossIcon.displayName = 'ClearCrossIcon';

package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","CommonWrapper","styles","CrossIcon","ClearCrossIcon","_ref","_ref$size","size","style","rest","_objectWithoutPropertiesLoose","_excluded","theme","useContext","getSizeClassName","clearCrossLarge","clearCrossMedium","clearCrossSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","createElement","_extends","type","tabIndex","className","root","focus","onFocus","onBlur","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { TokenSize } from '../../components/Token';\n\nimport { styles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({ size = 'small', style, ...rest }) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.clearCrossLarge(theme);\n      case 'medium':\n        return styles.clearCrossMedium(theme);\n      case 'small':\n      default:\n        return styles.clearCrossSmall(theme);\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className={cx(\n          styles.root(theme),\n          // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n          focusedByTab && styles.focus(theme),\n          getSizeClassName(size),\n        )}\n        style={style}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <CrossIcon size={size} focusable />\n      </button>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":";AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,QAAQ,0BAA0B;;AAEvD,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,aAAa,QAAQ,kBAAkB;;;;AAIhD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,SAAS,QAAQ,aAAa;;;;;;;;;;;AAWvC,OAAO,IAAMC,cAA4D,GAAG,SAA/DA,cAA4DA,CAAAC,IAAA,EAA2C,KAAAC,SAAA,GAAAD,IAAA,CAArCE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA,CAAEE,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAKC,IAAI,GAAAC,6BAAA,CAAAL,IAAA,EAAAM,SAAA;EAC3G,IAAMC,KAAK,GAAGhB,KAAK,CAACiB,UAAU,CAACb,YAAY,CAAC;EAC5C,IAAMc,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIP,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOL,MAAM,CAACa,eAAe,CAACH,KAAK,CAAC;MACtC,KAAK,QAAQ;QACX,OAAOV,MAAM,CAACc,gBAAgB,CAACJ,KAAK,CAAC;MACvC,KAAK,OAAO;MACZ;QACE,OAAOV,MAAM,CAACe,eAAe,CAACL,KAAK,CAAC;IACxC;EACF,CAAC;;EAED,IAAAM,eAAA,GAAwCtB,KAAK,CAACuB,QAAQ,CAAU,KAAK,CAAC,CAA/DC,YAAY,GAAAF,eAAA,IAAEG,eAAe,GAAAH,eAAA;;EAEpC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB;IACAzB,YAAY,CAAC0B,qBAAqB,YAAlC1B,YAAY,CAAC0B,qBAAqB,CAAG,YAAM;MACzC,IAAIxB,WAAW,CAACyB,YAAY,EAAE;QAC5BH,eAAe,CAAC,IAAI,CAAC;MACvB;IACF,CAAC,CAAC;EACJ,CAAC;EACD,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAA,UAASJ,eAAe,CAAC,KAAK,CAAC;;EAE/C;IACEzB,KAAA,CAAA8B,aAAA,CAACzB,aAAa,EAAKQ,IAAI;IACrBb,KAAA,CAAA8B,aAAA,WAAAC,QAAA;MACEC,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAC,CAAE;MACbC,SAAS,EAAEhC,EAAE;QACXI,MAAM,CAAC6B,IAAI,CAACnB,KAAK,CAAC;QAClB;QACAQ,YAAY,IAAIlB,MAAM,CAAC8B,KAAK,CAACpB,KAAK,CAAC;QACnCE,gBAAgB,CAACP,IAAI;MACvB,CAAE;MACFC,KAAK,EAAEA,KAAM;MACbyB,OAAO,EAAEX,WAAY;MACrBY,MAAM,EAAET,UAAW;IACfhB,IAAI;;IAERb,KAAA,CAAA8B,aAAA,CAACvB,SAAS,IAACI,IAAI,EAAEA,IAAK,EAAC4B,SAAS,QAAE;IAC5B;IACK,CAAC;;AAEpB,CAAC;;AAED/B,cAAc,CAACgC,mBAAmB,GAAG,gBAAgB;AACrDhC,cAAc,CAACiC,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ClearCrossIcon/ClearCrossIcon.js",
+  "module": "ClearCrossIcon",
+  "types": "../ClearCrossIcon.d.ts",
+  "sideEffects": false
+}

package/internal/ClearCrossIcon/ClearCrossIcon.d.ts

@@ -0,0 +1,10 @@
+import type { AriaAttributes } from 'react';
+import React from 'react';
+import type { CommonProps } from '../CommonWrapper';
+import type { SizeProp } from '../../lib/types/props';
+export interface ClearCrossIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** Ширина и высота иконки крестика
+     * @default small */
+    size?: SizeProp;
+}
+export declare const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps>;

package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { resetButton } from "../../../lib/styles/Mixins";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor);
+  },
+  focus: function focus(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.clearCrossIconHoverColor);
+  },
+  clearCrossSmall: function clearCrossSmall(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconRightMarginSmall, t.clearCrossIconBorderRadiusSmall);
+  },
+  clearCrossMedium: function clearCrossMedium(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconRightMarginMedium, t.clearCrossIconBorderRadiusMedium);
+  },
+  clearCrossLarge: function clearCrossLarge(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconRightMarginLarge, t.clearCrossIconBorderRadiusLarge);
+  }
+});

package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["css","memoizeStyle","resetButton","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","focus","_templateObject2","clearCrossSmall","_templateObject3","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconRightMarginSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","_templateObject4","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconRightMarginMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","_templateObject5","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconRightMarginLarge","clearCrossIconBorderRadiusLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()}\n      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.clearCrossIconHoverColor};\n    `;\n  },\n\n  clearCrossSmall(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      margin-right: ${t.clearCrossIconRightMarginSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      margin-right: ${t.clearCrossIconRightMarginMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      margin-right: ${t.clearCrossIconRightMarginLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACNL,WAAW,CAAC,CAAC;IACNG,CAAC,CAACG,mBAAmB;;IAEVH,CAAC,CAACI,kBAAkB,EAAIJ,CAAC,CAACK,wBAAwB;;IAE3DL,CAAC,CAACM,wBAAwB;;;;;;EAMzC,CAAC;;EAEDC,KAAK,WAAAA,MAACP,CAAQ,EAAE;IACd,OAAOL,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;IACCF,CAAC,CAACM,wBAAwB;;EAEvC,CAAC;;EAEDG,eAAe,WAAAA,gBAACT,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACCF,CAAC,CAACW,wBAAwB;IACzBX,CAAC,CAACY,yBAAyB;IACrBZ,CAAC,CAACa,8BAA8B;IAC/Bb,CAAC,CAACc,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAACf,CAAQ,EAAE;IACzB,OAAOL,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;IACCF,CAAC,CAACiB,yBAAyB;IAC1BjB,CAAC,CAACkB,0BAA0B;IACtBlB,CAAC,CAACmB,+BAA+B;IAChCnB,CAAC,CAACoB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACrB,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;IACCF,CAAC,CAACuB,wBAAwB;IACzBvB,CAAC,CAACwB,yBAAyB;IACrBxB,CAAC,CAACyB,8BAA8B;IAC/BzB,CAAC,CAAC0B,+BAA+B;;EAEtD;AACF,CAAC,CAAC","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.js",
+  "module": "ClearCrossIcon.styles",
+  "types": "../ClearCrossIcon.styles.d.ts",
+  "sideEffects": false
+}

package/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    focus(t: Theme): string;
+    clearCrossSmall(t: Theme): string;
+    clearCrossMedium(t: Theme): string;
+    clearCrossLarge(t: Theme): string;
+};

package/internal/ClearCrossIcon/CrossIcon/CrossIcon.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { iconSizer } from "../../icons2022/iconSizer";
+import { XIcon16Light } from "../../icons2022/XIcon/XIcon16Light";
+import { XIcon20Light } from "../../icons2022/XIcon/XIcon20Light";
+import { XIcon24Regular } from "../../icons2022/XIcon/XIcon24Regular";
+export var CrossIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(XIcon16Light, {
+      align: "none"
+    });
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(XIcon20Light, {
+      align: "none"
+    });
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(XIcon24Regular, {
+      align: "none"
+    });
+  }
+}, 'CrossIcon');

package/internal/ClearCrossIcon/CrossIcon/CrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","iconSizer","XIcon16Light","XIcon20Light","XIcon24Regular","CrossIcon","small","createElement","align","medium","large"],"sources":["CrossIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../icons2022/iconSizer';\nimport { XIcon16Light } from '../icons2022/XIcon/XIcon16Light';\nimport { XIcon20Light } from '../icons2022/XIcon/XIcon20Light';\nimport { XIcon24Regular } from '../icons2022/XIcon/XIcon24Regular';\n\nexport const CrossIcon = iconSizer(\n  {\n    small: () => <XIcon16Light align=\"none\" />,\n    medium: () => <XIcon20Light align=\"none\" />,\n    large: () => <XIcon24Regular align=\"none\" />,\n  },\n  'CrossIcon',\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SAASC,cAAc,QAAQ,mCAAmC;;AAElE,OAAO,IAAMC,SAAS,GAAGJ,SAAS;EAChC;IACEK,KAAK,EAAE,SAAAA,MAAA,uBAAMN,KAAA,CAAAO,aAAA,CAACL,YAAY,IAACM,KAAK,EAAC,MAAM,EAAE,CAAC;IAC1CC,MAAM,EAAE,SAAAA,OAAA,uBAAMT,KAAA,CAAAO,aAAA,CAACJ,YAAY,IAACK,KAAK,EAAC,MAAM,EAAE,CAAC;IAC3CE,KAAK,EAAE,SAAAA,MAAA,uBAAMV,KAAA,CAAAO,aAAA,CAACH,cAAc,IAACI,KAAK,EAAC,MAAM,EAAE,CAAC;EAC9C,CAAC;EACD;AACF,CAAC","ignoreList":[]}

package/internal/ClearCrossIcon/CrossIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ClearCrossIcon/CrossIcon.js",
+  "module": "CrossIcon",
+  "types": "../CrossIcon.d.ts",
+  "sideEffects": false
+}

package/internal/ClearCrossIcon/CrossIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const CrossIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/internal/ClearCrossIcon/__creevey__/ClearCrossIcon.creevey.d.mts

@@ -0,0 +1 @@
+export {};

package/internal/ClearCrossIcon/__creevey__/ClearCrossIcon.creevey.mts

@@ -0,0 +1,44 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('ClearCrossIcon', () => {
+  story('ClearCrossIconDefaultColors', () => {
+    test('idle', async (context) => {
+      const plain = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: `[data-tid='clear-cross-icon']` }),
+        })
+        .perform();
+      await delay(300);
+      const hover = await context.takeScreenshot();
+
+      await context.matchImages({ plain, hover });
+    });
+  });
+
+  story('ClearCrossIconWithCustomColors', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'test theme variables': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    test('idle', async (context) => {
+      const plain = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: `[data-tid='clear-cross-icon']` }),
+        })
+        .perform();
+      await delay(300);
+      const hover = await context.takeScreenshot();
+
+      await context.matchImages({ plain, hover });
+    });
+  });
+});