@usace/groundwork 1.0.1 → 1.0.3

package/lib/components/button.jsx

@@ -1,219 +0,0 @@
-import { Button as HeadlessButton } from "@headlessui/react";
-import { clsx } from "clsx";
-import React from "react";
-import { Link } from "./link";
-
-const styles = {
-  base: [
-    // Base
-    "relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
-
-    // Sizing
-    "px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6",
-
-    // Focus
-    "focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
-
-    // Disabled
-    "data-[disabled]:opacity-50",
-
-    // Icon
-    "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]",
-  ],
-  solid: [
-    // Optical border, implemented as the button background to avoid corner artifacts
-    "border-transparent bg-[--btn-border]",
-
-    // Dark mode: border is rendered on `after` so background is set to button background
-    "dark:bg-[--btn-bg]",
-
-    // Button background, implemented as foreground layer to stack on top of pseudo-border layer
-    "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]",
-
-    // Drop shadow, applied to the inset `before` layer so it blends with the border
-    "before:shadow",
-
-    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-    "dark:before:hidden",
-
-    // Dark mode: Subtle white outline is applied using a border
-    "dark:border-white/5",
-
-    // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
-    "after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]",
-
-    // Inner highlight shadow
-    "after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]",
-
-    // White overlay on hover
-    "after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]",
-
-    // Dark mode: `after` layer expands to cover entire button
-    "dark:after:-inset-px dark:after:rounded-lg",
-
-    // Disabled
-    "before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none",
-  ],
-  outline: [
-    // Base
-    "border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]",
-
-    // Dark mode
-    "dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5",
-
-    // Icon
-    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-  ],
-  plain: [
-    // Base
-    "border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5",
-
-    // Dark mode
-    "dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10",
-
-    // Icon
-    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-  ],
-  colors: {
-    "dark/zinc": [
-      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
-      "dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
-    ],
-    light: [
-      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
-      "dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
-      "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-    ],
-    "dark/white": [
-      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
-      "dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-    ],
-    dark: [
-      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
-      "dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
-    ],
-    white: [
-      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
-      "dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]",
-    ],
-    zinc: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]",
-      "dark:[--btn-hover-overlay:theme(colors.white/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
-    ],
-    indigo: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.indigo.500)] [--btn-border:theme(colors.indigo.600/90%)]",
-      "[--btn-icon:theme(colors.indigo.300)] data-[active]:[--btn-icon:theme(colors.indigo.200)] data-[hover]:[--btn-icon:theme(colors.indigo.200)]",
-    ],
-    cyan: [
-      "text-cyan-950 [--btn-bg:theme(colors.cyan.300)] [--btn-border:theme(colors.cyan.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]",
-      "[--btn-icon:theme(colors.cyan.500)]",
-    ],
-    red: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]",
-      "[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]",
-    ],
-    orange: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.orange.500)] [--btn-border:theme(colors.orange.600/90%)]",
-      "[--btn-icon:theme(colors.orange.300)] data-[active]:[--btn-icon:theme(colors.orange.200)] data-[hover]:[--btn-icon:theme(colors.orange.200)]",
-    ],
-    amber: [
-      "text-amber-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)]",
-      "[--btn-icon:theme(colors.amber.600)]",
-    ],
-    yellow: [
-      "text-yellow-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.yellow.300)] [--btn-border:theme(colors.yellow.400/80%)]",
-      "[--btn-icon:theme(colors.yellow.600)] data-[active]:[--btn-icon:theme(colors.yellow.700)] data-[hover]:[--btn-icon:theme(colors.yellow.700)]",
-    ],
-    lime: [
-      "text-lime-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.lime.300)] [--btn-border:theme(colors.lime.400/80%)]",
-      "[--btn-icon:theme(colors.lime.600)] data-[active]:[--btn-icon:theme(colors.lime.700)] data-[hover]:[--btn-icon:theme(colors.lime.700)]",
-    ],
-    green: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.green.600)] [--btn-border:theme(colors.green.700/90%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    emerald: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    teal: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.teal.600)] [--btn-border:theme(colors.teal.700/90%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    sky: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.sky.500)] [--btn-border:theme(colors.sky.600/80%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    blue: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.blue.600)] [--btn-border:theme(colors.blue.700/90%)]",
-      "[--btn-icon:theme(colors.blue.400)] data-[active]:[--btn-icon:theme(colors.blue.300)] data-[hover]:[--btn-icon:theme(colors.blue.300)]",
-    ],
-    violet: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.violet.500)] [--btn-border:theme(colors.violet.600/90%)]",
-      "[--btn-icon:theme(colors.violet.300)] data-[active]:[--btn-icon:theme(colors.violet.200)] data-[hover]:[--btn-icon:theme(colors.violet.200)]",
-    ],
-    purple: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.purple.500)] [--btn-border:theme(colors.purple.600/90%)]",
-      "[--btn-icon:theme(colors.purple.300)] data-[active]:[--btn-icon:theme(colors.purple.200)] data-[hover]:[--btn-icon:theme(colors.purple.200)]",
-    ],
-    fuchsia: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.fuchsia.500)] [--btn-border:theme(colors.fuchsia.600/90%)]",
-      "[--btn-icon:theme(colors.fuchsia.300)] data-[active]:[--btn-icon:theme(colors.fuchsia.200)] data-[hover]:[--btn-icon:theme(colors.fuchsia.200)]",
-    ],
-    pink: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.pink.500)] [--btn-border:theme(colors.pink.600/90%)]",
-      "[--btn-icon:theme(colors.pink.300)] data-[active]:[--btn-icon:theme(colors.pink.200)] data-[hover]:[--btn-icon:theme(colors.pink.200)]",
-    ],
-    rose: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.rose.500)] [--btn-border:theme(colors.rose.600/90%)]",
-      "[--btn-icon:theme(colors.rose.300)] data-[active]:[--btn-icon:theme(colors.rose.200)] data-[hover]:[--btn-icon:theme(colors.rose.200)]",
-    ],
-  },
-};
-
-export const Button = React.forwardRef(function Button(
-  { color, outline, plain, className, children, ...props },
-  ref
-) {
-  let classes = clsx(
-    styles.base,
-    outline
-      ? styles.outline
-      : plain
-      ? styles.plain
-      : clsx(styles.solid, styles.colors[color ?? "dark/zinc"]),
-    className
-  );
-
-  return "href" in props ? (
-    <Link {...props} className={classes} ref={ref}>
-      <TouchTarget>{children}</TouchTarget>
-    </Link>
-  ) : (
-    <HeadlessButton
-      {...props}
-      className={clsx(classes, "cursor-default")}
-      ref={ref}
-    >
-      <TouchTarget>{children}</TouchTarget>
-    </HeadlessButton>
-  );
-});
-
-/* Expand the hit area to at least 44×44px on touch devices */
-export function TouchTarget({ children }) {
-  return (
-    <>
-      {children}
-      <span
-        className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
-        aria-hidden="true"
-      />
-    </>
-  );
-}

