@digitalpromise/design 4.9.2 → 4.9.5

package/dist/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./icon-KeRREHrI.cjs"),e=require("react/jsx-runtime"),j=require("next/navigation"),k=require("react"),z=["default","danger","inverse","emphasize","decolor"],L=["md","sm","xs"],R=["ghost","outline","secondary","tertiary"],F="inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",q={md:"h-12 w-12 p-3",sm:"h-8 w-8 p-2",xs:"h-6 w-6 p-0"},M={default:"text-gray-5 hover:text-neutral-5 transition-colors",danger:"text-red-4 hover:text-red-5",inverse:"text-white hover:text-gray-1",emphasize:"bg-white text-gray-5 hover:bg-gray-1 hover:text-neutral-5 focus-visible:bg-blue-1 focus-visible:text-blue-4 focus-visible:hover:bg-blue-2 focus-visible:hover:text-blue-5",decolor:"text-gray-5 hover:text-neutral-5 transition-colors"},O={ghost:"",outline:"border-2 border-gray-5"},V={default:"btn btn-primary",danger:"btn btn-primary btn-danger",inverse:"btn btn-primary btn-inverse",emphasize:"btn btn-primary",decolor:"btn btn-primary btn-decolor"},G={default:"flex items-center gap-2 py-3 text-gray-5",danger:"flex items-center gap-2 py-3 text-red-4 hover:text-red-5",inverse:"flex items-center gap-2 py-3 text-white hover:text-gray-1",emphasize:"flex items-center gap-2 py-3 text-gray-5",decolor:"flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"};function I(t,o){return`${t==="xs"?"block h-5 w-5 shrink-0 leading-none":t==="sm"?"block h-4 w-4 shrink-0 text-base leading-none":"block h-6 w-6 shrink-0 text-2xl leading-none"} ${o??""}`.trim()}function A({className:t,size:o="md",state:n="default",variant:r="ghost"}){return r==="secondary"?`${V[n]} ${t??""}`.trim():r==="tertiary"?`${G[n]} ${t??""}`.trim():`${F} ${q[o]} ${M[n]} ${O[r]} ${t??""}`.trim()}function E({children:t,icon:o,iconClassName:n,iconPosition:r="start",size:l="md",textClassName:u,variant:i="ghost"}){const a=o?e.jsx(f.Icon,{name:o,className:i==="ghost"||i==="outline"?I(l,n):i==="tertiary"?`h-5 w-5 shrink-0 ${n??""}`.trim():n}):null;if(i==="tertiary"){const s=t?e.jsx("span",{className:`font-semibold underline ${u??""}`.trim(),children:t}):null;return r==="end"?e.jsxs(e.Fragment,{children:[s,a]}):e.jsxs(e.Fragment,{children:[a,s]})}if(i==="secondary"){const s=u?e.jsx("span",{className:u,children:t}):t;return a?s?r==="end"?e.jsxs(e.Fragment,{children:[s," ",a]}):e.jsxs(e.Fragment,{children:[a," ",s]}):a:s}return e.jsxs(e.Fragment,{children:[a,t]})}function T({children:t,icon:o,iconClassName:n,iconPosition:r="start",label:l,className:u,size:i="md",state:a="default",textClassName:s,type:c="button",variant:p="ghost",...y}){return e.jsx("button",{type:c,className:A({className:u,size:i,state:a,variant:p}),...y,"aria-label":l,children:E({children:t,icon:o,iconClassName:n,iconPosition:r,size:i,textClassName:s,variant:p})})}function D({name:t,size:o="md",className:n}){return e.jsx(f.Icon,{name:t,className:I(o,n)})}const Q=new Map([["black","/primary-badge-engine-logo-black.svg"],["white","/primary-badge-engine-logo-white.svg"],["color","/primary-badge-engine-logo-color.svg"]]);function U({variant:t="color",className:o}){const n=Q.get(t);return n===void 0?null:e.jsx("img",{src:n,width:186,height:36,alt:"Badge Engine",className:o})}function _({count:t,limit:o,pageParamKey:n="page"}){const r=j.useSearchParams(),l=j.usePathname(),u=j.useRouter(),i=r.get(n),a=i?Number.parseInt(i,10):Number.NaN,s=Number.isFinite(a)?a:1,c=Math.max(1,Math.ceil(t/o)),p=c<=7?Array.from({length:c},(d,g)=>g+1):s<=4?[1,2,3,4,5,"ellipsis",c]:s>=c-3?[1,"ellipsis",c-4,c-3,c-2,c-1,c]:[1,"ellipsis",s-1,s,s+1,"ellipsis",c],y=s===1,$=s===c,N=d=>{if(y&&d==="prev"||$&&d==="next")return;const g=d==="prev"?s-1:s+1,b=new URLSearchParams(r.toString());b.set(n,String(g)),u.push(`${l}?${b.toString()}`,{scroll:!1})},x=d=>{const g=new URLSearchParams(r.toString());g.set(n,String(d)),u.push(`${l}?${g.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(f.Icon,{name:"ArrowLineLeft"})})}),p.map((d,g)=>{const b=d==="ellipsis",m=b?void 0:d,S=m===s,w=b||S,P=b?"Pagination ellipsis":`Go to page ${m}`;return e.jsx("li",{children:e.jsx("button",{type:"button","aria-label":P,"aria-current":S?"page":void 0,disabled:w,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 ${S?"bg-blue-1 text-blue-4":""} ${w?"cursor-default":"cursor-pointer hover:bg-gray-1"}`.trim(),onClick:!w&&m?()=>x(m):void 0,children:b?"...":m})},`${d}-${g}`)}),e.jsx("li",{className:"ml-2",children:e.jsx("button",{type:"button","aria-label":"Next page",disabled:$,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(f.Icon,{name:"ArrowLineRight"})})})]})}function H({placeholder:t,className:o,inputWidth:n,value:r,onChange:l,syncToUrl:u=!0,id:i="search",paramKey:a="s",firstResultSelector:s,onEnter:c}){const p=j.useSearchParams(),y=j.usePathname(),$=j.useRouter(),N=k.useRef(null),x=r!==void 0,[d,g]=k.useState(x?r:p.get(a)?.toString()??""),b=x?r:d,m=Math.max(t.length,1),S=`calc(${m}ch + 60px)`,w=n===void 0?S:typeof n=="number"?`${n}px`:n;k.useEffect(()=>{!u||x||g(p.get(a)?.toString()??"")},[x,a,p,u]);const P=v=>{if(!u)return;const h=new URLSearchParams(p.toString());v?(h.set(a,v),h.delete("page")):(h.delete(a),h.delete("page"));const C=h.toString();$.replace(C?`${y}?${C}`:y)},B=v=>{if(v.preventDefault(),c?.(b),s&&b.trim()){const h=document.querySelector(s);h&&h.focus()}};return e.jsxs("form",{className:o??"",noValidate:!0,onSubmit:B,children:[e.jsx("label",{className:"sr-only",htmlFor:i,children:"Search"}),e.jsxs("div",{className:"relative max-w-full",style:{width:w},children:[e.jsx(f.Icon,{name:"Magnifier","aria-hidden":!0,className:"absolute left-[15px] top-1/2 z-10 -translate-y-1/2 text-large leading-5 text-gray-5"}),e.jsx("input",{ref:N,className:"hide-search-clear block w-full max-w-full rounded-sm bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-5 indent-[30px] outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",style:{color:"#000000",WebkitTextFillColor:"#000000"},size:m,id:i,type:"search",autoComplete:"off",value:b,placeholder:t,onChange:v=>{const h=v.target.value;x||g(h),l?.(h),P(h)}}),b.length>0&&e.jsx("button",{type:"button","aria-label":"Clear search",className:"absolute right-1 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:()=>{x||g(""),l?.(""),P(""),N.current?.focus()},children:e.jsx(f.Icon,{name:"Close"})})]})]})}function J({columns:t,rows:o,rowKey:n}){const r=k.useId();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:t.map(l=>e.jsx("th",{id:`${r}-col-${l.key}`,scope:"col",className:`px-3 py-4 text-left ${l.headerClassName??""}`.trim(),children:l.header},l.key))})}),e.jsx("tbody",{children:o.map((l,u)=>e.jsx("tr",{className:"border-t border-gray-2",children:t.map(i=>e.jsx("td",{headers:`${r}-col-${i.key}`,className:`${i.cellClassName??"px-3 py-4"}`.trim(),children:i.render(l)},i.key))},n(l,u)))})]})}exports.Button=f.Button;exports.Icon=f.Icon;exports.IconButton=T;exports.IconButtonGlyph=D;exports.Logo=U;exports.Pagination=_;exports.Search=H;exports.Table=J;exports.iconButtonSizes=L;exports.iconButtonStates=z;exports.iconButtonVariants=R;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./icon-KeRREHrI.cjs"),e=require("react/jsx-runtime"),j=require("next/navigation"),k=require("react"),z=["default","danger","inverse","emphasize","decolor"],L=["md","sm","xs"],R=["ghost","outline","secondary","tertiary"],F="inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",q={md:"h-12 w-12 p-3",sm:"h-8 w-8 p-2",xs:"h-6 w-6 p-0"},M={default:"text-gray-5 hover:text-neutral-5 transition-colors",danger:"text-red-4 hover:text-red-5",inverse:"text-white hover:text-gray-1",emphasize:"bg-white text-gray-5 hover:bg-gray-1 hover:text-neutral-5 focus-visible:bg-blue-1 focus-visible:text-blue-4 focus-visible:hover:bg-blue-2 focus-visible:hover:text-blue-5",decolor:"text-gray-5 hover:text-neutral-5 transition-colors"},O={ghost:"",outline:"border-2 border-gray-5"},V={default:"btn btn-primary inline-flex items-center justify-center gap-2",danger:"btn btn-primary btn-danger inline-flex items-center justify-center gap-2",inverse:"btn btn-primary btn-inverse inline-flex items-center justify-center gap-2",emphasize:"btn btn-primary inline-flex items-center justify-center gap-2",decolor:"btn btn-primary btn-decolor inline-flex items-center justify-center gap-2"},G={default:"flex items-center gap-2 py-3 text-gray-5",danger:"flex items-center gap-2 py-3 text-red-4 hover:text-red-5",inverse:"flex items-center gap-2 py-3 text-white hover:text-gray-1",emphasize:"flex items-center gap-2 py-3 text-gray-5",decolor:"flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"};function I(t,a){return`${t==="xs"?"block h-5 w-5 shrink-0 leading-none":t==="sm"?"block h-4 w-4 shrink-0 text-base leading-none":"block h-6 w-6 shrink-0 text-2xl leading-none"} ${a??""}`.trim()}function A({className:t,size:a="md",state:n="default",variant:s="ghost"}){return s==="secondary"?`${V[n]} ${t??""}`.trim():s==="tertiary"?`${G[n]} ${t??""}`.trim():`${F} ${q[a]} ${M[n]} ${O[s]} ${t??""}`.trim()}function E({children:t,icon:a,iconClassName:n,iconPosition:s="start",size:l="md",textClassName:u,variant:i="ghost"}){const o=a?e.jsx(f.Icon,{name:a,className:i==="ghost"||i==="outline"?I(l,n):i==="tertiary"?`h-5 w-5 shrink-0 ${n??""}`.trim():n}):null;if(i==="tertiary"){const r=t?e.jsx("span",{className:`font-semibold underline ${u??""}`.trim(),children:t}):null;return s==="end"?e.jsxs(e.Fragment,{children:[r,o]}):e.jsxs(e.Fragment,{children:[o,r]})}if(i==="secondary"){const r=u?e.jsx("span",{className:u,children:t}):t;return o?r?s==="end"?e.jsxs(e.Fragment,{children:[r,o]}):e.jsxs(e.Fragment,{children:[o,r]}):o:r}return e.jsxs(e.Fragment,{children:[o,t]})}function T({children:t,icon:a,iconClassName:n,iconPosition:s="start",label:l,className:u,size:i="md",state:o="default",textClassName:r,type:c="button",variant:x="ghost",...y}){return e.jsx("button",{type:c,className:A({className:u,size:i,state:o,variant:x}),...y,"aria-label":l,children:E({children:t,icon:a,iconClassName:n,iconPosition:s,size:i,textClassName:r,variant:x})})}function D({name:t,size:a="md",className:n}){return e.jsx(f.Icon,{name:t,className:I(a,n)})}const Q=new Map([["black","/primary-badge-engine-logo-black.svg"],["white","/primary-badge-engine-logo-white.svg"],["color","/primary-badge-engine-logo-color.svg"]]);function U({variant:t="color",className:a}){const n=Q.get(t);return n===void 0?null:e.jsx("img",{src:n,width:186,height:36,alt:"Badge Engine",className:a})}function _({count:t,limit:a=10,pageParamKey:n="page"}){const s=j.useSearchParams(),l=j.usePathname(),u=j.useRouter(),i=s.get(n),o=i?Number.parseInt(i,10):Number.NaN,r=Number.isFinite(o)?o:1,c=Math.max(1,Math.ceil(t/a)),x=c<=7?Array.from({length:c},(d,g)=>g+1):r<=4?[1,2,3,4,5,"ellipsis",c]:r>=c-3?[1,"ellipsis",c-4,c-3,c-2,c-1,c]:[1,"ellipsis",r-1,r,r+1,"ellipsis",c],y=r===1,w=r===c,N=d=>{if(y&&d==="prev"||w&&d==="next")return;const g=d==="prev"?r-1:r+1,b=new URLSearchParams(s.toString());b.set(n,String(g)),u.push(`${l}?${b.toString()}`,{scroll:!1})},m=d=>{const g=new URLSearchParams(s.toString());g.set(n,String(d)),u.push(`${l}?${g.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(f.Icon,{name:"ArrowLineLeft"})})}),x.map((d,g)=>{const b=d==="ellipsis",h=b?void 0:d,S=h===r,$=b||S,P=b?"Pagination ellipsis":`Go to page ${h}`;return e.jsx("li",{children:e.jsx("button",{type:"button","aria-label":P,"aria-current":S?"page":void 0,disabled:$,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 ${S?"bg-blue-1 text-blue-4":""} ${$?"cursor-default":"cursor-pointer hover:bg-gray-1"}`.trim(),onClick:!$&&h?()=>m(h):void 0,children:b?"...":h})},`${d}-${g}`)}),e.jsx("li",{className:"ml-2",children:e.jsx("button",{type:"button","aria-label":"Next page",disabled:w,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(f.Icon,{name:"ArrowLineRight"})})})]})}function H({placeholder:t,className:a,inputWidth:n,value:s,onChange:l,syncToUrl:u=!0,id:i="search",paramKey:o="s",firstResultSelector:r,onEnter:c}){const x=j.useSearchParams(),y=j.usePathname(),w=j.useRouter(),N=k.useRef(null),m=s!==void 0,[d,g]=k.useState(m?s:x.get(o)?.toString()??""),b=m?s:d,h=Math.max(t.length,1),S=`calc(${h}ch + 60px)`,$=n===void 0?S:typeof n=="number"?`${n}px`:n;k.useEffect(()=>{!u||m||g(x.get(o)?.toString()??"")},[m,o,x,u]);const P=v=>{if(!u)return;const p=new URLSearchParams(x.toString());v?(p.set(o,v),p.delete("page")):(p.delete(o),p.delete("page"));const C=p.toString();w.replace(C?`${y}?${C}`:y)},B=v=>{if(v.preventDefault(),c?.(b),r&&b.trim()){const p=document.querySelector(r);p&&p.focus()}};return e.jsxs("form",{className:`search-field ${a??""}`.trim(),noValidate:!0,onSubmit:B,children:[e.jsx("label",{className:"sr-only",htmlFor:i,children:"Search"}),e.jsxs("div",{className:"relative max-w-full",style:{width:$},children:[e.jsx(f.Icon,{name:"Magnifier","aria-hidden":!0,className:"absolute left-[15px] top-1/2 z-10 -translate-y-1/2 text-large leading-5 text-gray-5"}),e.jsx("input",{ref:N,className:"hide-search-clear block w-full max-w-full rounded-sm bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-5 indent-[30px] outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",style:{color:"#000000",WebkitTextFillColor:"#000000"},size:h,id:i,type:"search",autoComplete:"off",value:b,placeholder:t,onChange:v=>{const p=v.target.value;m||g(p),l?.(p),P(p)}}),b.length>0&&e.jsx("button",{type:"button","aria-label":"Clear search",className:"absolute right-1 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:()=>{m||g(""),l?.(""),P(""),N.current?.focus()},children:e.jsx(f.Icon,{name:"Close"})})]})]})}function J({columns:t,rows:a,rowKey:n}){const s=k.useId();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:t.map(l=>e.jsx("th",{id:`${s}-col-${l.key}`,scope:"col",className:`px-3 py-4 text-left leading-[23px] ${l.headerClassName??""}`.trim(),children:l.header},l.key))})}),e.jsx("tbody",{children:a.map((l,u)=>e.jsx("tr",{className:"border-t border-gray-2",children:t.map(i=>e.jsx("td",{headers:`${s}-col-${i.key}`,className:`${i.cellClassName??"px-3 py-4"}`.trim(),children:i.render(l)},i.key))},n(l,u)))})]})}exports.Button=f.Button;exports.Icon=f.Icon;exports.IconButton=T;exports.IconButtonGlyph=D;exports.Logo=U;exports.Pagination=_;exports.Search=H;exports.Table=J;exports.iconButtonSizes=L;exports.iconButtonStates=z;exports.iconButtonVariants=R;

