@sixthshift/design-system 0.2.1 → 0.4.0

package/src/components/HeatMap/HeatMapCalendar.tsx

@@ -1,127 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import type * as React from "react";
-import { Temporal } from "../../date-time";
-import { DAY_KEYS, DAY_LABELS, DEFAULT_COLOR_SCALE, getIntensity, type HeatMapCell, MONTH_NAMES } from "./heat-map.utils";
-
-export type HeatMapCalendarProps = React.HTMLAttributes<HTMLDivElement> & {
-  data: HeatMapCell[];
-  colorScale?: string[];
-  cellSize?: number;
-  cellGap?: number;
-  formatTooltip?: (cell: HeatMapCell) => string;
-};
-
-type MonthGrid = {
-  year: number;
-  month: number;
-  label: string;
-  weeks: ({ date: string; value: number; col: number } | null)[][];
-};
-
-function buildMonthGrids(data: HeatMapCell[]): MonthGrid[] {
-  const dataMap = new Map(data.map((d) => [d.date, d.value]));
-
-  const dates = data.map((d) => Temporal.PlainDate.from(d.date)).sort(Temporal.PlainDate.compare);
-  const minDate = dates[0]!;
-  const maxDate = dates[dates.length - 1]!;
-
-  const months: MonthGrid[] = [];
-  let cursor = Temporal.PlainDate.from({ year: minDate.year, month: minDate.month, day: 1 });
-  const endMonth = Temporal.PlainDate.from({ year: maxDate.year, month: maxDate.month, day: 1 });
-
-  while (Temporal.PlainDate.compare(cursor, endMonth) <= 0) {
-    const year = cursor.year;
-    const month = cursor.month;
-    const daysInMonth = cursor.daysInMonth;
-
-    const weeks: ({ date: string; value: number; col: number } | null)[][] = [];
-    let currentWeek: ({ date: string; value: number; col: number } | null)[] = [];
-
-    const firstDow = cursor.dayOfWeek - 1;
-    for (let i = 0; i < firstDow; i++) {
-      currentWeek.push(null);
-    }
-
-    for (let day = 1; day <= daysInMonth; day++) {
-      const date = Temporal.PlainDate.from({ year, month, day });
-      const dateStr = date.toString();
-      const col = date.dayOfWeek - 1;
-
-      currentWeek.push({ date: dateStr, value: dataMap.get(dateStr) ?? 0, col });
-
-      if (col === 6 || day === daysInMonth) {
-        if (day === daysInMonth && col < 6) {
-          for (let i = col + 1; i <= 6; i++) {
-            currentWeek.push(null);
-          }
-        }
-        weeks.push(currentWeek);
-        currentWeek = [];
-      }
-    }
-
-    months.push({
-      year,
-      month,
-      label: `${MONTH_NAMES[month - 1]} ${year}`,
-      weeks,
-    });
-
-    cursor = month === 12 ? Temporal.PlainDate.from({ year: year + 1, month: 1, day: 1 }) : Temporal.PlainDate.from({ year, month: month + 1, day: 1 });
-  }
-
-  return months;
-}
-
-export const HeatMapCalendar = ({
-  data,
-  colorScale = DEFAULT_COLOR_SCALE,
-  cellSize = 12,
-  cellGap = 2,
-  formatTooltip,
-  className,
-  ...rest
-}: HeatMapCalendarProps) => {
-  if (data.length === 0) return null;
-
-  const maxValue = Math.max(...data.map((d) => d.value), 1);
-  const months = buildMonthGrids(data);
-  const step = cellSize + cellGap;
-  const gridWidth = 7 * step;
-
-  return (
-    <div {...rest} className={cn("flex flex-wrap gap-4", className)}>
-      {months.map((month) => {
-        const headerHeight = 24;
-        const dayLabelHeight = 14;
-        const svgHeight = headerHeight + dayLabelHeight + month.weeks.length * step;
-
-        return (
-          <svg key={month.label} width={gridWidth} height={svgHeight} className="overflow-visible" role="img">
-            <title>{month.label}</title>
-            <text x={0} y={14} className="fill-fg-normal" fontSize={12} fontWeight={500}>
-              {month.label}
-            </text>
-            {DAY_LABELS.map((label, i) => (
-              <text key={`day-${DAY_KEYS[i]}`} x={i * step + cellSize / 2} y={headerHeight + 10} textAnchor="middle" className="fill-fg-subtle" fontSize={9}>
-                {label}
-              </text>
-            ))}
-            {month.weeks.map((week, wi) =>
-              week.map((cell) => {
-                if (!cell) return null;
-                const intensity = getIntensity(cell.value, maxValue, colorScale.length);
-                const fill = cell.value > 0 ? colorScale[intensity]! : colorScale[0]!;
-                return (
-                  <rect key={cell.date} x={cell.col * step} y={headerHeight + dayLabelHeight + wi * step} width={cellSize} height={cellSize} rx={2} fill={fill}>
-                    {formatTooltip && <title>{formatTooltip({ date: cell.date, value: cell.value })}</title>}
-                  </rect>
-                );
-              })
-            )}
-          </svg>
-        );
-      })}
-    </div>
-  );
-};

