@diplodoc/components 3.0.0-alpha-1

package/build/esm/components/Controls/ControlsLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Controls/ControlsLayout.tsx"],
+  "sourcesContent": ["import React, {PropsWithChildren, createContext} from 'react';\n\nimport block from 'bem-cn-lite';\n\nimport {PopperPosition} from '../../hooks';\nimport {ControlSizes} from '../../models';\n\ntype ControlsLayoutProps = {\n    isVerticalView?: boolean;\n    controlClassName?: string;\n    controlSize?: ControlSizes;\n    popupPosition?: PopperPosition;\n};\n\nexport const ControlsLayoutContext = createContext<ControlsLayoutProps>({\n    controlClassName: '',\n    isVerticalView: false,\n    controlSize: ControlSizes.M,\n    popupPosition: PopperPosition.BOTTOM_END,\n});\n\nconst b = block('dc-controls');\n\nexport const ControlsLayout: React.FC<PropsWithChildren<ControlsLayoutProps>> = ({\n    isVerticalView,\n    controlClassName,\n    controlSize,\n    popupPosition,\n    children,\n}) => {\n    return (\n        <ControlsLayoutContext.Provider\n            value={{\n                controlClassName: controlClassName || b('control'),\n                isVerticalView: isVerticalView,\n                controlSize: controlSize,\n                popupPosition: popupPosition,\n            }}\n        >\n            {children}\n        </ControlsLayoutContext.Provider>\n    );\n};\n"],
+  "mappings": ";AAAA,OAAO,SAA2B,qBAAoB;AAEtD,OAAO,WAAW;AAElB,SAAQ,sBAAqB;AAC7B,SAAQ,oBAAmB;AASpB,IAAM,wBAAwB,cAAmC;AAAA,EACpE,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,aAAa,aAAa;AAAA,EAC1B,eAAe,eAAe;AAClC,CAAC;AAED,IAAM,IAAI,MAAM,aAAa;AAEtB,IAAM,iBAAmE,CAAC;AAAA,EAC7E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,SACI;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACG,OAAO;AAAA,QACH,kBAAkB,oBAAoB,EAAE,SAAS;AAAA,QACjD;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA;AAAA,IAEC;AAAA,EACL;AAER;",
+  "names": []
+}

package/build/esm/components/Controls/index.js

@@ -0,0 +1,10 @@
+// src/components/Controls/index.ts
+export * from "./Controls";
+import { default as default2 } from "./Controls";
+export * from "./single-controls";
+import { ControlsLayout } from "./ControlsLayout";
+export {
+  default2 as Controls,
+  ControlsLayout
+};
+//# sourceMappingURL=index.js.map

package/build/esm/components/Controls/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Controls/index.ts"],
+  "sourcesContent": ["export * from './Controls';\nexport {default as Controls} from './Controls';\nexport * from './single-controls';\nexport {ControlsLayout} from './ControlsLayout';\n"],
+  "mappings": ";AAAA,cAAc;AACd,SAAmB,WAAXA,gBAA0B;AAClC,cAAc;AACd,SAAQ,sBAAqB;",
+  "names": ["default"]
+}

package/build/esm/components/Controls/single-controls/DividerControl/DividerControl.css

@@ -0,0 +1,21 @@
+/* src/components/Controls/single-controls/DividerControl/DividerControl.scss */
+.dc-divider-control {
+  background: var(--g-color-line-generic);
+}
+.dc-divider-control:first-child {
+  display: none;
+}
+.dc-divider-control:not(.dc-divider-control_vertical) {
+  width: 100%;
+  height: 1px;
+}
+.dc-divider-control_vertical {
+  width: 1px;
+}
+.dc-divider-control.dc-divider-control_vertical.dc-divider-control_size_m {
+  height: 16px;
+}
+.dc-divider-control.dc-divider-control_vertical.dc-divider-control_size_l {
+  height: 24px;
+}
+/*# sourceMappingURL=DividerControl.css.map */

package/build/esm/components/Controls/single-controls/DividerControl/DividerControl.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/Controls/single-controls/DividerControl/Users/3y3k0/doctools/docs-components/src/components/Controls/single-controls/DividerControl/DividerControl.scss", "../../../../../../src/components/Controls/single-controls/DividerControl/%3Cinput%20css%200UtqKW%3E"],
+  "sourcesContent": [".dc-divider-control {\n    background: var(--g-color-line-generic);\n\n    &:first-child {\n        display: none;\n    }\n\n    &:not(&_vertical) {\n        width: 100%;\n        height: 1px;\n    }\n\n    &_vertical {\n        width: 1px;\n    }\n\n    &#{&}_vertical#{&}_size_m {\n        height: 16px;\n    }\n    &#{&}_vertical#{&}_size_l {\n        height: 24px;\n    }\n}\n", ".dc-divider-control {\n  background: var(--g-color-line-generic);\n}\n.dc-divider-control:first-child {\n  display: none;\n}\n.dc-divider-control:not(.dc-divider-control_vertical) {\n  width: 100%;\n  height: 1px;\n}\n.dc-divider-control_vertical {\n  width: 1px;\n}\n.dc-divider-control.dc-divider-control_vertical.dc-divider-control_size_m {\n  height: 16px;\n}\n.dc-divider-control.dc-divider-control_vertical.dc-divider-control_size_l {\n  height: 24px;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzLzN5M2swL2RvY3Rvb2xzL2RvY3MtY29tcG9uZW50cy9zcmMvY29tcG9uZW50cy9Db250cm9scy9zaW5nbGUtY29udHJvbHMvRGl2aWRlckNvbnRyb2wiLCJzb3VyY2VzIjpbIkRpdmlkZXJDb250cm9sLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDSTs7QUFFQTtFQUNJOztBQUdKO0VBQ0k7RUFDQTs7QUFHSjtFQUNJOztBQUdKO0VBQ0k7O0FBRUo7RUFDSSIsInNvdXJjZXNDb250ZW50IjpbIi5kYy1kaXZpZGVyLWNvbnRyb2wge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWctY29sb3ItbGluZS1nZW5lcmljKTtcblxuICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cblxuICAgICY6bm90KCZfdmVydGljYWwpIHtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogMXB4O1xuICAgIH1cblxuICAgICZfdmVydGljYWwge1xuICAgICAgICB3aWR0aDogMXB4O1xuICAgIH1cblxuICAgICYjeyZ9X3ZlcnRpY2FsI3smfV9zaXplX20ge1xuICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgfVxuICAgICYjeyZ9X3ZlcnRpY2FsI3smfV9zaXplX2wge1xuICAgICAgICBoZWlnaHQ6IDI0cHg7XG4gICAgfVxufVxuIl19 */"],
+  "mappings": ";AAAA,CAAA;AACI,cAAA,IAAA;ACCJ;ADCI,CAHJ,kBAGI;AACI,WAAA;ACCR;ADEI,CAPJ,kBAOI,KAAA,CAAA;AACI,SAAA;AACA,UAAA;ACAR;ADGI,CALA;AAMI,SAAA;ACDR;ADII,CAhBJ,kBAgBI,CATA,2BASA,CAAA;AACI,UAAA;ACFR;ADII,CAnBJ,kBAmBI,CAZA,2BAYA,CAAA;AACI,UAAA;ACFR;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/DividerControl/DividerControl.js

