@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/Toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/Toggle/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './Toggle.js';\n"]}

package/components/Token/Token.d.ts

@@ -1,49 +1,52 @@
-import React, { AriaAttributes } from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SizeProp } from '../../lib/types/props';
-export type TokenSize = SizeProp;
-export interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {
-    /** Устанавливает, является ли токен активным. */
-    isActive?: boolean;
-    /** Переводит контрол в состояние валидации "ошибка" */
-    error?: boolean;
-    /** Переводит контрол в состояние валидации "предупреждение". */
-    warning?: boolean;
-    /** Делает компонент недоступным. */
-    disabled?: boolean;
-    /** Задает размер контрола. */
-    size?: TokenSize;
-    /** Задает функцию, которая вызывается, когда на токен кликнули. */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /** Задает функцию, которая вызывается, когда на токен кликнули дважды. */
-    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
-    /** Задает функцию, которая вызывается, когда токен удаляется. */
-    onRemove?: React.MouseEventHandler<HTMLElement>;
-    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-    /** Задает функцию, которая вызывается, когда токен получает фокус. */
-    onFocus?: React.FocusEventHandler<HTMLDivElement>;
-    /** Задает функцию, которая вызывается, когда токен теряет фокус. */
-    onBlur?: React.FocusEventHandler<HTMLDivElement>;
-}
-export declare const TokenDataTids: {
-    readonly root: "Token__root";
-    readonly removeIcon: "Token__removeIcon";
-};
-/**
- * Однородный элемент — `Token`.
- *
- * Используется в компоненте поле с токенами TokenInput.
- */
-export declare class Token extends React.Component<TokenProps> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    private theme;
-    private setRootNode;
-    private readonly locale;
-    render(): React.JSX.Element;
-    private renderMain;
-    private onRemoveClick;
-}
+import type { AriaAttributes } from 'react';
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';
+import type { SizeProp } from '../../lib/types/props.js';
+export type TokenSize = SizeProp;
+export interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {
+    /** Устанавливает, является ли токен активным. */
+    isActive?: boolean;
+    /** Переводит контрол в состояние валидации "ошибка" */
+    error?: boolean;
+    /** Переводит контрол в состояние валидации "предупреждение". */
+    warning?: boolean;
+    /** Делает компонент недоступным. */
+    disabled?: boolean;
+    /** Задает размер контрола. */
+    size?: TokenSize;
+    /** Задает функцию, которая вызывается, когда на токен кликнули. */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Задает функцию, которая вызывается, когда на токен кликнули дважды. */
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Задает функцию, которая вызывается, когда токен удаляется. */
+    onRemove?: React.MouseEventHandler<HTMLElement>;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    /** Задает функцию, которая вызывается, когда токен получает фокус. */
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    /** Задает функцию, которая вызывается, когда токен теряет фокус. */
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}
+export declare const TokenDataTids: {
+    readonly root: "Token__root";
+    readonly removeIcon: "Token__removeIcon";
+};
+/**
+ * Однородный элемент — `Token`.
+ *
+ * Используется в компоненте поле с токенами TokenInput.
+ */
+export declare class Token extends React.Component<TokenProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    private theme;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private readonly locale;
+    render(): React.JSX.Element;
+    private renderMain;
+    private onRemoveClick;
+}

package/components/Token/Token.js

