@jetbrains/ring-ui 7.0.74 → 7.0.76

package/babel.config.js

@@ -9,6 +9,7 @@ module.exports = function config(api) {
         'babel-plugin-react-compiler',
         {
           target: '18', // should be the minimal supported version from peerDependencies
+          panicThreshold: 'all_errors',
         },
       ],
       [

package/components/banner/{banner.jsx → banner.js}

@@ -10,9 +10,10 @@ import Link from '../link/link';
 import Tooltip from '../tooltip/tooltip';
 import styles from './banner.css';
 export function Banner(props) {
-    const { title, children, mode = 'info', withIcon = false, inline = false, onClose, closeButtonTitle, className, ['data-test']: dataTest, translations = {
+    const { title, children, mode = 'info', withIcon = false, inline = false, onClose, closeButtonTitle, className, translations = {
         close: 'Close',
     }, } = props;
+    const dataTest = props['data-test'];
     let icon = infoIcon;
     if (mode === 'error') {
         icon = exceptionIcon;

package/components/content-layout/content-layout.d.ts

@@ -5,6 +5,7 @@ export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
 }
 /**
  * @name Content Layout
+ * @deprecated Will be removed in Ring UI 8.0.
  */
 export default class ContentLayout extends Component<ContentLayoutProps> {
     static defaultProps: {

package/components/content-layout/{content-layout.jsx → content-layout.js}

@@ -4,6 +4,7 @@ import Sidebar from './sidebar';
 import styles from './content-layout.css';
 /**
  * @name Content Layout
+ * @deprecated Will be removed in Ring UI 8.0.
  */
 export default class ContentLayout extends Component {
     static defaultProps = {

package/components/content-layout/sidebar.d.ts

@@ -6,6 +6,10 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     fixedClassName?: string | null | undefined;
     contentNode?: HTMLElement | null | undefined;
 }
+/**
+ * @name Sidebar
+ * @deprecated Will be removed in Ring UI 8.0.
+ */
 export default class Sidebar extends Component<SidebarProps> {
     state: {
         topIsOutside: boolean;

package/components/content-layout/{sidebar.jsx → sidebar.js}

@@ -4,6 +4,10 @@ import { Waypoint } from 'react-waypoint';
 import styles from './content-layout.css';
 const ABOVE = 'above';
 const INSIDE = 'inside';
+/**
+ * @name Sidebar
+ * @deprecated Will be removed in Ring UI 8.0.
+ */
 export default class Sidebar extends Component {
     state = {
         topIsOutside: true,

package/components/date-picker/consts.d.ts

@@ -59,7 +59,7 @@ export interface DatePopupState {
     active: Field;
     text: string | null;
     hoverDate: Date | null;
-    scrollDate: number | null;
+    scrollDate: number | Date | null;
 }
 export interface DatePopupBaseProps {
     date?: Date | number | string | null | undefined;

package/components/date-picker/{date-popup.jsx → date-popup.js}

@@ -35,13 +35,14 @@ export default class DatePopup extends Component {
         if (!range) {
             const parsedDate = this.parse(props.date, 'date');
             const active = withTime && parsedDate && !props.time ? 'time' : 'date';
-            this.state = { ...defaultState, active };
-        }
-        else if (props.from && !props.to) {
-            this.state = { ...defaultState, active: 'to' };
+            this.state = { ...defaultState, active, scrollDate: parsedDate };
         }
         else {
-            this.state = { ...defaultState, active: 'from' };
+            this.state = {
+                ...defaultState,
+                active: props.from && !props.to ? 'to' : 'from',
+                scrollDate: this.parse(props.from, 'from'),
+            };
         }
     }
     componentDidMount() {
@@ -245,7 +246,7 @@ export default class DatePopup extends Component {
     };
     // eslint-disable-next-line complexity
     render() {
-        const { range, withTime, locale } = this.props;
+        const { range, locale } = this.props;
         const { from, to, date, time, ...restProps } = this.props;
         const parsedDate = this.parse(this.props.date, 'date');
         const parsedTo = this.parse(this.props.to, 'to');
@@ -284,9 +285,7 @@ export default class DatePopup extends Component {
                     break;
             }
         }
-        const scrollDate = withTime && !range
-            ? this.state.scrollDate || dates.date || new Date()
-            : this.state.scrollDate || dates[this.state.active] || new Date();
+        const scrollDate = this.state.scrollDate || new Date();
         const calendarProps = {
             ...restProps,
             ...dates,

package/components/grid/grid.d.ts

@@ -1,6 +1,7 @@
 import { Component, type HTMLAttributes } from 'react';
 /**
  * @name Grid
+ * @deprecated Will be removed in Ring UI 8.0. Use flexbox or another layout library instead.
  */
 export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
     render(): import("react").JSX.Element;

package/components/grid/{grid.jsx → grid.js}

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import styles from './grid.css';
 /**
  * @name Grid
+ * @deprecated Will be removed in Ring UI 8.0. Use flexbox or another layout library instead.
  */
 export class Grid extends Component {
     render() {

package/components/popup/popup.d.ts

@@ -94,6 +94,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     parent?: HTMLElement | null;
     container?: HTMLElement | null;
     ringPopupTarget?: string | Element;
+    clickStartedInsidePopup: boolean;
     shouldUseShortcuts(): boolean;
     listeners: Listeners;
     redrawScheduler: (cb: () => void) => void;
@@ -136,8 +137,9 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     isVisible(): boolean;
     _onCloseAttempt(evt?: Event | SyntheticEvent, isEsc?: boolean): void;
     private _onEscPress;
+    private _onDocumentPointerDown;
     /**
-     * @param {jQuery.Event} evt
+     * @param {MouseEvent} evt
      * @private
      */
     private _onDocumentClick;

package/components/popup/{popup.jsx → popup.js}

@@ -41,7 +41,7 @@ const stop = (event) => {
         event.stopPropagation();
     }
 };
-export const getPopupContainer = (target) => (typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target);
+export const getPopupContainer = (target) => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target;
 /**
  * @constructor
  * @name Popup
@@ -100,6 +100,7 @@ export default class Popup extends PureComponent {
     parent;
     container;
     ringPopupTarget;
+    clickStartedInsidePopup = false;
     shouldUseShortcuts() {
         const { shortcuts, hidden } = this.props;
         return shortcuts && !hidden;
@@ -239,7 +240,8 @@ export default class Popup extends PureComponent {
                         el = el.parentElement;
                     }
                 }
-                this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
+                this.listeners.add(document, 'pointerdown', this._onDocumentPointerDown, true);
+                this.listeners.add(document, 'click', this._onDocumentClick, true);
             }, 0);
             return;
         }
@@ -263,12 +265,20 @@ export default class Popup extends PureComponent {
         this.props.onEscPress(evt);
         this._onCloseAttempt(evt, true);
     };
+    _onDocumentPointerDown = (evt) => {
+        this.clickStartedInsidePopup = !!(evt.target instanceof Node &&
+            this.container &&
+            this.container.contains(evt.target));
+    };
     /**
-     * @param {jQuery.Event} evt
+     * @param {MouseEvent} evt
      * @private
      */
     _onDocumentClick = (evt) => {
+        const clickStartedInsidePopup = this.clickStartedInsidePopup;
+        this.clickStartedInsidePopup = false;
         if ((this.container && evt.target instanceof Node && this.container.contains(evt.target)) ||
+            clickStartedInsidePopup ||
             !this._listenersEnabled ||
             (this.props.dontCloseOnAnchorClick && evt.target instanceof Node && this._getAnchor()?.contains(evt.target)) ||
             // ignore clicks in shadow DOM, e.g., Grammarly suggestions

package/components/tabs/{collapsible-tab.jsx → collapsible-tab.js}

@@ -8,12 +8,9 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, c
         return child;
     }
     const { title, titleProps, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
-    const titleClasses = classNames(styles.title, className, {
+    const titleClasses = classNames(styles.title, className, selected && activeClassName, collapsed && collapsedClassName, collapsed && selected && collapsedActiveClassName, {
         [styles.selected]: selected,
         [styles.collapsed]: collapsed,
-        [activeClassName ?? '']: selected,
-        [collapsedClassName ?? '']: collapsed,
-        [collapsedActiveClassName ?? '']: collapsed && selected,
     });
     return (<TabLink title={title} isSelected={selected} active href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });

package/components/upload/{upload.jsx → upload.js}

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import attachmentIcon from '@jetbrains/icons/attachment';
 import Icon from '../icon';
 import styles from './upload.css';
-export const Upload = forwardRef(function Upload({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = () => <Icon className={styles.attachmentIcon} glyph={attachmentIcon}/>, accept, disabled, }, ref) {
+const defaultRenderIcon = () => <Icon className={styles.attachmentIcon} glyph={attachmentIcon}/>;
+export const Upload = forwardRef(function Upload({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = defaultRenderIcon, accept, disabled, }, ref) {
     const fileInputRef = useRef(null);
     const [dragOver, setDragOver] = useState(false);
     useImperativeHandle(ref, () => ({ openFilePicker: () => fileInputRef.current?.click() }), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.74",
+  "version": "7.0.76",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -63,7 +63,7 @@
     "postpublish": "pinst --enable",
     "postrelease-ci": "git push --follow-tags",
     "prea11y-audit": "playwright install",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
+    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.figma.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "prepublishOnly": "pinst --disable",
     "prerelease-built-ci": "node scripts/prepare-built-package.js",
@@ -93,31 +93,30 @@
     "@babel/eslint-parser": "^7.28.5",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.4.0",
+    "@eslint/compat": "^1.4.1",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.38.0",
-    "@figma/code-connect": "^1.3.7",
+    "@eslint/js": "^9.39.1",
+    "@figma/code-connect": "^1.3.8",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
-    "@primer/octicons": "^19.19.0",
+    "@primer/octicons": "^19.20.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "9.1.15",
-    "@storybook/addon-docs": "^9.1.15",
-    "@storybook/addon-themes": "^9.1.15",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@storybook/addon-a11y": "10.0.6",
+    "@storybook/addon-docs": "^10.0.6",
+    "@storybook/addon-themes": "^10.0.6",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "9.1.15",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/react-webpack5": "10.0.6",
+    "@storybook/test-runner": "^0.24.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
-    "@types/eslint__js": "^9.14.0",
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
@@ -125,16 +124,15 @@
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/eslint-plugin": "^1.3.23",
     "acorn": "^8.15.0",
-    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001751",
+    "caniuse-lite": "^1.0.30001754",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
     "core-js": "^3.46.0",
     "cpy-cli": "^6.0.0",
-    "dotenv-cli": "^10.0.0",
-    "eslint": "^9.38.0",
+    "dotenv-cli": "^11.0.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-import-resolver-typescript": "^4.4.4",
@@ -144,11 +142,11 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^9.1.15",
+    "eslint-plugin-storybook": "^10.0.6",
     "eslint-plugin-unicorn": "^62.0.0",
     "events": "^3.3.0",
     "glob": "^11.0.3",
-    "globals": "^16.4.0",
+    "globals": "^16.5.0",
     "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -165,24 +163,22 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "regenerator-runtime": "^0.14.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.52.5",
+    "rimraf": "^6.1.0",
+    "rollup": "^4.53.1",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "9.1.15",
+    "storybook": "10.0.6",
     "stylelint": "^16.25.0",
     "stylelint-config-sass-guidelines": "^12.1.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.2",
+    "typescript-eslint": "^8.46.3",
     "vitest": "^3.2.4",
     "vitest-teamcity-reporter": "^0.3.1",
-    "wallaby-webpack": "^3.9.16",
     "webpack": "^5.102.1",
-    "webpack-cli": "^6.0.1",
-    "xmlappend": "^1.0.4"
+    "webpack-cli": "^6.0.1"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",
@@ -214,6 +210,7 @@
     "@types/react-virtualized": "9.22.3",
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "10.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
     "browserslist": "^4.27.0",
     "change-case": "^4.1.1",
@@ -226,7 +223,7 @@
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.6.5",
+    "focus-trap": "^7.6.6",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",

package/components/avatar/avatar.figma.js

@@ -1,45 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=5990-522
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-
-const round = instance.getBoolean('Round');
-const size = parseInt(instance.getString('Size'), 10);
-const content = instance.getString('Content');
-
-const props = [];
-const DEFAULT_SIZE = 20;
-const isDefaultSize = size === DEFAULT_SIZE;
-const imports = [`import Avatar${isDefaultSize ? '' : ', {Size}'} from '@jetbrains/ring-ui/components/avatar/avatar'`];
-if (!isDefaultSize) {
-  props.push(`size={Size.Size${size}}`);
-}
-switch (content) {
-  case 'color/image':
-    props.push('url="avatar.png"');
-    break;
-  case 'name':
-    props.push('username="Samuel Morse"');
-    break;
-  case 'label':
-    props.push(`info="${instance.findText('Content').textContent}"`);
-    break;
-  case 'icon':
-    imports.push(
-      "import Icon from '@jetbrains/ring-ui/components/icon/icon'",
-      "import warningIcon from '@jetbrains/icons/warning.svg'",
-    );
-    props.push('info={<Icon glyph={warningIcon} />}');
-    break;
-  default:
-}
-if (round) {
-  props.push('round');
-}
-
-export default {
-  id: 'avatar',
-  example: figma.code`${imports.join('\n')}
-
-<Avatar ${props.map(prop => `${prop} `).join('')}/>`,
-};

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

@@ -1,33 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=5990-752
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const sizeString = instance.getString('Size');
-const [sizeSubstring] = sizeString.match(/\d+/) ?? [];
-const size = parseInt(sizeSubstring, 10);
-const children = instance.findConnectedInstances(() => true);
-
-const imports = ["import AvatarStack from '@jetbrains/ring-ui/components/avatar-stack/avatar-stack'"];
-const props = [];
-
-const DEFAULT_SIZE = 20;
-const isDefaultSize = size === DEFAULT_SIZE;
-if (!isDefaultSize) {
-  props.push(`size={Size.Size${size}}`);
-}
-
-const renderedChildren = children.map(child => {
-  const {example} = child.executeTemplate();
-  const [childImports, code] = example[0].code.split('\n\n');
-  return {imports: childImports, code};
-});
-
-export default {
-  id: 'avatar-stack',
-  example: figma.code`${imports.join('\n')}
-${renderedChildren[0].imports}
-
-<AvatarStack ${props.map(prop => `${prop} `).join('')}>
-  ${renderedChildren.map(({code}) => code).join('\n  ')}
-</AvatarStack>`,
-};

package/components/breadcrumbs/breadcrumbs.figma.js

@@ -1,31 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=460%3A2730
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-
-const imports = [
-  "import Breadcrumbs from '@jetbrains/ring-ui/components/breadcrumbs/breadcrumbs'",
-  "import Link from '@jetbrains/ring-ui/components/link/link'",
-];
-
-const children = instance
-  .findLayers(() => true)
-  .map(layer => layer.textContent)
-  .filter(text => text !== '/');
-
-export default {
-  id: 'breadcrumbs',
-  example: figma.code`${imports.join('\n')}
-
-<Breadcrumbs>
-  ${children
-    .map((text, index) => {
-      const props = [`href="/page${index + 1}"`];
-      if (index === children.length - 1) {
-        props.push('active');
-      }
-      return `<Link ${props.map(prop => `${prop} `).join('')}>${text}</Link>`;
-    })
-    .join('\n  ')}
-</Breadcrumbs>`,
-};

package/components/button/button.figma.js

@@ -1,95 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954-528
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-
-const size = instance.getString('Size');
-const type = instance.getString('Type');
-const state = instance.getString('State');
-const variant = instance.getString('Variant');
-
-const imports = ["import Button from '@jetbrains/ring-ui/components/button/button'"];
-const props = [];
-const DEFAULT_SIZE = 'M';
-const isDefaultSize = size === DEFAULT_SIZE;
-
-if (!isDefaultSize) {
-  imports.push("import {ControlsHeight} from '@jetbrains/ring-ui/components/global/controls-height'");
-  props.push(`height={ControlsHeight.${size}}`);
-}
-
-switch (variant) {
-  case 'Red outlined':
-    props.push('danger');
-    break;
-  case 'Main':
-    props.push('primary');
-    break;
-  case 'Green':
-    props.push('success');
-    break;
-  case 'Red solid':
-    props.push('error');
-    break;
-  case 'Gray':
-    props.push('secondary');
-    break;
-  case 'Ghost':
-    props.push('ghost');
-    break;
-  case 'Text':
-    props.push('inline');
-    break;
-  default:
-}
-
-const children = instance.findLayers(() => true)[0].findText('Button').textContent;
-const use12pxIcon = size === 'S' && variant !== 'Text';
-let useButtonGroup = false;
-switch (type) {
-  case 'R-Icon-Label':
-    props.push('dropdown');
-    break;
-  case 'L-Icon-Label':
-    imports.push(`import downloadIcon from '@jetbrains/icons/download${use12pxIcon ? '-12px' : ''}'`);
-    props.push('icon={downloadIcon}');
-    break;
-  case 'Icon':
-    imports.push(`import addIcon from '@jetbrains/icons/add${use12pxIcon ? '-12px' : ''}'`);
-    props.push('icon={addIcon}');
-    break;
-  case 'Split':
-    imports.push("import ButtonGroup from '@jetbrains/ring-ui/components/button-group/button-group'");
-    imports.push(`import chevronDownIcon from '@jetbrains/icons/chevron-down${use12pxIcon ? '-12px' : ''}'`);
-    useButtonGroup = true;
-    break;
-  default:
-}
-
-switch (state) {
-  case 'Disabled':
-    props.push('disabled');
-    break;
-  default:
-}
-
-const joinedProps = props.map(prop => `${prop} `).join('');
-// prettier-ignore
-const button = children ?
-`<Button ${joinedProps}>
-  ${children}
-</Button>` : `<Button ${joinedProps}/>`;
-
-export default {
-  id: 'button',
-  example: figma.code`${imports.join('\n')}
-
-${
-  // prettier-ignore
-  useButtonGroup ?
-      `<ButtonGroup>
-  ${button}
-  <Button ${joinedProps} icon={chevronDownIcon} />
-</ButtonGroup>` : button
-}`,
-};

package/components/checkbox/checkbox-group.figma.js

@@ -1,31 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=226-2666
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const labelType = instance.getString('Label');
-const children = instance.findConnectedInstances(() => true);
-const label = instance.findText('Group description').textContent;
-
-const isFormLabel = labelType === 'form';
-const imports = [
-  `import ControlLabel${isFormLabel ? ', {LabelType}' : ''} from '@jetbrains/ring-ui/components/control-label/control-label'`,
-];
-const labelProps = [];
-if (isFormLabel) {
-  labelProps.push('type={LabelType.FORM}');
-}
-
-const renderedChildren = children.map(child => {
-  const {example} = child.executeTemplate();
-  const [childImports, code] = example[0].code.split('\n\n');
-  return {imports: childImports, code};
-});
-
-export default {
-  id: 'checkbox-group',
-  example: figma.code`${imports.join('\n')}
-${renderedChildren[0].imports}
-
-<ControlLabel ${labelProps.map(prop => `${prop} `).join('')}>${label}</ControlLabel>
-${renderedChildren.map(({code}) => code).join('\n<br />\n')}`,
-};

package/components/checkbox/checkbox.figma.js

@@ -1,38 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=224%3A1943
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const selected = instance.getString('Selected');
-const hasLabel = instance.getBoolean('Label');
-const label = instance.findText('Label').textContent;
-const hasHelpText = instance.getBoolean('Help Text');
-const helpText = instance.findText('Description').textContent;
-const state = instance.getString('State');
-
-const imports = ["import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox'"];
-const props = [];
-switch (selected) {
-  case 'selected':
-    props.push('defaultChecked');
-    break;
-  case 'intermediate':
-    props.push('indeterminate', 'defaultChecked');
-    break;
-  default:
-}
-if (hasLabel) {
-  props.push(`label="${label}"`);
-}
-if (hasHelpText) {
-  props.push(`help="${helpText}"`);
-}
-if (state === 'Disabled') {
-  props.push('disabled');
-}
-
-export default {
-  id: 'checkbox',
-  example: figma.code`${imports.join('\n')}
-
-<Checkbox ${props.map(prop => `${prop} `).join('')}/>`,
-};

package/components/error-bubble/error-bubble.figma.js

@@ -1,15 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=1228-2869
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const error = instance.findLayers(() => true)[0].textContent;
-
-const imports = ["import ErrorBubble from '@jetbrains/ring-ui/components/error-bubble/error-bubble'"];
-const props = [`error={\`${error}\``];
-
-export default {
-  id: 'error-bubble',
-  example: figma.code`${imports.join('\n')}
-
-<ErrorBubble ${props.map(prop => `${prop} `).join('')}/>`,
-};