@jetbrains/ring-ui 7.0.19 → 7.0.21

package/components/avatar/avatar.d.ts

@@ -3,12 +3,14 @@ import { PureComponent, ImgHTMLAttributes } from 'react';
  * @name Avatar
  */
 export declare enum Size {
+    /** @deprecated */
     Size18 = 18,
     Size20 = 20,
     Size24 = 24,
     Size28 = 28,
     Size32 = 32,
     Size40 = 40,
+    /** @deprecated */
     Size48 = 48,
     Size56 = 56
 }

package/components/avatar/avatar.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
+import deprecate from 'util-deprecate';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';
 import { getPixelRatio } from '../global/dom';
+import memoize from '../global/memoize';
 import styles from './avatar.css';
 import FallbackAvatar from './fallback-avatar';
 /**
@@ -10,15 +12,18 @@ import FallbackAvatar from './fallback-avatar';
  */
 export var Size;
 (function (Size) {
+    /** @deprecated */
     Size[Size["Size18"] = 18] = "Size18";
     Size[Size["Size20"] = 20] = "Size20";
     Size[Size["Size24"] = 24] = "Size24";
     Size[Size["Size28"] = 28] = "Size28";
     Size[Size["Size32"] = 32] = "Size32";
     Size[Size["Size40"] = 40] = "Size40";
+    /** @deprecated */
     Size[Size["Size48"] = 48] = "Size48";
     Size[Size["Size56"] = 56] = "Size56";
 })(Size || (Size = {}));