@@ -0,0 +1,96 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { locale } from '../../lib/locale/decorators.js';
+import { emptyHandler } from '../../lib/utils.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';
+import { reactGetTextContent } from '../../lib/reactGetTextContent.js';
+import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';
+import { styles } from './Token.styles.js';
+import { TokenLocaleHelper } from './locale/index.js';
+import { TokenView } from './TokenView.js';
+export var TokenDataTids = {
+    root: 'Token__root',
+    removeIcon: 'Token__removeIcon',
+};
+/**
+ * Однородный элемент — `Token`.
+ *
+ * Используется в компоненте поле с токенами TokenInput.
+ */
+var Token = /** @class */ (function (_super) {
+    __extends(Token, _super);
+    function Token() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onRemoveClick = function (event) {
+            var _a = _this.props, disabled = _a.disabled, _b = _a.onRemove, onRemove = _b === void 0 ? emptyHandler : _b;
+            if (disabled) {
+                event.preventDefault();
+                return;
+            }
+            onRemove(event);
+        };
+        return _this;
+    }
+    Token.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    Token.prototype.renderMain = function () {
+        var _a = this.props, size = _a.size, children = _a.children, isActive = _a.isActive, error = _a.error, warning = _a.warning, disabled = _a.disabled, ariaDescribedby = _a["aria-describedby"], _b = _a.onClick, onClick = _b === void 0 ? emptyHandler : _b, _c = _a.onDoubleClick, onDoubleClick = _c === void 0 ? emptyHandler : _c, _d = _a.onMouseEnter, onMouseEnter = _d === void 0 ? emptyHandler : _d, _e = _a.onMouseLeave, onMouseLeave = _e === void 0 ? emptyHandler : _e, _f = _a.onFocus, onFocus = _f === void 0 ? emptyHandler : _f, _g = _a.onBlur, onBlur = _g === void 0 ? emptyHandler : _g;
+        var theme = this.theme;
+        var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);
+        var icon = (React.createElement(CloseButtonIcon, { side: 16, color: "inherit", colorHover: "inherit", "aria-label": removeButtonAriaLabel, tabbable: false }));
+        var classNames = cx(styles.tokenIdle(theme), !isActive && !warning && !error && !disabled && styles.tokenHover(theme), isActive && styles.tokenActive(theme), warning && styles.tokenWarning(theme), error && styles.tokenError(theme), disabled && styles.tokenDisabled(theme));
+        var textholder = React.createElement("span", { className: styles.text() }, children);
+        var closeButton = (React.createElement("span", { onClick: this.onRemoveClick, "data-tid": TokenDataTids.removeIcon }, icon));
+        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props, getVisualStateDataAttributes({ disabled: disabled })),
+            React.createElement(TokenView, { className: classNames, size: size, closeButton: closeButton, "data-tid": TokenDataTids.root, "aria-describedby": ariaDescribedby, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, textholder)));
+    };
+    Token.__KONTUR_REACT_UI__ = 'Token';
+    Token.displayName = 'Token';
+    Token = __decorate([
+        rootNode,
+        locale('Token', TokenLocaleHelper)
+    ], Token);
+    return Token;
+}(React.Component));
+export { Token };
+//# sourceMappingURL=Token.js.map

