@gtivr4/a1-design-system-react 0.1.0 → 0.2.4

package/src/components/calendar/Calendar.jsx

@@ -0,0 +1,383 @@
+import { useState, useEffect, useRef } from "react";
+import { Button }      from "../button/Button.jsx";
+import { IconButton }  from "../icon-button/IconButton.jsx";
+import { SelectField } from "../field/SelectField.jsx";
+import { useLabel }    from "../labels/Labels.jsx";
+import "./calendar.css";
+
+function addMonths(year, month, delta) {
+  let m = month + delta;
+  let y = year;
+  while (m < 0)  { m += 12; y--; }
+  while (m > 11) { m -= 12; y++; }
+  return { year: y, month: m };
+}
+
+function rotateArray(arr, n) {
+  return [...arr.slice(n), ...arr.slice(0, n)];
+}
+
+function buildWeeks(year, month, weekStart = 0) {
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const firstDay    = new Date(year, month, 1).getDay();
+  const offset      = (firstDay - weekStart + 7) % 7;
+  const weeks       = [];
+  let week          = new Array(offset).fill(null);
+
+  for (let day = 1; day <= daysInMonth; day++) {
+    week.push(day);
+    if (week.length === 7) { weeks.push(week); week = []; }
+  }
+  if (week.length) {
+    while (week.length < 7) week.push(null);
+    weeks.push(week);
+  }
+  return weeks;
+}
+
+export function Calendar({
+  initialMonth,
+  monthsToShow = 13,
+  highlightToday = true,
+  dimPast = true,
+  variant = "scroll",
+  todayButton = false,
+  className = "",
+  ...props
+}) {
+  const today      = new Date();
+  const todayYear  = today.getFullYear();
+  const todayMonth = today.getMonth();
+  const todayDay   = today.getDate();
+
+  let centerYear = todayYear, centerMonth = todayMonth;
+  if (initialMonth instanceof Date) {
+    centerYear  = initialMonth.getFullYear();
+    centerMonth = initialMonth.getMonth();
+  } else if (initialMonth && typeof initialMonth === "object") {
+    centerYear  = initialMonth.year;
+    centerMonth = initialMonth.month - 1;
+  }
+
+  const [viewYear, setViewYear]   = useState(centerYear);
+  const [viewMonth, setViewMonth] = useState(centerMonth);
+  const currentMonthRef           = useRef(null);
+
+  // ── Localised strings ─────────────────────────────────────────
+
+  // Month names
+  const monthJan = useLabel("calendar.month.january",   "January");
+  const monthFeb = useLabel("calendar.month.february",  "February");
+  const monthMar = useLabel("calendar.month.march",     "March");
+  const monthApr = useLabel("calendar.month.april",     "April");
+  const monthMay = useLabel("calendar.month.may",       "May");
+  const monthJun = useLabel("calendar.month.june",      "June");
+  const monthJul = useLabel("calendar.month.july",      "July");
+  const monthAug = useLabel("calendar.month.august",    "August");
+  const monthSep = useLabel("calendar.month.september", "September");
+  const monthOct = useLabel("calendar.month.october",   "October");
+  const monthNov = useLabel("calendar.month.november",  "November");
+  const monthDec = useLabel("calendar.month.december",  "December");
+
+  // Weekday full names (used in abbr attribute and aria-label)
+  const dayFullSun = useLabel("calendar.weekday.sunday.full",    "Sunday");
+  const dayFullMon = useLabel("calendar.weekday.monday.full",    "Monday");
+  const dayFullTue = useLabel("calendar.weekday.tuesday.full",   "Tuesday");
+  const dayFullWed = useLabel("calendar.weekday.wednesday.full", "Wednesday");
+  const dayFullThu = useLabel("calendar.weekday.thursday.full",  "Thursday");
+  const dayFullFri = useLabel("calendar.weekday.friday.full",    "Friday");
+  const dayFullSat = useLabel("calendar.weekday.saturday.full",  "Saturday");
+
+  // Weekday 2-letter abbreviations (medium containers)
+  const dayShortSun = useLabel("calendar.weekday.sunday.short",    "Su");
+  const dayShortMon = useLabel("calendar.weekday.monday.short",    "Mo");
+  const dayShortTue = useLabel("calendar.weekday.tuesday.short",   "Tu");
+  const dayShortWed = useLabel("calendar.weekday.wednesday.short", "We");
+  const dayShortThu = useLabel("calendar.weekday.thursday.short",  "Th");
+  const dayShortFri = useLabel("calendar.weekday.friday.short",    "Fr");
+  const dayShortSat = useLabel("calendar.weekday.saturday.short",  "Sa");
+
+  // Weekday 1-letter abbreviations (smallest containers)
+  const dayLetterSun = useLabel("calendar.weekday.sunday.letter",    "S");
+  const dayLetterMon = useLabel("calendar.weekday.monday.letter",    "M");
+  const dayLetterTue = useLabel("calendar.weekday.tuesday.letter",   "T");
+  const dayLetterWed = useLabel("calendar.weekday.wednesday.letter", "W");
+  const dayLetterThu = useLabel("calendar.weekday.thursday.letter",  "T");
+  const dayLetterFri = useLabel("calendar.weekday.friday.letter",    "F");
+  const dayLetterSat = useLabel("calendar.weekday.saturday.letter",  "S");
+
+  // Navigation labels
+  const prevMonthLabel   = useLabel("calendar.previousMonth", "Previous month");
+  const nextMonthLabel   = useLabel("calendar.nextMonth",     "Next month");
+  const selectMonthLabel = useLabel("calendar.selectMonth",   "Month");
+  const selectYearLabel  = useLabel("calendar.selectYear",    "Year");
+  const todayLabel       = useLabel("calendar.today",         "Today");
+
+  // Locale config
+  const weekStartStr = useLabel("calendar.weekStart",  "0");
+  const directionStr = useLabel("calendar.direction",  "ltr");
+
+  // Build localised arrays used throughout the render
+  const MONTHS = [monthJan, monthFeb, monthMar, monthApr, monthMay, monthJun,
+                  monthJul, monthAug, monthSep, monthOct, monthNov, monthDec];
+
+  const weekStartDay = parseInt(weekStartStr, 10) || 0;
+  const isRtl = directionStr === "rtl";
+
+  // Weekday headers rotated so the correct start day is first
+  const WEEKDAYS_LONG   = rotateArray([dayFullSun, dayFullMon, dayFullTue, dayFullWed, dayFullThu, dayFullFri, dayFullSat], weekStartDay);
+  const WEEKDAYS_SHORT  = rotateArray([dayShortSun, dayShortMon, dayShortTue, dayShortWed, dayShortThu, dayShortFri, dayShortSat], weekStartDay);
+  const WEEKDAYS_LETTER = rotateArray([dayLetterSun, dayLetterMon, dayLetterTue, dayLetterWed, dayLetterThu, dayLetterFri, dayLetterSat], weekStartDay);
+
+  useEffect(() => {
+    if (variant !== "scroll") return;
+    const el = currentMonthRef.current;
+    if (!el) return;
+
+    // Walk up to find the nearest explicitly scrollable ancestor, stopping at
+    // the document root so we never scroll the page itself.
+    let container = el.parentElement;
+    while (container && container !== document.documentElement) {
+      const oy = window.getComputedStyle(container).overflowY;
+      if (oy === "auto" || oy === "scroll" || oy === "overlay") break;
+      container = container.parentElement;
+    }
+
+    if (!container || container === document.documentElement) return;
+
+    const containerRect = container.getBoundingClientRect();
+    const elRect        = el.getBoundingClientRect();
+    container.scrollTop += elRect.top - containerRect.top;
+  }, []);
+
+  // Renders the weekday/day grid table — shared between both variants
+  function renderGrid(year, month, monthStarted) {
+    const weeks = buildWeeks(year, month, weekStartDay);
+    return (
+      <table
+        className="a1-calendar__grid"
+        role="grid"
+        aria-label={`${MONTHS[month]} ${year}`}
+      >
+        <thead className="a1-calendar__thead">
+          <tr>
+            {WEEKDAYS_LONG.map((name, i) => (
+              <th
+                key={name}
+                className="a1-calendar__weekday"
+                scope="col"
+                abbr={name}
+              >
+                <span className="a1-calendar__weekday-label a1-calendar__weekday-label--long">
+                  {name.slice(0, 3)}
+                </span>
+                <span className="a1-calendar__weekday-label a1-calendar__weekday-label--short">
+                  {WEEKDAYS_SHORT[i]}
+                </span>
+                <span className="a1-calendar__weekday-label a1-calendar__weekday-label--letter">
+                  {WEEKDAYS_LETTER[i]}
+                </span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {weeks.map((week, wi) => (
+            <tr key={wi} className="a1-calendar__week">
+              {week.map((day, di) => {
+                if (day === null) {
+                  const isLeadingBlank = wi === 0 && monthStarted;
+                  return (
+                    <td
+                      key={di}
+                      className={[
+                        "a1-calendar__day",
+                        "a1-calendar__day--empty",
+                        isLeadingBlank && "a1-calendar__day--past",
+                      ].filter(Boolean).join(" ")}
+                      aria-hidden="true"
+                    />
+                  );
+                }
+
+                const isToday =
+                  highlightToday &&
+                  year === todayYear &&
+                  month === todayMonth &&
+                  day === todayDay;
+
+                const isPast =
+                  dimPast &&
+                  new Date(year, month, day) < new Date(todayYear, todayMonth, todayDay);
+
+                return (
+                  <td
+                    key={di}
+                    className={[
+                      "a1-calendar__day",
+                      isToday && "a1-calendar__day--today",
+                      isPast  && "a1-calendar__day--past",
+                    ].filter(Boolean).join(" ")}
+                    aria-current={isToday ? "date" : undefined}
+                  >
+                    <span className="a1-calendar__day-number" aria-hidden="true">
+                      {day}
+                    </span>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+
+  // ── Paginated variant ─────────────────────────────────────────
+  if (variant === "paginated") {
+    const yearStart = todayYear - 10;
+    const yearEnd   = todayYear + 15;
+    const years     = Array.from({ length: yearEnd - yearStart + 1 }, (_, i) => yearStart + i);
+
+    const goPrev = () => {
+      const p = addMonths(viewYear, viewMonth, -1);
+      setViewYear(p.year);
+      setViewMonth(p.month);
+    };
+
+    const goNext = () => {
+      const n = addMonths(viewYear, viewMonth, 1);
+      setViewYear(n.year);
+      setViewMonth(n.month);
+    };
+
+    const goToday = () => {
+      setViewYear(todayYear);
+      setViewMonth(todayMonth);
+    };
+
+    const isCurrentMonth = viewYear === todayYear && viewMonth === todayMonth;
+
+    const monthStarted = dimPast &&
+      new Date(viewYear, viewMonth, 1) <= new Date(todayYear, todayMonth, todayDay);
+
+    return (
+      <div
+        className={["a1-calendar", "a1-calendar--paginated", className].filter(Boolean).join(" ")}
+        {...props}
+      >
+        <div className="a1-calendar__inner">
+          <div className="a1-calendar__nav">
+
+            <span className="a1-calendar__nav-wide">
+              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_right" : "chevron_left"} iconPosition="start" onClick={goPrev}>
+                {prevMonthLabel}
+              </Button>
+            </span>
+            <span className="a1-calendar__nav-narrow">
+              <IconButton icon={isRtl ? "chevron_right" : "chevron_left"} label={prevMonthLabel} variant="tertiary" onClick={goPrev} />
+            </span>
+
+            <div className="a1-calendar__nav-label">
+              <SelectField
+                className="a1-calendar__nav-field"
+                size="compact"
+                aria-label={selectMonthLabel}
+                value={viewMonth}
+                onChange={e => setViewMonth(Number(e.target.value))}
+              >
+                {MONTHS.map((name, i) => (
+                  <option key={i} value={i}>{name}</option>
+                ))}
+              </SelectField>
+              <SelectField
+                className="a1-calendar__nav-field"
+                size="compact"
+                aria-label={selectYearLabel}
+                value={viewYear}
+                onChange={e => setViewYear(Number(e.target.value))}
+              >
+                {years.map(y => (
+                  <option key={y} value={y}>{y}</option>
+                ))}
+              </SelectField>
+              {todayButton && (
+                <div className="a1-calendar__nav-today">
+                  <span className="a1-calendar__nav-wide">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={goToday}
+                      disabled={isCurrentMonth}
+                    >
+                      {todayLabel}
+                    </Button>
+                  </span>
+                  <span className="a1-calendar__nav-narrow">
+                    <IconButton
+                      icon="calendar_today"
+                      label={todayLabel}
+                      variant="secondary"
+                      onClick={goToday}
+                      disabled={isCurrentMonth}
+                    />
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <span className="a1-calendar__nav-wide">
+              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_left" : "chevron_right"} iconPosition="end" onClick={goNext}>
+                {nextMonthLabel}
+              </Button>
+            </span>
+            <span className="a1-calendar__nav-narrow">
+              <IconButton icon={isRtl ? "chevron_left" : "chevron_right"} label={nextMonthLabel} variant="tertiary" onClick={goNext} />
+            </span>
+
+          </div>
+
+          {renderGrid(viewYear, viewMonth, monthStarted)}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Scroll variant (default) ──────────────────────────────────
+  const half   = Math.floor(monthsToShow / 2);
+  const months = Array.from({ length: monthsToShow }, (_, i) =>
+    addMonths(centerYear, centerMonth, i - half)
+  );
+
+  return (
+    <div
+      className={["a1-calendar", className].filter(Boolean).join(" ")}
+      {...props}
+    >
+      <div className="a1-calendar__inner">
+        {months.map(({ year, month }) => {
+          const isCurrent    = year === todayYear && month === todayMonth;
+          const monthStarted = dimPast &&
+            new Date(year, month, 1) <= new Date(todayYear, todayMonth, todayDay);
+
+          return (
+            <section
+              key={`${year}-${month}`}
+              className={[
+                "a1-calendar__month",
+                isCurrent && "a1-calendar__month--current",
+              ].filter(Boolean).join(" ")}
+              ref={isCurrent ? currentMonthRef : undefined}
+            >
+              <h2 className="a1-calendar__month-heading">
+                <span className="a1-calendar__month-name">{MONTHS[month]}</span>
+                <span className="a1-calendar__year">{year}</span>
+              </h2>
+              {renderGrid(year, month, monthStarted)}
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/calendar/calendar.css

@@ -0,0 +1,225 @@
+/* ── Outer scroll shell — plain block, no containment ───────── */
+
+.a1-calendar {
+  font-family: var(--component-paragraph-font-family);
+}
+
+/* ── Inner container — establishes the container query context ─ */
+
+.a1-calendar__inner {
+  container-type: inline-size;
+  container-name: a1-calendar;
+}
+
+/* ── Month block ─────────────────────────────────────────── */
+
+.a1-calendar__month {
+  padding-block-end: var(--component-calendar-month-gap);
+}
+
+.a1-calendar__month:last-child {
+  padding-block-end: 0;
+}
+
+/* ── Month heading ───────────────────────────────────────── */
+
+.a1-calendar__month-heading {
+  display: flex;
+  align-items: baseline;
+  gap: var(--component-calendar-heading-gap);
+  padding-block: var(--component-calendar-heading-padding-block);
+  font-size: var(--semantic-font-size-heading-xs);
+  font-weight: var(--semantic-font-weight-heading);
+  line-height: var(--semantic-font-line-height-heading);
+  color: var(--semantic-color-text-default);
+  margin: 0;
+}
+
+.a1-calendar__year {
+  font-size: var(--semantic-font-size-body-md);
+  font-weight: var(--semantic-font-weight-body);
+  color: var(--semantic-color-text-muted);
+}
+
+/* ── Grid (table) ────────────────────────────────────────── */
+
+.a1-calendar__grid {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+/* ── Weekday header row ──────────────────────────────────── */
+
+.a1-calendar__weekday {
+  font-size: var(--semantic-font-size-body-xs);
+  font-weight: var(--base-font-weight-medium);
+  color: var(--semantic-color-text-muted);
+  text-align: center;
+  padding-block: var(--component-calendar-cell-padding);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-block-end: 1px solid var(--semantic-color-border-subtle);
+}
+
+/* Three label lengths — show/hide via container queries below */
+.a1-calendar__weekday-label--long   { display: inline; }
+.a1-calendar__weekday-label--short  { display: none; }
+.a1-calendar__weekday-label--letter { display: none; }
+
+/* ── Day cells ───────────────────────────────────────────── */
+
+.a1-calendar__day {
+  text-align: center;
+  padding: var(--component-calendar-cell-padding);
+  font-size: var(--semantic-font-size-body-sm);
+  color: var(--semantic-color-text-default);
+  vertical-align: middle;
+  border: 1px solid var(--semantic-color-border-subtle);
+}
+
+.a1-calendar__day--empty {
+  border: none;
+  pointer-events: none;
+}
+
+.a1-calendar__day-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--component-calendar-cell-size);
+  height: var(--component-calendar-cell-size);
+  border-radius: var(--component-calendar-cell-border-radius);
+  margin-inline: auto;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* Today highlight — fills the whole cell in full-size view */
+.a1-calendar__day--today {
+  background: var(--semantic-color-action-background);
+  color: var(--semantic-color-text-inverse);
+}
+
+.a1-calendar__day--today .a1-calendar__day-number {
+  font-weight: var(--semantic-font-weight-heading);
+}
+
+/* Past dates — background differentiates; text stays at full contrast (~16:1) */
+.a1-calendar__day--past {
+  background: var(--semantic-color-surface-raised);
+}
+
+/* ── Paginated variant — nav bar ─────────────────────────── */
+
+.a1-calendar__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: var(--component-calendar-heading-padding-block);
+  border-block-end: 1px solid var(--semantic-color-border-subtle);
+}
+
+.a1-calendar__nav-label {
+  display: flex;
+  align-items: center;
+  gap: var(--component-calendar-heading-gap);
+}
+
+/* Responsive nav controls: Button (wide) ↔ IconButton (narrow) */
+.a1-calendar__nav-wide   { display: flex; }
+.a1-calendar__nav-narrow { display: none; }
+
+/* Today button — visually separated from the selects */
+.a1-calendar__nav-today {
+  display: flex;
+  align-items: center;
+  margin-inline-start: var(--component-calendar-heading-gap);
+  padding-inline-start: var(--component-calendar-heading-gap);
+  border-inline-start: 1px solid var(--semantic-color-border-subtle);
+}
+
+/* SelectField context overrides — strip layout width so selects size to content */
+.a1-calendar__nav-field,
+.a1-calendar__nav-field .a1-field__control,
+.a1-calendar__nav-field .a1-field__select {
+  width: auto;
+}
+
+/* ── Container: Medium (< 400px) ─────────────────────────── */
+
+@container a1-calendar (max-width: 479px) {
+  .a1-calendar__month-heading {
+    font-size: var(--semantic-font-size-body-lg);
+    padding-block: var(--component-calendar-heading-padding-block-compact);
+  }
+
+  .a1-calendar__year {
+    font-size: var(--semantic-font-size-body-sm);
+  }
+
+  .a1-calendar__weekday,
+  .a1-calendar__day {
+    padding: var(--component-calendar-cell-padding-compact);
+  }
+
+  .a1-calendar__day {
+    border: none;
+  }
+
+  /* Today: revert to circle-only highlight in narrow view */
+  .a1-calendar__day--today {
+    background: none;
+    color: var(--semantic-color-text-default);
+  }
+
+  .a1-calendar__day--today .a1-calendar__day-number {
+    background: var(--semantic-color-action-background);
+    color: var(--semantic-color-text-inverse);
+  }
+
+  .a1-calendar__nav {
+    padding-block: var(--component-calendar-heading-padding-block-compact);
+  }
+
+  /* Swap to icon-only buttons in narrow view */
+  .a1-calendar__nav-wide   { display: none; }
+  .a1-calendar__nav-narrow { display: flex; }
+
+  .a1-calendar__weekday-label--long   { display: none; }
+  .a1-calendar__weekday-label--short  { display: inline; }
+  .a1-calendar__weekday-label--letter { display: none; }
+}
+
+/* ── Container: Compact (< 240px) ────────────────────────── */
+
+@container a1-calendar (max-width: 319px) {
+  .a1-calendar__month-heading {
+    font-size: var(--semantic-font-size-body-md);
+    gap: var(--component-calendar-cell-padding-compact);
+  }
+
+  .a1-calendar__year {
+    font-size: var(--semantic-font-size-body-xl);
+  }
+
+  .a1-calendar__weekday {
+    font-size: var(--semantic-font-size-body-xs);
+    padding: var(--component-calendar-cell-padding-minimal);
+    letter-spacing: 0;
+  }
+
+  .a1-calendar__day {
+    padding: var(--component-calendar-cell-padding-minimal);
+    font-size: var(--semantic-font-size-body-xs);
+  }
+
+  .a1-calendar__day-number {
+    width: var(--component-calendar-cell-size-compact);
+    height: var(--component-calendar-cell-size-compact);
+  }
+
+  .a1-calendar__weekday-label--long   { display: none; }
+  .a1-calendar__weekday-label--short  { display: none; }
+  .a1-calendar__weekday-label--letter { display: inline; }
+}

package/src/components/card/Card.jsx

@@ -1,29 +1,67 @@
 import "./card.css";
 import { Icon } from "../icon/Icon.jsx";
 
-const shadows = ["none", "xs", "sm", "md", "lg", "xl"];
+const HERO_COLORS = {
+  action:  "var(--semantic-color-action-background)",
+  neutral: "var(--semantic-color-surface-inverse)",
+  info:    "var(--semantic-color-status-info-background)",
+  success: "var(--semantic-color-status-success-background)",
+  warn:    "var(--semantic-color-status-warn-background)",
+  error:   "var(--semantic-color-status-error-background)",
+};
+
+const VALID_ICON_DISPLAY = ["none", "default", "hero"];
 
 export function Card({
-  as: Component = "div",
-  shadow = "sm",
+  as,
+  bare = false,
+  variant = "default",
+  href,
   icon,
+  iconDisplay = "default",
+  heroColor = "action",
   className = "",
   children,
   ...props
 }) {
-  const resolvedShadow = shadows.includes(shadow) ? shadow : "sm";
-  const classes = ["a1-card", `a1-card--shadow-${resolvedShadow}`, className]
+  const isNavigation = variant === "navigation";
+  const Component = as ?? (isNavigation ? (href ? "a" : "button") : "div");
+
+  const resolvedDisplay = icon && VALID_ICON_DISPLAY.includes(iconDisplay)
+    ? iconDisplay
+    : "none";
+
+  const classes = [
+    "a1-card",
+    bare && "a1-card--bare",
+    isNavigation && "a1-card--navigation",
+    resolvedDisplay === "hero" && "a1-card--has-hero",
+    resolvedDisplay === "default" && "a1-card--has-icon",
+    className,
+  ]
     .filter(Boolean)
     .join(" ");
 
+  const heroBg = HERO_COLORS[heroColor] ?? heroColor;
+  const interactiveProps = isNavigation && Component === "button" && !props.type
+    ? { type: "button" }
+    : {};
+
   return (
-    <Component className={classes} {...props}>
-      {icon && (
-        <span className="a1-card__icon" aria-hidden="true">
-          <Icon name={icon} />
-        </span>
-      )}
-      {children}
+    <Component className={classes} href={href} {...interactiveProps} {...props}>
+      <div className="a1-card__layout">
+        {resolvedDisplay === "hero" && (
+          <div className="a1-card__hero" style={{ "--a1-card-hero-bg": heroBg }}>
+            <Icon name={icon} aria-hidden="true" />
+          </div>
+        )}
+        {resolvedDisplay === "default" && (
+          <span className="a1-card__icon" aria-hidden="true">
+            <Icon name={icon} />
+          </span>
+        )}
+        <div className="a1-card__content">{children}</div>
+      </div>
     </Component>
   );
 }