package/lib/components/display/headings.jsx

@@ -1,39 +0,0 @@
-import clsx from "clsx";
-
-function H1({ className, children, ...props }) {
-  const cls = clsx("text-3xl font-bold", className);
-  return (
-    <h1 className={cls} {...props}>
-      {children}
-    </h1>
-  );
-}
-
-function H2({ className, children, ...props }) {
-  const cls = clsx("text-2xl font-bold", className);
-  return (
-    <h2 className={cls} {...props}>
-      {children}
-    </h2>
-  );
-}
-
-function H3({ className, children, ...props }) {
-  const cls = clsx("text-xl font-bold", className);
-  return (
-    <h3 className={cls} {...props}>
-      {children}
-    </h3>
-  );
-}
-
-function H4({ className, children, ...props }) {
-  const cls = clsx("text-lg font-bold", className);
-  return (
-    <h4 className={cls} {...props}>
-      {children}
-    </h4>
-  );
-}
-
-export { H1, H2, H3, H4 };

package/lib/components/display/text.jsx

@@ -1,48 +0,0 @@
-import { clsx } from "clsx";
-import { Link } from "../link";
-
-export function Text({ className, ...props }) {
-  return (
-    <p
-      {...props}
-      data-slot="text"
-      className={clsx(
-        className,
-        "text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400"
-      )}
-    />
-  );
-}
-
-export function TextLink({ className, ...props }) {
-  return (
-    <Link
-      {...props}
-      className={clsx(
-        className,
-        "text-zinc-950 underline decoration-zinc-950/50 data-[hover]:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-[hover]:decoration-white"
-      )}
-    />
-  );
-}
-
-export function Strong({ className, ...props }) {
-  return (
-    <strong
-      {...props}
-      className={clsx(className, "font-medium text-zinc-950 dark:text-white")}
-    />
-  );
-}
-
-export function Code({ className, ...props }) {
-  return (
-    <code
-      {...props}
-      className={clsx(
-        className,
-        "rounded border border-zinc-950/10 bg-zinc-950/[2.5%] px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white"
-      )}
-    />
-  );
-}