package/components/Token/Token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.js","sourceRoot":"","sources":["../../../components/Token/Token.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAEpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,4BAA4B,EAAE,MAAM,oEAAoE,CAAC;AAElH,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA+B3C,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,mBAAmB;CACvB,CAAC;AAEX;;;;GAIG;AAGH;IAA2B,yBAA2B;IAAtD;;QAyFU,mBAAa,GAAG,UAAC,KAAgD;YACjE,IAAA,KAAwC,KAAI,CAAC,KAAK,EAAhD,QAAQ,cAAA,EAAE,gBAAuB,EAAvB,QAAQ,mBAAG,YAAY,KAAe,CAAC;YAEzD,IAAI,QAAQ,EAAE,CAAC;gBACb,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,CAAC;;IACJ,CAAC;IA1FQ,sBAAM,GAAb;QAAA,iBASC;QARC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEO,0BAAU,GAAlB;QACQ,IAAA,KAcF,IAAI,CAAC,KAAK,EAbZ,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,QAAQ,cAAA,EACY,eAAe,yBAAA,EACnC,eAAsB,EAAtB,OAAO,mBAAG,YAAY,KAAA,EACtB,qBAA4B,EAA5B,aAAa,mBAAG,YAAY,KAAA,EAC5B,oBAA2B,EAA3B,YAAY,mBAAG,YAAY,KAAA,EAC3B,oBAA2B,EAA3B,YAAY,mBAAG,YAAY,KAAA,EAC3B,eAAsB,EAAtB,OAAO,mBAAG,YAAY,KAAA,EACtB,cAAqB,EAArB,MAAM,mBAAG,YAAY,KACT,CAAC;QAEf,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEzB,IAAM,qBAAqB,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,GAAG,GAAG,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAEtG,IAAM,IAAI,GAAG,CACX,oBAAC,eAAe,IACd,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,SAAS,gBACR,qBAAqB,EACjC,QAAQ,EAAE,KAAK,GACf,CACH,CAAC;QAEF,IAAM,UAAU,GAAG,EAAE,CACnB,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EACxE,QAAQ,IAAI,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,EACrC,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EACjC,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CACxC,CAAC;QAEF,IAAM,UAAU,GAAG,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAG,QAAQ,CAAQ,CAAC;QAErE,IAAM,WAAW,GAAG,CAClB,8BAAM,OAAO,EAAE,IAAI,CAAC,aAAa,cAAY,aAAa,CAAC,UAAU,IAClE,IAAI,CACA,CACR,CAAC;QAEF,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK,EAAM,4BAA4B,CAAC,EAAE,QAAQ,UAAA,EAAE,CAAC;YAC1G,oBAAC,SAAS,IACR,SAAS,EAAE,UAAU,EACrB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,cACd,aAAa,CAAC,IAAI,sBACV,eAAe,EACjC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IAEb,UAAU,CACD,CACE,CACjB,CAAC;IACJ,CAAC;IAtFa,yBAAmB,GAAG,OAAO,AAAV,CAAW;IAC9B,iBAAW,GAAG,OAAO,AAAV,CAAW;IAFzB,KAAK;QAFjB,QAAQ;QACR,MAAM,CAAC,OAAO,EAAE,iBAAiB,CAAC;OACtB,KAAK,CAmGjB;IAAD,YAAC;CAAA,AAnGD,CAA2B,KAAK,CAAC,SAAS,GAmGzC;SAnGY,KAAK","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { locale } from '../../lib/locale/decorators.js';\nimport { emptyHandler } from '../../lib/utils.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/theming/Emotion.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { reactGetTextContent } from '../../lib/reactGetTextContent.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\n\nimport { styles } from './Token.styles.js';\nimport type { TokenLocale } from './locale/index.js';\nimport { TokenLocaleHelper } from './locale/index.js';\nimport { TokenView } from './TokenView.js';\n\nexport type TokenSize = SizeProp;\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n  /** Устанавливает, является ли токен активным. */\n  isActive?: boolean;\n  /** Переводит контрол в состояние валидации \"ошибка\" */\n  error?: boolean;\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает функцию, которая вызывается, когда на токен кликнули. */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  /** Задает функцию, которая вызывается, когда на токен кликнули дважды. */\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  /** Задает функцию, которая вызывается, когда токен удаляется. */\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  /** Задает функцию, которая вызывается, когда токен получает фокус. */\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  /** Задает функцию, которая вызывается, когда токен теряет фокус. */\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const TokenDataTids = {\n  root: 'Token__root',\n  removeIcon: 'Token__removeIcon',\n} as const;\n\n/**\n * Однородный элемент — `Token`.\n *\n * Используется в компоненте поле с токенами TokenInput.\n */\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n  public static __KONTUR_REACT_UI__ = 'Token';\n  public static displayName = 'Token';\n\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: TokenLocale;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      size,\n      children,\n      isActive,\n      error,\n      warning,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n\n    const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);\n\n    const icon = (\n      <CloseButtonIcon\n        side={16}\n        color=\"inherit\"\n        colorHover=\"inherit\"\n        aria-label={removeButtonAriaLabel}\n        tabbable={false}\n      />\n    );\n\n    const classNames = cx(\n      styles.tokenIdle(theme),\n      !isActive && !warning && !error && !disabled && styles.tokenHover(theme),\n      isActive && styles.tokenActive(theme),\n      warning && styles.tokenWarning(theme),\n      error && styles.tokenError(theme),\n      disabled && styles.tokenDisabled(theme),\n    );\n\n    const textholder = <span className={styles.text()}>{children}</span>;\n\n    const closeButton = (\n      <span onClick={this.onRemoveClick} data-tid={TokenDataTids.removeIcon}>\n        {icon}\n      </span>\n    );\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n        <TokenView\n          className={classNames}\n          size={size}\n          closeButton={closeButton}\n          data-tid={TokenDataTids.root}\n          aria-describedby={ariaDescribedby}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          {textholder}\n        </TokenView>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}

package/components/Token/Token.mixins.d.ts

@@ -1 +1 @@
-export declare const tokenSizeMixin: (tokenPaddingY: string, tokenPaddingX: string, lineHeight: string, fontSize: string, tokenMarginY: string, tokenMarginX: string) => string;
+export declare const tokenSizeMixin: (tokenPaddingY: string, tokenPaddingX: string, lineHeight: string, fontSize: string, tokenMarginY: string, tokenMarginX: string) => string;

package/components/Token/Token.mixins.js

@@ -0,0 +1,10 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from '../../lib/theming/Emotion.js';
+export var tokenSizeMixin = function (tokenPaddingY, tokenPaddingX, lineHeight, fontSize, tokenMarginY, tokenMarginX) {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", ";\n    margin: ", " ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    padding: ", " ", ";\n    margin: ", " ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), tokenPaddingY, tokenPaddingX, tokenMarginY, tokenMarginX, lineHeight, fontSize);
+};
+var templateObject_1;
+//# sourceMappingURL=Token.mixins.js.map

