@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/cssm/components/ButtonGroup/ButtonGroup.module.css

@@ -1 +1,77 @@
-.vkuiButtonGroup{display:inline-flex;max-width:100%}.vkuiButtonGroup--stretched{display:flex;width:100%}.vkuiButtonGroup--mode-vertical{flex-direction:column}.vkuiButtonGroup--mode-horizontal{flex-direction:row}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-space>:not(:first-child){margin-top:1px;margin-top:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-s>:not(:first-child){margin-top:8px;margin-top:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-m>:not(:first-child){margin-top:12px;margin-top:var(--vkui--size_button_group_gap_medium--regular)}.vkuiButtonGroup--mode-horizontal>:not(.vkuiButtonGroup){min-width:0}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-space>:not(:last-child){margin-right:1px;margin-right:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-s>:not(:last-child){margin-right:8px;margin-right:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-m>:not(:last-child){margin-right:12px;margin-right:var(--vkui--size_button_group_gap_medium--regular)}.vkuiButtonGroup--align-left{align-items:flex-start}.vkuiButtonGroup--align-center{align-items:center}.vkuiButtonGroup--align-right{align-items:flex-end}
+.ButtonGroup {
+  display: inline-flex;
+  max-width: 100%; /* [Примечание 2] Чтобы блок не выходил за границы контейнера (связано с [Примечание 4]) */
+}
+
+.ButtonGroup--stretched {
+  display: flex;
+  width: 100%;
+}
+
+.ButtonGroup--mode-vertical {
+  flex-direction: column;
+}
+
+.ButtonGroup--mode-horizontal {
+  flex-direction: row;
+}
+
+/* stylelint-disable vkui/atomic */
+
+/**
+ * [Примечание 3] Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
+ */
+
+/* "gap" для mode="vertical" */
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-space > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-s > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-m > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* "gap" для mode="horizontal" */
+
+.ButtonGroup--mode-horizontal > *:not(.ButtonGroup) {
+  /**
+   * [Примечание 4]
+   *
+   * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
+   * из-за чего элементы при переполнении будут выходить за границы контейнера.
+   *
+   * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
+   */
+  min-width: 0;
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-space > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-s > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-m > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* stylelint-enable vkui/atomic */
+
+.ButtonGroup--align-left {
+  align-items: flex-start;
+}
+
+.ButtonGroup--align-center {
+  align-items: center;
+}
+
+.ButtonGroup--align-right {
+  align-items: flex-end;
+}

package/dist/cssm/components/Calendar/Calendar.module.css

@@ -1 +1,30 @@
-.vkuiCalendar{background:#fff;background:var(--vkui--color_background_modal);border:.5px solid #d7d8d9;border:.5px solid var(--vkui--color_separator_primary);border-radius:8px;box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation1);box-sizing:border-box;display:flex;flex-direction:column;padding:12px;width:305px}.vkuiCalendar__time{border-top:1px solid #d7d8d9;border-top:1px solid var(--vkui--color_separator_primary);margin:12px -12px 0;padding:12px 12px 0}.vkuiCalendar__header{margin-bottom:4px}.vkuiCalendar--size-s{padding:8px;width:220px}.vkuiCalendar--size-s .vkuiCalendar__header{margin-bottom:0}
+.Calendar {
+  display: flex;
+  flex-direction: column;
+  background: var(--vkui--color_background_modal);
+  border: 0.5px solid var(--vkui--color_separator_primary);
+  box-sizing: border-box;
+  box-shadow: var(--vkui--elevation1);
+  border-radius: 8px;
+  width: 305px;
+  padding: 12px;
+}
+
+.Calendar__time {
+  border-top: 1px solid var(--vkui--color_separator_primary);
+  margin: 12px -12px 0;
+  padding: 12px 12px 0;
+}
+
+.Calendar__header {
+  margin-bottom: 4px;
+}
+
+.Calendar--size-s {
+  width: 220px;
+  padding: 8px;
+}
+
+.Calendar--size-s .Calendar__header {
+  margin-bottom: 0;
+}

package/dist/cssm/components/CalendarDay/CalendarDay.module.css

@@ -1 +1,84 @@
-.vkuiCalendarDay{border-radius:0;color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-size:14px}.vkuiCalendarDay,.vkuiCalendarDay__hidden{flex-basis:calc(100% / 7);flex-grow:0;height:36px}.vkuiCalendarDay--size-s,.vkuiCalendarDay__hidden--size-s{height:34px}.vkuiCalendarDay--disabled,.vkuiCalendarDay--not-same-month{color:#99a2ad;color:var(--vkui--color_text_tertiary)}.vkuiCalendarDay--selected{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary)}.vkuiCalendarDay--selection-start.vkuiCalendarDay--selected,.vkuiCalendarDay__hinted--selection-start{border-bottom-left-radius:8px;border-top-left-radius:8px}.vkuiCalendarDay--selection-end.vkuiCalendarDay--selected,.vkuiCalendarDay__hinted--selection-end{border-bottom-right-radius:8px;border-top-right-radius:8px}.vkuiCalendarDay__day-number{text-align:center}.vkuiCalendarDay--today{font-weight:600}.vkuiCalendarDay--today .vkuiCalendarDay__day-number:after{border-bottom:2px solid #2688eb;border-bottom:2px solid var(--vkui--color_stroke_accent);content:"";display:block;left:50%;position:relative;transform:translateX(-50%);width:16px}.vkuiCalendarDay--today .vkuiCalendarDay__inner--active .vkuiCalendarDay__day-number:after{border-bottom-color:#fff;border-bottom-color:var(--vkui--color_stroke_contrast)}.vkuiCalendarDay__hinted,.vkuiCalendarDay__inner{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.vkuiCalendarDay__inner{border-radius:8px}.vkuiCalendarDay--hover :not(.vkuiCalendarDay__hinted--active) .vkuiCalendarDay__inner,.vkuiCalendarDay__hinted--active{background-color:rgba(0,0,0,.08);background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiCalendarDay__inner--active{background-color:#2688eb;background-color:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}
+.CalendarDay {
+  border-radius: 0;
+  font-size: 14px;
+  color: var(--vkui--color_text_primary);
+  font-family: var(--vkui--font_family_base);
+}
+
+.CalendarDay__hidden,
+.CalendarDay {
+  height: 36px;
+  flex-basis: calc(100% / 7);
+  flex-grow: 0;
+}
+
+.CalendarDay__hidden--size-s,
+.CalendarDay--size-s {
+  height: 34px;
+}
+
+.CalendarDay--disabled,
+.CalendarDay--not-same-month {
+  color: var(--vkui--color_text_tertiary);
+}
+
+.CalendarDay--selected {
+  background-color: var(--vkui--color_background_secondary);
+}
+
+.CalendarDay--selection-start.CalendarDay--selected,
+.CalendarDay__hinted--selection-start {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.CalendarDay--selection-end.CalendarDay--selected,
+.CalendarDay__hinted--selection-end {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.CalendarDay__day-number {
+  text-align: center;
+}
+
+.CalendarDay--today {
+  font-weight: 600;
+}
+
+.CalendarDay--today .CalendarDay__day-number::after {
+  content: '';
+  border-bottom: 2px solid var(--vkui--color_stroke_accent);
+  width: 16px;
+  display: block;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.CalendarDay--today .CalendarDay__inner--active .CalendarDay__day-number::after {
+  border-bottom-color: var(--vkui--color_stroke_contrast);
+}
+
+.CalendarDay__inner,
+.CalendarDay__hinted {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.CalendarDay__inner {
+  border-radius: 8px;
+}
+
+.CalendarDay__hinted--active,
+.CalendarDay--hover :not(.CalendarDay__hinted--active) .CalendarDay__inner {
+  background-color: var(--vkui--color_background_secondary_alpha--hover);
+}
+
+.CalendarDay__inner--active {
+  background-color: var(--vkui--color_background_accent);
+  color: var(--vkui--color_text_contrast);
+}

package/dist/cssm/components/CalendarDays/CalendarDays.module.css

@@ -1 +1,31 @@
-.vkuiCalendarDays{display:flex;flex-direction:column;flex-grow:1;justify-content:space-around}.vkuiCalendarDays__row{display:flex;flex-grow:1;justify-content:center}.vkuiCalendarDays__row:not(:last-child){margin-bottom:4px}.vkuiCalendarDays__row--size-s:not(:last-child){margin-bottom:0}.vkuiCalendarDays__weekday{align-items:center;color:#6d7885;color:var(--vkui--color_text_subhead);display:flex;flex-basis:calc(100% / 7);flex-grow:0;height:32px;justify-content:center;text-transform:capitalize}
+.CalendarDays {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  flex-grow: 1;
+}
+
+.CalendarDays__row {
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.CalendarDays__row:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.CalendarDays__row--size-s:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.CalendarDays__weekday {
+  text-transform: capitalize;
+  color: var(--vkui--color_text_subhead);
+  height: 32px;
+  flex-basis: calc(100% / 7);
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/cssm/components/CalendarHeader/CalendarHeader.module.css

@@ -1 +1,41 @@
-.vkuiCalendarHeader{align-items:center;display:flex;justify-content:center;min-height:36px;position:relative}.vkuiCalendarHeader__pickers{color:#000;color:var(--vkui--color_text_primary);display:flex;position:absolute}.vkuiCalendarHeader__picker+.vkuiCalendarHeader__picker{margin-left:4px}.vkuiCalendarHeader__nav-icon{align-items:center;display:flex;justify-content:center;padding:3px;position:absolute}.vkuiCalendarHeader__nav-icon--accent{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiCalendarHeader__nav-icon-next{right:0}.vkuiCalendarHeader__nav-icon-prev{left:0}.vkuiCalendarHeader__month{text-transform:capitalize}
+.CalendarHeader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  min-height: 36px;
+}
+
+.CalendarHeader__pickers {
+  display: flex;
+  position: absolute;
+  color: var(--vkui--color_text_primary);
+}
+
+.CalendarHeader__picker + .CalendarHeader__picker {
+  margin-left: 4px;
+}
+
+.CalendarHeader__nav-icon {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px;
+}
+
+.CalendarHeader__nav-icon--accent {
+  color: var(--vkui--color_icon_accent);
+}
+
+.CalendarHeader__nav-icon-next {
+  right: 0;
+}
+
+.CalendarHeader__nav-icon-prev {
+  left: 0;
+}
+
+.CalendarHeader__month {
+  text-transform: capitalize;
+}

package/dist/cssm/components/CalendarRange/CalendarRange.module.css

@@ -1 +1,26 @@
-.vkuiCalendarRange{background:#fff;background:var(--vkui--color_background_modal);border:.5px solid #d7d8d9;border:.5px solid var(--vkui--color_separator_primary);border-radius:8px;box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation1);box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-around;padding:12px;width:610px}.vkuiCalendarRange__inner{display:flex;flex-direction:column;flex-grow:1}.vkuiCalendarRange__inner:not(:last-child){margin-right:24px}.vkuiCalendarRange__header{margin-bottom:4px}
+.CalendarRange {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  width: 610px;
+  background: var(--vkui--color_background_modal);
+  border: 0.5px solid var(--vkui--color_separator_primary);
+  box-sizing: border-box;
+  box-shadow: var(--vkui--elevation1);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.CalendarRange__inner {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.CalendarRange__inner:not(:last-child) {
+  margin-right: 24px;
+}
+
+.CalendarRange__header {
+  margin-bottom: 4px;
+}

package/dist/cssm/components/CalendarTime/CalendarTime.module.css

@@ -1 +1,19 @@
-.vkuiCalendarTime{align-items:center;display:flex}.vkuiCalendarTime__picker{width:77px}.vkuiCalendarTime__divider{color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);margin-left:6px;margin-right:6px}.vkuiCalendarTime__button{margin-left:auto}
+.CalendarTime {
+  display: flex;
+  align-items: center;
+}
+
+.CalendarTime__picker {
+  width: 77px;
+}
+
+.CalendarTime__divider {
+  margin-left: 6px;
+  margin-right: 6px;
+  color: var(--vkui--color_text_primary);
+  font-family: var(--vkui--font_family_base);
+}
+
+.CalendarTime__button {
+  margin-left: auto;
+}

package/dist/cssm/components/Card/Card.js

@@ -8,9 +8,7 @@ import styles from './Card.module.css';
         ...restProps,
         ref: getRootRef,
         className: classNames(styles['Card'], mode === 'outline' && styles['Card--mode-outline'], mode === 'shadow' && styles['Card--mode-shadow'], className)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Card__in']
-    }, children));
+    }, children);
 };
 
 //# sourceMappingURL=Card.js.map

package/dist/cssm/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      <div className={styles['Card__in']}>{children}</div>\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Card","mode","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,oBAAoB;AAQvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,MAAO,OAAM,EACbC,SAAQ,EACRC,WAAU,EACVC,UAAS,EACT,GAAGC,WACO,GAAK;IACf,qBACE,oBAACC;QACE,GAAGD,SAAS;QACbE,KAAKJ;QACLC,WAAWN,WACTC,MAAM,CAAC,OAAO,EACdE,SAAS,aAAaF,MAAM,CAAC,qBAAqB,EAClDE,SAAS,YAAYF,MAAM,CAAC,oBAAoB,EAChDK;qBAGF,oBAACE;QAAIF,WAAWL,MAAM,CAAC,WAAW;OAAGG;AAG3C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Card","mode","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,oBAAoB;AAQvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,MAAO,OAAM,EACbC,SAAQ,EACRC,WAAU,EACVC,UAAS,EACT,GAAGC,WACO,GAAK;IACf,qBACE,oBAACC;QACE,GAAGD,SAAS;QACbE,KAAKJ;QACLC,WAAWN,WACTC,MAAM,CAAC,OAAO,EACdE,SAAS,aAAaF,MAAM,CAAC,qBAAqB,EAClDE,SAAS,YAAYF,MAAM,CAAC,oBAAoB,EAChDK;OAGDF;AAGP,EAAE"}

package/dist/cssm/components/Card/Card.module.css

@@ -1,3 +1,131 @@
-.vkuiCard{background:#f5f5f5;background:var(--vkui--color_background_secondary);border-radius:8px;border-radius:var(--vkui--size_card_border_radius--regular);position:relative}.vkuiCard__in{border-radius:inherit;position:relative}.vkuiCard--mode-shadow{box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(
-    --vkui--elevation3,0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08)
-  )}.vkuiCard--mode-outline,.vkuiCard--mode-shadow{background:#fff;background:var(--vkui--color_background_modal)}.vkuiCard--mode-outline:after{border:1px solid rgba(0,0,0,.08);border:var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);border-radius:inherit;box-sizing:border-box;content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.vkuiInternalCardScroll .vkuiCard{flex-shrink:0;margin-right:8px;margin-right:var(--vkui--size_cardgrid_padding--regular)}.vkuiInternalCardScroll .vkuiCard:last-of-type{margin-right:0}.vkuiInternalCardScroll--size-s .vkuiCard{width:40%}.vkuiInternalCardScroll--size-m .vkuiCard{width:62%}.vkuiInternalCardScroll--size-l .vkuiCard{margin-right:16px;margin-right:var(--vkui--size_base_padding_horizontal--regular);width:calc(100% - 16px * 2);width:calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2)}.vkuiInternalGroup--mode-card .vkuiInternalCardScroll--size-l .vkuiCard,.vkuiInternalSplitCol--spaced .vkuiInternalCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}.vkuiInternalGroup--mode-card .vkuiInternalCardScroll--size-l .vkuiCard:last-of-type,.vkuiInternalSplitCol--spaced .vkuiInternalCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}@media (min-width:768px){.vkuiInternalGroup--mode-none .vkuiInternalCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}.vkuiInternalGroup--mode-none .vkuiInternalCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}}
+.Card {
+  position: relative;
+  background: var(--vkui--color_background_secondary);
+  border-radius: var(--vkui--size_card_border_radius--regular);
+}
+
+.Card--mode-shadow {
+  box-shadow: var(
+    --vkui--elevation3,
+    0 2px 24px 0 rgba(0, 0, 0, 0.08),
+    0 0 2px 0 rgba(0, 0, 0, 0.08)
+  );
+  background: var(--vkui--color_background_modal);
+}
+
+.Card--mode-outline {
+  background: var(--vkui--color_background_modal);
+}
+
+.Card--mode-outline::after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  content: '';
+  display: block;
+  border: var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);
+  pointer-events: none;
+  box-sizing: border-box;
+  border-radius: inherit;
+}
+
+/**
+ * CMP:
+ * CardScroll
+ */
+
+:global(.vkuiInternalCardScroll) .Card {
+  margin-right: var(--vkui--size_cardgrid_padding--regular);
+  flex-shrink: 0;
+}
+
+:global(.vkuiInternalCardScroll) .Card:last-of-type {
+  margin-right: 0;
+}
+
+:global(.vkuiInternalCardScroll--size-s) .Card {
+  width: 40%;
+}
+
+:global(.vkuiInternalCardScroll--size-m) .Card {
+  width: 62%;
+}
+
+:global(.vkuiInternalCardScroll--size-l) .Card {
+  width: calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2);
+  margin-right: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+/**
+ * CMP:
+ * Group
+ * SplitCol
+ */
+
+:global(.vkuiInternalGroup--mode-card) :global(.vkuiInternalCardScroll--size-l) .Card,
+:global(.vkuiInternalSplitCol--spaced) :global(.vkuiInternalCardScroll--size-l) .Card {
+  width: calc(100% - 32px);
+  margin-right: 16px;
+}
+
+:global(.vkuiInternalGroup--mode-card) :global(.vkuiInternalCardScroll--size-l) .Card:last-of-type,
+:global(.vkuiInternalSplitCol--spaced) :global(.vkuiInternalCardScroll--size-l) .Card:last-of-type {
+  margin-right: 0;
+}
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalGroup--mode-none)
+    :global(.vkuiInternalCardScroll--size-l)
+    .Card:last-of-type {
+    margin-right: 0;
+  }
+
+  :global(.vkuiInternalGroup--mode-none) :global(.vkuiInternalCardScroll--size-l) .Card {
+    width: calc(100% - 32px);
+    margin-right: 16px;
+  }
+}
+
+/**
+ * CMP:
+ * CardGrid
+ */
+
+:global(.vkuiInternalCardGrid) .Card {
+  margin-right: var(--vkui--size_cardgrid_padding--regular);
+}
+
+:global(.vkuiInternalCardGrid--size-l) .Card {
+  width: 100%;
+  margin-right: 0;
+}
+
+:global(.vkuiInternalCardGrid--size-l) .Card:not(:first-child) {
+  margin-top: var(--vkui--size_cardgrid_padding--regular);
+}
+
+:global(.vkuiInternalCardGrid--size-m) .Card {
+  width: calc(50% - (var(--vkui--size_cardgrid_padding--regular) / 2));
+}
+
+:global(.vkuiInternalCardGrid--size-m) .Card:nth-child(n + 3) {
+  margin-top: var(--vkui--size_cardgrid_padding--regular);
+}
+
+:global(.vkuiInternalCardGrid--size-m) .Card:nth-child(2n) {
+  margin-right: 0;
+}
+
+:global(.vkuiInternalCardGrid--size-s) .Card {
+  width: calc((100% - 2 * var(--vkui--size_cardgrid_padding--regular)) / 3);
+}
+
+:global(.vkuiInternalCardGrid--size-s) .Card:nth-child(n + 4) {
+  margin-top: var(--vkui--size_cardgrid_padding--regular);
+}
+
+:global(.vkuiInternalCardGrid--size-s) .Card:nth-child(3n) {
+  margin-right: 0;
+}

package/dist/cssm/components/CardGrid/CardGrid.js

@@ -13,10 +13,10 @@ const sizeXClassNames = {
     const { sizeX ='none'  } = useAdaptivity();
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        className: classNames(styles['CardGrid'], spaced && styles['CardGrid--spaced'], {
-            s: styles['CardGrid--size-s'],
-            m: styles['CardGrid--size-m'],
-            l: styles['CardGrid--size-l']
+        className: classNames(styles['CardGrid'], 'vkuiInternalCardGrid', spaced && styles['CardGrid--spaced'], {
+            s: 'vkuiInternalCardGrid--size-s',
+            m: 'vkuiInternalCardGrid--size-m',
+            l: 'vkuiInternalCardGrid--size-l'
         }[size], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], className)
     }, children);
 };

package/dist/cssm/components/CardGrid/CardGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        spaced && styles['CardGrid--spaced'],\n        {\n          s: styles['CardGrid--size-s'],\n          m: styles['CardGrid--size-m'],\n          l: styles['CardGrid--size-l'],\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","styles","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","div","s","m","l","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACD,SAASI,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAUA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,MAAO,IAAG,EACVC,QAAS,KAAK,CAAA,EACdC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGZ;IAE3B,qBACE,oBAACa;QACE,GAAGF,SAAS;QACbD,WAAWX,WACTG,MAAM,CAAC,WAAW,EAClBO,UAAUP,MAAM,CAAC,mBAAmB,EACpC;YACEY,GAAGZ,MAAM,CAAC,mBAAmB;YAC7Ba,GAAGb,MAAM,CAAC,mBAAmB;YAC7Bc,GAAGd,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACM,KAAK,EACPI,UAAUX,SAASgB,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF;OAGDH;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        {\n          s: 'vkuiInternalCardGrid--size-s',\n          m: 'vkuiInternalCardGrid--size-m',\n          l: 'vkuiInternalCardGrid--size-l',\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","styles","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","div","s","m","l","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACD,SAASI,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAUA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,MAAO,IAAG,EACVC,QAAS,KAAK,CAAA,EACdC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGZ;IAE3B,qBACE,oBAACa;QACE,GAAGF,SAAS;QACbD,WAAWX,WACTG,MAAM,CAAC,WAAW,EAClB,wBACAO,UAAUP,MAAM,CAAC,mBAAmB,EACpC;YACEY,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAC,CAACR,KAAK,EACPI,UAAUX,SAASgB,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF;OAGDH;AAGP,EAAE"}

package/dist/cssm/components/CardGrid/CardGrid.module.css

@@ -1 +1,59 @@
-.vkuiCardGrid{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start}.vkuiCardGrid--spaced{padding:12px 16px;padding:var(--vkui--size_base_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiCardGrid .vkuiCard{margin-right:8px;margin-right:var(--vkui--size_cardgrid_padding--regular)}.vkuiCardGrid--size-l .vkuiCard{margin-right:0;width:100%}.vkuiCardGrid--size-l .vkuiCard:not(:first-child){margin-top:8px;margin-top:var(--vkui--size_cardgrid_padding--regular)}.vkuiCardGrid--size-m .vkuiCard{width:calc(50% - (8px / 2));width:calc(50% - (var(--vkui--size_cardgrid_padding--regular) / 2))}.vkuiCardGrid--size-m .vkuiCard:nth-child(n+3){margin-top:8px;margin-top:var(--vkui--size_cardgrid_padding--regular)}.vkuiCardGrid--size-m .vkuiCard:nth-child(2n){margin-right:0}.vkuiCardGrid--size-s .vkuiCard{width:calc((100% - 2 * 8px) / 3);width:calc((100% - 2 * var(--vkui--size_cardgrid_padding--regular)) / 3)}.vkuiCardGrid--size-s .vkuiCard:nth-child(n+4){margin-top:8px;margin-top:var(--vkui--size_cardgrid_padding--regular)}.vkuiCardGrid--size-s .vkuiCard:nth-child(3n){margin-right:0}.vkuiCardGrid--sizeX-compact{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}@media (max-width:767.9px){.vkuiCardGrid--sizeX-none{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}}.vkuiCardGrid+.vkuiCardGrid{margin-top:calc(8px * 2);margin-top:calc(var(--vkui--size_cardgrid_padding_vertical--regular) * 2)}@media (max-width:767.9px){.vkuiCardGrid--sizeX-none.vkuiCardGrid--android{padding-left:16px;padding-right:16px}}.vkuiGroup--mode-card .vkuiCardGrid{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}@media (min-width:768px){.vkuiGroup--mode-none .vkuiCardGrid{padding-left:8px;padding-right:8px}}.vkuiGroup .vkuiCardGrid:first-child{margin-top:8px;margin-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiGroup .vkuiCardGrid:last-child{margin-bottom:8px;margin-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}
+.CardGrid {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.CardGrid--spaced {
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.CardGrid--sizeX-compact {
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+@media (max-width: 767.9px) {
+  .CardGrid--sizeX-none {
+    padding-left: var(--vkui--size_base_padding_horizontal--regular);
+    padding-right: var(--vkui--size_base_padding_horizontal--regular);
+  }
+}
+
+.CardGrid + .CardGrid {
+  margin-top: calc(var(--vkui--size_cardgrid_padding_vertical--regular) * 2);
+}
+
+@media (max-width: 767.9px) {
+  .CardGrid--sizeX-none.CardGrid--android {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+
+/**
+ * CMP:
+ * Group
+ */
+
+:global(.vkuiInternalGroup--mode-card) .CardGrid {
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalGroup--mode-none) .CardGrid {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+:global(.vkuiInternalGroup) .CardGrid:first-child {
+  margin-top: var(--vkui--size_cardgrid_padding_vertical--regular);
+}
+
+:global(.vkuiInternalGroup) .CardGrid:last-child {
+  margin-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
+}

package/dist/cssm/components/CardScroll/CardScroll.module.css

@@ -1 +1,64 @@
-.vkuiCardScroll__in{align-items:stretch;display:flex}.vkuiCardScroll__gap{display:block;flex-shrink:0}.vkuiCardScroll+.vkuiCardScroll{margin-top:16px}.vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll{margin-left:-16px;margin-right:-16px}.vkuiInternalSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}@media (min-width:768px){.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}}
+.CardScroll__in {
+  display: flex;
+  align-items: stretch;
+}
+
+.CardScroll__gap {
+  display: block;
+  flex-shrink: 0;
+}
+
+.CardScroll + .CardScroll {
+  margin-top: 16px;
+}
+
+.CardScroll--withSpaces .CardScroll__gap {
+  width: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+/**
+ * CMP:
+ * SplitCol
+ */
+
+:global(.vkuiInternalSplitCol--spaced) .CardScroll--withSpaces .CardScroll {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+:global(.vkuiInternalSplitCol--spaced) .CardScroll--withSpaces .CardScroll__gap {
+  width: 16px;
+}
+
+/**
+ * CMP:
+ * Group
+ */
+
+:global(.vkuiInternalGroup--mode-card) .CardScroll--withSpaces {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+:global(.vkuiInternalGroup--mode-card) .CardScroll--withSpaces:first-child {
+  padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
+}
+
+:global(.vkuiInternalGroup--mode-card) .CardScroll--withSpaces:last-child {
+  padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
+}
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalGroup--mode-none) .CardScroll--withSpaces {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+
+  :global(.vkuiInternalGroup--mode-none) .CardScroll--withSpaces:first-child {
+    padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
+  }
+
+  :global(.vkuiInternalGroup--mode-none) .CardScroll--withSpaces:last-child {
+    padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
+  }
+}