@@ -0,0 +1,15 @@
+// src/components/Controls/single-controls/DividerControl/DividerControl.tsx
+import React, { useContext } from "react";
+import cn from "bem-cn-lite";
+import { ControlsLayoutContext } from "../../ControlsLayout";
+import "./DividerControl.css";
+var b = cn("dc-divider-control");
+var DividerControl = ({ className }) => {
+  const { isVerticalView, controlSize } = useContext(ControlsLayoutContext);
+  return /* @__PURE__ */ React.createElement("div", { className: b({ size: controlSize, vertical: !isVerticalView }, className) });
+};
+var DividerControl_default = DividerControl;
+export {
+  DividerControl_default as default
+};
+//# sourceMappingURL=DividerControl.js.map

package/build/esm/components/Controls/single-controls/DividerControl/DividerControl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/Controls/single-controls/DividerControl/DividerControl.tsx"],
+  "sourcesContent": ["import React, {useContext} from 'react';\n\nimport cn from 'bem-cn-lite';\n\nimport {ControlsLayoutContext} from '../../ControlsLayout';\n\nimport './DividerControl.scss';\n\nconst b = cn('dc-divider-control');\n\ninterface DividerControlProps {\n    className?: string;\n}\n\nconst DividerControl: React.FC<DividerControlProps> = ({className}) => {\n    const {isVerticalView, controlSize} = useContext(ControlsLayoutContext);\n\n    return <div className={b({size: controlSize, vertical: !isVerticalView}, className)} />;\n};\n\nexport default DividerControl;\n"],
+  "mappings": ";AAAA,OAAO,SAAQ,kBAAiB;AAEhC,OAAO,QAAQ;AAEf,SAAQ,6BAA4B;AAEpC,OAAO;AAEP,IAAM,IAAI,GAAG,oBAAoB;AAMjC,IAAM,iBAAgD,CAAC,EAAC,UAAS,MAAM;AACnE,QAAM,EAAC,gBAAgB,YAAW,IAAI,WAAW,qBAAqB;AAEtE,SAAO,oCAAC,SAAI,WAAW,EAAE,EAAC,MAAM,aAAa,UAAU,CAAC,eAAc,GAAG,SAAS,GAAG;AACzF;AAEA,IAAO,yBAAQ;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/EditControl.js

@@ -0,0 +1,42 @@
+// src/components/Controls/single-controls/EditControl.tsx
+import React, { memo, useContext } from "react";
+import { Button, Icon } from "@gravity-ui/uikit";
+import block from "bem-cn-lite";
+import { useTranslation } from "../../../hooks";
+import { Control } from "../../Control";
+import { ControlsLayoutContext } from "../ControlsLayout";
+import EditIcon from "@gravity-ui/icons/svgs/pencil.svg";
+var b = block("dc-controls");
+var EditControl = memo(({ vcsUrl, vcsType = "github", view, className }) => {
+  const { t } = useTranslation("controls");
+  const { controlClassName, controlSize, isVerticalView, popupPosition } = useContext(ControlsLayoutContext);
+  if (view === "wide") {
+    return /* @__PURE__ */ React.createElement("a", { href: vcsUrl, target: "_blank", rel: "noreferrer noopener" }, /* @__PURE__ */ React.createElement(Button, { className: b("control", { view }, className), view: "raised" }, /* @__PURE__ */ React.createElement(Button.Icon, null, /* @__PURE__ */ React.createElement(Icon, { data: EditIcon, size: 14 })), /* @__PURE__ */ React.createElement("span", { className: b("edit-text") }, t("edit-text"))));
+  }
+  return /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: vcsUrl,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      className: b("control", className)
+    },
+    /* @__PURE__ */ React.createElement(
+      Control,
+      {
+        size: controlSize,
+        className: controlClassName,
+        isVerticalView,
+        tooltipText: t(`edit-text-${vcsType}`),
+        icon: EditIcon,
+        popupPosition
+      }
+    )
+  );
+});
+EditControl.displayName = "EditControl";
+var EditControl_default = EditControl;
+export {
+  EditControl_default as default
+};
+//# sourceMappingURL=EditControl.js.map

package/build/esm/components/Controls/single-controls/EditControl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/Controls/single-controls/EditControl.tsx"],
+  "sourcesContent": ["import React, {memo, useContext} from 'react';\n\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\n\nimport {useTranslation} from '../../../hooks';\nimport {Control} from '../../Control';\nimport {ControlsLayoutContext} from '../ControlsLayout';\n\nimport EditIcon from '@gravity-ui/icons/svgs/pencil.svg';\n\ninterface EditControlProps {\n    vcsUrl: string;\n    vcsType?: string;\n    view?: string;\n    className?: string;\n}\n\nconst b = block('dc-controls');\n\nconst EditControl = memo<EditControlProps>(({vcsUrl, vcsType = 'github', view, className}) => {\n    const {t} = useTranslation('controls');\n    const {controlClassName, controlSize, isVerticalView, popupPosition} =\n        useContext(ControlsLayoutContext);\n\n    if (view === 'wide') {\n        return (\n            <a href={vcsUrl} target=\"_blank\" rel=\"noreferrer noopener\">\n                <Button className={b('control', {view}, className)} view=\"raised\">\n                    <Button.Icon>\n                        <Icon data={EditIcon} size={14} />\n                    </Button.Icon>\n                    <span className={b('edit-text')}>{t<string>('edit-text')}</span>\n                </Button>\n            </a>\n        );\n    }\n\n    return (\n        <a\n            href={vcsUrl}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n            className={b('control', className)}\n        >\n            <Control\n                size={controlSize}\n                className={controlClassName}\n                isVerticalView={isVerticalView}\n                tooltipText={t(`edit-text-${vcsType}`)}\n                icon={EditIcon}\n                popupPosition={popupPosition}\n            />\n        </a>\n    );\n});\n\nEditControl.displayName = 'EditControl';\n\nexport default EditControl;\n"],
+  "mappings": ";AAAA,OAAO,SAAQ,MAAM,kBAAiB;AAEtC,SAAQ,QAAQ,YAAW;AAC3B,OAAO,WAAW;AAElB,SAAQ,sBAAqB;AAC7B,SAAQ,eAAc;AACtB,SAAQ,6BAA4B;AAEpC,OAAO,cAAc;AASrB,IAAM,IAAI,MAAM,aAAa;AAE7B,IAAM,cAAc,KAAuB,CAAC,EAAC,QAAQ,UAAU,UAAU,MAAM,UAAS,MAAM;AAC1F,QAAM,EAAC,EAAC,IAAI,eAAe,UAAU;AACrC,QAAM,EAAC,kBAAkB,aAAa,gBAAgB,cAAa,IAC/D,WAAW,qBAAqB;AAEpC,MAAI,SAAS,QAAQ;AACjB,WACI,oCAAC,OAAE,MAAM,QAAQ,QAAO,UAAS,KAAI,yBACjC,oCAAC,UAAO,WAAW,EAAE,WAAW,EAAC,KAAI,GAAG,SAAS,GAAG,MAAK,YACrD,oCAAC,OAAO,MAAP,MACG,oCAAC,QAAK,MAAM,UAAU,MAAM,IAAI,CACpC,GACA,oCAAC,UAAK,WAAW,EAAE,WAAW,KAAI,EAAU,WAAW,CAAE,CAC7D,CACJ;AAAA,EAER;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,MAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAW,EAAE,WAAW,SAAS;AAAA;AAAA,IAEjC;AAAA,MAAC;AAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAW;AAAA,QACX;AAAA,QACA,aAAa,EAAE,aAAa,OAAO,EAAE;AAAA,QACrC,MAAM;AAAA,QACN;AAAA;AAAA,IACJ;AAAA,EACJ;AAER,CAAC;AAED,YAAY,cAAc;AAE1B,IAAO,sBAAQ;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/FullScreenControl.js