+const warnSize = memoize((size) => deprecate(() => { }, `Avatar: Size${size} is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.`));
 export default class Avatar extends PureComponent {
     static defaultProps = {
         dpr: getPixelRatio(),
@@ -37,6 +42,9 @@ export default class Avatar extends PureComponent {
     };
     render() {
         const { size, url, dpr, style, round, subavatar, subavatarSize, username, skipParams, ...restProps } = this.props;
+        if ([Size.Size18, Size.Size48].includes(size)) {
+            warnSize(size)();
+        }
         const sizeString = `${size}px`;
         const subavatarSizeString = `${subavatarSize}px`;
         const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';

package/components/avatar-stack/avatar-stack.css

@@ -0,0 +1,121 @@
+.size20 {
+  --ring-avatar-stack-offset: 12px;
+  --ring-avatar-stack-mask-image: url('avatar-stack.mask-20.svg');
+  --ring-avatar-stack-extra-font-size: 9px
+}
+
+.size24 {
+  --ring-avatar-stack-offset: 16px;
+  --ring-avatar-stack-mask-image: url('avatar-stack.mask-24.svg');
+  --ring-avatar-stack-extra-font-size: 11px;
+}
+
+.size28 {
+  --ring-avatar-stack-offset: 18px;
+  --ring-avatar-stack-mask-image: url('avatar-stack.mask-28.svg');
+  --ring-avatar-stack-extra-font-size: var(--ring-font-size-smaller);
+}
+
+.size32 {
+  --ring-avatar-stack-offset: 20px;
+  --ring-avatar-stack-mask-image: url('avatar-stack.mask-32.svg');
+  --ring-avatar-stack-extra-font-size: var(--ring-font-size);
+}
+
+.size40 {
+  --ring-avatar-stack-offset: 26px;
+  --ring-avatar-stack-mask-image: url('avatar-stack.mask-40.svg');
+  --ring-avatar-stack-extra-font-size: var(--ring-font-size-larger);
+}
+
+.size56 {
+  --ring-avatar-stack-offset: 42px;
+  --ring-avatar-stack-mask-image: url('avatar-stack.mask-56.svg');
+  --ring-avatar-stack-extra-font-size: 22px;
+}
+
+.avatarStack {
+  position: relative;
+
+  display: inline-flex;
+}
+
+.item {
+  position: relative;
+
+  margin-left: calc(var(--ring-avatar-stack-offset) * -1);
+
+  transition: transform var(--ring-fast-ease);
+  mask-image: var(--ring-avatar-stack-mask-image);
+  mask-position: calc(var(--ring-avatar-stack-offset) - 4px) -1px;
+  mask-repeat: no-repeat;
+
+
+  /* make the gaps hoverable */
+  &::before {
+    position: absolute;
+    top: 0;
+    right: -1px;
+    bottom: 0;
+    left: -1px;
+
+    content: '';
+  }
+}
+
+.item:nth-child(1) {
+  --ring-avatar-stack-index: 0;
+  --ring-avatar-stack-offset: 0;
+
+  mask: none;
+}
+
+.hovered .item,
+.avatarStack:hover .item,
+.avatarStack:focus-within .item {
+  mask: none;
+
+  transform: translateX(calc((var(--ring-avatar-stack-offset) + 2px) * var(--ring-avatar-stack-index)));
+}
+
+.extra {
+  composes: item;
+
+  color: var(--ring-secondary-color);
+
+  border-radius: var(--ring-border-radius);
+
+  background-color: var(--ring-disabled-background-color);
+
+  font-size: var(--ring-avatar-stack-extra-font-size);
+}
+
+.extraText {
+  composes: resetButton from "../global/global.css";
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  cursor: pointer;
+  transition: opacity var(--ring-fast-ease);
+  text-align: center;
+
+  opacity: 0;
+
+  border-radius: var(--ring-border-radius);
+}
+
+.extraText:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring-border-hover-color);
+}
+
+.hovered .extraText,
+.avatarStack:hover .extraText,
+.avatarStack:focus-within .extraText {
+  opacity: 1;
+}
+
+

package/components/avatar-stack/avatar-stack.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+import { ListDataItem } from '../list/consts';
+import { DropdownMenuProps } from '../dropdown-menu/dropdown-menu';
+import { Size } from '../avatar/avatar';
+declare module 'csstype' {
+    interface Properties {
+        '--ring-avatar-stack-index'?: number;
+    }
+}
+export interface AvatarProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
+    size?: Size | undefined;
+    extraItems?: readonly ListDataItem<T>[] | null | undefined;
+    dropdownMenuProps?: DropdownMenuProps<T> | null | undefined;
+}
+export default function AvatarStack({ children, className, size, extraItems, dropdownMenuProps, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/components/avatar-stack/avatar-stack.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useState } from 'react';
+import classNames from 'classnames';
+import DropdownMenu from '../dropdown-menu/dropdown-menu';
+import { Size } from '../avatar/avatar';
+import styles from './avatar-stack.css';
+export default function AvatarStack({ children, className, size = Size.Size20, extraItems, dropdownMenuProps, ...restProps }) {
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    return (_jsxs("div", { className: classNames(styles.avatarStack, className, styles[`size${size}`], {
+            [styles.hovered]: dropdownOpen,
+        }), ...restProps, children: [Children.map(children, (child, index) => (_jsx("div", { className: styles.item, style: { '--ring-avatar-stack-index': index }, children: child }))), extraItems?.length && (_jsx(DropdownMenu, { hoverMode: true, hoverShowTimeOut: 10, onShow: () => setDropdownOpen(true), onHide: () => setDropdownOpen(false), className: styles.extra, style: { width: size, height: size, '--ring-avatar-stack-index': Children.count(children) }, anchor: _jsx("button", { type: "button", className: styles.extraText, children: `+${extraItems.length}` }), data: extraItems, menuProps: { offset: 4, ...dropdownMenuProps?.menuProps }, ...dropdownMenuProps }))] }));
+}

package/components/avatar-stack/avatar-stack.mask-20.svg

@@ -0,0 +1,3 @@
+<svg width="22px" height="22px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 17 a 5 5 0 0 1 -5 5 H 22 V 0"/>
+</svg>

package/components/avatar-stack/avatar-stack.mask-24.svg

@@ -0,0 +1,3 @@
+<svg width="26px" height="26px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 21 a 5 5 0 0 1 -5 5 H 26 V 0"/>
+</svg>

package/components/avatar-stack/avatar-stack.mask-28.svg

@@ -0,0 +1,3 @@
+<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 25 a 5 5 0 0 1 -5 5 H 30 V 0"/>
+</svg>

package/components/avatar-stack/avatar-stack.mask-32.svg

@@ -0,0 +1,3 @@
+<svg width="34px" height="34px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 29 a 5 5 0 0 1 -5 5 H 34 V 0"/>
+</svg>

package/components/avatar-stack/avatar-stack.mask-40.svg

@@ -0,0 +1,3 @@
+<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 37 a 5 5 0 0 1 -5 5 H 42 V 0"/>
+</svg>

package/components/avatar-stack/avatar-stack.mask-56.svg

@@ -0,0 +1,3 @@
+<svg width="56px" height="56px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 51 a 5 5 0 0 1 -5 5 H 56 V 0"/>
+</svg>

package/components/list/list.css

@@ -78,18 +78,6 @@
   line-height: calc(var(--ring-unit) * 2);
 }
 
