@cloud-ru/ds-markdown 1.0.0

package/dist/cjs/helperComponents/Modals/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CustomizeTableModal"), exports);
+__exportStar(require("./ImageModal"), exports);
+__exportStar(require("./LinkModal"), exports);

package/dist/cjs/helperComponents/Modals/styles.module.css

@@ -0,0 +1,17 @@
+.fields{
+  display:flex;
+  gap:var(--sn-primitive-dimension-16, 16px);
+}
+.fields[data-column]{
+  flex-direction:column;
+}
+
+.field{
+  flex:1 1 0;
+  min-width:0;
+}
+
+.buttons{
+  justify-content:flex-end;
+  width:100%;
+}

package/dist/cjs/helperComponents/PrivateButton/PrivateButton.d.ts

@@ -0,0 +1,17 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+type TipContentProps = {
+    title: string;
+    caption?: string;
+};
+export type PrivateButtonProps = WithSupportProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    icon: ReactNode;
+    withChevron?: boolean;
+    /** active/selected состояние */
+    checked?: boolean;
+    /** Внешний ref, без forwardRef (см. component-api-surface.md). */
+    innerRef?: Ref<HTMLButtonElement>;
+    tip?: TipContentProps;
+}>;
+export declare function PrivateButton({ id, tip, icon, checked, disabled, className, innerRef, type, withChevron, ...rest }: PrivateButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/PrivateButton/PrivateButton.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrivateButton = PrivateButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const typography_1 = require("@cloud-ru/ds-typography");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const PrivateChevronIcon = ((0, jsx_runtime_1.jsx)("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '8', height: '8', viewBox: '0 0 8 8', fill: 'none', className: styles_module_scss_1.default.chevron, children: (0, jsx_runtime_1.jsx)("path", { d: 'M1 3L4 6L7 3', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
+function TipContent({ title, caption }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 's', weight: 'regular', className: styles_module_scss_1.default.tipTitle, children: title }), caption && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 's', weight: 'regular', className: styles_module_scss_1.default.tipCaption, children: caption }))] }));
+}
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef проставляется условно (только без tip), поэтому статический маркер поддержки был бы неверен.
+function PrivateButton({ id, tip, icon, checked = false, disabled = false, className, innerRef, type = 'button', withChevron = false, ...rest }) {
+    return (0, tooltip_1.WithTooltip)({
+        tooltip: tip
+            ? {
+                tip: (0, jsx_runtime_1.jsx)(TipContent, { ...tip }),
+                triggerClassName: styles_module_scss_1.default.tooltipTrigger,
+            }
+            : undefined,
+        children: ((0, jsx_runtime_1.jsxs)("button", { "data-toolbar-item": id, ...rest, "data-toolbar-slot": true, ref: tip ? undefined : innerRef, type: type, disabled: disabled, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-checked": checked || undefined, "data-disabled": disabled || undefined, "aria-pressed": checked, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "data-state": checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground', "aria-hidden": true }), icon, withChevron && PrivateChevronIcon] })),
+    });
+}

package/dist/cjs/helperComponents/PrivateButton/index.d.ts

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

package/dist/cjs/helperComponents/PrivateButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PrivateButton"), exports);

package/dist/cjs/helperComponents/PrivateButton/styles.module.css

@@ -0,0 +1,140 @@
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.root{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  flex:0 0 auto;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  min-width:var(--sn-button-anatomy-size-s-container-iconOnly-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  height:var(--sn-button-anatomy-size-s-container-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  padding:0;
+  border:0;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background:transparent;
+}
+.root:has(.chevron){
+  gap:var(--sn-markdown-anatomy-size-buttons-button-gap, var(--sn-primitive-dimension-2, 2px));
+  padding-right:var(--sn-markdown-anatomy-size-buttons-button-paddingRight, var(--sn-primitive-dimension-4, 4px));
+}
+.root svg{
+  flex:0 0 auto;
+  stroke-width:var(--sn-density-size-icon-strokeWeight-s, 1.5px);
+}
+.root svg:not(.chevron){
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.root:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:0;
+}
+.root[data-checked]{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.root[data-disabled]{
+  cursor:not-allowed;
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.root .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root{
+}
+.root[data-loading] .stateLayer[data-state=borderOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=emptyVersionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=inversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyInversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+
+.tooltipTrigger{
+  display:inline-flex;
+}
+
+.tipTitle{
+  text-align:center;
+}
+
+.tipCaption{
+  color:var(--sn-theme-color-available-inversion-textTertiary, var(--sn-brand-color-text-inversion-tertiary, rgba(242, 243, 248, 0.6)));
+  text-align:center;
+}

package/dist/cjs/helperComponents/TableSelectItem/TableSelectItem.d.ts

@@ -0,0 +1,11 @@
+export type TableSelectItemProps = {
+    /** Hover-состояние (управляется родителем по mouseEnter). */
+    hovered?: boolean;
+    /** Будет ли ячейка попадать в выбранный диапазон. */
+    checked?: boolean;
+    onMouseEnter?(): void;
+    onClick?(): void;
+    'aria-label'?: string;
+    'data-test-id'?: string;
+};
+export declare function TableSelectItem({ hovered, checked, onMouseEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }: TableSelectItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/TableSelectItem/TableSelectItem.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSelectItem = TableSelectItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TableSelectItem({ hovered = false, checked = false, onMouseEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }) {
+    const state = hovered ? 'hovered' : 'default';
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: styles_module_scss_1.default.root, "data-state": state, "data-checked": checked || undefined, onMouseEnter: onMouseEnter, onClick: onClick, "aria-label": ariaLabel, "data-test-id": dataTestId, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "data-state": checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground', "aria-hidden": true }) }));
+}

package/dist/cjs/helperComponents/TableSelectItem/index.d.ts

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

package/dist/cjs/helperComponents/TableSelectItem/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TableSelectItem"), exports);

package/dist/cjs/helperComponents/TableSelectItem/styles.module.css

@@ -0,0 +1,101 @@
+@charset "UTF-8";
+.stateLayer{
+  pointer-events:none;
+}
+
+.root{
+  cursor:pointer;
+  position:relative;
+  box-sizing:border-box;
+  width:var(--sn-markdown-anatomy-size-tableSelect-container-item-size, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-markdown-anatomy-size-tableSelect-container-item-size, var(--sn-primitive-dimension-16, 16px));
+  padding:0;
+  border:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px)) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-radius:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+}
+.root[data-checked]{
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.root .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root{
+}
+.root[data-loading] .stateLayer[data-state=borderOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=emptyVersionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=inversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyInversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}

package/dist/cjs/helperComponents/TableSelectSettingsGrid/TableSelectSettingsGrid.d.ts

@@ -0,0 +1,4 @@
+export type TableSelectSettingsGridProps = {
+    onPick(rows: number, cols: number): void;
+};
+export declare function TableSelectSettingsGrid({ onPick }: TableSelectSettingsGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/TableSelectSettingsGrid/TableSelectSettingsGrid.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSelectSettingsGrid = TableSelectSettingsGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const TableSelectItem_1 = require("../TableSelectItem");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const MAX = 8;
+function TableSelectSettingsGrid({ onPick }) {
+    const { t } = locale_1.markdownLocale.useTranslations();
+    const [hover, setHover] = (0, react_1.useState)(null);
+    const cells = [];
+    for (let r = 1; r <= MAX; r += 1) {
+        for (let c = 1; c <= MAX; c += 1) {
+            cells.push({ r, c });
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.tableGridPicker, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.grid, onMouseLeave: () => setHover(null), children: cells.map(({ r, c }) => {
+                        const checked = hover !== null && r <= hover.r && c <= hover.c;
+                        return ((0, jsx_runtime_1.jsx)(TableSelectItem_1.TableSelectItem, { hovered: hover?.r === r && hover?.c === c, checked: checked, onMouseEnter: () => setHover({ r, c }), onClick: () => onPick(r, c), "aria-label": t('table.insert', { rows: r, cols: c }), "data-test-id": (0, constants_1.tableCellTestId)(r, c) }, `${r}-${c}`));
+                    }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.label, children: hover ? `${hover.r} × ${hover.c}` : t('table.pickSize') })] }) }));
+}

package/dist/cjs/helperComponents/TableSelectSettingsGrid/index.d.ts

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

package/dist/cjs/helperComponents/TableSelectSettingsGrid/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TableSelectSettingsGrid"), exports);

package/dist/cjs/helperComponents/TableSelectSettingsGrid/styles.module.css

@@ -0,0 +1,54 @@
+.root{
+  display:flex;
+  flex-direction:column;
+}
+
+.container{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-markdown-anatomy-size-tableSelect-container-gap, var(--sn-primitive-dimension-4, 4px));
+  box-sizing:border-box;
+  padding:var(--sn-markdown-anatomy-size-tableSelect-container-paddingHorizontal, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-tableSelect-container-paddingHorizontal, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-tableSelect-container-paddingBottom, var(--sn-primitive-dimension-4, 4px));
+}
+
+.grid{
+  display:grid;
+  grid-template-columns:repeat(8, var(--sn-markdown-anatomy-size-tableSelect-container-item-size, var(--sn-primitive-dimension-16, 16px)));
+  gap:var(--sn-markdown-anatomy-size-tableSelect-container-gap, var(--sn-primitive-dimension-4, 4px));
+}
+
+.label{
+  font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  text-align:center;
+}
+
+.customize{
+  cursor:pointer;
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-12, 12px);
+  border:none;
+  font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
+  font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-align:left;
+  background:transparent;
+}
+.customize:hover{
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+
+.customizeLabel{
+  flex:1 1 auto;
+}
+
+.customizeChevron{
+  flex:0 0 auto;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ButtonHeading';
+export * from './Buttons';
+export * from './Modals';
+export * from './PrivateButton';
+export * from './TableSelectItem';
+export * from './TableSelectSettingsGrid';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonHeading"), exports);
+__exportStar(require("./Buttons"), exports);
+__exportStar(require("./Modals"), exports);
+__exportStar(require("./PrivateButton"), exports);
+__exportStar(require("./TableSelectItem"), exports);
+__exportStar(require("./TableSelectSettingsGrid"), exports);

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export * from './locale';

package/dist/cjs/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./locale"), exports);