@@ -0,0 +1,51 @@
+// src/components/Controls/single-controls/FullScreenControl.tsx
+import React, { memo, useCallback, useContext, useEffect } from "react";
+import { Icon } from "@gravity-ui/uikit";
+import { useTranslation } from "../../../hooks";
+import { Control } from "../../Control";
+import { ControlsLayoutContext } from "../ControlsLayout";
+import FullScreenClickedIcon from "@gravity-ui/icons/svgs/square-dashed-circle.svg";
+import FullScreenIcon from "@gravity-ui/icons/svgs/square-dashed.svg";
+var FullScreenControl = memo((props) => {
+  const { t } = useTranslation("controls");
+  const { controlClassName, controlSize, isVerticalView, popupPosition } = useContext(ControlsLayoutContext);
+  const { value, onChange } = props;
+  const onClick = useCallback(() => {
+    if (onChange) {
+      onChange(!value);
+    }
+  }, [value, onChange]);
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape" && value) {
+        onClick();
+      }
+    },
+    [onClick, value]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+  const activeMode = value ? "enabled" : "disabled";
+  return /* @__PURE__ */ React.createElement(
+    Control,
+    {
+      size: controlSize,
+      onClick,
+      className: controlClassName,
+      isVerticalView,
+      tooltipText: t(`full-screen-text-${activeMode}`),
+      icon: (args) => /* @__PURE__ */ React.createElement(Icon, { data: value ? FullScreenClickedIcon : FullScreenIcon, ...args }),
+      popupPosition
+    }
+  );
+});
+FullScreenControl.displayName = "FullScreenControl";
+var FullScreenControl_default = FullScreenControl;
+export {
+  FullScreenControl_default as default
+};
+//# sourceMappingURL=FullScreenControl.js.map

package/build/esm/components/Controls/single-controls/FullScreenControl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/Controls/single-controls/FullScreenControl.tsx"],
+  "sourcesContent": ["import React, {memo, useCallback, useContext, useEffect} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {useTranslation} from '../../../hooks';\nimport {Control} from '../../Control';\nimport {ControlsLayoutContext} from '../ControlsLayout';\n\nimport FullScreenClickedIcon from '@gravity-ui/icons/svgs/square-dashed-circle.svg';\nimport FullScreenIcon from '@gravity-ui/icons/svgs/square-dashed.svg';\n\ninterface ControlProps {\n    value?: boolean;\n    onChange?: (value: boolean) => void;\n}\n\nconst FullScreenControl = memo<ControlProps>((props) => {\n    const {t} = useTranslation('controls');\n    const {controlClassName, controlSize, isVerticalView, popupPosition} =\n        useContext(ControlsLayoutContext);\n    const {value, onChange} = props;\n\n    const onClick = useCallback(() => {\n        if (onChange) {\n            onChange(!value);\n        }\n    }, [value, onChange]);\n\n    const onKeyDown = useCallback(\n        (event: KeyboardEvent | React.KeyboardEvent) => {\n            if (event.key === 'Escape' && value) {\n                onClick();\n            }\n        },\n        [onClick, value],\n    );\n\n    useEffect(() => {\n        document.addEventListener('keydown', onKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', onKeyDown);\n        };\n    }, [onKeyDown]);\n\n    const activeMode = value ? 'enabled' : 'disabled';\n\n    return (\n        <Control\n            size={controlSize}\n            onClick={onClick}\n            className={controlClassName}\n            isVerticalView={isVerticalView}\n            tooltipText={t(`full-screen-text-${activeMode}`)}\n            icon={(args) => (\n                <Icon data={value ? FullScreenClickedIcon : FullScreenIcon} {...args} />\n            )}\n            popupPosition={popupPosition}\n        />\n    );\n});\n\nFullScreenControl.displayName = 'FullScreenControl';\n\nexport default FullScreenControl;\n"],
+  "mappings": ";AAAA,OAAO,SAAQ,MAAM,aAAa,YAAY,iBAAgB;AAE9D,SAAQ,YAAW;AAEnB,SAAQ,sBAAqB;AAC7B,SAAQ,eAAc;AACtB,SAAQ,6BAA4B;AAEpC,OAAO,2BAA2B;AAClC,OAAO,oBAAoB;AAO3B,IAAM,oBAAoB,KAAmB,CAAC,UAAU;AACpD,QAAM,EAAC,EAAC,IAAI,eAAe,UAAU;AACrC,QAAM,EAAC,kBAAkB,aAAa,gBAAgB,cAAa,IAC/D,WAAW,qBAAqB;AACpC,QAAM,EAAC,OAAO,SAAQ,IAAI;AAE1B,QAAM,UAAU,YAAY,MAAM;AAC9B,QAAI,UAAU;AACV,eAAS,CAAC,KAAK;AAAA,IACnB;AAAA,EACJ,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,QAAM,YAAY;AAAA,IACd,CAAC,UAA+C;AAC5C,UAAI,MAAM,QAAQ,YAAY,OAAO;AACjC,gBAAQ;AAAA,MACZ;AAAA,IACJ;AAAA,IACA,CAAC,SAAS,KAAK;AAAA,EACnB;AAEA,YAAU,MAAM;AACZ,aAAS,iBAAiB,WAAW,SAAS;AAE9C,WAAO,MAAM;AACT,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACrD;AAAA,EACJ,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,aAAa,QAAQ,YAAY;AAEvC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,MAAM;AAAA,MACN;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,aAAa,EAAE,oBAAoB,UAAU,EAAE;AAAA,MAC/C,MAAM,CAAC,SACH,oCAAC,QAAK,MAAM,QAAQ,wBAAwB,gBAAiB,GAAG,MAAM;AAAA,MAE1E;AAAA;AAAA,EACJ;AAER,CAAC;AAED,kBAAkB,cAAc;AAEhC,IAAO,4BAAQ;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/LangControl.js