package/components/Token/Token.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.mixins.js","sourceRoot":"","sources":["../../../components/Token/Token.mixins.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAEnD,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,aAAqB,EACrB,aAAqB,EACrB,UAAkB,EAClB,QAAgB,EAChB,YAAoB,EACpB,YAAoB;IAEpB,OAAO,GAAG,wKAAA,iBACG,EAAa,GAAI,EAAa,iBAC/B,EAAY,GAAI,EAAY,sBACvB,EAAU,oBACZ,EAAQ,OACtB,KAJY,aAAa,EAAI,aAAa,EAC/B,YAAY,EAAI,YAAY,EACvB,UAAU,EACZ,QAAQ,EACrB;AACJ,CAAC,CAAC","sourcesContent":["import { css } from '../../lib/theming/Emotion.js';\n\nexport const tokenSizeMixin = (\n  tokenPaddingY: string,\n  tokenPaddingX: string,\n  lineHeight: string,\n  fontSize: string,\n  tokenMarginY: string,\n  tokenMarginX: string,\n) => {\n  return css`\n    padding: ${tokenPaddingY} ${tokenPaddingX};\n    margin: ${tokenMarginY} ${tokenMarginX};\n    line-height: ${lineHeight};\n    font-size: ${fontSize};\n  `;\n};\n"]}

package/components/Token/Token.styles.d.ts

@@ -1,23 +1,23 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    removeIcon: string;
-};
-export declare const styles: {
-    token(t: Theme): string;
-    tokenSmall(t: Theme): string;
-    tokenMedium(t: Theme): string;
-    tokenLarge(t: Theme): string;
-    tokenIdle(t: Theme): string;
-    tokenHover(t: Theme): string;
-    tokenActive(t: Theme): string;
-    tokenError(t: Theme): string;
-    tokenWarning(t: Theme): string;
-    tokenDisabled(t: Theme): string;
-    text(): string;
-    removeIcon(t: Theme): string;
-    helperText(): string;
-    helperContainer(): string;
-    helperContainerSmall(t: Theme): string;
-    helperContainerMedium(t: Theme): string;
-    helperContainerLarge(t: Theme): string;
-};
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const globalClasses: {
+    removeIcon: string;
+};
+export declare const styles: {
+    token(t: Theme): string;
+    tokenSmall(t: Theme): string;
+    tokenMedium(t: Theme): string;
+    tokenLarge(t: Theme): string;
+    tokenIdle(t: Theme): string;
+    tokenHover(t: Theme): string;
+    tokenActive(t: Theme): string;
+    tokenError(t: Theme): string;
+    tokenWarning(t: Theme): string;
+    tokenDisabled(t: Theme): string;
+    text(): string;
+    removeIcon(t: Theme): string;
+    helperText(): string;
+    helperContainer(): string;
+    helperContainerSmall(t: Theme): string;
+    helperContainerMedium(t: Theme): string;
+    helperContainerLarge(t: Theme): string;
+};

package/components/Token/Token.styles.js

@@ -0,0 +1,64 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion.js';
+import { tokenSizeMixin } from './Token.mixins.js';
+export var globalClasses = prefix('token')({
+    removeIcon: 'remove-icon',
+});
+export var styles = memoizeStyle({
+    token: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      border: solid ", " transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      border: solid ", " transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenBorderWidth);
+    },
+    tokenSmall: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYSmall, t.tokenPaddingXSmall, t.tokenLineHeightSmall, t.tokenFontSizeSmall, t.tokenMarginYSmall, t.tokenMarginXSmall));
+    },
+    tokenMedium: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYMedium, t.tokenPaddingXMedium, t.tokenLineHeightMedium, t.tokenFontSizeMedium, t.tokenMarginYMedium, t.tokenMarginXMedium));
+    },
+    tokenLarge: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYLarge, t.tokenPaddingXLarge, t.tokenLineHeightLarge, t.tokenFontSizeLarge, t.tokenMarginYLarge, t.tokenMarginXLarge));
+    },
+    tokenIdle: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "], ["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])), t.tokenColor, t.tokenBg, t.tokenBorderColor);
+    },
+    tokenHover: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "], ["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenColorHover, t.tokenBgHover, t.tokenBorderWidth, t.tokenBorderColorHover);
+    },
+    tokenActive: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "], ["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenColorActive, t.tokenBgActive, t.tokenBorderWidth, t.tokenBorderColorActive);
+    },
+    tokenError: function (t) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "], ["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
+    },
+    tokenWarning: function (t) {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "], ["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
+    },
+    tokenDisabled: function (t) {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "], ["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
+    },
+    text: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
+    },
+    removeIcon: function (t) {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    "], ["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
+    },
+    helperText: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    "], ["\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    "])));
+    },
+    helperContainer: function () {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "], ["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
+    },
+    helperContainerSmall: function (t) {
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      left: ", ";\n      right: ", ";\n    "], ["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
+    },
+    helperContainerMedium: function (t) {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      left: ", ";\n      right: ", ";\n    "], ["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
+    },
+    helperContainerLarge: function (t) {
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      left: ", ";\n      right: ", ";\n    "], ["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
+    },
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+//# sourceMappingURL=Token.styles.js.map

