@diplodoc/components 0.0.0-rc-pdf-icon-custimization-24387828749

package/build/esm/components/Controls/single-controls/SettingsControl/SettingsControl.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TextSizes, Theme } from '../../../../models';
+import './SettingsControl.scss';
+interface ControlProps {
+    fullScreen?: boolean;
+    singlePage?: boolean;
+    wideFormat?: boolean;
+    showMiniToc?: boolean;
+    theme?: Theme;
+    textSize?: TextSizes;
+    onChangeWideFormat?: (value: boolean) => void;
+    onChangeShowMiniToc?: (value: boolean) => void;
+    onChangeTheme?: (theme: Theme) => void;
+    onChangeTextSize?: (textSize: TextSizes) => void;
+}
+declare const SettingsControl: (props: ControlProps) => React.JSX.Element;
+export default SettingsControl;

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

@@ -0,0 +1,200 @@
+// src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
+import React, { useCallback, useContext, useRef } from "react";
+import { Gear } from "@gravity-ui/icons";
+import { Button, List, Popover, Switch, useDirection } from "@gravity-ui/uikit";
+import cn from "bem-cn-lite";
+import { usePopupState, useTranslation } from "../../../../hooks";
+import { TextSizes, Theme } from "../../../../models";
+import { getPopupPosition } from "../../../../utils";
+import { Control } from "../../../Control";
+import { ControlsLayoutContext } from "../../ControlsLayout";
+import "./SettingsControl.css";
+var ITEM_HEIGHT = 48;
+var b = cn("dc-settings-control");
+var SettingsControl = (props) => {
+  const { t } = useTranslation("controls");
+  const { controlClassName, controlSize, isVerticalView, isWideView, isMobileView, popupPosition } = useContext(ControlsLayoutContext);
+  const {
+    textSize,
+    theme,
+    wideFormat,
+    showMiniToc,
+    fullScreen,
+    singlePage,
+    onChangeTheme,
+    onChangeWideFormat,
+    onChangeShowMiniToc,
+    onChangeTextSize
+  } = props;
+  const controlRef = useRef(null);
+  const direction = useDirection();
+  const popupState = usePopupState();
+  const handleOpenChange = useCallback(
+    (opened) => {
+      if (opened) {
+        popupState.open();
+      } else {
+        popupState.close();
+      }
+    },
+    [popupState]
+  );
+  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,
+          {
+            title: t("label_wide_format"),
+            checked: wideFormat,
+            onChange: _onChangeWideFormat
+          }
+        )
+      } : null,
+      onChangeShowMiniToc ? {
+        text: t("label_show_mini_toc"),
+        description: t(
+          `description_show_mini_toc_${showMiniToc ? "enabled" : "disabled"}`,
+          t(`description_show_mini_toc`)
+        ),
+        control: /* @__PURE__ */ React.createElement(
+          Switch,
+          {
+            title: t("label_show_mini_toc"),
+            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,
+          {
+            title: t("label_dark_theme"),
+            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),
+            title: `${t("label_text_size")} ${t(`description_${textSizeKey}_text_size`)}`
+          },
+          /* @__PURE__ */ React.createElement(
+            Button.Icon,
+            {
+              className: b("text-size-button-icon", {
+                active: textSize === textSizeKey
+              })
+            },
+            /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, "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(
+    Popover,
+    {
+      open: popupState.visible,
+      onOpenChange: handleOpenChange,
+      trigger: "click",
+      strategy: "fixed",
+      placement: getPopupPosition(isVerticalView, direction),
+      hasArrow: !isMobileView,
+      returnFocus: true,
+      content: /* @__PURE__ */ React.createElement("div", { className: b("popup", { tooltip: true, "tooltip-content": true }) }, /* @__PURE__ */ React.createElement(
+        List,
+        {
+          role: "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));
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ React.createElement(
+      Control,
+      {
+        ref: controlRef,
+        className: controlClassName,
+        size: controlSize,
+        isWideView,
+        isVerticalView,
+        tooltipText: t("settings-text"),
+        popupPosition,
+        icon: Gear,
+        isTooltipHidden: popupState.visible
+      }
+    )
+  );
+};
+var SettingsControl_default = SettingsControl;
+export {
+  SettingsControl_default as default
+};
+//# sourceMappingURL=SettingsControl.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx"],
+  "sourcesContent": ["import type {ReactElement} from 'react';\n\nimport React, {useCallback, useContext, useRef} from 'react';\nimport {Gear} from '@gravity-ui/icons';\nimport {Button, List, Popover, Switch, useDirection} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\n\nimport {usePopupState, useTranslation} from '../../../../hooks';\nimport {TextSizes, Theme} from '../../../../models';\nimport {getPopupPosition} from '../../../../utils';\nimport {Control} from '../../../Control';\nimport {ControlsLayoutContext} from '../../ControlsLayout';\n\nimport './SettingsControl.scss';\n\nconst ITEM_HEIGHT = 48;\nconst b = cn('dc-settings-control');\n\ninterface ControlProps {\n    fullScreen?: boolean;\n    singlePage?: boolean;\n    wideFormat?: boolean;\n    showMiniToc?: boolean;\n    theme?: Theme;\n    textSize?: TextSizes;\n    onChangeWideFormat?: (value: boolean) => void;\n    onChangeShowMiniToc?: (value: boolean) => void;\n    onChangeTheme?: (theme: Theme) => void;\n    onChangeTextSize?: (textSize: TextSizes) => void;\n}\n\ninterface SettingControlItem {\n    text: string;\n    description: string;\n    control: ReactElement;\n}\n\nconst SettingsControl = (props: ControlProps) => {\n    const {t} = useTranslation('controls');\n    const {controlClassName, controlSize, isVerticalView, isWideView, isMobileView, popupPosition} =\n        useContext(ControlsLayoutContext);\n    const {\n        textSize,\n        theme,\n        wideFormat,\n        showMiniToc,\n        fullScreen,\n        singlePage,\n        onChangeTheme,\n        onChangeWideFormat,\n        onChangeShowMiniToc,\n        onChangeTextSize,\n    } = props;\n\n    const controlRef = useRef<HTMLButtonElement | null>(null);\n    const direction = useDirection();\n\n    const popupState = usePopupState();\n\n    const handleOpenChange = useCallback(\n        (opened: boolean) => {\n            if (opened) {\n                popupState.open();\n            } else {\n                popupState.close();\n            }\n        },\n        [popupState],\n    );\n\n    const _onChangeTextSize = useCallback(\n        (textSizeKey: TextSizes) => () => {\n            if (onChangeTextSize) {\n                onChangeTextSize(textSizeKey);\n            }\n        },\n        [onChangeTextSize],\n    );\n    const _onChangeTheme = useCallback(() => {\n        if (onChangeTheme) {\n            onChangeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark);\n        }\n    }, [theme, onChangeTheme]);\n    const _onChangeWideFormat = useCallback(() => {\n        if (onChangeWideFormat) {\n            onChangeWideFormat(!wideFormat);\n        }\n    }, [wideFormat, onChangeWideFormat]);\n    const _onChangeShowMiniToc = useCallback(() => {\n        if (onChangeShowMiniToc) {\n            onChangeShowMiniToc(!showMiniToc);\n        }\n    }, [showMiniToc, onChangeShowMiniToc]);\n\n    const getSettingsItems = useCallback(() => {\n        const allTextSizes = Object.values(TextSizes);\n        const showMiniTocDisabled = fullScreen || singlePage;\n\n        return [\n            onChangeWideFormat\n                ? {\n                      text: t('label_wide_format'),\n                      description: t(\n                          `description_wide_format_${wideFormat ? 'enabled' : 'disabled'}`,\n                      ),\n                      control: (\n                          <Switch\n                              title={t('label_wide_format')}\n                              checked={wideFormat}\n                              onChange={_onChangeWideFormat}\n                          />\n                      ),\n                  }\n                : null,\n            onChangeShowMiniToc\n                ? {\n                      text: t('label_show_mini_toc'),\n                      description: t(\n                          `description_show_mini_toc_${showMiniToc ? 'enabled' : 'disabled'}`,\n                          t(`description_show_mini_toc`),\n                      ),\n                      control: (\n                          <Switch\n                              title={t('label_show_mini_toc')}\n                              disabled={showMiniTocDisabled}\n                              checked={showMiniToc}\n                              onChange={_onChangeShowMiniToc}\n                          />\n                      ),\n                  }\n                : null,\n            onChangeTheme\n                ? {\n                      text: t('label_dark_theme'),\n                      description:\n                          Theme.Light === theme\n                              ? t('description_disabled_dark_theme')\n                              : t('description_enabled_dark_theme'),\n                      control: (\n                          <Switch\n                              title={t('label_dark_theme')}\n                              checked={theme === Theme.Dark}\n                              onChange={_onChangeTheme}\n                          />\n                      ),\n                  }\n                : null,\n            onChangeTextSize\n                ? {\n                      text: t('label_text_size'),\n                      description: t(`description_${textSize}_text_size`),\n                      control: (\n                          <div className={b('text-size-control')}>\n                              {allTextSizes.map((textSizeKey) => (\n                                  <Button\n                                      key={textSizeKey}\n                                      className={b('text-size-button', {\n                                          [textSizeKey]: true,\n                                      })}\n                                      view=\"flat\"\n                                      onClick={_onChangeTextSize(textSizeKey)}\n                                      title={`${t('label_text_size')} ${t(`description_${textSizeKey}_text_size`)}`}\n                                  >\n                                      <Button.Icon\n                                          className={b('text-size-button-icon', {\n                                              active: textSize === textSizeKey,\n                                          })}\n                                      >\n                                          <span aria-hidden={true}>A</span>\n                                      </Button.Icon>\n                                  </Button>\n                              ))}\n                          </div>\n                      ),\n                  }\n                : null,\n        ].filter(Boolean) as unknown as SettingControlItem[];\n    }, [\n        t,\n        textSize,\n        theme,\n        wideFormat,\n        showMiniToc,\n        fullScreen,\n        singlePage,\n        _onChangeTheme,\n        _onChangeWideFormat,\n        _onChangeShowMiniToc,\n        _onChangeTextSize,\n        onChangeWideFormat,\n        onChangeShowMiniToc,\n        onChangeTheme,\n        onChangeTextSize,\n    ]);\n\n    const settingsItems = getSettingsItems();\n\n    return (\n        <Popover\n            open={popupState.visible}\n            onOpenChange={handleOpenChange}\n            trigger=\"click\"\n            strategy=\"fixed\"\n            placement={getPopupPosition(isVerticalView, direction)}\n            hasArrow={!isMobileView}\n            returnFocus={true}\n            content={\n                <div className={b('popup', {tooltip: true, 'tooltip-content': true})}>\n                    <List\n                        role={'list'}\n                        items={settingsItems}\n                        className={b('list')}\n                        itemHeight={ITEM_HEIGHT}\n                        itemsHeight={ITEM_HEIGHT * settingsItems.length}\n                        filterable={false}\n                        renderItem={(item: SettingControlItem) => {\n                            return (\n                                <div className={b('list-item')}>\n                                    <div className={b('list-item-content')}>\n                                        <div className={b('list-item-text')}>{item.text}</div>\n                                        <div className={b('list-item-description')}>\n                                            {item.description}\n                                        </div>\n                                    </div>\n                                    <div className={b('list-item-control')}>{item.control}</div>\n                                </div>\n                            );\n                        }}\n                    />\n                </div>\n            }\n        >\n            <Control\n                ref={controlRef}\n                className={controlClassName}\n                size={controlSize}\n                isWideView={isWideView}\n                isVerticalView={isVerticalView}\n                tooltipText={t('settings-text')}\n                popupPosition={popupPosition}\n                icon={Gear}\n                isTooltipHidden={popupState.visible}\n            />\n        </Popover>\n    );\n};\n\nexport default SettingsControl;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/SinglePageControl.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ControlProps {
+    value?: boolean;
+    onChange: (value: boolean) => void;
+}
+declare const SinglePageControl: React.NamedExoticComponent<ControlProps>;
+export default SinglePageControl;

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

@@ -0,0 +1,53 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b2) => {
+  for (var prop in b2 || (b2 = {}))
+    if (__hasOwnProp.call(b2, prop))
+      __defNormalProp(a, prop, b2[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b2)) {
+      if (__propIsEnum.call(b2, prop))
+        __defNormalProp(a, prop, b2[prop]);
+    }
+  return a;
+};
+
+// src/components/Controls/single-controls/SinglePageControl.tsx
+import React, { memo, useCallback, useContext } from "react";
+import { ChevronsCollapseToLine, ChevronsExpandToLines } from "@gravity-ui/icons";
+import block from "bem-cn-lite";
+import { useTranslation } from "../../../hooks";
+import { Control } from "../../Control";
+import { ControlsLayoutContext } from "../ControlsLayout";
+var b = block("dc-controls");
+var SinglePageControl = memo((props) => {
+  const { t } = useTranslation("controls");
+  const { controlClassName, controlSize, isVerticalView, popupPosition } = useContext(ControlsLayoutContext);
+  const { value, onChange } = props;
+  const onClick = useCallback(() => {
+    onChange(!value);
+  }, [value, onChange]);
+  const activeMode = value ? "enabled" : "disabled";
+  const Icon = value ? ChevronsExpandToLines : ChevronsCollapseToLine;
+  return /* @__PURE__ */ React.createElement(
+    Control,
+    {
+      size: controlSize,
+      onClick,
+      className: controlClassName,
+      isVerticalView,
+      tooltipText: t(`single-page-text-${activeMode}`),
+      icon: (args) => /* @__PURE__ */ React.createElement(Icon, __spreadValues({ className: b("icon-rotated") }, args)),
+      popupPosition
+    }
+  );
+});
+SinglePageControl.displayName = "SinglePageControl";
+var SinglePageControl_default = SinglePageControl;
+export {
+  SinglePageControl_default as default
+};
+//# sourceMappingURL=SinglePageControl.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/Controls/single-controls/SinglePageControl.tsx"],
+  "sourcesContent": ["import React, {memo, useCallback, useContext} from 'react';\nimport {ChevronsCollapseToLine, ChevronsExpandToLines} from '@gravity-ui/icons';\nimport block from 'bem-cn-lite';\n\nimport {useTranslation} from '../../../hooks';\nimport {Control} from '../../Control';\nimport {ControlsLayoutContext} from '../ControlsLayout';\n\ninterface ControlProps {\n    value?: boolean;\n    onChange: (value: boolean) => void;\n}\n\nconst b = block('dc-controls');\n\nconst SinglePageControl = 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        onChange(!value);\n    }, [value, onChange]);\n\n    const activeMode = value ? 'enabled' : 'disabled';\n    const Icon = value ? ChevronsExpandToLines : ChevronsCollapseToLine;\n\n    return (\n        <Control\n            size={controlSize}\n            onClick={onClick}\n            className={controlClassName}\n            isVerticalView={isVerticalView}\n            tooltipText={t(`single-page-text-${activeMode}`)}\n            icon={(args) => <Icon className={b('icon-rotated')} {...args} />}\n            popupPosition={popupPosition}\n        />\n    );\n});\n\nSinglePageControl.displayName = 'SinglePageControl';\n\nexport default SinglePageControl;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAQ,MAAM,aAAa,kBAAiB;AACnD,SAAQ,wBAAwB,6BAA4B;AAC5D,OAAO,WAAW;AAElB,SAAQ,sBAAqB;AAC7B,SAAQ,eAAc;AACtB,SAAQ,6BAA4B;AAOpC,IAAM,IAAI,MAAM,aAAa;AAE7B,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,aAAS,CAAC,KAAK;AAAA,EACnB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,QAAM,aAAa,QAAQ,YAAY;AACvC,QAAM,OAAO,QAAQ,wBAAwB;AAE7C,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,SAAS,oCAAC,uBAAK,WAAW,EAAE,cAAc,KAAO,KAAM;AAAA,MAC9D;AAAA;AAAA,EACJ;AAER,CAAC;AAED,kBAAkB,cAAc;AAEhC,IAAO,4BAAQ;",
+  "names": []
+}

package/build/esm/components/Controls/single-controls/index.d.ts

@@ -0,0 +1,7 @@
+export { default as FullScreenControl } from './FullScreenControl';
+export { default as SettingsControl } from './SettingsControl/SettingsControl';
+export { default as SinglePageControl } from './SinglePageControl';
+export { default as LangControl } from './LangControl/LangControl';
+export { default as DividerControl } from './DividerControl/DividerControl';
+export { default as PdfControl } from './PdfControl';
+export { default as EditControl } from './EditControl';

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

@@ -0,0 +1,18 @@
+// src/components/Controls/single-controls/index.ts
+import { default as default2 } from "./FullScreenControl";
+import { default as default3 } from "./SettingsControl/SettingsControl";
+import { default as default4 } from "./SinglePageControl";
+import { default as default5 } from "./LangControl/LangControl";
+import { default as default6 } from "./DividerControl/DividerControl";
+import { default as default7 } from "./PdfControl";
+import { default as default8 } from "./EditControl";
+export {
+  default6 as DividerControl,
+  default8 as EditControl,
+  default2 as FullScreenControl,
+  default5 as LangControl,
+  default7 as PdfControl,
+  default3 as SettingsControl,
+  default4 as SinglePageControl
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/Controls/single-controls/index.ts"],
+  "sourcesContent": ["export {default as FullScreenControl} from './FullScreenControl';\nexport {default as SettingsControl} from './SettingsControl/SettingsControl';\nexport {default as SinglePageControl} from './SinglePageControl';\nexport {default as LangControl} from './LangControl/LangControl';\nexport {default as DividerControl} from './DividerControl/DividerControl';\nexport {default as PdfControl} from './PdfControl';\nexport {default as EditControl} from './EditControl';\n"],
+  "mappings": ";AAAA,SAAmB,WAAXA,gBAAmC;AAC3C,SAAmB,WAAXA,gBAAiC;AACzC,SAAmB,WAAXA,gBAAmC;AAC3C,SAAmB,WAAXA,gBAA6B;AACrC,SAAmB,WAAXA,gBAAgC;AACxC,SAAmB,WAAXA,gBAA4B;AACpC,SAAmB,WAAXA,gBAA6B;",
+  "names": ["default"]
+}

package/build/esm/components/DocContentPage/DocContentPage.d.ts

@@ -0,0 +1,21 @@
+import type { DocContentPageData, Router } from '../../models';
+import React from 'react';
+export interface DocContentPageProps extends DocContentPageData {
+    router: Router;
+    headerHeight?: number;
+    wideFormat?: boolean;
+    hideToc?: boolean;
+    tocTitleIcon?: React.ReactNode;
+    useMainTag?: boolean;
+    legacyToc?: boolean;
+    fullScreen?: boolean;
+    viewerInterface?: Record<string, boolean>;
+    hideTocHeader?: boolean;
+    pdfLink?: string;
+    pdfIconConfig?: {
+        position?: string;
+        size?: 'S' | 'M' | 'L';
+        icon?: string;
+    };
+}
+export declare const DocContentPage: React.FC<DocContentPageProps>;

package/build/esm/components/DocContentPage/DocContentPage.js

@@ -0,0 +1,53 @@
+// src/components/DocContentPage/DocContentPage.tsx
+import React from "react";
+import block from "bem-cn-lite";
+import { DEFAULT_SETTINGS } from "../../constants";
+import { ContentWrapper } from "../ContentWrapper";
+import { DocLayout } from "../DocLayout";
+var b = block("dc-doc-page");
+var { wideFormat: defaultWideFormat } = DEFAULT_SETTINGS;
+var DocContentPage = ({
+  data,
+  toc,
+  router,
+  headerHeight,
+  wideFormat = defaultWideFormat,
+  hideToc,
+  tocTitleIcon,
+  footer,
+  children,
+  useMainTag,
+  legacyToc,
+  fullScreen,
+  hideTocHeader,
+  pdfLink,
+  pdfIconConfig
+}) => {
+  const modes = {
+    "regular-page-width": !wideFormat
+  };
+  return /* @__PURE__ */ React.createElement(
+    DocLayout,
+    {
+      toc,
+      router,
+      headerHeight,
+      className: b(modes),
+      hideToc,
+      fullScreen: fullScreen || (data == null ? void 0 : data.fullScreen),
+      tocTitleIcon,
+      footer,
+      hideRight: true,
+      wideFormat,
+      legacyToc,
+      hideTocHeader,
+      pdfLink,
+      pdfIconConfig
+    },
+    /* @__PURE__ */ React.createElement(DocLayout.Center, null, /* @__PURE__ */ React.createElement("div", { className: b("main") }, /* @__PURE__ */ React.createElement(ContentWrapper, { className: b("content"), useMainTag }, children)))
+  );
+};
+export {
+  DocContentPage
+};
+//# sourceMappingURL=DocContentPage.js.map

package/build/esm/components/DocContentPage/DocContentPage.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/DocContentPage/DocContentPage.tsx"],
+  "sourcesContent": ["import type {DocContentPageData, Router} from '../../models';\n\nimport React from 'react';\nimport block from 'bem-cn-lite';\n\nimport {DEFAULT_SETTINGS} from '../../constants';\nimport {ContentWrapper} from '../ContentWrapper';\nimport {DocLayout} from '../DocLayout';\n\nconst b = block('dc-doc-page');\n\nconst {wideFormat: defaultWideFormat} = DEFAULT_SETTINGS;\n\nexport interface DocContentPageProps extends DocContentPageData {\n    router: Router;\n    headerHeight?: number;\n    wideFormat?: boolean;\n    hideToc?: boolean;\n    tocTitleIcon?: React.ReactNode;\n    useMainTag?: boolean;\n    legacyToc?: boolean;\n    fullScreen?: boolean;\n    viewerInterface?: Record<string, boolean>;\n    hideTocHeader?: boolean;\n    pdfLink?: string;\n    pdfIconConfig?: {position?: string; size?: 'S' | 'M' | 'L'; icon?: string};\n}\n\nexport const DocContentPage: React.FC<DocContentPageProps> = ({\n    data,\n    toc,\n    router,\n    headerHeight,\n    wideFormat = defaultWideFormat,\n    hideToc,\n    tocTitleIcon,\n    footer,\n    children,\n    useMainTag,\n    legacyToc,\n    fullScreen,\n    hideTocHeader,\n    pdfLink,\n    pdfIconConfig,\n}) => {\n    const modes = {\n        'regular-page-width': !wideFormat,\n    };\n    return (\n        <DocLayout\n            toc={toc}\n            router={router}\n            headerHeight={headerHeight}\n            className={b(modes)}\n            hideToc={hideToc}\n            fullScreen={fullScreen || data?.fullScreen}\n            tocTitleIcon={tocTitleIcon}\n            footer={footer}\n            hideRight={true}\n            wideFormat={wideFormat}\n            legacyToc={legacyToc}\n            hideTocHeader={hideTocHeader}\n            pdfLink={pdfLink}\n            pdfIconConfig={pdfIconConfig}\n        >\n            <DocLayout.Center>\n                <div className={b('main')}>\n                    <ContentWrapper className={b('content')} useMainTag={useMainTag}>\n                        {children}\n                    </ContentWrapper>\n                </div>\n            </DocLayout.Center>\n        </DocLayout>\n    );\n};\n"],
+  "mappings": ";AAEA,OAAO,WAAW;AAClB,OAAO,WAAW;AAElB,SAAQ,wBAAuB;AAC/B,SAAQ,sBAAqB;AAC7B,SAAQ,iBAAgB;AAExB,IAAM,IAAI,MAAM,aAAa;AAE7B,IAAM,EAAC,YAAY,kBAAiB,IAAI;AAiBjC,IAAM,iBAAgD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,QAAQ;AAAA,IACV,sBAAsB,CAAC;AAAA,EAC3B;AACA,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,EAAE,KAAK;AAAA,MAClB;AAAA,MACA,YAAY,eAAc,6BAAM;AAAA,MAChC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oCAAC,UAAU,QAAV,MACG,oCAAC,SAAI,WAAW,EAAE,MAAM,KACpB,oCAAC,kBAAe,WAAW,EAAE,SAAS,GAAG,cACpC,QACL,CACJ,CACJ;AAAA,EACJ;AAER;",
+  "names": []
+}

package/build/esm/components/DocContentPage/index.d.ts

@@ -0,0 +1 @@
+export * from './DocContentPage';

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

@@ -0,0 +1,3 @@
+// src/components/DocContentPage/index.ts
+export * from "./DocContentPage";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/DocContentPage/index.ts"],
+  "sourcesContent": ["export * from './DocContentPage';\n"],
+  "mappings": ";AAAA,cAAc;",
+  "names": []
+}

package/build/esm/components/DocLayout/DocLayout.css

@@ -0,0 +1,142 @@
+/* src/components/DocLayout/DocLayout.scss */
+.dc-doc-layout {
+  display: flex;
+  align-items: center;
+  margin: 0 auto;
+  height: 100%;
+  background: var(--g-color-base-background);
+}
+@media (max-width: 768px) {
+  .dc-doc-layout {
+    align-items: normal;
+  }
+}
+.dc-doc-layout__left,
+.dc-doc-layout__right {
+  order: 3;
+  flex: 0 0 auto;
+  box-sizing: content-box;
+}
+.dc-doc-layout__right {
+  width: 176px;
+  padding-right: 24px;
+}
+.dc-doc-layout__right_full-screen,
+.dc-doc-layout__right_hidden-right {
+  flex: initial;
+}
+.dc-doc-layout__left {
+  order: 1;
+  width: 276px;
+}
+.dc-doc-layout__left_full-screen {
+  flex: initial;
+}
+.dc-doc-layout__center {
+  order: 2;
+  flex: 1 1 auto;
+  position: relative;
+  min-width: 0;
+}
+.dc-doc-layout__center.dc-doc-layout__center_hidden-right.dc-doc-layout__center_regular-page-width:not(.dc-doc-layout__center_full-screen) {
+  max-width: 824px;
+}
+.dc-doc-layout__center_full-screen {
+  flex: 0 0 auto;
+  width: 100%;
+}
+.dc-doc-layout__center_loading {
+  height: calc(100vh - 0px);
+  height: calc(100vh - var(--dc-header-height, 0px));
+  overflow: hidden;
+}
+.dc-doc-layout__toc {
+  position: fixed;
+  z-index: 100;
+  top: 0px;
+  top: var(--dc-header-height, 0px);
+  padding-left: 24px;
+  width: 252px;
+  box-sizing: content-box;
+  background-color: var(--g-color-base-background);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+.mobile .dc-doc-layout__desktop-only {
+  display: none;
+}
+.desktop .dc-doc-layout__mobile-only {
+  display: none;
+}
+@media (max-width: 768px) {
+  .dc-doc-layout {
+    flex-direction: column-reverse;
+  }
+  .dc-doc-layout__right {
+    position: sticky;
+    top: calc(0px - 1px);
+    top: calc(var(--dc-header-height, 0px) - 1px);
+    left: 0;
+    z-index: 118;
+    height: -moz-fit-content;
+    height: fit-content;
+    width: 100%;
+    padding: 0;
+  }
+  .dc-doc-layout__left {
+    position: fixed;
+    top: calc(0px + 52px + 1px);
+    top: calc(var(--dc-header-height, 0px) + var(--dc-subnavigation-height, 52px) + 1px);
+    left: calc(0px - 105vw);
+    z-index: 119;
+    box-sizing: border-box;
+    max-height: calc(100vh - 0px - 52px + 1px);
+    max-height: calc(100vh - var(--dc-header-height, 0px) - var(--dc-subnavigation-height, 52px) + 1px);
+    height: 100%;
+    width: 100vw;
+    padding: 0;
+    background-color: #fff;
+    background-color: var(--g-color-base-background, #fff);
+    border-right: 1px solid rgba(0, 0, 0, 0.1019607843);
+    border-right: 1px solid var(--g-color-line-generic, rgba(0, 0, 0, 0.1019607843));
+    transition: left 300ms 0ms;
+  }
+  .dc-doc-layout__left_visible {
+    left: 0;
+  }
+  body:has(.dc-doc-layout__left_visible) {
+    overflow-y: hidden;
+  }
+  .dc-doc-layout__legacy-toc {
+    position: static;
+    left: auto;
+    width: 100%;
+    border-right: none;
+  }
+  .dc-doc-layout__toc {
+    position: static;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    font-size: var(--g-text-body-2-font-size);
+    line-height: var(--g-text-body-2-line-height);
+  }
+  .dc-doc-layout__toc .dc-toc {
+    height: 100% !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .dc-doc-layout__center .dc-doc-layout.dc-doc-layout_hidden-right.dc-doc-layout_regular-page-width:not(.dc-doc-layout_full-screen) {
+    max-width: 836px;
+  }
+  .dc-doc-layout__right {
+    width: 200px;
+  }
+  .dc-doc-layout__toc {
+    width: 252px;
+  }
+  .dc-doc-layout__left {
+    width: 276px;
+  }
+}
+/*# sourceMappingURL=DocLayout.css.map */