@@ -0,0 +1,91 @@
+// src/components/Controls/single-controls/LangControl.tsx
+import React, { useCallback, useContext, useMemo, useRef } from "react";
+import { Icon, List, Popup } from "@gravity-ui/uikit";
+import block from "bem-cn-lite";
+import allLangs from "langs";
+import { usePopupState, useTranslation } from "../../../hooks";
+import { Lang } from "../../../models";
+import { Control } from "../../Control";
+import { ControlsLayoutContext } from "../ControlsLayout";
+import { getPopupPosition } from "./utils";
+import LangIcon from "@gravity-ui/icons/svgs/globe.svg";
+import "../Controls.css";
+var ICONS = {
+  en: "\u{1F1EC}\u{1F1E7}",
+  ru: "\u{1F1F7}\u{1F1FA}"
+};
+var DEFAULT_LANGS = ["en", "ru"];
+var LEGACY_LANG_ITEMS = [
+  { value: Lang.En, text: "English", icon: "\u{1F1EC}\u{1F1E7}" },
+  { value: Lang.Ru, text: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439", icon: "\u{1F1F7}\u{1F1FA}" }
+];
+var b = block("dc-controls");
+var LIST_ITEM_HEIGHT = 36;
+var LangControl = (props) => {
+  const { t } = useTranslation("controls");
+  const { controlClassName, controlSize, isVerticalView, popupPosition } = useContext(ControlsLayoutContext);
+  const { lang, langs = DEFAULT_LANGS, onChangeLang } = props;
+  const controlRef = useRef(null);
+  const popupState = usePopupState();
+  const langItems = useMemo(() => {
+    const preparedLangs = langs.map((code) => {
+      const langData = allLangs.where("1", code);
+      return langData ? {
+        text: langData.name,
+        value: langData["1"],
+        icon: ICONS[code] || ""
+      } : void 0;
+    }).filter(Boolean);
+    return preparedLangs.length ? preparedLangs : LEGACY_LANG_ITEMS;
+  }, [langs]);
+  const renderItem = useCallback((item) => {
+    return /* @__PURE__ */ React.createElement("div", { className: b("lang-item") }, /* @__PURE__ */ React.createElement("div", { className: b("list-icon") }, item.icon), item.text);
+  }, []);
+  const onItemClick = useCallback(
+    (item) => {
+      onChangeLang(item.value);
+    },
+    [onChangeLang]
+  );
+  const itemsHeight = LIST_ITEM_HEIGHT * langItems.length;
+  const selectedItemIndex = langItems.findIndex(({ value }) => value === lang);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Control,
+    {
+      ref: controlRef,
+      size: controlSize,
+      onClick: popupState.open,
+      className: controlClassName,
+      isVerticalView,
+      tooltipText: t("lang-text"),
+      icon: (args) => /* @__PURE__ */ React.createElement(Icon, { data: LangIcon, ...args }),
+      popupPosition
+    }
+  ), popupState.visible && /* @__PURE__ */ React.createElement(
+    Popup,
+    {
+      anchorRef: controlRef,
+      open: true,
+      onOutsideClick: popupState.close,
+      placement: getPopupPosition(isVerticalView)
+    },
+    /* @__PURE__ */ React.createElement(
+      List,
+      {
+        filterable: false,
+        className: b("list", { langs: true }),
+        items: langItems,
+        onItemClick,
+        selectedItemIndex,
+        itemHeight: LIST_ITEM_HEIGHT,
+        itemsHeight,
+        renderItem
+      }
+    )
+  ));
+};
+var LangControl_default = LangControl;
+export {
+  LangControl_default as default
+};
+//# sourceMappingURL=LangControl.js.map

package/build/esm/components/Controls/single-controls/LangControl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/Controls/single-controls/LangControl.tsx"],
+  "sourcesContent": ["import React, {useCallback, useContext, useMemo, useRef} from 'react';\n\nimport {Icon, List, Popup} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\nimport allLangs from 'langs';\n\nimport {usePopupState, useTranslation} from '../../../hooks';\nimport {Lang} from '../../../models';\nimport {Control} from '../../Control';\nimport {ControlsLayoutContext} from '../ControlsLayout';\n\nimport {getPopupPosition} from './utils';\n\nimport LangIcon from '@gravity-ui/icons/svgs/globe.svg';\n\nimport '../Controls.scss';\n\nconst ICONS: Record<string, string> = {\n    en: '\uD83C\uDDEC\uD83C\uDDE7',\n    ru: '\uD83C\uDDF7\uD83C\uDDFA',\n};\nconst DEFAULT_LANGS = ['en', 'ru'];\nconst LEGACY_LANG_ITEMS = [\n    {value: Lang.En, text: 'English', icon: '\uD83C\uDDEC\uD83C\uDDE7'},\n    {value: Lang.Ru, text: '\u0420\u0443\u0441\u0441\u043A\u0438\u0439', icon: '\uD83C\uDDF7\uD83C\uDDFA'},\n];\n\nconst b = block('dc-controls');\n\ninterface ControlProps {\n    lang: Lang;\n    langs?: string[];\n    onChangeLang: (lang: Lang) => void;\n}\n\ninterface ListItem {\n    value: string;\n    text: string;\n    icon?: string;\n}\n\nconst LIST_ITEM_HEIGHT = 36;\n\nconst LangControl = (props: ControlProps) => {\n    const {t} = useTranslation('controls');\n    const {controlClassName, controlSize, isVerticalView, popupPosition} =\n        useContext(ControlsLayoutContext);\n    const {lang, langs = DEFAULT_LANGS, onChangeLang} = props;\n\n    const controlRef = useRef<HTMLButtonElement | null>(null);\n\n    const popupState = usePopupState();\n    const langItems = useMemo(() => {\n        const preparedLangs = langs\n            .map((code) => {\n                const langData = allLangs.where('1', code);\n\n                return langData\n                    ? {\n                          text: langData.name,\n                          value: langData['1'],\n                          icon: ICONS[code] || '',\n                      }\n                    : undefined;\n            })\n            .filter(Boolean) as ListItem[];\n\n        return preparedLangs.length ? preparedLangs : LEGACY_LANG_ITEMS;\n    }, [langs]);\n    const renderItem = useCallback((item: ListItem) => {\n        return (\n            <div className={b('lang-item')}>\n                <div className={b('list-icon')}>{item.icon}</div>\n                {item.text}\n            </div>\n        );\n    }, []);\n    const onItemClick = useCallback(\n        (item: ListItem) => {\n            onChangeLang(item.value as Lang);\n        },\n        [onChangeLang],\n    );\n\n    const itemsHeight = LIST_ITEM_HEIGHT * langItems.length;\n    const selectedItemIndex = langItems.findIndex(({value}) => value === lang);\n\n    return (\n        <React.Fragment>\n            <Control\n                ref={controlRef}\n                size={controlSize}\n                onClick={popupState.open}\n                className={controlClassName}\n                isVerticalView={isVerticalView}\n                tooltipText={t('lang-text')}\n                icon={(args) => <Icon data={LangIcon} {...args} />}\n                popupPosition={popupPosition}\n            />\n            {popupState.visible && (\n                <Popup\n                    anchorRef={controlRef}\n                    open={true}\n                    onOutsideClick={popupState.close}\n                    placement={getPopupPosition(isVerticalView)}\n                >\n                    <List\n                        filterable={false}\n                        className={b('list', {langs: true})}\n                        items={langItems}\n                        onItemClick={onItemClick}\n                        selectedItemIndex={selectedItemIndex}\n                        itemHeight={LIST_ITEM_HEIGHT}\n                        itemsHeight={itemsHeight}\n                        renderItem={renderItem}\n                    />\n                </Popup>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default LangControl;\n"],
+  "mappings": ";AAAA,OAAO,SAAQ,aAAa,YAAY,SAAS,cAAa;AAE9D,SAAQ,MAAM,MAAM,aAAY;AAChC,OAAO,WAAW;AAClB,OAAO,cAAc;AAErB,SAAQ,eAAe,sBAAqB;AAC5C,SAAQ,YAAW;AACnB,SAAQ,eAAc;AACtB,SAAQ,6BAA4B;AAEpC,SAAQ,wBAAuB;AAE/B,OAAO,cAAc;AAErB,OAAO;AAEP,IAAM,QAAgC;AAAA,EAClC,IAAI;AAAA,EACJ,IAAI;AACR;AACA,IAAM,gBAAgB,CAAC,MAAM,IAAI;AACjC,IAAM,oBAAoB;AAAA,EACtB,EAAC,OAAO,KAAK,IAAI,MAAM,WAAW,MAAM,qBAAM;AAAA,EAC9C,EAAC,OAAO,KAAK,IAAI,MAAM,8CAAW,MAAM,qBAAM;AAClD;AAEA,IAAM,IAAI,MAAM,aAAa;AAc7B,IAAM,mBAAmB;AAEzB,IAAM,cAAc,CAAC,UAAwB;AACzC,QAAM,EAAC,EAAC,IAAI,eAAe,UAAU;AACrC,QAAM,EAAC,kBAAkB,aAAa,gBAAgB,cAAa,IAC/D,WAAW,qBAAqB;AACpC,QAAM,EAAC,MAAM,QAAQ,eAAe,aAAY,IAAI;AAEpD,QAAM,aAAa,OAAiC,IAAI;AAExD,QAAM,aAAa,cAAc;AACjC,QAAM,YAAY,QAAQ,MAAM;AAC5B,UAAM,gBAAgB,MACjB,IAAI,CAAC,SAAS;AACX,YAAM,WAAW,SAAS,MAAM,KAAK,IAAI;AAEzC,aAAO,WACD;AAAA,QACI,MAAM,SAAS;AAAA,QACf,OAAO,SAAS,GAAG;AAAA,QACnB,MAAM,MAAM,IAAI,KAAK;AAAA,MACzB,IACA;AAAA,IACV,CAAC,EACA,OAAO,OAAO;AAEnB,WAAO,cAAc,SAAS,gBAAgB;AAAA,EAClD,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,aAAa,YAAY,CAAC,SAAmB;AAC/C,WACI,oCAAC,SAAI,WAAW,EAAE,WAAW,KACzB,oCAAC,SAAI,WAAW,EAAE,WAAW,KAAI,KAAK,IAAK,GAC1C,KAAK,IACV;AAAA,EAER,GAAG,CAAC,CAAC;AACL,QAAM,cAAc;AAAA,IAChB,CAAC,SAAmB;AAChB,mBAAa,KAAK,KAAa;AAAA,IACnC;AAAA,IACA,CAAC,YAAY;AAAA,EACjB;AAEA,QAAM,cAAc,mBAAmB,UAAU;AACjD,QAAM,oBAAoB,UAAU,UAAU,CAAC,EAAC,MAAK,MAAM,UAAU,IAAI;AAEzE,SACI,oCAAC,MAAM,UAAN,MACG;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,MAAM;AAAA,MACN,SAAS,WAAW;AAAA,MACpB,WAAW;AAAA,MACX;AAAA,MACA,aAAa,EAAE,WAAW;AAAA,MAC1B,MAAM,CAAC,SAAS,oCAAC,QAAK,MAAM,UAAW,GAAG,MAAM;AAAA,MAChD;AAAA;AAAA,EACJ,GACC,WAAW,WACR;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX,MAAM;AAAA,MACN,gBAAgB,WAAW;AAAA,MAC3B,WAAW,iBAAiB,cAAc;AAAA;AAAA,IAE1C;AAAA,MAAC;AAAA;AAAA,QACG,YAAY;AAAA,QACZ,WAAW,EAAE,QAAQ,EAAC,OAAO,KAAI,CAAC;AAAA,QAClC,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,EACJ,CAER;AAER;AAEA,IAAO,sBAAQ;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/PdfControl.js