package/components/Token/Token.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.styles.js","sourceRoot":"","sources":["../../../components/Token/Token.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC3C,UAAU,EAAE,aAAa;CAC1B,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,MAAM,GAAG,YAAY,CAAC;IACjC,KAAK,YAAC,CAAQ;QACZ,OAAO,GAAG,0UAAA,kFAGS,EAAmB,yBACpB,EAAkB,wJAQnC,KATkB,CAAC,CAAC,iBAAiB,EACpB,CAAC,CAAC,gBAAgB,EAQlC;IACJ,CAAC;IAED,UAAU,YAAC,CAAQ;QACjB,OAAO,GAAG,wFAAA,UACN,EAOD,SACF,KARG,cAAc,CACd,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,oBAAoB,EACtB,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,iBAAiB,EACnB,CAAC,CAAC,iBAAiB,CACpB,EACD;IACJ,CAAC;IAED,WAAW,YAAC,CAAQ;QAClB,OAAO,GAAG,wFAAA,UACN,EAOD,SACF,KARG,cAAc,CACd,CAAC,CAAC,mBAAmB,EACrB,CAAC,CAAC,mBAAmB,EACrB,CAAC,CAAC,qBAAqB,EACvB,CAAC,CAAC,mBAAmB,EACrB,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,kBAAkB,CACrB,EACD;IACJ,CAAC;IAED,UAAU,YAAC,CAAQ;QACjB,OAAO,GAAG,wFAAA,UACN,EAOD,SACF,KARG,cAAc,CACd,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,oBAAoB,EACtB,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,iBAAiB,EACnB,CAAC,CAAC,iBAAiB,CACpB,EACD;IACJ,CAAC;IAED,SAAS,YAAC,CAAQ;QAChB,OAAO,GAAG,uLAAA,iBACC,EAAY,uBACP,EAAS,yBACP,EAAkB,6CAEnC,KAJU,CAAC,CAAC,UAAU,EACP,CAAC,CAAC,OAAO,EACP,CAAC,CAAC,gBAAgB,EAElC;IACJ,CAAC;IAED,UAAU,YAAC,CAAQ;QACjB,OAAO,GAAG,wLAAA,oCAEG,EAAiB,yBACZ,EAAc,2BACZ,EAAkB,GAAI,EAAuB,kBAEhE,KAJY,CAAC,CAAC,eAAe,EACZ,CAAC,CAAC,YAAY,EACZ,CAAC,CAAC,gBAAgB,EAAI,CAAC,CAAC,qBAAqB,EAE/D;IACJ,CAAC;IAED,WAAW,YAAC,CAAQ;QAClB,OAAO,GAAG,wJAAA,iBACC,EAAkB,uBACb,EAAe,yBACb,EAAkB,GAAI,EAAwB,SAC/D,KAHU,CAAC,CAAC,gBAAgB,EACb,CAAC,CAAC,aAAa,EACb,CAAC,CAAC,gBAAgB,EAAI,CAAC,CAAC,sBAAsB,EAC9D;IACJ,CAAC;IAED,UAAU,YAAC,CAAQ;QACjB,OAAO,GAAG,+IAAA,wBACQ,EAAkB,GAAI,EAAuB,6BACzC,EAAmB,GAAI,EAAuB,SACnE,KAFiB,CAAC,CAAC,gBAAgB,EAAI,CAAC,CAAC,qBAAqB,EACzC,CAAC,CAAC,iBAAiB,EAAI,CAAC,CAAC,qBAAqB,EAClE;IACJ,CAAC;IAED,YAAY,YAAC,CAAQ;QACnB,OAAO,GAAG,+IAAA,wBACQ,EAAkB,GAAI,EAAyB,6BAC3C,EAAmB,GAAI,EAAyB,SACrE,KAFiB,CAAC,CAAC,gBAAgB,EAAI,CAAC,CAAC,uBAAuB,EAC3C,CAAC,CAAC,iBAAiB,EAAI,CAAC,CAAC,uBAAuB,EACpE;IACJ,CAAC;IAED,aAAa,YAAC,CAAQ;QACpB,OAAO,GAAG,mQAAA,gEAGC,EAAwB,0DAEb,EAA0B,cAE3C,EAAwB,gDAG5B,KAPU,CAAC,CAAC,sBAAsB,EAEb,CAAC,CAAC,wBAAwB,EAE3C,aAAa,CAAC,UAAU,EAG3B;IACJ,CAAC;IAED,IAAI;QACF,OAAO,GAAG,2GAAA,sCAET,KAAC;IACJ,CAAC;IAED,UAAU,YAAC,CAAQ;QACjB,OAAO,GAAG,0YAAA,kBACE,EAAqB,kBACtB,EAAqB,2CAEnB,EAAyB,GAAI,EAAyB,uBACnD,EAA0B,wBACzB,EAAoB,wLAUpC,KAfW,CAAC,CAAC,mBAAmB,EACtB,CAAC,CAAC,mBAAmB,EAEnB,CAAC,CAAC,uBAAuB,EAAI,CAAC,CAAC,uBAAuB,EACnD,CAAC,CAAC,wBAAwB,EACzB,CAAC,CAAC,kBAAkB,EAUnC;IACJ,CAAC;IAED,UAAU;QACR,OAAO,GAAG,0OAAA,qKAOT,KAAC;IACJ,CAAC;IACD,eAAe;QACb,OAAO,GAAG,yJAAA,oFAIT,KAAC;IACJ,CAAC;IACD,oBAAoB,YAAC,CAAQ;QAC3B,OAAO,GAAG,oHAAA,gBACA,EAAyB,kBACxB,EAAyB,SACnC,KAFS,CAAC,CAAC,uBAAuB,EACxB,CAAC,CAAC,uBAAuB,EAClC;IACJ,CAAC;IACD,qBAAqB,YAAC,CAAQ;QAC5B,OAAO,GAAG,oHAAA,gBACA,EAA0B,kBACzB,EAA0B,SACpC,KAFS,CAAC,CAAC,wBAAwB,EACzB,CAAC,CAAC,wBAAwB,EACnC;IACJ,CAAC;IACD,oBAAoB,YAAC,CAAQ;QAC3B,OAAO,GAAG,oHAAA,gBACA,EAAyB,kBACxB,EAAyB,SACnC,KAFS,CAAC,CAAC,uBAAuB,EACxB,CAAC,CAAC,uBAAuB,EAClC;IACJ,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nimport { tokenSizeMixin } from './Token.mixins.js';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      border: solid ${t.tokenBorderWidth} transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenSmall(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYSmall,\n        t.tokenPaddingXSmall,\n        t.tokenLineHeightSmall,\n        t.tokenFontSizeSmall,\n        t.tokenMarginYSmall,\n        t.tokenMarginXSmall,\n      )};\n    `;\n  },\n\n  tokenMedium(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYMedium,\n        t.tokenPaddingXMedium,\n        t.tokenLineHeightMedium,\n        t.tokenFontSizeMedium,\n        t.tokenMarginYMedium,\n        t.tokenMarginXMedium,\n      )};\n    `;\n  },\n\n  tokenLarge(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYLarge,\n        t.tokenPaddingXLarge,\n        t.tokenLineHeightLarge,\n        t.tokenFontSizeLarge,\n        t.tokenMarginYLarge,\n        t.tokenMarginXLarge,\n      )};\n    `;\n  },\n\n  tokenIdle(t: Theme) {\n    return css`\n      color: ${t.tokenColor};\n      background: ${t.tokenBg};\n      border-color: ${t.tokenBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenHover(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenColorHover};\n        background: ${t.tokenBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorHover};\n      }\n    `;\n  },\n\n  tokenActive(t: Theme) {\n    return css`\n      color: ${t.tokenColorActive};\n      background: ${t.tokenBgActive};\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorActive};\n    `;\n  },\n\n  tokenError(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n    `;\n  },\n\n  tokenWarning(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n    `;\n  },\n\n  tokenDisabled(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n      border: solid 1px ${t.tokenBorderColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text() {\n    return css`\n      display: inline-block;\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n\n  helperText() {\n    return css`\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    `;\n  },\n  helperContainer() {\n    return css`\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    `;\n  },\n  helperContainerSmall(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXSmall};\n      right: ${t.tokenInputPaddingXSmall};\n    `;\n  },\n  helperContainerMedium(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXMedium};\n      right: ${t.tokenInputPaddingXMedium};\n    `;\n  },\n  helperContainerLarge(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXLarge};\n      right: ${t.tokenInputPaddingXLarge};\n    `;\n  },\n});\n"]}

package/components/Token/TokenView.d.ts

@@ -1,11 +1,12 @@
-import React, { ReactNode } from 'react';
-import { TokenSize } from './Token';
-export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Задает размер контрола. */
-    size?: TokenSize;
-    /** Задает компонент крестика для удаления токена. */
-    closeButton?: ReactNode;
-    /** Определяет, скрывать ли крестик для удаления токена. */
-    hideCloseButton?: boolean;
-}
-export declare function TokenView(props: TokenViewProps): React.JSX.Element;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { TokenSize } from './Token.js';
+export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Задает размер контрола. */
+    size?: TokenSize;
+    /** Задает компонент крестика для удаления токена. */
+    closeButton?: ReactNode;
+    /** Определяет, скрывать ли крестик для удаления токена. */
+    hideCloseButton?: boolean;
+}
+export declare function TokenView(props: TokenViewProps): React.JSX.Element;

package/components/Token/TokenView.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext } from 'react';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { globalClasses, styles } from './Token.styles.js';
+export function TokenView(props) {
+    var _a;
+    var _b = props.size, size = _b === void 0 ? 'small' : _b, children = props.children, closeButton = props.closeButton, hideCloseButton = props.hideCloseButton, className = props.className, rest = __rest(props, ["size", "children", "closeButton", "hideCloseButton", "className"]);
+    var theme = useContext(ThemeContext);
+    var getSizeClassName = function (size) {
+        switch (size) {
+            case 'large':
+                return styles.tokenLarge(theme);
+            case 'medium':
+                return styles.tokenMedium(theme);
+            case 'small':
+            default:
+                return styles.tokenSmall(theme);
+        }
+    };
+    var closeButtonNode = hideCloseButton ? null : (React.createElement("span", { className: cx(styles.removeIcon(theme), globalClasses.removeIcon) }, closeButton));
+    return (React.createElement(CommonWrapper, __assign({}, props),
+        React.createElement("div", __assign({}, rest, { className: cx(getSizeClassName(size), (_a = {},
+                _a[styles.token(theme)] = true,
+                _a)) }),
+            children,
+            closeButtonNode)));
+}
+//# sourceMappingURL=TokenView.js.map

package/components/Token/TokenView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenView.js","sourceRoot":"","sources":["../../../components/Token/TokenView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAC;AAGlD,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAW1D,MAAM,UAAU,SAAS,CAAC,KAAqB;;IACrC,IAAA,KAA+E,KAAK,KAAtE,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,QAAQ,GAAuD,KAAK,SAA5D,EAAE,WAAW,GAA0C,KAAK,YAA/C,EAAE,eAAe,GAAyB,KAAK,gBAA9B,EAAE,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAAtF,mEAA8E,CAAF,CAAW;IAC7F,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,gBAAgB,GAAG,UAAC,IAAe;QACvC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClC,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IACF,IAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/C,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,IAAG,WAAW,CAAQ,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,eAAK,KAAK;QACtB,wCACM,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBAClC,GAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAG,IAAI;oBAC3B;YAED,QAAQ;YACR,eAAe,CACZ,CACQ,CACjB,CAAC;AACJ,CAAC","sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { cx } from '../../lib/theming/Emotion.js';\n\nimport type { TokenSize } from './Token.js';\nimport { globalClasses, styles } from './Token.styles.js';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает компонент крестика для удаления токена. */\n  closeButton?: ReactNode;\n  /** Определяет, скрывать ли крестик для удаления токена. */\n  hideCloseButton?: boolean;\n}\n\nexport function TokenView(props: TokenViewProps) {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n  const theme = useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.tokenLarge(theme);\n      case 'medium':\n        return styles.tokenMedium(theme);\n      case 'small':\n      default:\n        return styles.tokenSmall(theme);\n    }\n  };\n  const closeButtonNode = hideCloseButton ? null : (\n    <span className={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n}\n"]}

package/components/Token/__stories__/Token.stories.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Meta } from '../../../typings/stories.js';
+declare const meta: Meta;
+export default meta;
+export declare const Default: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const Size: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const Disabled: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const LongText: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const Validations: {
+    (): React.JSX.Element;
+    storyName: string;
+};

package/components/Token/__stories__/Token.stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Token } from '../Token.js';
+import { Gapped } from '../../Gapped/index.js';
+var meta = {
+    title: 'Token',
+    component: Token,
+    decorators: [
+        function (Story) { return (React.createElement("div", { className: "token-test-container", style: { margin: 40, padding: 4 } },
+            React.createElement(Story, null))); },
+    ],
+};
+export default meta;
+export var Default = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Token, null, "test"),
+        React.createElement(Token, { isActive: true }, "test")));
+};
+Default.storyName = 'default';
+export var Size = function () {
+    return (React.createElement(Gapped, { vertical: true },
+        React.createElement(Token, null, "Size: no size chosen"),
+        React.createElement(Token, { size: "small" }, "Size: small"),
+        React.createElement(Token, { size: "medium" }, "Size: medium"),
+        React.createElement(Token, { size: "large" }, "Size: large")));
+};
+Size.storyName = 'size';
+export var Disabled = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Token, { disabled: true }, "test disabled 01"),
+        React.createElement(Token, { disabled: true }, "test disabled 02")));
+};
+Disabled.storyName = 'disabled';
+export var LongText = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Token, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."),
+        React.createElement(Token, { isActive: true }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit.")));
+};
+LongText.storyName = 'long text';
+export var Validations = function () {
+    return (React.createElement(Gapped, null,
+        React.createElement(Token, { error: true }, "test"),
+        React.createElement(Token, { warning: true, isActive: true }, "test")));
+};
+Validations.storyName = 'validations';
+//# sourceMappingURL=Token.stories.js.map

package/components/Token/__stories__/Token.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.stories.js","sourceRoot":"","sources":["../../../../components/Token/__stories__/Token.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,IAAM,IAAI,GAAS;IACjB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE;QACV,UAAC,KAAwB,IAAK,OAAA,CAC5B,6BAAK,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;YACrE,oBAAC,KAAK,OAAG,CACL,CACP,EAJ6B,CAI7B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,OAAO,CACL;QACE,oBAAC,KAAK,eAAa;QACnB,oBAAC,KAAK,IAAC,QAAQ,iBAAa,CAC3B,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;AAE9B,MAAM,CAAC,IAAM,IAAI,GAAG;IAClB,OAAO,CACL,oBAAC,MAAM,IAAC,QAAQ;QACd,oBAAC,KAAK,+BAA6B;QACnC,oBAAC,KAAK,IAAC,IAAI,EAAC,OAAO,kBAAoB;QACvC,oBAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,mBAAqB;QACzC,oBAAC,KAAK,IAAC,IAAI,EAAC,OAAO,kBAAoB,CAChC,CACV,CAAC;AACJ,CAAC,CAAC;AACF,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;AAExB,MAAM,CAAC,IAAM,QAAQ,GAAG;IACtB,OAAO,CACL;QACE,oBAAC,KAAK,IAAC,QAAQ,6BAAyB;QACxC,oBAAC,KAAK,IAAC,QAAQ,6BAAyB,CACvC,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,QAAQ,CAAC,SAAS,GAAG,UAAU,CAAC;AAEhC,MAAM,CAAC,IAAM,QAAQ,GAAG;IACtB,OAAO,CACL;QACE,oBAAC,KAAK,oEAAkE;QACxE,oBAAC,KAAK,IAAC,QAAQ,sEAAkE,CAChF,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,QAAQ,CAAC,SAAS,GAAG,WAAW,CAAC;AAEjC,MAAM,CAAC,IAAM,WAAW,GAAG;IACzB,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,KAAK,IAAC,KAAK,iBAAa;QACzB,oBAAC,KAAK,IAAC,OAAO,QAAC,QAAQ,iBAEf,CACD,CACV,CAAC;AACJ,CAAC,CAAC;AACF,WAAW,CAAC,SAAS,GAAG,aAAa,CAAC","sourcesContent":["import React from 'react';\n\nimport type { Meta } from '../../../typings/stories.js';\nimport { Token } from '../Token.js';\nimport { Gapped } from '../../Gapped/index.js';\n\nconst meta: Meta = {\n  title: 'Token',\n  component: Token,\n  decorators: [\n    (Story: () => JSX.Element) => (\n      <div className=\"token-test-container\" style={{ margin: 40, padding: 4 }}>\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport default meta;\n\nexport const Default = () => {\n  return (\n    <>\n      <Token>test</Token>\n      <Token isActive>test</Token>\n    </>\n  );\n};\nDefault.storyName = 'default';\n\nexport const Size = () => {\n  return (\n    <Gapped vertical>\n      <Token>Size: no size chosen</Token>\n      <Token size=\"small\">Size: small</Token>\n      <Token size=\"medium\">Size: medium</Token>\n      <Token size=\"large\">Size: large</Token>\n    </Gapped>\n  );\n};\nSize.storyName = 'size';\n\nexport const Disabled = () => {\n  return (\n    <>\n      <Token disabled>test disabled 01</Token>\n      <Token disabled>test disabled 02</Token>\n    </>\n  );\n};\nDisabled.storyName = 'disabled';\n\nexport const LongText = () => {\n  return (\n    <>\n      <Token>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Token>\n      <Token isActive>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Token>\n    </>\n  );\n};\nLongText.storyName = 'long text';\n\nexport const Validations = () => {\n  return (\n    <Gapped>\n      <Token error>test</Token>\n      <Token warning isActive>\n        test\n      </Token>\n    </Gapped>\n  );\n};\nValidations.storyName = 'validations';\n"]}

package/components/Token/__tests__/Token-test.d.ts

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