"use client";
import { jsx as l } from "react/jsx-runtime";
import d from "react";
import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
const t = {
  variant: {
    "2up": {
      classes: "grid-cols-1 md:grid-cols-2",
      description: "Grid items stack on small screens, display side-by-side on medium screens and up"
    },
    "side-by-side": {
      classes: "grid-cols-2",
      description: "Grid items always displayed side-by-side"
    },
    "2-1": {
      classes: "grid-cols-1 md:grid-cols-[2fr_1fr]",
      description: "Two-thirds / one-third split (66%/33%) on medium screens and up"
    },
    "1-2": {
      classes: "grid-cols-1 md:grid-cols-[1fr_2fr]",
      description: "One-third / two-thirds split (33%/66%) on medium screens and up"
    },
    "1-3up": {
      classes: "grid-cols-1 lg:grid-cols-3",
      description: "Grid items stack on small screens, expand to 3 across on large screens"
    },
    "3up": {
      classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
      description: "Grid items stack on small screens, 2 across on medium, 3 across on large"
    },
    "4up": {
      classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
      description: "Grid items stack on small screens, progressively increase columns at larger breakpoints"
    },
    "6up": {
      classes: "grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
      description: "Grid items start at 2 across, expand to 6 across on XL"
    },
    "1-2-4up": {
      classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
      description: "Grid items stack on small screens, 2 across on medium, 4 across on large"
    }
  },
  gap: {
    none: {
      classes: "gap-0",
      description: "No gap between grid items"
    },
    sm: {
      classes: "gap-3",
      description: "Small gap between grid items"
    },
    base: {
      classes: "gap-2 md:gap-6 lg:gap-8",
      description: "Default responsive gap between grid items"
    },
    lg: {
      classes: "gap-8",
      description: "Large gap between grid items"
    }
  }
}, n = {
  gap: "base"
}, g = d.createContext({
  gap: "base"
});
function m({
  variant: s,
  gap: e = n.gap
} = {}) {
  return a(
    "grid",
    s && t.variant[s].classes,
    t.gap[e].classes
  );
}
function u({
  variant: s,
  mobileDivider: e
} = {}) {
  return a(
    e && s === "4up" && "border-b border-kumo-line pb-8 md:border-b-0 md:pb-0"
  );
}
const b = d.forwardRef(
  ({
    children: s,
    className: e,
    mobileDivider: o,
    gap: r = n.gap,
    variant: i,
    ...c
  }, p) => /* @__PURE__ */ l(g.Provider, { value: { variant: i, gap: r, mobileDivider: o }, children: /* @__PURE__ */ l(
    "div",
    {
      ref: p,
      className: a(m({ variant: i, gap: r }), e),
      ...c,
      children: s
    }
  ) })
);
b.displayName = "Grid";
const f = d.forwardRef(
  ({ children: s, className: e, ...o }, r) => {
    const { variant: i, mobileDivider: c } = d.useContext(g);
    return /* @__PURE__ */ l(
      "div",
      {
        ref: r,
        className: a(u({ variant: i, mobileDivider: c }), e),
        ...o,
        children: s
      }
    );
  }
);
f.displayName = "GridItem";
export {
  b as G,
  t as K,
  f as a,
  u as b,
  n as c,
  m as g
};
//# sourceMappingURL=grid-m9r71jxo2b8q1972.js.map
