feat: перенос быстрой пачки компонентов 0.1.0

src/CollapseSection/CollapseSection.module.scss

@@ -0,0 +1,62 @@
+@import '../tokens/tokens';
+
+.section {
+  margin-top: 8px;
+}
+
+.header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 0 10px;
+  border: 0;
+  border-top: 1px solid $gray-200;
+  background: transparent;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: 0;
+    width: 48px;
+    height: 1px;
+    background: $gold-500;
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: $font-serif;
+  font-size: 14.5px;
+  font-weight: 600;
+  color: $navy-900;
+  letter-spacing: .2px;
+
+  svg { color: $gold-600; }
+}
+
+.chevron {
+  display: flex;
+  color: $gray-400;
+  transition: transform .2s;
+}
+
+.open {
+  transform: rotate(180deg);
+}
+
+.body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px 22px;
+  padding-top: 16px;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}

src/CollapseSection/CollapseSection.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useState } from 'react';
+import styles from './CollapseSection.module.scss';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../Icon/iconNames';
+
+interface ICollapseSectionProps {
+  title: string;
+  icon: IconName;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+/** Сворачиваемая секция формы: заголовок с иконкой и шевроном + тело. */
+export const CollapseSection: React.FC<ICollapseSectionProps> = ({ title, icon, defaultOpen = true, children }) => {
+  const [open, setOpen] = useState<boolean>(defaultOpen);
+
+  return (
+    <div className={styles.section}>
+      <button type="button" className={styles.header} onClick={() => setOpen((prev) => !prev)}>
+        <span className={styles.title}>
+          <Icon name={icon} size="sm" />
+          {title}
+        </span>
+        <span className={[styles.chevron, open ? styles.open : ''].filter(Boolean).join(' ')}>
+          <Icon name="chevron-down" size="sm" />
+        </span>
+      </button>
+      {open && <div className={styles.body}>{children}</div>}
+    </div>
+  );
+};