@digitalpromise/design 2.0.0 → 3.0.0

package/dist/components/logo.d.ts

@@ -0,0 +1,6 @@
+export type LogoVariant = "black" | "white" | "color";
+export default function Logo({ variant, className, }: {
+    variant?: LogoVariant;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=logo.d.ts.map

package/dist/components/logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../src/components/logo.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAQtD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,OAAiB,EACjB,SAAS,GACV,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,kDAcA"}

package/dist/components/pagination.d.ts

@@ -0,0 +1,8 @@
+type PaginationProps = {
+    count: number;
+    limit: number;
+    pageParamKey?: string;
+};
+export default function Pagination({ count, limit, pageParamKey, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAIA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,KAAK,EACL,YAAqB,GACtB,EAAE,eAAe,2CAoHjB"}

package/dist/components/search.d.ts

@@ -0,0 +1,13 @@
+type SearchProps = {
+    placeholder: string;
+    className?: string;
+    inputWidth?: number | string;
+    value?: string;
+    onChange?: (value: string) => void;
+    syncToUrl?: boolean;
+    id?: string;
+    paramKey?: string;
+};
+export default function Search({ placeholder, className, inputWidth, value, onChange, syncToUrl, id, paramKey, }: SearchProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=search.d.ts.map

package/dist/components/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/components/search.tsx"],"names":[],"mappings":"AAKA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,UAAU,EACV,KAAK,EACL,QAAQ,EACR,SAAgB,EAChB,EAAa,EACb,QAAc,GACf,EAAE,WAAW,2CA8Fb"}

package/dist/components/table.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export type TableColumn<TRow> = {
+    key: string;
+    header: string;
+    headerClassName?: string;
+    cellClassName?: string;
+    render: (row: TRow) => ReactNode;
+};
+type TableProps<TRow> = {
+    columns: TableColumn<TRow>[];
+    rows: TRow[];
+    rowKey: (row: TRow, index: number) => string;
+};
+export default function Table<TRow>({ columns, rows, rowKey }: TableProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/components/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,CAAC,IAAI,IAAI;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,SAAS,CAAC;CAClC,CAAC;AAEF,KAAK,UAAU,CAAC,IAAI,IAAI;IACtB,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7B,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,2CA+B9E"}

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");function s({className:t,variant:e="primary",state:n="default",...o}){const r=[e,n].map(u=>"btn-"+u).join(" ");return i.jsx("button",{className:`btn ${r} ${t??""}`.trim(),...o})}exports.Button=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("next/navigation"),S=require("react");function $({className:l,variant:u="primary",state:n="default",...t}){const p=[u,n].map(a=>"btn-"+a).join(" ");return e.jsx("button",{className:`btn ${p} ${l??""}`.trim(),...t})}const k=new Map([["black","/primary-badge-engine-logo-black.svg"],["white","/primary-badge-engine-logo-white.svg"],["color","/primary-badge-engine-logo-color.svg"]]);function C({variant:l="color",className:u}){const n=k.get(l);return n===void 0?null:e.jsx("img",{src:n,width:186,height:36,alt:"Badge Engine",className:u})}function R({count:l,limit:u,pageParamKey:n="page"}){const t=m.useSearchParams(),p=m.usePathname(),a=m.useRouter(),v=t.get(n),x=v?Number.parseInt(v,10):Number.NaN,s=Number.isFinite(x)?x:1,r=Math.max(1,Math.ceil(l/u)),w=r<=7?Array.from({length:r},(i,o)=>o+1):s<=4?[1,2,3,4,5,"ellipsis",r]:s>=r-3?[1,"ellipsis",r-4,r-3,r-2,r-1,r]:[1,"ellipsis",s-1,s,s+1,"ellipsis",r],y=s===1,d=s===r,N=i=>{if(y&&i==="prev"||d&&i==="next")return;const o=i==="prev"?s-1:s+1,g=new URLSearchParams(t.toString());g.set(n,String(o)),a.push(`${p}?${g.toString()}`,{scroll:!1})},j=i=>{const o=new URLSearchParams(t.toString());o.set(n,String(i)),a.push(`${p}?${o.toString()}`,{scroll:!1})};return e.jsxs("ul",{className:"flex items-center justify-center gap-4 font-medium",children:[e.jsx("li",{className:"mr-2",children:e.jsx("button",{type:"button","aria-label":"Previous page",disabled:y,className:"inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",onClick:()=>N("prev"),children:e.jsx("span",{"aria-hidden":!0,className:"font-icon dpg-icons-arrow-line-left inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"})})}),w.map((i,o)=>{const g=i==="ellipsis",h=g?void 0:i,f=h===s,b=g||f,c=g?"Pagination ellipsis":`Go to page ${h}`;return e.jsx("li",{children:e.jsx("button",{type:"button","aria-label":c,"aria-current":f?"page":void 0,disabled:b,className:`flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${f?"bg-blue-1 text-blue-4":""} ${b?"cursor-default":"cursor-pointer hover:bg-gray-1"}`.trim(),onClick:!b&&h?()=>j(h):void 0,children:g?"...":h})},`${i}-${o}`)}),e.jsx("li",{className:"ml-2",children:e.jsx("button",{type:"button","aria-label":"Next page",disabled:d,className:"inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",onClick:()=>N("next"),children:e.jsx("span",{"aria-hidden":!0,className:"font-icon dpg-icons-arrow-line-right inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"})})})]})}function L({placeholder:l,className:u,inputWidth:n,value:t,onChange:p,syncToUrl:a=!0,id:v="search",paramKey:x="s"}){const s=m.useSearchParams(),r=m.usePathname(),w=m.useRouter(),y=S.useRef(null),d=t!==void 0,[N,j]=S.useState(d?t:s.get(x)?.toString()??""),i=d?t:N,o=Math.max(l.length,1),g=`calc(${o}ch + 60px)`,h=n===void 0?g:typeof n=="number"?`${n}px`:n;S.useEffect(()=>{!a||d||j(s.get(x)?.toString()??"")},[d,x,s,a]);const f=b=>{if(!a)return;const c=new URLSearchParams(s.toString());b?(c.set(x,b),c.delete("page")):(c.delete(x),c.delete("page"));const P=c.toString();w.replace(P?`${r}?${P}`:r)};return e.jsxs("form",{className:u??"",noValidate:!0,children:[e.jsx("label",{className:"sr-only",htmlFor:v,children:"Search"}),e.jsxs("div",{className:"relative max-w-full",style:{width:h},children:[e.jsx("span",{"aria-hidden":!0,className:"absolute left-[15px] top-1/2 z-10 -translate-y-1/2 font-icon dpg-icons-magnifier inline-block h-6 w-6 text-[24px] leading-[24px] text-gray-5"}),e.jsx("input",{ref:y,className:"hide-search-clear block w-full max-w-full rounded-[4px] bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-6 indent-[30px] outline outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",style:{color:"#000000",WebkitTextFillColor:"#000000"},size:o,id:v,type:"search",autoComplete:"off",value:i,placeholder:l,onChange:b=>{const c=b.target.value;d||j(c),p?.(c),f(c)}}),i.length>0&&e.jsx("button",{type:"button","aria-label":"Clear search",className:"absolute right-[4px] top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-5 hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4",onClick:()=>{d||j(""),p?.(""),f(""),y.current?.focus()},children:e.jsx("span",{"aria-hidden":!0,className:"font-icon dpg-icons-close inline-block h-4 w-4 text-[16px] leading-[16px] text-gray-5"})})]})]})}function M({columns:l,rows:u,rowKey:n}){return e.jsxs("table",{className:"w-full table-auto border-y border-gray-2 text-gray-5",children:[e.jsx("thead",{className:"font-bold",children:e.jsx("tr",{children:l.map(t=>e.jsx("td",{className:`px-3 py-4 ${t.headerClassName??""}`.trim(),children:t.header},t.key))})}),e.jsx("tbody",{children:u.map((t,p)=>e.jsx("tr",{className:"border-t border-gray-2",children:l.map(a=>e.jsx("td",{className:`${a.cellClassName??"px-3 py-4"}`.trim(),children:a.render(t)},a.key))},n(t,p)))})]})}exports.Button=$;exports.Logo=C;exports.Pagination=R;exports.Search=L;exports.Table=M;

package/dist/index.d.ts

@@ -1,3 +1,8 @@
 import { default as Button } from "./components/button";
-export { Button };
+import { default as Logo } from "./components/logo";
+import { default as Pagination } from "./components/pagination";
+import { default as Search } from "./components/search";
+import { default as Table } from "./components/table";
+export type { TableColumn } from "./components/table";
+export { Button, Logo, Pagination, Search, Table };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC"}

package/dist/index.js

@@ -1,13 +1,209 @@
-import { jsx as e } from "react/jsx-runtime";
-function s({
-  className: t,
-  variant: n = "primary",
-  state: o = "default",
-  ...r
+import { jsx as e, jsxs as w } from "react/jsx-runtime";
+import { useSearchParams as $, usePathname as k, useRouter as C } from "next/navigation";
+import { useRef as j, useState as L, useEffect as R } from "react";
+function B({
+  className: l,
+  variant: u = "primary",
+  state: n = "default",
+  ...t
 }) {
-  const m = [n, o].map((a) => "btn-" + a).join(" ");
-  return /* @__PURE__ */ e("button", { className: `btn ${m} ${t ?? ""}`.trim(), ...r });
+  const p = [u, n].map((a) => "btn-" + a).join(" ");
+  return /* @__PURE__ */ e("button", { className: `btn ${p} ${l ?? ""}`.trim(), ...t });
+}
+const z = /* @__PURE__ */ new Map([
+  ["black", "/primary-badge-engine-logo-black.svg"],
+  ["white", "/primary-badge-engine-logo-white.svg"],
+  ["color", "/primary-badge-engine-logo-color.svg"]
+]);
+function I({
+  variant: l = "color",
+  className: u
+}) {
+  const n = z.get(l);
+  return n === void 0 ? null : /* @__PURE__ */ e(
+    "img",
+    {
+      src: n,
+      width: 186,
+      height: 36,
+      alt: "Badge Engine",
+      className: u
+    }
+  );
+}
+function V({
+  count: l,
+  limit: u,
+  pageParamKey: n = "page"
+}) {
+  const t = $(), p = k(), a = C(), x = t.get(n), b = x ? Number.parseInt(x, 10) : Number.NaN, r = Number.isFinite(b) ? b : 1, i = Math.max(1, Math.ceil(l / u)), S = i <= 7 ? Array.from({ length: i }, (s, o) => o + 1) : r <= 4 ? [1, 2, 3, 4, 5, "ellipsis", i] : r >= i - 3 ? [1, "ellipsis", i - 4, i - 3, i - 2, i - 1, i] : [
+    1,
+    "ellipsis",
+    r - 1,
+    r,
+    r + 1,
+    "ellipsis",
+    i
+  ], v = r === 1, d = r === i, N = (s) => {
+    if (v && s === "prev" || d && s === "next")
+      return;
+    const o = s === "prev" ? r - 1 : r + 1, g = new URLSearchParams(t.toString());
+    g.set(n, String(o)), a.push(`${p}?${g.toString()}`, { scroll: !1 });
+  }, y = (s) => {
+    const o = new URLSearchParams(t.toString());
+    o.set(n, String(s)), a.push(`${p}?${o.toString()}`, { scroll: !1 });
+  };
+  return /* @__PURE__ */ w("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
+    /* @__PURE__ */ e("li", { className: "mr-2", children: /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Previous page",
+        disabled: v,
+        className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        onClick: () => N("prev"),
+        children: /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "font-icon dpg-icons-arrow-line-left inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"
+          }
+        )
+      }
+    ) }),
+    S.map((s, o) => {
+      const g = s === "ellipsis", h = g ? void 0 : s, m = h === r, f = g || m, c = g ? "Pagination ellipsis" : `Go to page ${h}`;
+      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": c,
+          "aria-current": m ? "page" : void 0,
+          disabled: f,
+          className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${m ? "bg-blue-1 text-blue-4" : ""} ${f ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
+          onClick: !f && h ? () => y(h) : void 0,
+          children: g ? "..." : h
+        }
+      ) }, `${s}-${o}`);
+    }),
+    /* @__PURE__ */ e("li", { className: "ml-2", children: /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Next page",
+        disabled: d,
+        className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        onClick: () => N("next"),
+        children: /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "font-icon dpg-icons-arrow-line-right inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function q({
+  placeholder: l,
+  className: u,
+  inputWidth: n,
+  value: t,
+  onChange: p,
+  syncToUrl: a = !0,
+  id: x = "search",
+  paramKey: b = "s"
+}) {
+  const r = $(), i = k(), S = C(), v = j(null), d = t !== void 0, [N, y] = L(
+    d ? t : r.get(b)?.toString() ?? ""
+  ), s = d ? t : N, o = Math.max(l.length, 1), g = `calc(${o}ch + 60px)`, h = n === void 0 ? g : typeof n == "number" ? `${n}px` : n;
+  R(() => {
+    !a || d || y(r.get(b)?.toString() ?? "");
+  }, [d, b, r, a]);
+  const m = (f) => {
+    if (!a) return;
+    const c = new URLSearchParams(r.toString());
+    f ? (c.set(b, f), c.delete("page")) : (c.delete(b), c.delete("page"));
+    const P = c.toString();
+    S.replace(P ? `${i}?${P}` : i);
+  };
+  return /* @__PURE__ */ w("form", { className: u ?? "", noValidate: !0, children: [
+    /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: x, children: "Search" }),
+    /* @__PURE__ */ w("div", { className: "relative max-w-full", style: { width: h }, children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": !0,
+          className: "absolute left-[15px] top-1/2 z-10 -translate-y-1/2 font-icon dpg-icons-magnifier inline-block h-6 w-6 text-[24px] leading-[24px] text-gray-5"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: v,
+          className: "hide-search-clear block w-full max-w-full rounded-[4px] bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-6 indent-[30px] outline outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",
+          style: {
+            color: "#000000",
+            WebkitTextFillColor: "#000000"
+          },
+          size: o,
+          id: x,
+          type: "search",
+          autoComplete: "off",
+          value: s,
+          placeholder: l,
+          onChange: (f) => {
+            const c = f.target.value;
+            d || y(c), p?.(c), m(c);
+          }
+        }
+      ),
+      s.length > 0 && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear search",
+          className: "absolute right-[4px] top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-5 hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4",
+          onClick: () => {
+            d || y(""), p?.(""), m(""), v.current?.focus();
+          },
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": !0,
+              className: "font-icon dpg-icons-close inline-block h-4 w-4 text-[16px] leading-[16px] text-gray-5"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function A({ columns: l, rows: u, rowKey: n }) {
+  return /* @__PURE__ */ w("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
+    /* @__PURE__ */ e("thead", { className: "font-bold", children: /* @__PURE__ */ e("tr", { children: l.map((t) => /* @__PURE__ */ e(
+      "td",
+      {
+        className: `px-3 py-4 ${t.headerClassName ?? ""}`.trim(),
+        children: t.header
+      },
+      t.key
+    )) }) }),
+    /* @__PURE__ */ e("tbody", { children: u.map((t, p) => /* @__PURE__ */ e("tr", { className: "border-t border-gray-2", children: l.map((a) => /* @__PURE__ */ e(
+      "td",
+      {
+        className: `${a.cellClassName ?? "px-3 py-4"}`.trim(),
+        children: a.render(t)
+      },
+      a.key
+    )) }, n(t, p))) })
+  ] });
 }
 export {
-  s as Button
+  B as Button,
+  I as Logo,
+  V as Pagination,
+  q as Search,
+  A as Table
 };

package/dist/main.css

@@ -1 +1 @@
-@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #777777; --color-gray-5: #454545; --color-blue-1: #ebf4fa; --color-blue-2: #cce3f2; --color-blue-3: #348ec7; --color-blue-4: #2a7aac; --color-blue-5: #246289; --color-indigo-1: #eef2f9; --color-indigo-2: #d2d8ec; --color-indigo-3: #5a71b9; --color-indigo-4: #465da5; --color-indigo-5: #3a4d88; --color-purple-1: #f1eef6; --color-purple-2: #ddd5e9; --color-purple-3: #8164af; --color-purple-4: #6d509b; --color-purple-5: #5a4280; --color-violet-1: #f5eef6; --color-violet-2: #e6d5ea; --color-violet-3: #9a55aa; --color-violet-4: #81488e; --color-violet-5: #693a73; --color-magenta-1: #f6eef4; --color-magenta-2: #ead5e3; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #743a61; --color-red-1: #fcede8; --color-red-2: #f8d2c7; --color-red-3: #e45a2f; --color-red-4: #d0451b; --color-red-5: #ab3916; --color-orange-1: #fcf2e8; --color-orange-2: #f8dfc6; --color-orange-3: #e3811c; --color-orange-4: #c86400; --color-orange-5: #9e5000; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #82a82f; --color-green-4: #698826; --color-green-5: #50681d; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #4e9d6d; --color-jade-4: #40815a; --color-jade-5: #336647; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #259cb2; --color-teal-4: #1e7e90; --color-teal-5: #17616e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #2a7aac; --color-primary-hover: #ebf4fa; --color-danger: #d0451b; --color-danger-hover: #ab3916; --color-disabled: #a3a3a3; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5;}}
+@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #777777; --color-gray-5: #454545; --color-blue-1: #ebf4fa; --color-blue-2: #cce3f2; --color-blue-3: #348ec7; --color-blue-4: #2a7aac; --color-blue-5: #246289; --color-indigo-1: #eef2f9; --color-indigo-2: #d2d8ec; --color-indigo-3: #5a71b9; --color-indigo-4: #465da5; --color-indigo-5: #3a4d88; --color-purple-1: #f1eef6; --color-purple-2: #ddd5e9; --color-purple-3: #8164af; --color-purple-4: #6d509b; --color-purple-5: #5a4280; --color-violet-1: #f5eef6; --color-violet-2: #e6d5ea; --color-violet-3: #9a55aa; --color-violet-4: #81488e; --color-violet-5: #693a73; --color-magenta-1: #f6eef4; --color-magenta-2: #ead5e3; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #743a61; --color-red-1: #fcede8; --color-red-2: #f8d2c7; --color-red-3: #e45a2f; --color-red-4: #d0451b; --color-red-5: #ab3916; --color-orange-1: #fcf2e8; --color-orange-2: #f8dfc6; --color-orange-3: #e3811c; --color-orange-4: #c86400; --color-orange-5: #9e5000; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #82a82f; --color-green-4: #698826; --color-green-5: #50681d; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #4e9d6d; --color-jade-4: #40815a; --color-jade-5: #336647; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #259cb2; --color-teal-4: #1e7e90; --color-teal-5: #17616e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #2a7aac; --color-primary-hover: #ebf4fa; --color-danger: #d0451b; --color-danger-hover: #ab3916; --color-disabled: #a3a3a3; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}

package/dist/shims/next-navigation.d.ts

@@ -0,0 +1,11 @@
+type NavigateOptions = {
+    scroll?: boolean;
+};
+export declare function usePathname(): string;
+export declare function useSearchParams(): URLSearchParams;
+export declare function useRouter(): {
+    push(href: string, options?: NavigateOptions): void;
+    replace(href: string, options?: NavigateOptions): void;
+};
+export {};
+//# sourceMappingURL=next-navigation.d.ts.map

package/dist/shims/next-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"next-navigation.d.ts","sourceRoot":"","sources":["../../src/shims/next-navigation.ts"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA4BF,wBAAgB,WAAW,WAE1B;AAED,wBAAgB,eAAe,oBAI9B;AAED,wBAAgB,SAAS;eAEV,MAAM,YAAY,eAAe;kBAS9B,MAAM,YAAY,eAAe;EAUlD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digitalpromise/design",
   "private": false,
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,39 +9,46 @@
     "dist"
   ],
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@eslint/js": "^9.35.0",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-links": "^9.1.5",
-    "@storybook/react-vite": "^9.1.5",
-    "@tailwindcss/vite": "^4.1.13",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@digitalpromise/icons": "1.4.0",
+    "@eslint/js": "^9.39.3",
+    "@storybook/addon-docs": "^9.1.19",
+    "@storybook/addon-links": "^9.1.19",
+    "@storybook/react-vite": "^9.1.19",
+    "@tailwindcss/vite": "^4.2.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.43.0",
-    "@typescript-eslint/parser": "^8.43.0",
-    "@vitejs/plugin-react-swc": "^4.0.1",
-    "eslint": "^9.35.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "eslint": "^9.39.3",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.1.5",
-    "jsdom": "^26.1.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "storybook": "^9.1.5",
-    "style-dictionary": "^5.0.4",
-    "tailwindcss": "^4.1.13",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.43.0",
-    "vite": "^7.1.5",
+    "eslint-plugin-storybook": "^9.1.19",
+    "jsdom": "^27.4.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^9.1.19",
+    "style-dictionary": "^5.3.2",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
+    "next": "^16.0.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwindcss": "^4.1.13"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "scripts": {
     "postinstall": "npm run build",
     "style-dictionary": "style-dictionary build",