package/dist/index.d.ts

@@ -64,7 +64,7 @@ export declare function Pagination({ count, limit, pageParamKey, }: PaginationPr
 
 declare type PaginationProps = {
     count: number;
-    limit: number;
+    limit?: number;
     pageParamKey?: string;
 };
 

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { I as N } from "./icon-DOAUhyEM.js";
 import { B as le } from "./icon-DOAUhyEM.js";
-import { jsx as n, jsxs as h, Fragment as k } from "react/jsx-runtime";
-import { useSearchParams as I, usePathname as z, useRouter as L } from "next/navigation";
-import { useRef as R, useState as F, useEffect as M, useId as O } from "react";
+import { jsx as n, jsxs as m, Fragment as k } from "react/jsx-runtime";
+import { useSearchParams as B, usePathname as I, useRouter as z } from "next/navigation";
+import { useRef as F, useState as M, useEffect as O, useId as V } from "react";
 const Y = [
   "default",
   "danger",
@@ -15,142 +15,140 @@ const Y = [
   "outline",
   "secondary",
   "tertiary"
-], V = "inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", A = {
+], A = "inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", E = {
   md: "h-12 w-12 p-3",
   sm: "h-8 w-8 p-2",
   xs: "h-6 w-6 p-0"
-}, E = {
+}, G = {
   default: "text-gray-5 hover:text-neutral-5 transition-colors",
   danger: "text-red-4 hover:text-red-5",
   inverse: "text-white hover:text-gray-1",
   emphasize: "bg-white text-gray-5 hover:bg-gray-1 hover:text-neutral-5 focus-visible:bg-blue-1 focus-visible:text-blue-4 focus-visible:hover:bg-blue-2 focus-visible:hover:text-blue-5",
   decolor: "text-gray-5 hover:text-neutral-5 transition-colors"
-}, G = {
+}, q = {
   ghost: "",
   outline: "border-2 border-gray-5"
-}, q = {
-  default: "btn btn-primary",
-  danger: "btn btn-primary btn-danger",
-  inverse: "btn btn-primary btn-inverse",
-  emphasize: "btn btn-primary",
-  decolor: "btn btn-primary btn-decolor"
 }, D = {
+  default: "btn btn-primary inline-flex items-center justify-center gap-2",
+  danger: "btn btn-primary btn-danger inline-flex items-center justify-center gap-2",
+  inverse: "btn btn-primary btn-inverse inline-flex items-center justify-center gap-2",
+  emphasize: "btn btn-primary inline-flex items-center justify-center gap-2",
+  decolor: "btn btn-primary btn-decolor inline-flex items-center justify-center gap-2"
+}, Q = {
   default: "flex items-center gap-2 py-3 text-gray-5",
   danger: "flex items-center gap-2 py-3 text-red-4 hover:text-red-5",
   inverse: "flex items-center gap-2 py-3 text-white hover:text-gray-1",
   emphasize: "flex items-center gap-2 py-3 text-gray-5",
   decolor: "flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"
 };
-function j(e, o) {
-  return `${e === "xs" ? "block h-5 w-5 shrink-0 leading-none" : e === "sm" ? "block h-4 w-4 shrink-0 text-base leading-none" : "block h-6 w-6 shrink-0 text-2xl leading-none"} ${o ?? ""}`.trim();
+function L(e, a) {
+  return `${e === "xs" ? "block h-5 w-5 shrink-0 leading-none" : e === "sm" ? "block h-4 w-4 shrink-0 text-base leading-none" : "block h-6 w-6 shrink-0 text-2xl leading-none"} ${a ?? ""}`.trim();
 }
-function Q({
+function T({
   className: e,
-  size: o = "md",
+  size: a = "md",
   state: t = "default",
   variant: s = "ghost"
 }) {
-  return s === "secondary" ? `${q[t]} ${e ?? ""}`.trim() : s === "tertiary" ? `${D[t]} ${e ?? ""}`.trim() : `${V} ${A[o]} ${E[t]} ${G[s]} ${e ?? ""}`.trim();
+  return s === "secondary" ? `${D[t]} ${e ?? ""}`.trim() : s === "tertiary" ? `${Q[t]} ${e ?? ""}`.trim() : `${A} ${E[a]} ${G[t]} ${q[s]} ${e ?? ""}`.trim();
 }
-function T({
+function U({
   children: e,
-  icon: o,
+  icon: a,
   iconClassName: t,
   iconPosition: s = "start",
   size: l = "md",
   textClassName: u,
   variant: i = "ghost"
 }) {
-  const a = o ? /* @__PURE__ */ n(
+  const o = a ? /* @__PURE__ */ n(
     N,
     {
-      name: o,
-      className: i === "ghost" || i === "outline" ? j(l, t) : i === "tertiary" ? `h-5 w-5 shrink-0 ${t ?? ""}`.trim() : t
+      name: a,
+      className: i === "ghost" || i === "outline" ? L(l, t) : i === "tertiary" ? `h-5 w-5 shrink-0 ${t ?? ""}`.trim() : t
     }
   ) : null;
   if (i === "tertiary") {
     const r = e ? /* @__PURE__ */ n("span", { className: `font-semibold underline ${u ?? ""}`.trim(), children: e }) : null;
-    return s === "end" ? /* @__PURE__ */ h(k, { children: [
+    return s === "end" ? /* @__PURE__ */ m(k, { children: [
       r,
-      a
-    ] }) : /* @__PURE__ */ h(k, { children: [
-      a,
+      o
+    ] }) : /* @__PURE__ */ m(k, { children: [
+      o,
       r
     ] });
   }
   if (i === "secondary") {
     const r = u ? /* @__PURE__ */ n("span", { className: u, children: e }) : e;
-    return a ? r ? s === "end" ? /* @__PURE__ */ h(k, { children: [
+    return o ? r ? s === "end" ? /* @__PURE__ */ m(k, { children: [
       r,
-      " ",
-      a
-    ] }) : /* @__PURE__ */ h(k, { children: [
-      a,
-      " ",
+      o
+    ] }) : /* @__PURE__ */ m(k, { children: [
+      o,
       r
-    ] }) : a : r;
+    ] }) : o : r;
   }
-  return /* @__PURE__ */ h(k, { children: [
-    a,
+  return /* @__PURE__ */ m(k, { children: [
+    o,
     e
   ] });
 }
 function ee({
   children: e,
-  icon: o,
+  icon: a,
   iconClassName: t,
   iconPosition: s = "start",
   label: l,
   className: u,
   size: i = "md",
-  state: a = "default",
+  state: o = "default",
   textClassName: r,
   type: c = "button",
-  variant: m = "ghost",
+  variant: f = "ghost",
   ...y
 }) {
   return /* @__PURE__ */ n(
     "button",
     {
       type: c,
-      className: Q({ className: u, size: i, state: a, variant: m }),
+      className: T({ className: u, size: i, state: o, variant: f }),
       ...y,
       "aria-label": l,
-      children: T({
+      children: U({
         children: e,
-        icon: o,
+        icon: a,
         iconClassName: t,
         iconPosition: s,
         size: i,
         textClassName: r,
-        variant: m
+        variant: f
       })
     }
   );
 }
 function te({
   name: e,
-  size: o = "md",
+  size: a = "md",
   className: t
 }) {
   return /* @__PURE__ */ n(
     N,
     {
       name: e,
-      className: j(o, t)
+      className: L(a, t)
     }
   );
 }
-const U = /* @__PURE__ */ new Map([
+const _ = /* @__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 ne({
   variant: e = "color",
-  className: o
+  className: a
 }) {
-  const t = U.get(e);
+  const t = _.get(e);
   return t === void 0 ? null : /* @__PURE__ */ n(
     "img",
     {
@@ -158,16 +156,16 @@ function ne({
       width: 186,
       height: 36,
       alt: "Badge Engine",
-      className: o
+      className: a
     }
   );
 }
 function re({
   count: e,
-  limit: o,
+  limit: a = 10,
   pageParamKey: t = "page"
 }) {
-  const s = I(), l = z(), u = L(), i = s.get(t), a = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(a) ? a : 1, c = Math.max(1, Math.ceil(e / o)), m = c <= 7 ? Array.from({ length: c }, (d, g) => g + 1) : r <= 4 ? [1, 2, 3, 4, 5, "ellipsis", c] : r >= c - 3 ? [1, "ellipsis", c - 4, c - 3, c - 2, c - 1, c] : [
+  const s = B(), l = I(), u = z(), i = s.get(t), o = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(o) ? o : 1, c = Math.max(1, Math.ceil(e / a)), f = c <= 7 ? Array.from({ length: c }, (d, g) => g + 1) : r <= 4 ? [1, 2, 3, 4, 5, "ellipsis", c] : r >= c - 3 ? [1, "ellipsis", c - 4, c - 3, c - 2, c - 1, c] : [
     1,
     "ellipsis",
     r - 1,
@@ -178,13 +176,13 @@ function re({
   ], y = r === 1, C = r === c, $ = (d) => {
     if (y && d === "prev" || C && d === "next")
       return;
-    const g = d === "prev" ? r - 1 : r + 1, b = new URLSearchParams(s.toString());
-    b.set(t, String(g)), u.push(`${l}?${b.toString()}`, { scroll: !1 });
-  }, f = (d) => {
+    const g = d === "prev" ? r - 1 : r + 1, p = new URLSearchParams(s.toString());
+    p.set(t, String(g)), u.push(`${l}?${p.toString()}`, { scroll: !1 });
+  }, h = (d) => {
     const g = new URLSearchParams(s.toString());
     g.set(t, String(d)), u.push(`${l}?${g.toString()}`, { scroll: !1 });
   };
-  return /* @__PURE__ */ h("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
+  return /* @__PURE__ */ m("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
     /* @__PURE__ */ n("li", { className: "mr-2", children: /* @__PURE__ */ n(
       "button",
       {
@@ -196,8 +194,8 @@ function re({
         children: /* @__PURE__ */ n(N, { name: "ArrowLineLeft" })
       }
     ) }),
-    m.map((d, g) => {
-      const b = d === "ellipsis", x = b ? void 0 : d, w = x === r, S = b || w, P = b ? "Pagination ellipsis" : `Go to page ${x}`;
+    f.map((d, g) => {
+      const p = d === "ellipsis", x = p ? void 0 : d, w = x === r, S = p || w, P = p ? "Pagination ellipsis" : `Go to page ${x}`;
       return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
         "button",
         {
@@ -206,8 +204,8 @@ function re({
           "aria-current": w ? "page" : void 0,
           disabled: S,
           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 ${w ? "bg-blue-1 text-blue-4" : ""} ${S ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
-          onClick: !S && x ? () => f(x) : void 0,
-          children: b ? "..." : x
+          onClick: !S && x ? () => h(x) : void 0,
+          children: p ? "..." : x
         }
       ) }, `${d}-${g}`);
     }),
@@ -226,37 +224,37 @@ function re({
 }
 function se({
   placeholder: e,
-  className: o,
+  className: a,
   inputWidth: t,
   value: s,
   onChange: l,
   syncToUrl: u = !0,
   id: i = "search",
-  paramKey: a = "s",
+  paramKey: o = "s",
   firstResultSelector: r,
   onEnter: c
 }) {
-  const m = I(), y = z(), C = L(), $ = R(null), f = s !== void 0, [d, g] = F(
-    f ? s : m.get(a)?.toString() ?? ""
-  ), b = f ? s : d, x = Math.max(e.length, 1), w = `calc(${x}ch + 60px)`, S = t === void 0 ? w : typeof t == "number" ? `${t}px` : t;
-  M(() => {
-    !u || f || g(m.get(a)?.toString() ?? "");
-  }, [f, a, m, u]);
+  const f = B(), y = I(), C = z(), $ = F(null), h = s !== void 0, [d, g] = M(
+    h ? s : f.get(o)?.toString() ?? ""
+  ), p = h ? s : d, x = Math.max(e.length, 1), w = `calc(${x}ch + 60px)`, S = t === void 0 ? w : typeof t == "number" ? `${t}px` : t;
+  O(() => {
+    !u || h || g(f.get(o)?.toString() ?? "");
+  }, [h, o, f, u]);
   const P = (v) => {
     if (!u) return;
-    const p = new URLSearchParams(m.toString());
-    v ? (p.set(a, v), p.delete("page")) : (p.delete(a), p.delete("page"));
-    const B = p.toString();
-    C.replace(B ? `${y}?${B}` : y);
-  };
-  return /* @__PURE__ */ h("form", { className: o ?? "", noValidate: !0, onSubmit: (v) => {
-    if (v.preventDefault(), c?.(b), r && b.trim()) {
-      const p = document.querySelector(r);
-      p && p.focus();
+    const b = new URLSearchParams(f.toString());
+    v ? (b.set(o, v), b.delete("page")) : (b.delete(o), b.delete("page"));
+    const j = b.toString();
+    C.replace(j ? `${y}?${j}` : y);
+  }, R = (v) => {
+    if (v.preventDefault(), c?.(p), r && p.trim()) {
+      const b = document.querySelector(r);
+      b && b.focus();
     }
-  }, children: [
+  };
+  return /* @__PURE__ */ m("form", { className: `search-field ${a ?? ""}`.trim(), noValidate: !0, onSubmit: R, children: [
     /* @__PURE__ */ n("label", { className: "sr-only", htmlFor: i, children: "Search" }),
-    /* @__PURE__ */ h("div", { className: "relative max-w-full", style: { width: S }, children: [
+    /* @__PURE__ */ m("div", { className: "relative max-w-full", style: { width: S }, children: [
       /* @__PURE__ */ n(
         N,
         {
@@ -278,22 +276,22 @@ function se({
           id: i,
           type: "search",
           autoComplete: "off",
-          value: b,
+          value: p,
           placeholder: e,
           onChange: (v) => {
-            const p = v.target.value;
-            f || g(p), l?.(p), P(p);
+            const b = v.target.value;
+            h || g(b), l?.(b), P(b);
           }
         }
       ),
-      b.length > 0 && /* @__PURE__ */ n(
+      p.length > 0 && /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           "aria-label": "Clear search",
           className: "absolute right-1 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: () => {
-            f || g(""), l?.(""), P(""), $.current?.focus();
+            h || g(""), l?.(""), P(""), $.current?.focus();
           },
           children: /* @__PURE__ */ n(N, { name: "Close" })
         }
@@ -301,20 +299,20 @@ function se({
     ] })
   ] });
 }
-function ie({ columns: e, rows: o, rowKey: t }) {
-  const s = O();
-  return /* @__PURE__ */ h("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
+function ie({ columns: e, rows: a, rowKey: t }) {
+  const s = V();
+  return /* @__PURE__ */ m("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
     /* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: e.map((l) => /* @__PURE__ */ n(
       "th",
       {
         id: `${s}-col-${l.key}`,
         scope: "col",
-        className: `px-3 py-4 text-left ${l.headerClassName ?? ""}`.trim(),
+        className: `px-3 py-4 text-left leading-[23px] ${l.headerClassName ?? ""}`.trim(),
         children: l.header
       },
       l.key
     )) }) }),
-    /* @__PURE__ */ n("tbody", { children: o.map((l, u) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: e.map((i) => /* @__PURE__ */ n(
+    /* @__PURE__ */ n("tbody", { children: a.map((l, u) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: e.map((i) => /* @__PURE__ */ n(
       "td",
       {
         headers: `${s}-col-${i.key}`,

package/dist/theme.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: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --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: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --color-focus: #14833f; --color-focus-outer: #ffffff; --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; }@source "./components";:root{--focus-ring-color: #14833F;--focus-ring-outer-color: #FFFFFF;--focus-ring-width: 4px;--focus-ring-outer-width: 2px;--focus-ring-offset: 2px}.focus-ring:focus-visible,*:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color)}.focus-ring-inside:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color)}.focus-ring-none:focus-visible{outline:none;box-shadow:none}@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;}}@utility focus-ring{&:focus-visible {outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color);}}@utility focus-ring-inside{&:focus-visible {outline: none; box-shadow: inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color);}}@utility focus-ring-none{&:focus-visible {outline: none; box-shadow: none;}}
+@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --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: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --color-focus: #14833f; --color-focus-outer: #ffffff; --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; }@source "./components";:root{--focus-ring-color: #14833F;--focus-ring-outer-color: #FFFFFF;--focus-ring-width: 4px;--focus-ring-outer-width: 2px;--focus-ring-offset: 2px}.focus-ring:focus-visible,*:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color)}.focus-ring-inside:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color)}.focus-ring-none:focus-visible{outline:none;box-shadow:none}@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 rounded-none;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5 rounded-none;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1 rounded-none;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5 rounded-none;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}.search-field input[type=search]::placeholder{color:#454545;-webkit-text-fill-color:#454545}.search-field>div>svg[aria-hidden=true]{left:15px!important}.search-field>div>input[type=search]{padding-left:47px!important;padding-right:48px!important;text-indent:0!important}.search-field>div>button[aria-label="Clear search"]{cursor:pointer;right:8px!important}button[aria-label="Previous page"]:not(:disabled),button[aria-label="Next page"]:not(:disabled){cursor:pointer}@utility focus-ring{&:focus-visible {outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color);}}@utility focus-ring-inside{&:focus-visible {outline: none; box-shadow: inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color);}}@utility focus-ring-none{&:focus-visible {outline: none; box-shadow: none;}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digitalpromise/design",
   "private": false,
-  "version": "4.9.2",
+  "version": "4.9.5",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -17,7 +17,7 @@
     "@chromatic-com/storybook": "^5.1.2",
     "@digitalpromise/icons": "^3.2.0",
     "@eslint/js": "^10.0.1",
-    "@microsoft/api-extractor": "^7.58.2",
+    "@microsoft/api-extractor": "^7.58.3",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-links": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
@@ -31,7 +31,7 @@
     "@typescript-eslint/parser": "^8.58.2",
     "@vitejs/plugin-react-swc": "^4.3.0",
     "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.0",
     "eslint-plugin-storybook": "^10.3.5",
     "jsdom": "^28.1.0",
     "react": "^19.2.5",