package/lib/components/hero.jsx

@@ -1,51 +0,0 @@
-import { Container } from "./layout/container";
-/**
- * @name Hero
- * @description A full width, full height hero component with a title, subtitle, and optional image.
- * @param {string} title - The title of the hero.
- * @param {string} subtitle - The subtitle of the hero.
- * @param {string} image - The image to display in the hero.
- * @param {string} alt - The alt text for the image.
- * @param {ReactNode} children - Custom children to display in the hero.
- * @example
- * <Hero
- *  title="Groundwork"
- *  subtitle="React Component Library"
- *  image="/nww-lucky-peak-dam.jpg"
- *  alt="Lucky Peak Dam"
- * >
- */
-function Hero({ title, subtitle, image, alt, children }) {
-  return (
-    <div className="relative">
-      <div className="h-56 w-full overflow-clip bg-zinc-950 md:h-1/5 md:max-h-[500px]">
-        <img
-          src={image}
-          alt={alt}
-          className="object-cover object-center w-full h-full"
-        />
-      </div>
-      <div className="absolute inset-0 bg-zinc-950/50" />
-      {children && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          {children}
-        </div>
-      )}
-      {title && (
-        <Container className="relative">
-          <div className="absolute bottom-0 left-0 max-w-7xl mx-auto px-4">
-            <div className="pb-8">
-              <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
-                {title}
-              </h1>
-              <p className="mt-1 text-xl text-zinc-200">{subtitle}</p>
-            </div>
-          </div>
-        </Container>
-      )}
-    </div>
-  );
-}
-
-export default Hero;
-export { Hero };

package/lib/components/layout/container.jsx

@@ -1,13 +0,0 @@
-import clsx from "clsx";
-
-function Container({ className, children, fluid }) {
-  const containerClass = clsx(
-    "w-full mx-auto px-4 box-border",
-    fluid ? "max-w-full" : "max-w-[1140px]",
-    className
-  );
-  return <div className={containerClass}>{children}</div>;
-}
-
-export default Container;
-export { Container };

package/lib/components/layout/usace-box.jsx

@@ -1,26 +0,0 @@
-import clsx from "clsx";
-
-function UsaceBox({ children, className, title, customTitle }) {
-  const CustomTitle = customTitle;
-  const boxClass = "mb-10  relative";
-  const beforeClass =
-    "before:block before:bg-usace-box-light-gray before:h-8 before:mb-[-12px] before:w-full";
-  const afterClass =
-    "after:block after:absolute after:top-0 after:left-0 after:bg-usace-box-red after:h-[5px] after:w-[50px] after:z-[2]";
-
-  return (
-    <div className={clsx(className, boxClass, beforeClass, afterClass)}>
-      <h2
-        style={{ fontSize: "1.3rem", lineHeight: "1.4rem" }}
-        className="font-bold mb-6"
-      >
-        {title}
-        {CustomTitle && <CustomTitle />}
-      </h2>
-      {children}
-    </div>
-  );
-}
-
-export default UsaceBox;
-export { UsaceBox };

package/lib/components/link.jsx

@@ -1,18 +0,0 @@
-/*
-TODO: Update this component to use your client-side framework's link
-component. We've provided examples of how to do this for Next.js,
-Remix, and Inertia.js in the Catalyst documentation:
-
-https://catalyst.tailwindui.com/docs#client-side-router-integration
-*/
-
-import { DataInteractive as HeadlessDataInteractive } from '@headlessui/react'
-import React from 'react'
-
-export const Link = React.forwardRef(function Link(props, ref) {
-  return (
-    <HeadlessDataInteractive>
-      <a {...props} ref={ref} />
-    </HeadlessDataInteractive>
-  )
-})

package/lib/components/table.jsx