-.error {
-  cursor: default;
-
-  /* Override ring-link */
-  &,
-  &:hover,
-  &:focus,
-  &:visited {
-    color: var(--ring-error-color);
-  }
-}
-
 .add {
   padding: var(--ring-unit) calc(2 * var(--ring-unit));
 
@@ -188,12 +176,12 @@
   transition: none;
 }
 
-.item:hover:not(.error) {
+.action:hover {
   background-color: var(--ring-hover-background-color);
 }
 
 /* TODO rename .hover to .selected in 8.0 */
-.item.hover:not(.error) {
+.action.hover {
   background-color: var(--ring-selected-background-color);
 }
 
@@ -310,7 +298,10 @@
 }
 
 .disabled {
-  pointer-events: none;
-
   color: var(--ring-disabled-color);
 }
+
+.item:not(.action),
+.disabled {
+  pointer-events: none;
+}

package/components/tooltip/tooltip.js

@@ -119,6 +119,6 @@ export default class Tooltip extends Component {
         const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
         const ariaProps = typeof title === 'string' && !!title ? { 'aria-label': title, role: 'tooltip' } : {};
         const { onNestedTooltipShow, onNestedTooltipHide } = this;
-        return (_jsx(TooltipContext.Provider, { value: { onNestedTooltipShow, onNestedTooltipHide }, children: _jsxs("span", { ...ariaProps, ...restProps, ref: this.containerRef, "data-test": dataTests('ring-tooltip', dataTest), "data-test-title": typeof title === 'string' ? title : undefined, children: [children, _jsx(ThemeProvider, { theme: theme, passToPopups: true, WrapperComponent: props => _jsx("span", { ...props }), children: _jsx(Popup, { trapFocus: false, anchorElement: this.containerNode, hidden: !this.state.showPopup || this.state.showNestedPopup, onCloseAttempt: this.hidePopup, maxHeight: 400, className: classNames(styles.tooltip, { [styles.long]: long }), attached: false, onMouseOut: this.hideIfMovedOutsidePopup, top: 4, dontCloseOnAnchorClick: true, ref: this.popupRef, ...popupProps, children: title }) })] }) }));
+        return (_jsx(TooltipContext.Provider, { value: { onNestedTooltipShow, onNestedTooltipHide }, children: _jsxs("span", { ...ariaProps, ...restProps, ref: this.containerRef, "data-test": dataTests('ring-tooltip', dataTest), "data-test-title": typeof title === 'string' ? title : undefined, children: [children, _jsx(ThemeProvider, { theme: theme, passToPopups: true, WrapperComponent: props => _jsx("span", { ...props }), children: _jsx(Popup, { trapFocus: false, anchorElement: this.containerNode, hidden: !this.state.showPopup || this.state.showNestedPopup, onCloseAttempt: this.hidePopup, maxHeight: 400, attached: false, onMouseOut: this.hideIfMovedOutsidePopup, top: 4, dontCloseOnAnchorClick: true, ref: this.popupRef, ...popupProps, className: classNames(styles.tooltip, { [styles.long]: long }, popupProps?.className), children: title }) })] }) }));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.19",
+  "version": "7.0.21",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -54,7 +54,7 @@
     "figma-connect-publish-local": "dotenv -- npm run figma-connect-publish",
     "figma-connect-unpublish": "npx figma connect unpublish --token=$FIGMA_CODE_CONNECT_TOKEN",
     "figma-connect-unpublish-local": "dotenv -- npm run figma-connect-unpublish",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
+    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
     "build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
     "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
     "serve": "http-server storybook-dist/ -p 9999",
@@ -86,13 +86,13 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@babel/cli": "^7.26.4",
-    "@babel/eslint-parser": "^7.25.9",
+    "@babel/eslint-parser": "^7.26.5",
     "@babel/plugin-syntax-import-assertions": "^7.26.0",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.2.4",
+    "@eslint/compat": "^1.2.5",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.18.0",
     "@figma/code-connect": "^1.2.4",
     "@jetbrains/eslint-config": "^6.0.4",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
@@ -131,34 +131,34 @@
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.5",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/eslint-plugin": "^1.1.22",
+    "@vitest/eslint-plugin": "^1.1.25",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001690",
+    "caniuse-lite": "^1.0.30001692",
     "chai": "^5.1.2",
     "chai-as-promised": "^8.0.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "chromatic": "^11.20.2",
-    "core-js": "^3.39.0",
+    "chromatic": "^11.24.0",
+    "core-js": "^3.40.0",
     "cpy-cli": "^5.0.0",
     "dotenv-cli": "^8.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-webpack": "^0.13.10",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-prettier": "^5.2.2",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^0.11.2",
     "events": "^3.3.0",
-    "glob": "^11.0.0",
+    "glob": "^11.0.1",
     "globals": "^15.14.0",
     "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
@@ -178,18 +178,18 @@
     "react-test-renderer": "^19.0.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.29.1",
+    "rollup": "^4.30.1",
     "rollup-plugin-clear": "^2.0.7",
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
     "storybook": "8.4.7",
-    "stylelint": "^16.12.0",
+    "stylelint": "^16.13.2",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.11",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.19.0",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.20.0",
     "vitest": "^2.1.8",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
@@ -228,7 +228,7 @@
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "9.2.1",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.24.3",
+    "browserslist": "^4.24.4",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -240,12 +240,12 @@
     "es6-error": "^4.1.1",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.6.2",
+    "focus-trap": "^7.6.4",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.49",
-    "postcss-calc": "^10.0.2",
+    "postcss": "^8.5.1",
+    "postcss-calc": "^10.1.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",

package/typings.d.ts

@@ -7,6 +7,11 @@ declare module '*.svg' {
   const source: string;
   export default source;
 }
+
+declare module '*.png' {
+  const source: string;
+  export default source;
+}
 declare module '*.md' {
   const source: string;
   export default source;

package/components/alert-service/alert-service.stories.css

@@ -1,17 +0,0 @@
-@import "../global/variables.css";
-
-@value icon from "../button/button.css";
-
-.customAlert {
-  color: var(--ring-white-text-color);
-  background: var(--ring-main-color);
-}
-
-.closeButton .icon,
-.closeButton:hover .icon {
-  color: var(--ring-white-text-color);
-}
-
-.closeButton:hover {
-  opacity: 0.8;
-}

package/components/collapse/collapse.stories.css

@@ -1,25 +0,0 @@
-.container {
-  width: 400px;
-  padding: 10px;
-}
-
-.border {
-  border: 1px solid var(--ring-line-color);
-  border-radius: 5px;
-}
-
-.loaderWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  min-height: 200px;
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  height: 500px;
-}

package/components/form/form.stories.js

@@ -1,119 +0,0 @@
-import '../input/input-legacy.css';
-import './form.css';
-import '../input-size/input-size.css';
-import '../error-bubble/error-bubble-legacy.css';
-
-export default {
-  title: 'Style-only/Form',
-
-  parameters: {
-    notes: 'Helps create forms with various types of controls.',
-  },
-};
-
-export const basic = () => (
-  <div style={{width: 700}}>
-    <form className="ring-form">
-      <span className="ring-form__title">Form Title</span>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-1" className="ring-form__label">
-          Full-Width Input
-        </label>
-        <div className="ring-form__control">
-          <input className="ring-input" id="ring-form-1" type="text" />
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-2" className="ring-form__label">
-          Medium Input
-        </label>
-        <div className="ring-form__control">
-          <input className="ring-input ring-input-size_m" id="ring-form-2" type="text" />
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-3" className="ring-form__label">
-          Medium Input & Error
-        </label>
-        <div className="ring-form__control">
-          <input className="ring-input ring-input_error ring-input-size_m" id="ring-form-3" type="text" />
-          <div className="ring-error-bubble active">Error bubble</div>
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-4" className="ring-form__label">
-          Long Input
-        </label>
-        <div className="ring-form__control">
-          <input className="ring-input ring-input-size_l" id="ring-form-4" type="text" />
-          <div className="ring-error-bubble active">Error bubble for a long control</div>
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-5" className="ring-form__label">
-          Full-Width Control
-        </label>
-        <div className="ring-form__control">
-          <input className="ring-input" id="ring-form-5" type="text" />
-          <div className="ring-error-bubble active">Error bubble for a full-width control</div>
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-7" className="ring-form__label">
-          Textarea
-        </label>
-        <div className="ring-form__control">
-          <textarea className="ring-input ring-input-size_m" id="ring-form-7" />
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-8" className="ring-form__label">
-          Long Textarea
-        </label>
-        <div className="ring-form__control">
-          <textarea className="ring-input ring-input-size_l" id="ring-form-8" />
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-9" className="ring-form__label">
-          Full-Width Textarea
-        </label>
-        <div className="ring-form__control">
-          <textarea className="ring-input" id="ring-form-9" />
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-11" className="ring-form__label">
-          Input in a small container
-        </label>
-        <div className="ring-form__control ring-form__control_small">
-          <input className="ring-input ring-input-size_m" id="ring-form-11" type="text" />
-        </div>
-      </div>
-
-      <div className="ring-form__group">
-        <label htmlFor="ring-form-12" className="ring-form__label">
-          Textarea in a small container
-        </label>
-        <div className="ring-form__control ring-form__control_small">
-          <textarea className="ring-input ring-input-size_m" id="ring-form-12" />
-        </div>
-      </div>
-
-      <div className="ring-form__footer">
-        <rg-button mode="primary">Save</rg-button> <rg-button>Cancel</rg-button>
-      </div>
-    </form>
-  </div>
-);
-
-basic.storyName = 'Form';

package/components/input-size/input-size.stories.js

@@ -1,92 +0,0 @@
-import '../input/input-legacy.css';
-import '../form/form.css';
-import './input-size.css';
-import '../error-bubble/error-bubble-legacy.css';
-
-export default {
-  title: 'Style-only/Input Sizes',
-};
-
-export const basic = () => (
-  <div>
-    <h3 className="example-block">Inputs</h3>
-    <div className="example-block">
-      <div className="ring-error-bubble-wrapper">
-        <input id="extra-short-input" type="number" className="ring-input ring-input-size_xs" />
-        <label htmlFor="extra-short-input" className="ring-error-bubble active">
-          Extra-short Input
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <input id="short-input" type="number" className="ring-input ring-input-size_s" />
-        <label htmlFor="short-input" className="ring-error-bubble active">
-          Short Input
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <input id="medium-input" type="number" className="ring-input ring-input-size_m" />
-        <label htmlFor="medium-input" className="ring-error-bubble active">
-          Medium Input
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <input id="long-input" type="number" className="ring-input ring-input-size_l" />
-        <label htmlFor="long-input" className="ring-error-bubble active">
-          Long Input
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <input id="full-width-input" type="number" className="ring-input" />
-        <label htmlFor="full-width-input" className="ring-error-bubble active">
-          Full-width Input
-        </label>
-      </div>
-    </div>
-
-    <h3 className="example-block">Textareas</h3>
-    <div className="example-block">
-      <div className="ring-error-bubble-wrapper">
-        <textarea id="extra-short-textarea" className="ring-input ring-input-size_xs" />
-        <label htmlFor="extra-short-textarea" className="ring-error-bubble active">
-          Extra-short Textarea
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <textarea id="short-textarea" className="ring-input ring-input-size_s" />
-        <label htmlFor="short-textarea" className="ring-error-bubble active">
-          Short Textarea
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <textarea id="medium-textarea" className="ring-input ring-input-size_m" />
-        <label htmlFor="medium-textarea" className="ring-error-bubble active">
-          Medium Textarea
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <textarea id="long-textarea" className="ring-input ring-input-size_l" />
-        <label htmlFor="long-textarea" className="ring-error-bubble active">
-          Long Textarea
-        </label>
-      </div>
-      <div className="ring-error-bubble-wrapper">
-        <textarea id="full-width-textarea" className="ring-input" />
-        <label htmlFor="full-width-textarea" className="ring-error-bubble active">
-          Full-width Textarea
-        </label>
-      </div>
-    </div>
-  </div>
-);
-
-basic.storyName = 'Input Sizes';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .example-block {
-    margin: 16px;
-    max-width: 600px;
-  }
-</style>`,
-};

package/components/list/list.stories.css

@@ -1,3 +0,0 @@
-.hover.hover {
-  background-color: var(--ring-removed-background-color);
-}

package/components/table/table.stories.json

@@ -1,74 +0,0 @@
-[
-  {
-    "id": 1,
-    "country": "Russia",
-    "city": "Moscow",
-    "url": "https://en.wikipedia.org/wiki/Russia",
-    "children": [
-      {"id": 11, "country": "Tatarstan", "city": "Kazan", "url": "https://en.wikipedia.org/wiki/Tatarstan"},
-      {"id": 12, "country": "Chechnya", "city": "Grosniy", "url": "https://en.wikipedia.org/wiki/Chechnya"}
-    ]
-  },
-  {"id": 2, "country": "France", "city": "Paris", "url": "https://en.wikipedia.org/wiki/France"},
-  {"id": 3, "country": "Sweden", "city": "Stockholm", "url": "https://en.wikipedia.org/wiki/Sweden"},
-  {
-    "id": 4,
-    "country": "USA",
-    "city": "NYC",
-    "url": "https://en.wikipedia.org/wiki/USA",
-    "children": [
-      {"id": 41, "country": "California", "city": "Los Angeles", "url": "https://en.wikipedia.org/wiki/California"},
-      {
-        "id": 42,
-        "country": "New York",
-        "city": "NYC",
-        "url": "https://en.wikipedia.org/wiki/New York",
-        "children": [
-          {
-            "id": 421,
-            "country": "NYC",
-            "city": "NYC",
-            "url": "https://en.wikipedia.org/wiki/NYC",
-            "children": [
-              {"id": 4211, "country": "Manhattan", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Manhattan"},
-              {"id": 4212, "country": "Brooklyn", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Brooklyn"},
-              {"id": 4213, "country": "Queens", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Queens"}
-            ]
-          }
-        ]
-      },
-      {"id": 43, "country": "Texas", "city": "Houston", "url": "https://en.wikipedia.org/wiki/Texas"}
-    ]
-  },
-  {"id": 5, "country": "South Africa", "city": "Johannesburg", "url": "https://en.wikipedia.org/wiki/South Africa"},
-  {"id": 6, "country": "Finland", "city": "Helsinki", "url": "https://en.wikipedia.org/wiki/Finland"},
-  {"id": 7, "country": "Latvia", "city": "Riga", "url": "https://en.wikipedia.org/wiki/Latvia"},
-  {"id": 8, "country": "Norway", "city": "Oslo", "url": "https://en.wikipedia.org/wiki/Norway"},
-  {"id": 9, "country": "Brazil", "city": "Rio", "url": "https://en.wikipedia.org/wiki/Brazil"},
-  {"id": 11, "country": "China", "city": "Beijing", "url": "https://en.wikipedia.org/wiki/China"},
-  {"id": 12, "country": "Germany", "city": "Berlin", "url": "https://en.wikipedia.org/wiki/Germany"},
-  {"id": 13, "country": "Luxembourg", "city": "Luxembourg", "url": "https://en.wikipedia.org/wiki/Luxembourg"},
-  {
-    "id": 14,
-    "country": "Belgium",
-    "city": "Brussels",
-    "url": "http://statbel.fgov.be/fr/statistiques/chiffres/population/structure/natact/beletr/"
-  },
-  {"id": 15, "country": "Italy", "city": "Rome", "url": "https://en.wikipedia.org/wiki/Italy"},
-  {"id": 16, "country": "Spain", "city": "Madrid", "url": "https://en.wikipedia.org/wiki/Spain"},
-  {"id": 17, "country": "Portugal", "city": "Lisbon", "url": "https://en.wikipedia.org/wiki/Portugal"},
-  {"id": 18, "country": "Greece", "city": "Athens", "url": "https://en.wikipedia.org/wiki/Greece"},
-  {"id": 19, "country": "Israel", "city": "Tel Aviv", "url": "https://en.wikipedia.org/wiki/Israel"},
-  {"id": 20, "country": "Poland", "city": "Warsaw", "url": "https://en.wikipedia.org/wiki/Poland"},
-  {"id": 21, "country": "Bulgaria", "city": "Sofia", "url": "https://en.wikipedia.org/wiki/Bulgaria"},
-  {"id": 22, "country": "Japan", "city": "Tokio", "url": "https://en.wikipedia.org/wiki/Japan"},
-  {"id": 23, "country": "Thailand", "city": "Bangkok", "url": "https://en.wikipedia.org/wiki/Thailand"},
-  {"id": 24, "country": "Vietnam", "city": "Hanoi", "url": "https://en.wikipedia.org/wiki/Vietnam"},
-  {"id": 25, "country": "Iraq", "city": "Baghdad", "url": "https://en.wikipedia.org/wiki/Iraq"},
-  {"id": 26, "country": "Iran", "city": "Tehran", "url": "https://en.wikipedia.org/wiki/Iran"},
-  {"id": 27, "country": "Syria", "city": "Damask", "url": "https://en.wikipedia.org/wiki/Syria"},
-  {"id": 28, "country": "Turkey", "city": "Ankara", "url": "https://en.wikipedia.org/wiki/Turkey"},
-  {"id": 29, "country": "Australia", "city": "Sydney", "url": "https://en.wikipedia.org/wiki/Australia"},
-  {"id": 30, "country": "UK", "city": "London", "url": "https://en.wikipedia.org/wiki/UK"},
-  {"id": 31, "country": "India", "city": "Deli", "url": "https://en.wikipedia.org/wiki/India"}
-]