@lapismd/design-core 0.1.0

package/src/shared/filter/filter-query/query.grammar

@@ -0,0 +1,150 @@
+@top Filter { 
+  Expr*
+}
+
+@skip {
+  space
+}
+
+@precedence {
+  not @right 
+  and @left 
+  or @left 
+  times @left
+  plus @left
+  minus @left
+  round @left 
+}
+
+ExprAnd {
+  Expr !and AND { ("&&" | @specialize<Key, "and"> | @specialize<Key, "AND"> | @specialize<AccountName, "AND">)? } Expr 
+}
+
+ExprOr {
+  Expr !or OR {("," | "||" | @specialize<Key, "or"> | @specialize<Key, "OR"> | @specialize<AccountName, "OR">)} Expr 
+}
+
+ExprNot {
+  !not NOT { (MINUS | @specialize<Key, "not"> | @specialize<Key, "NOT"> | @specialize<AccountName, "NOT">) } Expr 
+}
+
+TermExpr {
+  Key ~key OP (
+    (Value |  Integer ~int | DateExpr) |
+    LPAREN  (Value |  Integer ~int | DateExpr) RPAREN
+  )
+}
+
+Expr {
+  ExprAnd |
+  ExprOr |
+  ExprNot |
+  LPAREN Expr+ RPAREN |
+  DateExpr |
+  TermExpr |
+  Value
+}
+
+Date {
+  DATE |
+  Quarter |
+  Week |
+  Day |
+  Month |
+  Year |
+  Integer ~int
+}
+
+DateExpr {
+  Date |
+  Duration |
+  DateExpr !round SLASH Interval |
+  DateExpr !times ASTERISK DateExpr |
+  DateExpr !plus PLUS DateExpr |
+  DateExpr !minus MINUS DateExpr
+}
+
+Value {
+  Tag |
+  Link |
+  Key ~key |
+  AccountName |
+  String |
+  Regex
+}
+
+Duration {
+  Integer ~int Interval
+}
+
+Interval {
+  Date |
+  @specialize<Key, "Q">       | // quarter 
+  @specialize<Key, "q">       |  
+  @specialize<Key, "Y">       | // year
+  @specialize<Key, "y">       |  
+  @specialize<Key, "yr">       |  
+  @specialize<Key, "M">       | // month
+  @specialize<Key, "mon">     | 
+  @specialize<Key, "mth">     | 
+  @specialize<Key, "w">       | // week
+  @specialize<Key, "W">       |
+  @specialize<Key, "d">       | // day
+  @specialize<Key, "D">       |
+  @specialize<Key, "h">       | // hour
+  @specialize<Key, "H">       | 
+  @specialize<Key, "hr">      | 
+  @specialize<Key, "hrs">     |  
+  @specialize<Key, "hours">   |  
+  @specialize<Key, "m">       | // minutes
+  @specialize<Key, "min">     |  
+  @specialize<Key, "minutes"> |  
+  @specialize<Key, "s">       | // seconds
+  @specialize<Key, "sec">     |  
+  @specialize<Key, "S">       |  
+  @specialize<Key, "seconds"> 
+}
+
+@tokens {
+   MINUS { "-" }
+   PLUS  { "+" }
+   OP { ":" | ">" | "=" | "<" | "!=" | ">=" | "<=" | "~" | "!~" }
+   SLASH { "/" }
+   ASTERISK { "*" }
+   LPAREN { '(' } 
+   RPAREN { ')' }
+   space { $[ \t]+ }
+   INT { @digit }
+   num {$[1-9]$[0-9]?$[0-9]? ("," " "* $[0-9]$[0-9]$[0-9])+ }
+   int { num | @digit+ }
+   frac { '.' @digit+ }
+   Integer { int frac? | int frac? }
+   DATE { "now" | "today" | "year" | "years" | "month" | "months" | "day" | "days" | "week" | "weeks" | "quarter" | "quarters" | "(year)" | "(month)" | "(day)" | "(week)" | "(quarter)"  }
+   Year { INT INT INT INT }
+   Quarter { Year "-" "Q" INT}
+   Week { Year "-" "W" INT INT?}
+   Month { Year "-" INT INT }
+   Day { Year "-" INT INT "-" INT INT }
+   Tag { "#" $[a-zA-Z0-9_-]+ ("/" $[a-zA-Z0-9_-]+)* }
+   Link { "^" $[a-zA-Z0-9_-]+ }
+   name { $[A-Z.*]$[A-Za-z0-9-.*]+ }
+   AccountName { name ( ":" name)* }
+   @precedence { Integer Year}
+   @precedence { Day Month Week Quarter Integer }
+   @precedence { DATE  Key }
+   @precedence { AccountName Key ASTERISK }
+   @precedence { Regex SLASH}
+ 
+   String {
+     '"' (!["\\] | "\\" _)* '"' |
+     "'" (!['\\] | "\\" _)* "'"
+   }
+
+   Regex {
+     '/' (![/\\] | "\\" _)* '/' ($[a-z]+)?
+   }
+   
+   Key { $[a-zA-Z]$[a-zA-Z0-9.*$_-]* }
+}
+
+@external propSource filterHighlighting from "./highlight"

package/src/shared/filter/filter-query/query.js

@@ -0,0 +1,60 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LRParser } from "@lezer/lr";
+import { filterHighlighting } from "./highlight";
+const spec_Key = {
+  __proto__: null,
+  and: 80,
+  AND: 82,
+  or: 90,
+  OR: 92,
+  not: 96,
+  NOT: 98,
+  Q: 102,
+  q: 104,
+  Y: 106,
+  y: 108,
+  yr: 110,
+  M: 112,
+  mon: 114,
+  mth: 116,
+  w: 118,
+  W: 120,
+  d: 122,
+  D: 124,
+  h: 126,
+  H: 128,
+  hr: 130,
+  hrs: 132,
+  hours: 134,
+  m: 136,
+  min: 138,
+  minutes: 140,
+  s: 142,
+  sec: 144,
+  S: 146,
+  seconds: 148,
+};
+const spec_AccountName = { __proto__: null, AND: 84, OR: 94, NOT: 100 };
+export const parser = LRParser.deserialize({
+  version: 14,
+  states:
+    "'UQVQPOOO#wQPO'#DPOOQO'#Cf'#CfOVQPO'#CeOOQO'#Ck'#CkO$bQPO'#CkOOQO'#Cj'#CjO(iQPO'#C^OOQO'#Cz'#CzO*oQPO'#CzOOQO'#C^'#C^OVQPO'#C^QVQPOOOOQO'#C`'#C`OVQPO,58yOOQO'#Cd'#CdOVQPO,58}OOQO,59P,59POOQO'#Ct'#CtOOQO,59_,59_O,oQPO,59UO.rQPO,59UO.rQPO,59UO.rQPO,59UO0RQPO,59dO0]QPO,58xOOQO-E6}-E6}OOQO1G.e1G.eO0dQPO1G.iOOQO1G.p1G.pO3QQPO1G.pO3XQPO1G.pO3`QPO1G/OO5_QPO1G/OOOQO1G/O1G/OO7eQPO1G/OOOQO1G.d1G.dO7lQPO7+$jO8SQPO7+$jO8eQPO7+$jOOQO<<HU<<HUO7oQPO'#CkO8jQPO,59UO8jQPO,59UO8jQPO,59UO9RQPO1G.pO9dQPO1G.p",
+  stateData:
+    ":S~OvOS~OTXOUWOZQO[ZO`SOaSObSOcSOdSOeSOfTOoWOpWOqWOrWO!QQO!RQO!SQO~Ow]Ox]Oy]Oz]OTSPUSPZSP[SP`SPaSPbSPcSPdSPeSPfSPoSPpSPqSPrSP!QSP!RSP!SSP~O{_O|_O}_O!O_O!P_OtsX]sX~P!aO`SOaSObSOcSOdSOeSOfSO!TbO!UbO!VbO!WbO!XbO!YbO!ZbO![bO!]bO!^bO!_bO!`bO!abO!bbO!cbO!dbO!ebO!fbO!gbO!hbO!ibO!jbO!kbO!lbOT_XU_XZ_X[_X`_Xa_Xb_Xc_Xd_Xe_Xf_Xi_Xj_Xk_Xo_Xp_Xq_Xr_Xt_Xw_Xx_Xy_Xz_X{_X|_X}_X!O_X!P_X!Q_X!R_X!S_X]_X~OZgOidOjeOkfOTQXUQX[QX`QXaQXbQXcQXdQXeQXfQXoQXpQXqQXrQXtQXwQXxQXyQXzQX{QX|QX}QX!OQX!PQX!QQX!RQX!SQX]QX~OmhOTnXUnXZnX[nX`nXanXbnXcnXdnXenXfnXonXpnXqnXrnXtnXwnXxnXynXznX{nX|nX}nX!OnX!PnX!QnX!RnX!SnX]nX~O`SOaSObSOcSOdSOeSOfSO!TbO!UbO!VbO!WbO!XbO!YbO!ZbO![bO!]bO!^bO!_bO!`bO!abO!bbO!cbO!dbO!ebO!fbO!gbO!hbO!ibO!jbO!kbO!lbO~O`SOaSObSOcSOdSOeSOfTO~OTWOUWO`SOaSObSOcSOdSOeSOoWOpWOqWOrWO~O[sOfpO~P/ZO]tO~PVOtVi{Vi|Vi}Vi!OVi!PVi]Vi~P!aOjeOT^iU^iZ^i[^i`^ia^ib^ic^id^ie^if^ii^io^ip^iq^ir^it^iw^ix^iy^iz^i{^i|^i}^i!O^i!P^i!Q^i!R^i!S^i]^i~Ok^i~P0}OkfO~P0}OTliUliZli[li`lialibliclidlielifliolipliqlirlitliwlixliylizli{li|li}li!Oli!Pli!Qli!Rli!Sli]li~P$bOZgOidOjeOkfOTliUli[li`lialibliclidlielifliolipliqlirlitliwlixliylizli{li|li}li!Oli!Pli!Qli!Rli!Sli]li~OfuO~P/ZO]xOZ_X]_Xi_Xj_Xk_X~P,oOZ|O]xOidOjzOk{O~O]xO~O`SOaSObSOcSOdSOeSOfyO~OjzOZ^i]^ii^ik^i~OjzOk{OZ^i]^ii^i~OcdriUb`Tafje~",
+  goto: "$}tPPu!U!_PP!U!c!U!fPPP!o#`PPPPPPP#x$ZPPP!UP$dPPPP$sWPOZ[iQaRQk^Rl`_YORZ[^`iT^PlR`P_RORZ[^`i^VORZ[^`iSmezQnfQogQqhQvsQ}{R!O|nUORZ[^`efghisz{|ZbTdpuyoUORZ[^`efghisz{|WcTpuyRmd^YORZ[^`iQrhRwsQ[OQiZTj[i",
+  nodeNames:
+    "⚠ Filter Expr ExprAnd AND Key AccountName ExprOr OR ExprNot NOT MINUS LPAREN RPAREN DateExpr Date DATE Quarter Week Day Month Year Integer Duration Interval SLASH ASTERISK PLUS TermExpr OP Value Tag Link String Regex",
+  maxTerm: 74,
+  propSources: [filterHighlighting],
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData:
+    "Jg~RwXY#lpq#lqr#wrs$Vst%svw&nwx&yxy(byz+]z{+b{|-W|}-]}!O-b!O!P,q!P!Q-g!Q!R/r!R![2{![!]$Q!^!_4i!_!`$Q!`!a4i!c!}4q#Q#R6q#T#W5`#W#X7i#X#a5`#a#b:f#b#c=h#c#e5`#e#f?Q#f#h5`#h#iCi#i#k5`#k#lFh#l#m5`#m#nHu#n#o5`#p#qJ[#r#s$Q~#qQv~XY#lpq#l~#zQ!_!`$Q#r#s$Q~$VOm~~$YVOr$Vrs$os#O$V#O#P$t#P;'S$V;'S;=`%m<%lO$V~$tOq~~$wRO;'S$V;'S;=`%Q;=`O$V~%TWOr$Vrs$os#O$V#O#P$t#P;'S$V;'S;=`%m;=`<%l$V<%lO$V~%pP;=`<%l$V~%vT}!O&V!Q![&V!c!}&V#R#S&V#T#o&V~&[Uo~}!O&V!P!Q%s!Q![&V!c!}&V#R#S&V#T#o&V~&qPvw&t~&yOw~~&|VOw&ywx$ox#O&y#O#P'c#P;'S&y;'S;=`([<%lO&y~'fRO;'S&y;'S;=`'o;=`O&y~'rWOw&ywx$ox#O&y#O#P'c#P;'S&y;'S;=`([;=`<%l&y<%lO&y~(_P;=`<%l&y~(gT[~#W#X(v#a#b)_#e#f)w#k#l*m#m#n+P~(yP#T#U(|~)PP#m#n)S~)VPyz)Y~)_O`~~)bP#c#d)e~)hP#b#c)k~)nP#h#i)q~)tP#[#])S~)zP#i#j)}~*QP#T#U*T~*WP#f#g*Z~*^P#h#i*a~*dP#X#Y*g~*jP#f#g)S~*pP#X#Y*s~*vP#X#Y*y~*|P#_#`)S~+SP#X#Y+V~+YP#T#U*g~+bO]~~+gUj~z{+y}!O+y!O!P+y!Q![+y!c!}+y#T#o+y~,OVU~z{+y}!O+y!O!P+y!Q![+y![!],e!c!}+y#T#o+y~,hRz{,q!O!P,q!c!},q~,tUz{+y}!O+y!O!P+y!Q![+y!c!}+y#T#o+y~-]Ok~~-bO{~~-gOZ~~-lVi~O!P.R!P!Q.k!Q#O.R#O#P.s#P;'S.R;'S;=`/l<%lO.R~.UVO!P.R!P!Q.k!Q#O.R#O#P.s#P;'S.R;'S;=`/l<%lO.R~.pPr~#T#o.k~.vRO;'S.R;'S;=`/P;=`O.R~/SWO!P.R!P!Q.k!Q#O.R#O#P.s#P;'S.R;'S;=`/l;=`<%l.R<%lO.R~/oP;=`<%l.R~/wQf~!O!P/}!Q![0]~0QP!Q![0T~0YPf~!Q![0T~0bQf~!O!P/}!Q![0h~0mQf~!O!P/}!Q![0s~0zRf~e~}!O1T!O!P/}!Q![2p~1WR!Q![1a!s!t2Q!y!z2]~1dP!Q![1g~1lPd~}!O1o~1rP!Q![1u~1xP!Q![1{~2QOc~~2TP!Q![2W~2]Oa~~2`P!Q![2c~2hPb~!Q![2k~2pOb~~2uQf~!O!P/}!Q![2p~3QRf~|}3Z!O!P/}!Q![3{~3^Qpq3Z!Q![3d~3gP!Q![3j~3mP!Q![3p~3uQf~|}3Z!O!P/}~4QRf~|}3Z!O!P/}!Q![4Z~4`Rf~|}3Z!O!P/}!Q![0s~4nPm~!_!`$Q~4vWT~tu5`z{5}}!O5}!O!P5}!Q![5}!c!}5}#R#S5`#T#o5}~5eWT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#o5`~6UXU~T~tu5`z{5}}!O5}!O!P5}!Q![5}![!],e!c!}5}#R#S5`#T#o5}~6tT}!O7T!Q![7T!c!}7T#R#S7T#T#o7T~7YTp~}!O7T!Q![7T!c!}7T#R#S7T#T#o7T~7nXT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#U8Z#U#o5`~8`YT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#m5`#m#n9O#n#o5`~9VY`~T~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#g5`#g#h9u#h#o5`~9|W`~T~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#o5`~:kYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#c5`#c#d;Z#d#o5`~;`YT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#b5`#b#c<O#c#o5`~<TYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#h5`#h#i<s#i#o5`~<xYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#[5`#[#]9O#]#o5`~=mYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#c5`#c#d>]#d#o5`~>bYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#k5`#k#l9u#l#o5`~?VYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#i5`#i#j?u#j#o5`~?zXT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#U@g#U#o5`~@lYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#f5`#f#gA[#g#o5`~AaYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#h5`#h#iBP#i#o5`~BUYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#X5`#X#YBt#Y#o5`~ByYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#f5`#f#g9O#g#o5`~CnYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#c5`#c#dD^#d#o5`~DcYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#W5`#W#XER#X#o5`~EWXT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#UEs#U#o5`~ExYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#m5`#m#n9u#n#o5`~FmYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#X5`#X#YG]#Y#o5`~GbYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#X5`#X#YHQ#Y#o5`~HVYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#_5`#_#`9O#`#o5`~HzYT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#X5`#X#YIj#Y#o5`~IoXT~tu5`z{5`}!O5`!O!P5`!Q![5`!c!}5`#R#S5`#T#UBt#U#o5`~J_P#p#qJb~JgO|~",
+  tokenizers: [0],
+  topRules: { Filter: [0, 1] },
+  specialized: [
+    { term: 5, get: (value) => spec_Key[value] || -1 },
+    { term: 6, get: (value) => spec_AccountName[value] || -1 },
+  ],
+  tokenPrec: 1141,
+});

package/src/shared/filter/filter-query/query.terms.js

@@ -0,0 +1,32 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const Filter = 1,
+  Expr = 2,
+  ExprAnd = 3,
+  Key = 5,
+  AccountName = 6,
+  ExprOr = 7,
+  ExprNot = 9,
+  MINUS = 11,
+  LPAREN = 12,
+  RPAREN = 13,
+  DateExpr = 14,
+  Date = 15,
+  DATE = 16,
+  Quarter = 17,
+  Week = 18,
+  Day = 19,
+  Month = 20,
+  Year = 21,
+  Integer = 22,
+  Duration = 23,
+  Interval = 24,
+  SLASH = 25,
+  ASTERISK = 26,
+  PLUS = 27,
+  TermExpr = 28,
+  OP = 29,
+  Value = 30,
+  Tag = 31,
+  Link = 32,
+  String = 33,
+  Regex = 34;

package/src/shared/filter/index.ts

@@ -0,0 +1,35 @@
+export {
+  SearchFilterBar,
+  SearchFilterInput,
+  searchFilterCompletion,
+  searchFilterCompletionStage,
+  searchFilterFieldByName,
+  searchFilterFieldValues,
+  type SearchFilterCompletionStage,
+  type SearchFilterExample,
+  type SearchFilterField,
+  type SearchFilterSyntax,
+  type SearchFilterValue,
+  type SearchFilterValueEditorProps,
+  type SearchFilterValueKind,
+} from "./search-filter-bar/index.js";
+export {
+  PowerSearch,
+  commitContentSearchToken,
+  createPowerSearchToken,
+  createPowerSearchTokenId,
+  matchPowerSearchFields,
+  powerSearchOperatorLabel,
+  tokensToFilterQuery,
+  type PowerSearchToken,
+} from "./power-search/index.js";
+export { createDemoLedgerFilterSyntax } from "./demo-ledger-filter-syntax.js";
+export {
+  filterHighlighting,
+  filterQuery,
+  filterQueryLanguage,
+  parseFilterQuery,
+  parseQuery,
+  type QueryParserOptions,
+} from "./filter-query/index.js";
+export * from "./filter-query/filters.js";

package/src/shared/filter/power-search/PowerSearch.css

@@ -0,0 +1,245 @@
+.ui-power-search {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.ui-power-search--disabled {
+  opacity: 0.65;
+}
+
+.ui-power-search__bar {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--border, var(--ui-form-border));
+  border-radius: calc(var(--radius, 0.5rem) * 1.2);
+  background: var(--background, var(--ui-form-background));
+  color: var(--foreground, var(--ui-form-foreground));
+  padding: 0.4rem 0.55rem;
+}
+
+.ui-power-search__icon {
+  display: grid;
+  flex: 0 0 auto;
+  align-self: center;
+  width: 1rem;
+  height: 1rem;
+  place-items: center;
+  color: var(--muted-foreground, var(--ui-form-muted));
+  opacity: 0.7;
+}
+
+.ui-power-search__icon svg {
+  width: 1rem !important;
+  height: 1rem !important;
+  display: block;
+}
+
+.ui-power-search__chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.ui-power-search__chip {
+  display: inline-flex;
+  max-width: min(100%, 18rem);
+  min-width: 0;
+  align-items: center;
+  gap: 0.15rem;
+  border: 1px solid
+    color-mix(in srgb, var(--ui-form-accent, var(--primary)) 22%, transparent);
+  border-radius: 999px;
+  background: color-mix(
+    in srgb,
+    var(--ui-form-accent, var(--primary)) 8%,
+    var(--background, var(--ui-form-background))
+  );
+  color: var(--ui-form-accent, var(--primary));
+  padding: 0.06rem 0.12rem 0.06rem 0.42rem;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.ui-power-search__chip-body {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.35rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+  font: inherit;
+  line-height: inherit;
+}
+
+.ui-power-search__chip-meta {
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--ui-form-code-function, var(--cv-code-function, #075985));
+}
+
+.ui-power-search__chip-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.ui-power-search__chip-remove {
+  display: grid;
+  flex: 0 0 auto;
+  width: 1.05rem;
+  height: 1.05rem;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(
+    in srgb,
+    var(--ui-form-accent, var(--primary)) 12%,
+    transparent
+  );
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 0;
+}
+
+.ui-power-search__chip-remove:hover,
+.ui-power-search__chip-remove:focus-visible {
+  background: color-mix(
+    in srgb,
+    var(--ui-form-accent, var(--primary)) 22%,
+    transparent
+  );
+  outline: 0;
+}
+
+.ui-power-search__chip-remove svg {
+  width: 0.72rem !important;
+  height: 0.72rem !important;
+  display: block;
+  flex: none;
+}
+
+.ui-power-search__combobox {
+  position: relative;
+  flex: 1 1 8rem;
+  min-width: 6rem;
+}
+
+.ui-power-search__combobox-input {
+  width: 100%;
+  min-width: 6rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  padding: 0.2rem 0.15rem;
+}
+
+.ui-power-search__combobox-input::placeholder {
+  color: var(--muted-foreground, var(--ui-form-muted));
+}
+
+.ui-power-search__combobox-menu {
+  position: absolute;
+  z-index: 80;
+  top: calc(100% + 0.35rem);
+  left: 0;
+  min-width: min(18rem, 88vw);
+  max-width: min(26rem, 88vw);
+  border: 1px solid var(--border, var(--ui-form-border));
+  border-radius: calc(var(--radius, 0.5rem) * 1.4);
+  background: var(--popover, var(--ui-form-background));
+  color: var(--popover-foreground, var(--ui-form-foreground));
+  box-shadow:
+    0 4px 6px -1px color-mix(in srgb, var(--foreground, #000) 10%, transparent),
+    0 2px 4px -2px color-mix(in srgb, var(--foreground, #000) 8%, transparent);
+  padding: var(--spacing, 0.25rem);
+  overflow: hidden;
+}
+
+.ui-power-search__combobox-menu [data-slot="command-list"] {
+  max-height: min(18rem, 45vh);
+  overflow: auto;
+}
+
+.ui-power-search__combobox-menu [data-slot="command-item"] {
+  display: grid;
+  grid-template-columns: var(--ps-field-name-cols, max-content) minmax(0, 1fr);
+  column-gap: calc(var(--spacing, 0.25rem) * 2);
+  min-width: 0;
+  align-items: center;
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--text-sm--line-height, 1.25rem);
+  white-space: nowrap;
+}
+
+.ui-power-search__combobox-menu [data-slot="command-check-icon"] {
+  display: none;
+}
+
+.ui-power-search__combobox-field-name {
+  min-width: 0;
+  font-weight: 500;
+}
+
+.ui-power-search__combobox-field-desc {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted-foreground, var(--ui-form-muted));
+  font-style: normal;
+  font-size: var(--text-xs, 0.75rem);
+  letter-spacing: var(--tracking-widest, 0.05em);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-power-search__clear-all {
+  display: inline-grid;
+  flex: 0 0 auto;
+  width: 1.35rem;
+  height: 1.35rem;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted-foreground, var(--ui-form-muted));
+  cursor: pointer;
+  padding: 0;
+  line-height: 0;
+}
+
+.ui-power-search__clear-all:hover,
+.ui-power-search__clear-all:focus-visible {
+  background: var(--ui-form-selection, var(--accent));
+  color: var(--ui-form-accent, var(--primary));
+  outline: 0;
+}
+
+.ui-power-search__clear-all svg {
+  width: 0.65rem !important;
+  height: 0.65rem !important;
+  display: block;
+}
+
+.ui-power-search__result-count {
+  margin: 0;
+  color: var(--muted-foreground, var(--ui-form-muted));
+  font-size: 0.8125rem;
+}