package/src/components/HeatMap/HeatMapMatrix.tsx

@@ -1,75 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import type * as React from "react";
-import { Temporal } from "../../date-time";
-import { DAY_KEYS, DAY_LABELS, DEFAULT_COLOR_SCALE, getIntensity, type HeatMapCell } from "./heat-map.utils";
-
-export type HeatMapMatrixProps = React.HTMLAttributes<HTMLDivElement> & {
-  data: HeatMapCell[];
-  colorScale?: string[];
-  cellSize?: number;
-  cellGap?: number;
-  showDayLabels?: boolean;
-  formatTooltip?: (cell: HeatMapCell) => string;
-};
-
-export const HeatMapMatrix = ({
-  data,
-  colorScale = DEFAULT_COLOR_SCALE,
-  cellSize = 12,
-  cellGap = 2,
-  showDayLabels = true,
-  formatTooltip,
-  className,
-  ...rest
-}: HeatMapMatrixProps) => {
-  if (data.length === 0) return null;
-
-  const maxValue = Math.max(...data.map((d) => d.value), 1);
-
-  const sorted = [...data].map((d) => ({ ...d, plain: Temporal.PlainDate.from(d.date) })).sort((a, b) => Temporal.PlainDate.compare(a.plain, b.plain));
-
-  const rows: { date: string; value: number; col: number }[][] = [];
-  let currentRow: { date: string; value: number; col: number }[] = [];
-  let lastDow = -1;
-
-  for (const cell of sorted) {
-    const dow = cell.plain.dayOfWeek - 1;
-    if (dow <= lastDow && currentRow.length > 0) {
-      rows.push(currentRow);
-      currentRow = [];
-    }
-    currentRow.push({ date: cell.date, value: cell.value, col: dow });
-    lastDow = dow;
-  }
-  if (currentRow.length > 0) rows.push(currentRow);
-
-  const step = cellSize + cellGap;
-  const labelHeight = showDayLabels ? 14 : 0;
-  const gridWidth = 7 * step;
-  const gridHeight = rows.length * step;
-
-  return (
-    <div {...rest} className={cn("inline-block", className)}>
-      <svg width={gridWidth} height={gridHeight + labelHeight} className="overflow-visible" role="img">
-        <title>Heat map</title>
-        {showDayLabels &&
-          DAY_LABELS.map((label, i) => (
-            <text key={`col-${DAY_KEYS[i]}`} x={i * step + cellSize / 2} y={10} textAnchor="middle" className="fill-fg-subtle" fontSize={9}>
-              {label}
-            </text>
-          ))}
-        {rows.map((row, ri) =>
-          row.map((cell) => {
-            const intensity = getIntensity(cell.value, maxValue, colorScale.length);
-            const fill = cell.value > 0 ? colorScale[intensity]! : colorScale[0]!;
-            return (
-              <rect key={cell.date} x={cell.col * step} y={labelHeight + ri * step} width={cellSize} height={cellSize} rx={2} fill={fill}>
-                {formatTooltip && <title>{formatTooltip({ date: cell.date, value: cell.value })}</title>}
-              </rect>
-            );
-          })
-        )}
-      </svg>
-    </div>
-  );
-};