@@ -1,146 +0,0 @@
-"use client";
-
-import { clsx } from "clsx";
-import { createContext, useContext, useState } from "react";
-import { Link } from "./link";
-
-const TableContext = createContext({
-  bleed: false,
-  dense: false,
-  grid: false,
-  striped: false,
-});
-
-export function Table({
-  bleed = false,
-  dense = false,
-  grid = false,
-  striped = false,
-  className,
-  children,
-  ...props
-}) {
-  return (
-    <TableContext.Provider value={{ bleed, dense, grid, striped }}>
-      <div className="flow-root">
-        <div
-          {...props}
-          className={clsx(
-            className,
-            "-mx-[--gutter] overflow-x-auto whitespace-nowrap"
-          )}
-        >
-          <div
-            className={clsx(
-              "inline-block min-w-full align-middle",
-              !bleed && "sm:px-[--gutter]"
-            )}
-          >
-            <table className="min-w-full text-left text-sm/6">{children}</table>
-          </div>
-        </div>
-      </div>
-    </TableContext.Provider>
-  );
-}
-
-export function TableHead({ className, ...props }) {
-  return (
-    <thead
-      className={clsx(className, "text-zinc-500 dark:text-zinc-400")}
-      {...props}
-    />
-  );
-}
-
-export function TableBody(props) {
-  return <tbody {...props} />;
-}
-
-const TableRowContext = createContext({
-  href: undefined,
-  target: undefined,
-  title: undefined,
-});
-
-export function TableRow({
-  href,
-  target,
-  title,
-  className,
-  children,
-  ...props
-}) {
-  let { striped } = useContext(TableContext);
-
-  return (
-    <TableRowContext.Provider value={{ href, target, title }}>
-      <tr
-        {...props}
-        className={clsx(
-          className,
-          href &&
-            "has-[[data-row-link][data-focus]]:outline has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/[2.5%]",
-          striped && "even:bg-zinc-950/[2.5%] dark:even:bg-white/[2.5%]",
-          href && striped && "hover:bg-zinc-950/5 dark:hover:bg-white/5",
-          href &&
-            !striped &&
-            "hover:bg-zinc-950/[2.5%] dark:hover:bg-white/[2.5%]"
-        )}
-      >
-        {children}
-      </tr>
-    </TableRowContext.Provider>
-  );
-}
-
-export function TableHeader({ className, ...props }) {
-  let { bleed, grid } = useContext(TableContext);
-
-  return (
-    <th
-      {...props}
-      className={clsx(
-        className,
-        "border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))] dark:border-b-white/10",
-        grid &&
-          "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
-        !bleed && "sm:first:pl-2 sm:last:pr-2"
-      )}
-    />
-  );
-}
-
-export function TableCell({ className, children, ...props }) {
-  let { bleed, dense, grid, striped } = useContext(TableContext);
-  let { href, target, title } = useContext(TableRowContext);
-  let [cellRef, setCellRef] = useState(null);
-
-  return (
-    <td
-      ref={href ? setCellRef : undefined}
-      {...props}
-      className={clsx(
-        className,
-        "relative px-4 first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))]",
-        !striped && "border-b border-zinc-950/5 dark:border-white/5",
-        grid &&
-          "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
-        dense ? "py-2.5" : "py-4",
-        !bleed && "sm:first:pl-2 sm:last:pr-2"
-      )}
-    >
-      {href && (
-        <Link
-          data-row-link
-          href={href}
-          target={target}
-          aria-label={title}
-          tabIndex={cellRef?.previousElementSibling === null ? 0 : -1}
-          className="absolute inset-0 focus:outline-none"
-        />
-      )}
-      {children}
-    </td>
-  );
-}

package/lib/composite/footer/essayons.jsx

@@ -1,12 +0,0 @@
-const base = import.meta.env.BASE_URL;
-
-function Essayons() {
-  return (
-    <div
-      className={`absolute bottom-[56px] left-[50%] h-[125px] w-[112px] ml-[-56px] bg-[url(${base}essayonscrest.png)]`}
-    />
-  );
-}
-
-export default Essayons;
-export { Essayons };

package/lib/composite/footer/footer-links.jsx

@@ -1,33 +0,0 @@
-function FooterLinks({ links = [], columnCount = 2 }) {
-  return (
-    <ul
-      className="list-none"
-      style={{
-        columnCount: columnCount,
-        columnGap: "40px",
-        margin: 0,
-        padding: "0 0 0 2px",
-      }}
-    >
-      {links.map((link, i) => {
-        const target = link.href.startsWith("http") ? "_blank" : "";
-        const rel = link.href.startsWith("http") ? "noopener noreferrer" : "";
-        return (
-          <li key={link.text + i} className="mb-2">
-            <a
-              href={link.href}
-              target={target}
-              rel={rel}
-              className="hover:underline"
-            >
-              {link.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export default FooterLinks;
-export { FooterLinks };