@@ -0,0 +1,29 @@
+// src/components/Controls/single-controls/PdfControl.tsx
+import React, { memo, useContext } from "react";
+import { Icon } from "@gravity-ui/uikit";
+import { useTranslation } from "../../../hooks";
+import { Control } from "../../Control";
+import { ControlsLayoutContext } from "../ControlsLayout";
+import PdfIcon from "../../../../../assets/icons/pdf.svg";
+var PdfControl = memo((props) => {
+  const { t } = useTranslation("controls");
+  const { controlClassName, controlSize, isVerticalView, popupPosition } = useContext(ControlsLayoutContext);
+  const { pdfLink } = props;
+  return /* @__PURE__ */ React.createElement("a", { href: pdfLink, target: "_blank", rel: "noreferrer noopener" }, /* @__PURE__ */ React.createElement(
+    Control,
+    {
+      size: controlSize,
+      className: controlClassName,
+      isVerticalView,
+      tooltipText: t("pdf-text"),
+      icon: (args) => /* @__PURE__ */ React.createElement(Icon, { data: PdfIcon, ...args }),
+      popupPosition
+    }
+  ));
+});
+PdfControl.displayName = "PdfControl";
+var PdfControl_default = PdfControl;
+export {
+  PdfControl_default as default
+};
+//# sourceMappingURL=PdfControl.js.map

package/build/esm/components/Controls/single-controls/PdfControl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/Controls/single-controls/PdfControl.tsx"],
+  "sourcesContent": ["import React, {memo, useContext} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {useTranslation} from '../../../hooks';\nimport {Control} from '../../Control';\nimport {ControlsLayoutContext} from '../ControlsLayout';\n\nimport PdfIcon from '../../../../assets/icons/pdf.svg';\n\ninterface ControlProps {\n    pdfLink: string;\n}\n\nconst PdfControl = memo<ControlProps>((props) => {\n    const {t} = useTranslation('controls');\n    const {controlClassName, controlSize, isVerticalView, popupPosition} =\n        useContext(ControlsLayoutContext);\n    const {pdfLink} = props;\n\n    return (\n        <a href={pdfLink} target=\"_blank\" rel=\"noreferrer noopener\">\n            <Control\n                size={controlSize}\n                className={controlClassName}\n                isVerticalView={isVerticalView}\n                tooltipText={t('pdf-text')}\n                icon={(args) => <Icon data={PdfIcon} {...args} />}\n                popupPosition={popupPosition}\n            />\n        </a>\n    );\n});\n\nPdfControl.displayName = 'PdfControl';\n\nexport default PdfControl;\n"],
+  "mappings": ";AAAA,OAAO,SAAQ,MAAM,kBAAiB;AAEtC,SAAQ,YAAW;AAEnB,SAAQ,sBAAqB;AAC7B,SAAQ,eAAc;AACtB,SAAQ,6BAA4B;AAEpC,OAAO,aAAa;AAMpB,IAAM,aAAa,KAAmB,CAAC,UAAU;AAC7C,QAAM,EAAC,EAAC,IAAI,eAAe,UAAU;AACrC,QAAM,EAAC,kBAAkB,aAAa,gBAAgB,cAAa,IAC/D,WAAW,qBAAqB;AACpC,QAAM,EAAC,QAAO,IAAI;AAElB,SACI,oCAAC,OAAE,MAAM,SAAS,QAAO,UAAS,KAAI,yBAClC;AAAA,IAAC;AAAA;AAAA,MACG,MAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,MACA,aAAa,EAAE,UAAU;AAAA,MACzB,MAAM,CAAC,SAAS,oCAAC,QAAK,MAAM,SAAU,GAAG,MAAM;AAAA,MAC/C;AAAA;AAAA,EACJ,CACJ;AAER,CAAC;AAED,WAAW,cAAc;AAEzB,IAAO,qBAAQ;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/SettingsControl/SettingsControl.css