package/src/components/HeatMap/heat-map.utils.ts

@@ -1,15 +0,0 @@
-export type HeatMapCell = {
-  date: string;
-  value: number;
-};
-
-export const DAY_LABELS = ["M", "T", "W", "T", "F", "S", "S"];
-export const DAY_KEYS = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
-export const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-
-export const DEFAULT_COLOR_SCALE = ["var(--bg-subtle)", "var(--bg-brand-subtle)", "var(--bg-brand)", "var(--bg-brand-strong)"];
-
-export function getIntensity(value: number, max: number, levels: number): number {
-  if (value <= 0 || max <= 0) return 0;
-  return Math.ceil(Math.min(value / max, 1) * (levels - 1));
-}

package/src/components/HeatMap/index.ts

@@ -1,3 +0,0 @@
-export { HeatMapCalendar, type HeatMapCalendarProps } from "./HeatMapCalendar";
-export { HeatMapMatrix, type HeatMapMatrixProps } from "./HeatMapMatrix";
-export type { HeatMapCell } from "./heat-map.utils";

package/src/components/MetricList/MetricList.tsx

@@ -1,13 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import type { ReactNode } from "react";
-
-export type MetricListProps = {
-  /** Metric rows */
-  children: ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-};
-
-export const MetricList = ({ children, className }: MetricListProps) => {
-  return <div className={cn("flex flex-col gap-2 text-fg-subtle", className)}>{children}</div>;
-};

package/src/components/MetricList/MetricRow.tsx

@@ -1,30 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import type { ReactNode } from "react";
-
-export type MetricRowProps = {
-  /** Label displayed on the left */
-  label: string;
-  /** Value displayed on the right, can be string or ReactNode for complex content */
-  value: ReactNode;
-  /** Optional variant for styling the value */
-  valueVariant?: "normal" | "success" | "warning" | "danger" | "info";
-  /** Additional CSS classes */
-  className?: string;
-};
-
-const valueVariants = {
-  normal: "text-fg-normal",
-  success: "text-fg-success",
-  warning: "text-fg-warning",
-  danger: "text-fg-danger",
-  info: "text-fg-brand",
-};
-
-export const MetricRow = ({ label, value, valueVariant = "normal", className }: MetricRowProps) => {
-  return (
-    <div className={cn("flex justify-between", className)}>
-      <span>{label}</span>
-      <span className={valueVariants[valueVariant]}>{value}</span>
-    </div>
-  );
-};

package/src/components/MetricList/index.ts

@@ -1,2 +0,0 @@
-export { MetricList, type MetricListProps } from "./MetricList";
-export { MetricRow, type MetricRowProps } from "./MetricRow";

package/src/components/NavBottom/NavBottom.tsx

@@ -1,53 +0,0 @@
-import { useComponents } from "@sixthshift/design-system/components";
-import { cn } from "@sixthshift/design-system/utils";
-import type { NavItem as NavItemType, NavSection, RenderLinkFn } from "../NavSide";
-
-export type NavBottomProps = {
-  /** Navigation sections (will be flattened) */
-  sections: NavSection[];
-  /** Callback to determine if an item is active */
-  isActive: (item: NavItemType) => boolean;
-  /** Render function for links (allows router integration). Falls back to ComponentsContext Link. */
-  renderLink?: RenderLinkFn;
-  /** Maximum number of items to display (default: 5) */
-  maxItems?: number;
-  /** Additional class names */
-  className?: string;
-};
-
-export const NavBottom = ({ sections, isActive, renderLink, maxItems = 5, className }: NavBottomProps) => {
-  const { Link } = useComponents();
-  const linkRenderer: RenderLinkFn = renderLink ?? (({ to, ...rest }) => <Link href={to} {...rest} />);
-  // Flatten all sections and limit to maxItems
-  const items = sections.flatMap((section) => section.items).slice(0, maxItems);
-
-  return (
-    <nav className={cn("fixed inset-x-0 bottom-0 z-app-bar bg-bg-brand-strong text-fg-on-brand-strong", className)}>
-      <ul className="flex items-center justify-around">
-        {items.map((item) => {
-          const Icon = item.icon;
-          const active = isActive(item);
-
-          return (
-            <li key={item.to}>
-              {linkRenderer({
-                to: item.to,
-                className: cn(
-                  "flex flex-col items-center gap-1 rounded-md px-3 py-2 text-xs",
-                  "hover:bg-bg-brand-hovered hover:text-fg-on-brand-hovered",
-                  active && "bg-bg-brand-pressed"
-                ),
-                children: (
-                  <>
-                    <Icon className="h-5 w-5" />
-                    <span>{item.label}</span>
-                  </>
-                ),
-              })}
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-};

package/src/components/NavBottom/index.ts

@@ -1,3 +0,0 @@
-// Re-export types from NavSide for convenience
-export type { IconComponent, NavItem, NavSection, RenderLinkFn } from "../NavSide";
-export { NavBottom, type NavBottomProps } from "./NavBottom";

package/src/components/NavSide/NavItem.tsx

@@ -1,39 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import type { NavItem as NavItemType, RenderLinkFn } from "./types";
-
-export type NavItemProps = {
-  item: NavItemType;
-  active: boolean;
-  expanded: boolean;
-  renderLink: RenderLinkFn;
-};
-
-export const NavItem = ({ item, active, expanded, renderLink }: NavItemProps) => {
-  const Icon = item.icon;
-
-  return (
-    <>
-      {renderLink({
-        to: item.to,
-        className: cn(
-          "flex items-center gap-3 rounded-md px-2 py-2 font-medium text-sm",
-          "hover:bg-bg-brand-hovered hover:text-fg-on-brand-hovered",
-          active && "bg-bg-brand-pressed"
-        ),
-        // Only include title when collapsed (for tooltip)
-        ...(expanded ? {} : { title: item.label }),
-        children: (
-          <>
-            <Icon className="h-6 w-6 shrink-0" />
-            {expanded && <span className="flex-1">{item.label}</span>}
-            {expanded && item.badge !== undefined && item.badge > 0 && (
-              <span className="flex min-w-5 items-center justify-center rounded-full bg-bg-on-brand/20 px-1.5 py-0.5 font-medium text-fg-on-brand text-xs tabular-nums">
-                {item.badge > 9 ? "9+" : item.badge}
-              </span>
-            )}
-          </>
-        ),
-      })}
-    </>
-  );
-};

package/src/components/NavSide/NavSide.tsx

@@ -1,40 +0,0 @@
-import { useComponents } from "@sixthshift/design-system/components";
-import { cn } from "@sixthshift/design-system/utils";
-import { NavItem } from "./NavItem";
-import type { NavItem as NavItemType, NavSection, RenderLinkFn } from "./types";
-
-export type NavSideProps = {
-  /** Navigation sections */
-  sections: NavSection[];
-  /** Whether the nav is expanded (shows labels) or collapsed (icons only) */
-  expanded?: boolean;
-  /** Callback to determine if an item is active */
-  isActive: (item: NavItemType) => boolean;
-  /** Render function for links (allows router integration). Falls back to ComponentsContext Link. */
-  renderLink?: RenderLinkFn;
-  /** Additional class names */
-  className?: string;
-};
-
-export const NavSide = ({ sections, expanded = true, isActive, renderLink, className }: NavSideProps) => {
-  const { Link } = useComponents();
-  const linkRenderer: RenderLinkFn = renderLink ?? (({ to, ...rest }) => <Link href={to} {...rest} />);
-  return (
-    <aside className={cn("flex flex-col bg-bg-brand-strong text-fg-on-brand-strong", expanded ? "w-48" : "w-16", className)}>
-      <nav className="flex-1 overflow-y-auto py-3">
-        {sections.map((section, sectionIndex) => (
-          <div key={section.id}>
-            {sectionIndex > 0 && <div className="my-2 border-border-subtle border-t" />}
-            <ul className={cn("flex flex-col gap-0.5 px-3")}>
-              {section.items.map((item) => (
-                <li key={item.to}>
-                  <NavItem item={item} active={isActive(item)} expanded={expanded} renderLink={linkRenderer} />
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </nav>
-    </aside>
-  );
-};

package/src/components/NavSide/index.ts

@@ -1,2 +0,0 @@
-export { NavSide, type NavSideProps } from "./NavSide";
-export type { IconComponent, NavItem, NavSection, RenderLinkFn } from "./types";

package/src/components/NavSide/types.ts

@@ -1,36 +0,0 @@
-import type { ComponentType, ReactNode, SVGProps } from "react";
-
-/**
- * Icon component type - compatible with lucide-react and similar icon libraries
- */
-export type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
-
-/**
- * A single navigation item
- */
-export type NavItem = {
-  /** Route path */
-  to: string;
-  /** Display label */
-  label: string;
-  /** Icon component (e.g., from lucide-react) */
-  icon: IconComponent;
-  /** Optional count badge (e.g. pending suggestions). Rendered when > 0. */
-  badge?: number;
-};
-
-/**
- * A group of navigation items
- */
-export type NavSection = {
-  /** Unique identifier for the section */
-  id: string;
-  /** Navigation items in this section */
-  items: NavItem[];
-};
-
-/**
- * Render function for navigation links.
- * Allows router-agnostic link rendering.
- */
-export type RenderLinkFn = (props: { to: string; className: string; title?: string; children: ReactNode }) => ReactNode;

package/src/components/Pagination/Pagination.tsx

@@ -1,86 +0,0 @@
-import { Button } from "@sixthshift/design-system/button";
-import { Select, type SelectOption } from "@sixthshift/design-system/select";
-import { cn } from "@sixthshift/design-system/utils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import * as React from "react";
-
-const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Current page index (0-based) */
-  page: number;
-  /** Number of items per page */
-  pageSize: number;
-  /** Total number of items */
-  total: number;
-  /** Called when page changes */
-  onPageChange: (page: number) => void;
-  /** Called when page size changes */
-  onPageSizeChange: (size: number) => void;
-  /** Available page size options */
-  pageSizeOptions?: number[];
-  /** Label for rows per page (default: "Rows per page") */
-  rowsLabel?: string;
-};
-
-const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
-  (
-    { page, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, rowsLabel = "Rows per page", className, ...props },
-    ref
-  ) => {
-    const start = total > 0 ? page * pageSize + 1 : 0;
-    const end = Math.min((page + 1) * pageSize, total);
-    const totalPages = Math.ceil(total / pageSize);
-
-    const canGoPrev = page > 0;
-    const canGoNext = page < totalPages - 1;
-
-    const selectOptions: SelectOption<string>[] = pageSizeOptions.map((size) => ({
-      value: String(size),
-      label: String(size),
-    }));
-
-    const handlePageSizeChange = (value: string) => {
-      onPageSizeChange(Number(value));
-      onPageChange(0);
-    };
-
-    return (
-      <div ref={ref} className={cn("flex items-center justify-between gap-4 px-4 py-2", className)} {...props}>
-        {/* Page size selector */}
-        <div className="flex items-center gap-2">
-          <span className="text-fg-subtle text-sm">{rowsLabel}</span>
-          <Select value={String(pageSize)} options={selectOptions} onValueChange={handlePageSizeChange} className="w-20" />
-        </div>
-
-        {/* Results info */}
-        <span className="text-fg-subtle text-sm">
-          {total > 0 ? (
-            <>
-              <span className="font-medium text-fg-normal">{start}</span>
-              {"-"}
-              <span className="font-medium text-fg-normal">{end}</span>
-              {" of "}
-              <span className="font-medium text-fg-normal">{total}</span>
-            </>
-          ) : (
-            "No results"
-          )}
-        </span>
-
-        {/* Navigation buttons */}
-        <div className="flex items-center gap-1">
-          <Button variant="ghost" size="icon" onClick={() => onPageChange(page - 1)} disabled={!canGoPrev} aria-label="Previous page">
-            <ChevronLeft />
-          </Button>
-          <Button variant="ghost" size="icon" onClick={() => onPageChange(page + 1)} disabled={!canGoNext} aria-label="Next page">
-            <ChevronRight />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-);
-Pagination.displayName = "Pagination";
-
-export { Pagination };

package/src/components/Pagination/index.ts

@@ -1,2 +0,0 @@
-export type { PaginationProps } from "./Pagination";
-export { Pagination } from "./Pagination";

package/src/components/Skeleton/Skeleton.tsx

@@ -1,7 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-
-const Skeleton = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div className={cn("animate-pulse rounded-md bg-bg-strong/10", className)} {...props} />;
-};
-
-export { Skeleton };

package/src/components/Skeleton/index.ts

@@ -1 +0,0 @@
-export { Skeleton } from "./Skeleton";

package/src/components/StatsCard/StatsCard.tsx

@@ -1,40 +0,0 @@
-import { Caption } from "@sixthshift/design-system/caption";
-import { cn } from "@sixthshift/design-system/utils";
-import type { ReactNode } from "react";
-
-export type StatsCardProps = {
-  /** Title of the stats card */
-  title: string;
-  /** Description text shown below the title */
-  description: string;
-  /** Optional icon displayed in the header */
-  icon?: ReactNode;
-  /** Visual status indicator via left border color */
-  status?: "healthy" | "warning" | "error" | "neutral";
-  /** Card content */
-  children: ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-};
-
-const statusColors = {
-  healthy: "border-l-green-500",
-  warning: "border-l-amber-500",
-  error: "border-l-red-500",
-  neutral: "border-l-border-subtle",
-};
-
-export const StatsCard = ({ title, description, icon, status = "neutral", children, className }: StatsCardProps) => {
-  return (
-    <div className={cn("flex flex-col gap-3 rounded border border-border-subtle border-l-2 bg-bg-subtle p-4", statusColors[status], className)}>
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex flex-col gap-0.5">
-          <span className="font-medium text-fg-normal">{title}</span>
-          <Caption>{description}</Caption>
-        </div>
-        {icon && <div className="text-fg-subtle">{icon}</div>}
-      </div>
-      <div className="flex-1">{children}</div>
-    </div>
-  );
-};

package/src/components/StatsCard/index.ts

@@ -1 +0,0 @@
-export { StatsCard, type StatsCardProps } from "./StatsCard";

package/src/styles/base.css

@@ -1,41 +0,0 @@
-/**
- * PA Design System - Global Styles
- *
- * Theme tokens (CSS variables) are provided by @sixthshift/design-system/theme.css
- * which is generated from src/theme/theme.json and src/theme/palette.json
- *
- * Import order in consumers:
- *   import '@sixthshift/design-system/theme.css';   // CSS variables
- *   import '@sixthshift/design-system/styles.css';  // Tailwind + base styles
- */
-
-@import "tailwindcss";
-@config "../../tailwind.config.ts";
-
-/* =============================================================================
-   BASE STYLES
-   ============================================================================= */
-
-@layer base {
-  * {
-    @apply border-border-normal;
-  }
-
-  body {
-    @apply bg-bg-normal text-fg-normal;
-    font-family: var(--font-sans);
-    font-feature-settings:
-      'rlig' 1,
-      'calt' 1;
-  }
-
-  /* Smooth scrolling */
-  html {
-    scroll-behavior: smooth;
-  }
-
-  /* Focus visible for keyboard navigation */
-  :focus-visible {
-    @apply outline-hidden ring-2 ring-focus-ring ring-offset-2 ring-offset-bg-normal;
-  }
-}