@@ -0,0 +1,49 @@
+/* src/components/Controls/single-controls/SettingsControl/SettingsControl.scss */
+.dc-settings-control__text-size-control {
+  display: flex;
+  align-items: center;
+}
+.dc-settings-control__text-size-button_s {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+.dc-settings-control__text-size-button_m {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.dc-settings-control__text-size-button_l {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+}
+.dc-settings-control__text-size-button-icon_active {
+  color: var(--g-color-base-brand);
+}
+.dc-settings-control__popup {
+  width: 230px;
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+.dc-settings-control__list {
+  padding: 4px 0;
+  width: 230px;
+}
+.dc-settings-control__list .yc-list__item_active {
+  background: transparent;
+}
+.dc-settings-control__list-icon {
+  margin-right: 8px;
+}
+.dc-settings-control__list-item {
+  display: flex;
+  padding: 12px;
+  width: 100%;
+}
+.dc-settings-control__list-item-description {
+  color: var(--g-color-text-secondary);
+}
+.dc-settings-control__list-item-control {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+/*# sourceMappingURL=SettingsControl.css.map */

package/build/esm/components/Controls/single-controls/SettingsControl/SettingsControl.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/Controls/single-controls/SettingsControl/Users/3y3k0/doctools/docs-components/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss", "../../../../../../src/components/Controls/single-controls/SettingsControl/%3Cinput%20css%201300uk%3E", "../../../../../../src/components/Controls/single-controls/SettingsControl/Users/3y3k0/doctools/docs-components/src/styles/mixins.scss"],
+  "sourcesContent": ["@import '../../../../styles/mixins';\n\n.dc-settings-control {\n    &__text-size-control {\n        display: flex;\n        align-items: center;\n    }\n\n    &__text-size-button {\n        &_s {\n            @include text-size(body-1);\n        }\n        &_m {\n            @include text-size(body-2);\n        }\n        &_l {\n            @include text-size(body-3);\n        }\n    }\n\n    &__text-size-button-icon {\n        &_active {\n            color: var(--g-color-base-brand);\n        }\n    }\n\n    &__popup {\n        width: 230px;\n        @include text-size(body-1);\n    }\n\n    &__list {\n        padding: 4px 0;\n        width: 230px;\n\n        .yc-list__item_active {\n            background: transparent;\n        }\n    }\n\n    &__list-icon {\n        margin-right: 8px;\n    }\n\n    &__list-item {\n        display: flex;\n        padding: 12px;\n        width: 100%;\n    }\n\n    &__list-item-description {\n        color: var(--g-color-text-secondary);\n    }\n\n    &__list-item-control {\n        display: flex;\n        align-items: center;\n        margin-left: auto;\n    }\n}\n", ".dc-settings-control__text-size-control {\n  display: flex;\n  align-items: center;\n}\n.dc-settings-control__text-size-button_s {\n  font-size: var(--g-text-body-1-font-size);\n  line-height: var(--g-text-body-1-line-height);\n}\n.dc-settings-control__text-size-button_m {\n  font-size: var(--g-text-body-2-font-size);\n  line-height: var(--g-text-body-2-line-height);\n}\n.dc-settings-control__text-size-button_l {\n  font-size: var(--g-text-body-3-font-size);\n  line-height: var(--g-text-body-3-line-height);\n}\n.dc-settings-control__text-size-button-icon_active {\n  color: var(--g-color-base-brand);\n}\n.dc-settings-control__popup {\n  width: 230px;\n  font-size: var(--g-text-body-1-font-size);\n  line-height: var(--g-text-body-1-line-height);\n}\n.dc-settings-control__list {\n  padding: 4px 0;\n  width: 230px;\n}\n.dc-settings-control__list .yc-list__item_active {\n  background: transparent;\n}\n.dc-settings-control__list-icon {\n  margin-right: 8px;\n}\n.dc-settings-control__list-item {\n  display: flex;\n  padding: 12px;\n  width: 100%;\n}\n.dc-settings-control__list-item-description {\n  color: var(--g-color-text-secondary);\n}\n.dc-settings-control__list-item-control {\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzLzN5M2swL2RvY3Rvb2xzL2RvY3MtY29tcG9uZW50cy9zcmMvY29tcG9uZW50cy9Db250cm9scy9zaW5nbGUtY29udHJvbHMvU2V0dGluZ3NDb250cm9sIiwic291cmNlcyI6WyJTZXR0aW5nc0NvbnRyb2wuc2NzcyIsIi4uLy4uLy4uLy4uL3N0eWxlcy9taXhpbnMuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHSTtFQUNJO0VBQ0E7O0FBSUE7RUNOSjtFQUNBOztBRFFJO0VDVEo7RUFDQTs7QURXSTtFQ1pKO0VBQ0E7O0FEaUJJO0VBQ0k7O0FBSVI7RUFDSTtFQ3hCSjtFQUNBOztBRDJCQTtFQUNJO0VBQ0E7O0FBRUE7RUFDSTs7QUFJUjtFQUNJOztBQUdKO0VBQ0k7RUFDQTtFQUNBOztBQUdKO0VBQ0k7O0FBR0o7RUFDSTtFQUNBO0VBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuLi8uLi8uLi8uLi9zdHlsZXMvbWl4aW5zJztcblxuLmRjLXNldHRpbmdzLWNvbnRyb2wge1xuICAgICZfX3RleHQtc2l6ZS1jb250cm9sIHtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB9XG5cbiAgICAmX190ZXh0LXNpemUtYnV0dG9uIHtcbiAgICAgICAgJl9zIHtcbiAgICAgICAgICAgIEBpbmNsdWRlIHRleHQtc2l6ZShib2R5LTEpO1xuICAgICAgICB9XG4gICAgICAgICZfbSB7XG4gICAgICAgICAgICBAaW5jbHVkZSB0ZXh0LXNpemUoYm9keS0yKTtcbiAgICAgICAgfVxuICAgICAgICAmX2wge1xuICAgICAgICAgICAgQGluY2x1ZGUgdGV4dC1zaXplKGJvZHktMyk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmX190ZXh0LXNpemUtYnV0dG9uLWljb24ge1xuICAgICAgICAmX2FjdGl2ZSB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKC0tZy1jb2xvci1iYXNlLWJyYW5kKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICZfX3BvcHVwIHtcbiAgICAgICAgd2lkdGg6IDIzMHB4O1xuICAgICAgICBAaW5jbHVkZSB0ZXh0LXNpemUoYm9keS0xKTtcbiAgICB9XG5cbiAgICAmX19saXN0IHtcbiAgICAgICAgcGFkZGluZzogNHB4IDA7XG4gICAgICAgIHdpZHRoOiAyMzBweDtcblxuICAgICAgICAueWMtbGlzdF9faXRlbV9hY3RpdmUge1xuICAgICAgICAgICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmX19saXN0LWljb24ge1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDhweDtcbiAgICB9XG5cbiAgICAmX19saXN0LWl0ZW0ge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBwYWRkaW5nOiAxMnB4O1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICB9XG5cbiAgICAmX19saXN0LWl0ZW0tZGVzY3JpcHRpb24ge1xuICAgICAgICBjb2xvcjogdmFyKC0tZy1jb2xvci10ZXh0LXNlY29uZGFyeSk7XG4gICAgfVxuXG4gICAgJl9fbGlzdC1pdGVtLWNvbnRyb2wge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICBtYXJnaW4tbGVmdDogYXV0bztcbiAgICB9XG59XG4iLCJAaW1wb3J0ICcuL3ZhcmlhYmxlcyc7XG5cbkBtaXhpbiB0ZXh0LXNpemUoJG5hbWUpIHtcbiAgICBmb250LXNpemU6IHZhcigtLWctdGV4dC0jeyRuYW1lfS1mb250LXNpemUpO1xuICAgIGxpbmUtaGVpZ2h0OiB2YXIoLS1nLXRleHQtI3skbmFtZX0tbGluZS1oZWlnaHQpO1xufVxuXG5AbWl4aW4gcmVzZXQtbGlzdC1zdHlsZSgpIHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xufVxuXG5AbWl4aW4gZml4QW5jaG9yUG9zaXRpb24oJG9mZnNldDogMHB4KSB7XG4gICAgcGFkZGluZy10b3A6IGNhbGModmFyKC0tZGMtaGVhZGVyLWhlaWdodCwgI3skaGVhZGVySGVpZ2h0fSkpO1xuICAgIG1hcmdpbi10b3A6IGNhbGMoI3skb2Zmc2V0fSAtIHZhcigtLWRjLWhlYWRlci1oZWlnaHQsICN7JGhlYWRlckhlaWdodH0pKTtcbn1cblxuQG1peGluIHJlc2V0LWxpbmstc3R5bGUoKSB7XG4gICAgY29sb3I6IGluaGVyaXQ7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuXG5AbWl4aW4gaXNsYW5kcy1mb2N1cygpIHtcbiAgICBvdXRsaW5lOiBub25lO1xuXG4gICAgLnV0aWxpdHlmb2N1cyAmOmZvY3VzIHtcbiAgICAgICAgb3V0bGluZTogMnB4IHNvbGlkICNmZmRiNGQ7XG4gICAgfVxufVxuXG5AbWl4aW4gbGluaygpIHtcbiAgICBAaW5jbHVkZSBpc2xhbmRzLWZvY3VzKCk7XG5cbiAgICBjb2xvcjogdmFyKC0tZy1jb2xvci10ZXh0LWxpbmspO1xuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgICAmOmhvdmVyLFxuICAgICY6YWN0aXZlIHtcbiAgICAgICAgY29sb3I6IHZhcigtLWctY29sb3ItdGV4dC1saW5rLWhvdmVyKTtcbiAgICB9XG59XG5cbkBtaXhpbiBoZWFkaW5nMSgpIHtcbiAgICBAaW5jbHVkZSB0ZXh0LXNpemUoZGlzcGxheS0zKTtcbiAgICBmb250LXdlaWdodDogNTAwO1xuXG4gICAgQG1lZGlhIChtYXgtd2lkdGg6IG1hcC1nZXQoJHNjcmVlbkJyZWFrcG9pbnRzLCAnbWQnKSAtIDEpIHtcbiAgICAgICAgQGluY2x1ZGUgdGV4dC1zaXplKGRpc3BsYXktMik7XG4gICAgfVxufVxuXG5AbWl4aW4gaGVhZGluZzIoKSB7XG4gICAgQGluY2x1ZGUgdGV4dC1zaXplKGRpc3BsYXktMSk7XG4gICAgZm9udC13ZWlnaHQ6IDUwMDtcbn1cblxuQG1peGluIGhlYWRpbmczKCkge1xuICAgIEBpbmNsdWRlIHRleHQtc2l6ZShoZWFkZXItMik7XG4gICAgZm9udC13ZWlnaHQ6IDUwMDtcbn1cblxuQG1peGluIGhlYWRpbmc0KCkge1xuICAgIEBpbmNsdWRlIHRleHQtc2l6ZShoZWFkZXItMSk7XG4gICAgZm9udC13ZWlnaHQ6IDUwMDtcbn1cblxuQG1peGluIGhlYWRpbmc1KCkge1xuICAgIEBpbmNsdWRlIHRleHQtc2l6ZShib2R5LTMpO1xuICAgIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbkBtaXhpbiBoZWFkaW5nNigpIHtcbiAgICBAaW5jbHVkZSB0ZXh0LXNpemUoYm9keS0zKTtcbiAgICBmb250LXdlaWdodDogNDAwO1xufVxuXG5AbWl4aW4gY29udHJpYnV0b3JzLXRleHQoKSB7XG4gICAgZm9udC1zaXplOiAxM3B4O1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gICAgYWxpZ24tc2VsZjogY2VudGVyO1xufVxuXG5AbWl4aW4gdGV4dC1ib2R5LTEoKSB7XG4gICAgZm9udC1zaXplOiB2YXIoLS1nLXRleHQtYm9keS0xLWZvbnQtc2l6ZSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWctdGV4dC1ib2R5LTEtbGluZS1oZWlnaHQpO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1nLXRleHQtYm9keS1mb250LXdlaWdodCk7XG59XG5cbkBtaXhpbiBkZXNrdG9wLW9ubHkoKSB7XG4gICAgQG1lZGlhIChtYXgtd2lkdGg6IG1hcC1nZXQoJHNjcmVlbkJyZWFrcG9pbnRzLCAnbWQnKSAtIDEpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG59XG5cbkBtaXhpbiBkZXNrdG9wLXRhYmxldC1vbmx5KCkge1xuICAgIEBtZWRpYSAobWF4LXdpZHRoOiBtYXAtZ2V0KCRzY3JlZW5CcmVha3BvaW50cywgJ3NtJykgLSAxKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxufVxuXG5AbWl4aW4gbW9iaWxlLXRhYmxldC1vbmx5KCkge1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiBtYXAtZ2V0KCRzY3JlZW5CcmVha3BvaW50cywgJ21kJykpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG59XG5cbkBtaXhpbiBtb2JpbGUtb25seSgpIHtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogbWFwLWdldCgkc2NyZWVuQnJlYWtwb2ludHMsICdzbScpKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxufVxuIl19 */", "@import './variables';\n\n@mixin text-size($name) {\n    font-size: var(--g-text-#{$name}-font-size);\n    line-height: var(--g-text-#{$name}-line-height);\n}\n\n@mixin reset-list-style() {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n@mixin fixAnchorPosition($offset: 0px) {\n    padding-top: calc(var(--dc-header-height, #{$headerHeight}));\n    margin-top: calc(#{$offset} - var(--dc-header-height, #{$headerHeight}));\n}\n\n@mixin reset-link-style() {\n    color: inherit;\n    text-decoration: none;\n}\n\n@mixin islands-focus() {\n    outline: none;\n\n    .utilityfocus &:focus {\n        outline: 2px solid #ffdb4d;\n    }\n}\n\n@mixin link() {\n    @include islands-focus();\n\n    color: var(--g-color-text-link);\n    text-decoration: none;\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n        color: var(--g-color-text-link-hover);\n    }\n}\n\n@mixin heading1() {\n    @include text-size(display-3);\n    font-weight: 500;\n\n    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {\n        @include text-size(display-2);\n    }\n}\n\n@mixin heading2() {\n    @include text-size(display-1);\n    font-weight: 500;\n}\n\n@mixin heading3() {\n    @include text-size(header-2);\n    font-weight: 500;\n}\n\n@mixin heading4() {\n    @include text-size(header-1);\n    font-weight: 500;\n}\n\n@mixin heading5() {\n    @include text-size(body-3);\n    font-weight: 500;\n}\n\n@mixin heading6() {\n    @include text-size(body-3);\n    font-weight: 400;\n}\n\n@mixin contributors-text() {\n    font-size: 13px;\n    font-weight: 400;\n    margin-right: 5px;\n    align-self: center;\n}\n\n@mixin text-body-1() {\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n    font-weight: var(--g-text-body-font-weight);\n}\n\n@mixin desktop-only() {\n    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {\n        display: none;\n    }\n}\n\n@mixin desktop-tablet-only() {\n    @media (max-width: map-get($screenBreakpoints, 'sm') - 1) {\n        display: none;\n    }\n}\n\n@mixin mobile-tablet-only() {\n    @media (min-width: map-get($screenBreakpoints, 'md')) {\n        display: none;\n    }\n}\n\n@mixin mobile-only() {\n    @media (min-width: map-get($screenBreakpoints, 'sm')) {\n        display: none;\n    }\n}\n"],
+  "mappings": ";AAGI,CAAA;AACI,WAAA;AACA,eAAA;ACFR;ADMQ,CAAA;AENJ,aAAA,IAAA;AACA,eAAA,IAAA;ADGJ;ADKQ,CAAA;AETJ,aAAA,IAAA;AACA,eAAA,IAAA;ADOJ;ADIQ,CAAA;AEZJ,aAAA,IAAA;AACA,eAAA,IAAA;ADWJ;ADMQ,CAAA;AACI,SAAA,IAAA;ACJZ;ADQI,CAAA;AACI,SAAA;AExBJ,aAAA,IAAA;AACA,eAAA,IAAA;ADmBJ;ADQI,CAAA;AACI,WAAA,IAAA;AACA,SAAA;ACNR;ADQQ,CAJJ,0BAII,CAAA;AACI,cAAA;ACNZ;ADUI,CAAA;AACI,gBAAA;ACRR;ADWI,CAAA;AACI,WAAA;AACA,WAAA;AACA,SAAA;ACTR;ADYI,CAAA;AACI,SAAA,IAAA;ACVR;ADaI,CAAA;AACI,WAAA;AACA,eAAA;AACA,eAAA;ACXR;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/SettingsControl/SettingsControl.js

@@ -0,0 +1,167 @@
+// src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
+import React, { useCallback, useContext, useRef, useState } from "react";
+import { Button, Icon, List, Popup, Switch } from "@gravity-ui/uikit";
+import cn from "bem-cn-lite";
+import { useTranslation } from "../../../../hooks";
+import { TextSizes, Theme } from "../../../../models";
+import { Control } from "../../../Control";
+import { ControlsLayoutContext } from "../../ControlsLayout";
+import { getPopupPosition } from "../utils";
+import SettingsIcon from "@gravity-ui/icons/svgs/gear.svg";
+import "./SettingsControl.css";
+var ITEM_HEIGHT = 48;
+var b = cn("dc-settings-control");
+var SettingsControl = (props) => {
+  const { t } = useTranslation("controls");
+  const { controlClassName, controlSize, isVerticalView, popupPosition } = useContext(ControlsLayoutContext);
+  const {
+    textSize,
+    theme,
+    wideFormat,
+    showMiniToc,
+    fullScreen,
+    singlePage,
+    onChangeTheme,
+    onChangeWideFormat,
+    onChangeShowMiniToc,
+    onChangeTextSize
+  } = props;
+  const controlRef = useRef(null);
+  const [isVisiblePopup, setIsVisiblePopup] = useState(false);
+  const showPopup = () => setIsVisiblePopup(true);
+  const hidePopup = () => setIsVisiblePopup(false);
+  const _onChangeTextSize = useCallback(
+    (textSizeKey) => () => {
+      if (onChangeTextSize) {
+        onChangeTextSize(textSizeKey);
+      }
+    },
+    [onChangeTextSize]
+  );
+  const _onChangeTheme = useCallback(() => {
+    if (onChangeTheme) {
+      onChangeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark);
+    }
+  }, [theme, onChangeTheme]);
+  const _onChangeWideFormat = useCallback(() => {
+    if (onChangeWideFormat) {
+      onChangeWideFormat(!wideFormat);
+    }
+  }, [wideFormat, onChangeWideFormat]);
+  const _onChangeShowMiniToc = useCallback(() => {
+    if (onChangeShowMiniToc) {
+      onChangeShowMiniToc(!showMiniToc);
+    }
+  }, [showMiniToc, onChangeShowMiniToc]);
+  const getSettingsItems = useCallback(() => {
+    const allTextSizes = Object.values(TextSizes);
+    const showMiniTocDisabled = fullScreen || singlePage;
+    return [
+      onChangeWideFormat ? {
+        text: t("label_wide_format"),
+        description: t(
+          `description_wide_format_${wideFormat ? "enabled" : "disabled"}`
+        ),
+        control: /* @__PURE__ */ React.createElement(Switch, { checked: wideFormat, onChange: _onChangeWideFormat })
+      } : null,
+      onChangeShowMiniToc ? {
+        text: t("label_show_mini_toc"),
+        description: t("description_show_mini_toc"),
+        control: /* @__PURE__ */ React.createElement(
+          Switch,
+          {
+            disabled: showMiniTocDisabled,
+            checked: showMiniToc,
+            onChange: _onChangeShowMiniToc
+          }
+        )
+      } : null,
+      onChangeTheme ? {
+        text: t("label_dark_theme"),
+        description: Theme.Light === theme ? t("description_disabled_dark_theme") : t("description_enabled_dark_theme"),
+        control: /* @__PURE__ */ React.createElement(Switch, { checked: theme === Theme.Dark, onChange: _onChangeTheme })
+      } : null,
+      onChangeTextSize ? {
+        text: t("label_text_size"),
+        description: t(`description_${textSize}_text_size`),
+        control: /* @__PURE__ */ React.createElement("div", { className: b("text-size-control") }, allTextSizes.map((textSizeKey) => /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            key: textSizeKey,
+            className: b("text-size-button", {
+              [textSizeKey]: true
+            }),
+            view: "flat",
+            onClick: _onChangeTextSize(textSizeKey)
+          },
+          /* @__PURE__ */ React.createElement(
+            Button.Icon,
+            {
+              className: b("text-size-button-icon", {
+                active: textSize === textSizeKey
+              })
+            },
+            "A"
+          )
+        )))
+      } : null
+    ].filter(Boolean);
+  }, [
+    t,
+    textSize,
+    theme,
+    wideFormat,
+    showMiniToc,
+    fullScreen,
+    singlePage,
+    _onChangeTheme,
+    _onChangeWideFormat,
+    _onChangeShowMiniToc,
+    _onChangeTextSize,
+    onChangeWideFormat,
+    onChangeShowMiniToc,
+    onChangeTheme,
+    onChangeTextSize
+  ]);
+  const settingsItems = getSettingsItems();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Control,
+    {
+      ref: controlRef,
+      size: controlSize,
+      onClick: showPopup,
+      className: controlClassName,
+      isVerticalView,
+      tooltipText: t("settings-text"),
+      popupPosition,
+      icon: (args) => /* @__PURE__ */ React.createElement(Icon, { data: SettingsIcon, ...args })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Popup,
+    {
+      anchorRef: controlRef,
+      open: isVisiblePopup,
+      contentClassName: b("popup"),
+      onOutsideClick: hidePopup,
+      placement: getPopupPosition(isVerticalView)
+    },
+    /* @__PURE__ */ React.createElement(
+      List,
+      {
+        items: settingsItems,
+        className: b("list"),
+        itemHeight: ITEM_HEIGHT,
+        itemsHeight: ITEM_HEIGHT * settingsItems.length,
+        filterable: false,
+        renderItem: (item) => {
+          return /* @__PURE__ */ React.createElement("div", { className: b("list-item") }, /* @__PURE__ */ React.createElement("div", { className: b("list-item-content") }, /* @__PURE__ */ React.createElement("div", { className: b("list-item-text") }, item.text), /* @__PURE__ */ React.createElement("div", { className: b("list-item-description") }, item.description)), /* @__PURE__ */ React.createElement("div", { className: b("list-item-control") }, item.control));
+        }
+      }
+    )
+  ));
+};
+var SettingsControl_default = SettingsControl;
+export {
+  SettingsControl_default as default
+};
+//# sourceMappingURL=SettingsControl.js.map