ingred-ui 23.6.1 → 23.6.3

package/dist/components/DualListBox2/DualListBox2Item.d.ts

@@ -2,6 +2,7 @@ import React, { type ReactNode } from "react";
 export type DualListBox2ItemProps = {
     id: string;
     children: ReactNode;
+    label?: string;
     isIncluded?: boolean;
     isExcluded?: boolean;
     disableInclude?: boolean;

package/dist/components/DualListBox2/__tests__/lib.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.es.js

@@ -1848,9 +1848,50 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   align-items: center;
   justify-content: center;
   gap: ${({theme:e})=>2*e.spacing}px;
-`,Av=({items:e,selectedItemTitle:n,onRemove:r})=>{const i=W();return t.createElement(yv,null,t.createElement(wv,null,t.createElement(oe,{size:"sm",weight:"bold"},t.createElement(oe,{color:"primary",component:"span",size:"sm",weight:"bold"},e.length," "),n)),t.createElement(Cv,null,e.map(((n,a)=>t.createElement(Ev,{key:n.id,isLastIndex:a+1===e.length},n.content,t.createElement(kv,null,r&&t.createElement(Iv,{type:"button",onClick:()=>r(n)},t.createElement(Y,{color:i.palette.black,name:"close_circle",type:"fill"}))))))))},Mv=(e,t)=>{const n=[];return e.forEach((e=>{if(e.items)return void n.push(Object.assign(Object.assign({},e),{items:Mv(e.items,t)}));t.find((t=>t.id===e.id))?n.push(Object.assign(Object.assign({},e),{selected:!0})):n.push(e)})),n},Hv=e.forwardRef((function(t){const{candidateItems:n,selectedItems:r,selectedItemTitle:i,disableCheckbox:a,onAdd:o,onRemove:l}=Dr({props:t,name:"DualListBox"}),s=W(),c=e.useMemo((()=>Mv(n,r)),[n,r]);return e.createElement(uv,null,e.createElement(xv,{disableCheckbox:a,items:c,onAdd:o,onRemove:l}),e.createElement(Gr,{color:s.palette.divider,orientation:"vertical"}),e.createElement(Av,{items:r,selectedItemTitle:i,onRemove:l}))})),Vv=({id:e,children:n,isIncluded:r=!1,isExcluded:i=!1,disableInclude:a,disableExclude:o})=>{const{onIncludedChange:l,onExcludedChange:s,includedIds:c,excludedIds:d}=g(Nv),u=(e,t,n)=>e?V.basic[400]:t?n:V.basic[900];return t.createElement(ax,null,n,t.createElement(ix,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:a,"aria-pressed":r,"aria-label":"追加",style:{"--color":V.blue[500]},onClick:()=>{r?l(c.filter((t=>t!==e))):i?(s(d.filter((t=>t!==e))),l([...c,e])):l([...c,e])}},t.createElement(Y,{name:"check_thin",color:u(a,r,V.blue[500])}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:o,"aria-pressed":i,"aria-label":"除外",style:{"--color":V.red[500]},onClick:()=>{i?s(d.filter((t=>t!==e))):r?(l(c.filter((t=>t!==e))),s([...d,e])):s([...d,e])}},t.createElement(Y,{name:"forbid",color:u(o,i,V.red[500])})))))};Vv.displayName="DualListBox2Item";const Nv=m({filterWords:[],includedIds:[],excludedIds:[],activeSection:null,onIncludedChange:e=>{},onExcludedChange:e=>{},setActiveSection:e=>{}}),Lv=m({groupName:""}),Zv=(e,t)=>{s.forEach(e,(e=>{t(e),o(e)&&e.props.children&&Zv(e.props.children,t)}))},Dv=e=>{const t=[];return Zv(e,(e=>{o(e)&&"string"!=typeof e.type&&"displayName"in e.type&&e.type.displayName===Vv.displayName&&t.push({id:e.props.id,label:e.props.children,groupName:e.props.groupName})})),t},Ov=e=>e.reduce(((e,t)=>{const n=e.find((e=>e.groupName===t.groupName));return n?n.items.push(t):e.push({groupName:t.groupName,items:[t]}),e}),[]),$v=({label:e,disableInclude:n,disableExclude:i,children:a,onOpen:o})=>{const[l,s]=r(!1),c=d((()=>{const e=!l;s(e),e&&o&&o()}),[l,o]),{includedIds:u,excludedIds:m,onIncludedChange:h,onExcludedChange:f}=g(Nv),b=p((()=>(e=>Dv(e).map((e=>e.id)))(a)),[a]),v=d((()=>{b.every((e=>u.includes(e)))||(h(Array.from(new Set([...u,...b]))),f(m.filter((e=>!b.includes(e)))))}),[b,u,m,h,f]),x=d((()=>{b.every((e=>m.includes(e)))||(f(Array.from(new Set([...m,...b]))),h(u.filter((e=>!b.includes(e)))))}),[b,u,m,h,f]);return t.createElement(t.Fragment,null,t.createElement(sx,null,t.createElement(cx,{type:"button","aria-label":`${e}を開く`,"aria-expanded":l,onClick:c},e),t.createElement(dx,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:n,"aria-label":"追加",onClick:v},t.createElement(Y,{name:"check_thin",color:V.blue[500]}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:i,"aria-label":"除外",onClick:x},t.createElement(Y,{name:"forbid",color:V.red[500]})))),t.createElement(ux,null,t.createElement(Y,{name:"arrow_down",color:V.basic[900]}))),l&&a)},Sv=`\n  display: flex;\n  gap: 4px;\n  box-sizing: border-box;\n  padding: 6px;\n  border: 1px solid ${V.basic[400]};\n  border-radius: 4px;\n  background: #ffffff;\n  /* UI/Text 12 */\n  font-size: 12px;\n  color: ${V.basic[900]};\n  cursor: pointer;\n  box-shadow: ${en(1,.04,Z.action.shadowBase)};\n\n  &:where(:disabled) {\n    color: ${V.basic[400]};\n    background: ${V.basic[200]};\n    box-shadow: ${en(1,.04,Z.black)};\n    cursor: not-allowed;\n  }\n\n  &:where(li:not(:first-child) button) {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:where(li:not(:last-child) button) {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &:where(:hover:not(:disabled)) {\n    background: ${V.basic[100]};\n  }\n\n  &:where(:active:not(:disabled)) {\n    padding-block: 8px 4px;\n    background: ${Z.gray.highlight};\n    box-shadow: ${en(2,.04,Z.black)};\n  }\n`,Rv=v.div`
+`,Av=({items:e,selectedItemTitle:n,onRemove:r})=>{const i=W();return t.createElement(yv,null,t.createElement(wv,null,t.createElement(oe,{size:"sm",weight:"bold"},t.createElement(oe,{color:"primary",component:"span",size:"sm",weight:"bold"},e.length," "),n)),t.createElement(Cv,null,e.map(((n,a)=>t.createElement(Ev,{key:n.id,isLastIndex:a+1===e.length},n.content,t.createElement(kv,null,r&&t.createElement(Iv,{type:"button",onClick:()=>r(n)},t.createElement(Y,{color:i.palette.black,name:"close_circle",type:"fill"}))))))))},Mv=(e,t)=>{const n=[];return e.forEach((e=>{if(e.items)return void n.push(Object.assign(Object.assign({},e),{items:Mv(e.items,t)}));t.find((t=>t.id===e.id))?n.push(Object.assign(Object.assign({},e),{selected:!0})):n.push(e)})),n},Hv=e.forwardRef((function(t){const{candidateItems:n,selectedItems:r,selectedItemTitle:i,disableCheckbox:a,onAdd:o,onRemove:l}=Dr({props:t,name:"DualListBox"}),s=W(),c=e.useMemo((()=>Mv(n,r)),[n,r]);return e.createElement(uv,null,e.createElement(xv,{disableCheckbox:a,items:c,onAdd:o,onRemove:l}),e.createElement(Gr,{color:s.palette.divider,orientation:"vertical"}),e.createElement(Av,{items:r,selectedItemTitle:i,onRemove:l}))})),Vv=({id:e,children:n,isIncluded:r=!1,isExcluded:i=!1,disableInclude:a,disableExclude:o})=>{const{onIncludedChange:l,onExcludedChange:s,includedIds:c,excludedIds:d}=g(Nv),u=(e,t,n)=>e?V.basic[400]:t?n:V.basic[900];return t.createElement(ax,null,n,t.createElement(ix,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:a,"aria-pressed":r,"aria-label":"追加",style:{"--color":V.blue[500]},onClick:()=>{r?l(c.filter((t=>t!==e))):i?(s(d.filter((t=>t!==e))),l([...c,e])):l([...c,e])}},t.createElement(Y,{name:"check_thin",color:u(a,r,V.blue[500])}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:o,"aria-pressed":i,"aria-label":"除外",style:{"--color":V.red[500]},onClick:()=>{i?s(d.filter((t=>t!==e))):r?(l(c.filter((t=>t!==e))),s([...d,e])):s([...d,e])}},t.createElement(Y,{name:"forbid",color:u(o,i,V.red[500])})))))};Vv.displayName="DualListBox2Item";const Nv=m({filterWords:[],includedIds:[],excludedIds:[],activeSection:null,onIncludedChange:e=>{},onExcludedChange:e=>{},setActiveSection:e=>{}}),Lv=m({groupName:""}),Zv=(e,t)=>{s.forEach(e,(e=>{t(e),o(e)&&e.props.children&&Zv(e.props.children,t)}))},Dv=e=>{const t=[];return Zv(e,(e=>{if(o(e)&&"string"!=typeof e.type&&"symbol"!=typeof e.type&&e.type&&"function"==typeof e.type&&"displayName"in e.type&&e.type.displayName===Vv.displayName){const n=e.props.label||(e=>{let t="";const n=e=>{"string"==typeof e||"number"==typeof e?t+=String(e):o(e)&&e.props.children?n(e.props.children):Array.isArray(e)&&e.forEach(n)};return n(e),t})(e.props.children);t.push({id:e.props.id,label:n,groupName:e.props.groupName})}})),t},Ov=e=>e.reduce(((e,t)=>{const n=e.find((e=>e.groupName===t.groupName));return n?n.items.push(t):e.push({groupName:t.groupName,items:[t]}),e}),[]),$v=({label:e,disableInclude:n,disableExclude:i,children:a,onOpen:o})=>{const[l,s]=r(!1),c=d((()=>{const e=!l;s(e),e&&o&&o()}),[l,o]),{includedIds:u,excludedIds:m,onIncludedChange:h,onExcludedChange:f}=g(Nv),b=p((()=>(e=>Dv(e).map((e=>e.id)))(a)),[a]),v=d((()=>{b.every((e=>u.includes(e)))||(h(Array.from(new Set([...u,...b]))),f(m.filter((e=>!b.includes(e)))))}),[b,u,m,h,f]),x=d((()=>{b.every((e=>m.includes(e)))||(f(Array.from(new Set([...m,...b]))),h(u.filter((e=>!b.includes(e)))))}),[b,u,m,h,f]);return t.createElement(t.Fragment,null,t.createElement(sx,null,t.createElement(cx,{type:"button","aria-label":`${e}を開く`,"aria-expanded":l,onClick:c},e),t.createElement(dx,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:n,"aria-label":"追加",onClick:v},t.createElement(Y,{name:"check_thin",color:V.blue[500]}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:i,"aria-label":"除外",onClick:x},t.createElement(Y,{name:"forbid",color:V.red[500]})))),t.createElement(ux,null,t.createElement(Y,{name:"arrow_down",color:V.basic[900]}))),l&&a)},Sv=y`
+  display: flex;
+  gap: 4px;
+  box-sizing: border-box;
+  padding: 6px;
+  border: 1px solid ${({theme:e})=>e.palette.divider};
+  border-radius: 4px;
+  background: ${({theme:e})=>e.palette.background.default};
+  /* UI/Text 12 */
+  font-size: 12px;
+  color: ${({theme:e})=>e.palette.black};
+  cursor: pointer;
+  box-shadow: ${en(1,.04,Z.action.shadowBase)};
+
+  &:where(:disabled) {
+    color: ${({theme:e})=>e.palette.text.disabled};
+    background: ${({theme:e})=>e.palette.gray.light};
+    box-shadow: ${en(1,.04,Z.black)};
+    cursor: not-allowed;
+  }
+
+  &:where(li:not(:first-child) button) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:where(li:not(:last-child) button) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:where(:hover:not(:disabled)) {
+    background: ${({theme:e})=>e.palette.gray.highlight};
+  }
+
+  &:where(:active:not(:disabled)) {
+    padding-block: 8px 4px;
+    background: ${({theme:e})=>e.palette.gray.highlight};
+    box-shadow: ${en(2,.04,Z.black)};
+  }
+`,Rv=v.div`
   container-type: inline-size;
   line-break: anywhere;
+  height: 100%;
 `,zv=v.ul`
   display: none;
   padding: 0;
@@ -1862,8 +1903,8 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
     position: sticky;
     top: 0;
     z-index: 1;
-    background: ${V.basic[0]};
-    border-bottom: 1px solid ${V.basic[400]};
+    background: ${({theme:e})=>e.palette.background.default};
+    border-bottom: 1px solid ${({theme:e})=>e.palette.divider};
   }
 
   button {
@@ -1873,12 +1914,12 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
     padding: 4px 8px 10px;
     border: 0;
     border-bottom: 2px solid transparent;
-    color: ${V.basic[900]};
+    color: ${({theme:e})=>e.palette.black};
     background: transparent;
 
     &[aria-expanded="true"] {
-      color: ${V.blue[500]};
-      border-bottom-color: ${V.blue[500]};
+      color: ${({theme:e})=>e.palette.primary.main};
+      border-bottom-color: ${({theme:e})=>e.palette.primary.main};
     }
   }
 `,Tv=v.span`
@@ -1891,18 +1932,17 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   font-size: 10px;
   line-height: 12px;
   border-radius: 999%;
-  color: #ffffff;
-  background: ${V.blue[500]};
+  color: ${({theme:e})=>e.palette.white};
+  background: ${({theme:e})=>e.palette.primary.main};
 `,Bv=v.div`
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   box-sizing: border-box;
-  max-width: 1009px;
-  height: 576px;
+  height: 100%;
   border-radius: 6px;
-  border: 1px solid ${V.basic[400]};
-  background: #ffffff;
+  border: 1px solid ${({theme:e})=>e.palette.divider};
+  background: ${({theme:e})=>e.palette.background.default};
 
   @media (max-width: 640px) {
     display: block;
@@ -1917,7 +1957,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
     inset: 0 auto 0 50%;
     width: 1px;
     height: 100%;
-    background: ${V.basic[400]};
+    background: ${({theme:e})=>e.palette.divider};
 
     @media (max-width: 640px) {
       content: none;
@@ -1948,8 +1988,8 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   align-items: center;
   gap: 8px;
   padding: 16px;
-  border-bottom: 1px solid ${V.basic[400]};
-  background: ${V.basic[100]};
+  border-bottom: 1px solid ${({theme:e})=>e.palette.divider};
+  background: ${({theme:e})=>e.palette.gray.highlight};
   border-radius: 6px 0 0 0;
 
   @media (max-width: 640px) {
@@ -1966,12 +2006,12 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   box-sizing: border-box;
   height: 28px;
   padding: 0 6px;
-  background: #ffffff;
-  border: 1px solid ${V.basic[400]};
+  background: ${({theme:e})=>e.palette.background.default};
+  border: 1px solid ${({theme:e})=>e.palette.divider};
   border-radius: 4px;
 
   &:has(input:disabled) {
-    background: ${V.basic[200]};
+    background: ${({theme:e})=>e.palette.gray.light};
   }
 
   input {
@@ -1986,7 +2026,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
     font-size: 12px;
 
     &::placeholder {
-      color: ${V.basic[400]};
+      color: ${({theme:e})=>e.palette.text.disabled};
     }
   }
 `,Fv=v.button`
@@ -1997,10 +2037,8 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   aspect-ratio: 1;
   padding: 0;
   border: 0;
-  border-radius: 50%;
-  background: ${V.basic[900]}
-    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22%23fff%22 d=%22M8 7 5.9 4.7l-1 1 2 2.2-2 2.1 1 1L8 9l2.1 2 1-1-2-2.1 2-2.1-1-1z%22/%3E%3C/svg%3E")
-    no-repeat 50% 50%;
+  background: transparent;
+  color: ${({theme:e})=>e.palette.black};
   cursor: pointer;
 `,Xv=v.button`
   ${Sv}
@@ -2010,7 +2048,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   width: 28px;
   aspect-ratio: 1;
   padding: 2px 4px;
-  background: #fff;
+  background: ${({theme:e})=>e.palette.background.default};
   cursor: pointer;
 
   &:where(:active:not(:disabled)) {
@@ -2022,7 +2060,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   font-size: 13px;
   line-height: 16px;
   display: flex;
-  color: ${V.basic[900]};
+  color: ${({theme:e})=>e.palette.black};
 `,Jv=v.ul`
   grid-area: buttons;
   display: flex;
@@ -2049,7 +2087,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   font-size: 13px;
   line-height: 16px;
   text-decoration-line: underline;
-  color: ${V.blue[500]};
+  color: ${({theme:e})=>e.palette.primary.main};
   background: transparent;
   cursor: pointer;
 `;const Uv=Gv,Qv=v.div`
@@ -2064,21 +2102,21 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   justify-content: space-between;
   padding: 8px 16px;
   border-top-right-radius: 6px;
-  border-bottom: 1px solid ${V.basic[400]};
-  border-left: 1px solid ${V.basic[400]};
-  background: ${V.basic[100]};
+  border-bottom: 1px solid ${({theme:e})=>e.palette.divider};
+  border-left: 1px solid ${({theme:e})=>e.palette.divider};
+  background: ${({theme:e})=>e.palette.gray.highlight};
 `,_v=Wv,Kv=v.div`
   display: flex;
   align-items: center;
   gap: 8px;
 `,qv="\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  /* UI/Text 12 bold */\n  font-weight: 700;\n  font-size: 12px;\n  line-height: 14px;\n",ex=v.div`
   ${qv}
-  color: ${V.blue[500]};
-  background: ${V.blue[100]};
+  color: ${({theme:e})=>e.palette.primary.main};
+  background: ${({theme:e})=>e.palette.primary.highlight};
 `,tx=v.div`
   ${qv}
-  color: ${V.red[500]};
-  background: ${V.red[100]};
+  color: ${({theme:e})=>e.palette.danger.main};
+  background: ${({theme:e})=>e.palette.danger.highlight};
 `,nx=v.div`
   width: fit-content;
 `,rx=v.p`
@@ -2090,13 +2128,13 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   gap: 8px;
   padding: 8px 16px;
   margin: 0;
-  border-bottom: 1px solid ${V.basic[400]};
-  border-left: 1px solid ${V.basic[400]};
+  border-bottom: 1px solid ${({theme:e})=>e.palette.divider};
+  border-left: 1px solid ${({theme:e})=>e.palette.divider};
   /* UI/Text 13 */
   font-size: 13px;
   line-height: 16px;
-  color: ${V.basic[900]};
-  background: ${V.basic[200]};
+  color: ${({theme:e})=>e.palette.black};
+  background: ${({theme:e})=>e.palette.gray.light};
 
   @media (max-width: 640px) {
     border-left: none;
@@ -2148,12 +2186,12 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   font-weight: 400;
   font-size: 14px;
   line-height: 17px;
-  color: ${V.basic[900]};
-  border-bottom: 1px dashed ${V.basic[400]};
+  color: ${({theme:e})=>e.palette.black};
+  border-bottom: 1px dashed ${({theme:e})=>e.palette.divider};
   transition: background 0.2s;
 
   &:hover {
-    background: ${V.basic[100]};
+    background: ${({theme:e})=>e.palette.gray.highlight};
   }
 
   &:hover ${ix} {
@@ -2187,33 +2225,30 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   font-weight: 400;
   font-size: 14px;
   line-height: 17px;
-  color: ${V.basic[900]};
-  border-bottom: 1px dashed ${V.basic[400]};
+  color: ${({theme:e})=>e.palette.black};
+  border-bottom: 1px dashed ${({theme:e})=>e.palette.divider};
 
   &:hover {
-    background: ${V.basic[100]};
+    background: ${({theme:e})=>e.palette.gray.highlight};
   }
 
   button {
     flex-shrink: 0;
-    width: 16px;
     aspect-ratio: 1;
     padding: 0;
     border: 0;
-    border-radius: 50%;
-    background: ${V.basic[900]}
-      url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22%23fff%22 d=%22M8 7 5.9 4.7l-1 1 2 2.2-2 2.1 1 1L8 9l2.1 2 1-1-2-2.1 2-2.1-1-1z%22/%3E%3C/svg%3E")
-      no-repeat 50% 50%;
+    background: transparent;
+    color: ${({theme:e})=>e.palette.black};
     cursor: pointer;
   }
 `,lx=v.div`
   padding: 8px 16px;
   margin: -1px 0 0;
-  background: ${V.basic[100]};
+  background: ${({theme:e})=>e.palette.gray.highlight};
   /* UI/Text 12 */
   font-size: 12px;
   line-height: 14px;
-  color: ${V.basic[900]};
+  color: ${({theme:e})=>e.palette.black};
 `,sx=v.div`
   position: sticky;
   z-index: 1;
@@ -2222,12 +2257,12 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   align-items: center;
   gap: 16px;
   padding: 8px;
-  border-bottom: 1px solid ${V.basic[400]};
-  background: ${V.basic[200]};
+  border-bottom: 1px solid ${({theme:e})=>e.palette.divider};
+  background: ${({theme:e})=>e.palette.gray.light};
   transition: background 0.2s;
 
   &:hover {
-    background: ${V.basic[100]};
+    background: ${({theme:e})=>e.palette.gray.highlight};
   }
 
   ${ax} + & {
@@ -2243,7 +2278,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   font-size: 13px;
   line-height: 16px;
   text-align: left;
-  color: ${V.basic[900]};
+  color: ${({theme:e})=>e.palette.black};
   background: transparent;
   cursor: pointer;
 
@@ -2325,13 +2360,13 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   padding: 8px;
   margin: -1px 0 0;
   border-inline: 0;
-  border-block: 1px solid ${V.basic[400]};
-  background: ${V.basic[200]};
+  border-block: 1px solid ${({theme:e})=>e.palette.divider};
+  background: ${({theme:e})=>e.palette.gray.light};
   transition: background 0.2s;
   overflow: hidden;
 
   &:hover {
-    background: ${V.basic[100]};
+    background: ${({theme:e})=>e.palette.gray.highlight};
   }
 
   &:not([aria-expanded="true"]) ${px} {
@@ -2348,7 +2383,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   justify-content: center;
   align-items: center;
   padding: 16px;
-  color: ${V.basic[600]};
+  color: ${({theme:e})=>e.palette.gray.deepDark};
   font-size: 13px;
   line-height: 16px;
 `;v($v)`
@@ -2357,7 +2392,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   padding-left: 48px;
 `;const fx=({label:e,children:n})=>{const{activeSection:r,setActiveSection:i}=g(Nv),a=p((()=>r===e),[e,r]),o=p((()=>null!==r&&r!==e),[e,r]),l=d((()=>{i(a?null:e)}),[e,a,i]);return o?null:t.createElement(Lv.Provider,{value:{groupName:e}},t.createElement(gx,{type:"button","aria-label":`${e}を開く`,"aria-expanded":a,onClick:l},t.createElement(px,null,t.createElement(Y,{name:"arrow_left",color:V.basic[900]})),t.createElement("div",null,e),t.createElement(mx,null,t.createElement(Y,{name:"arrow_right",color:V.basic[900]}))),a&&n)};fx.displayName="DualListBox2Section";const bx=v(Nl)`
   margin-right: 16px;
-`,vx=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(Nd,{width:136,trigger:t.createElement(bx,{append:e},"件数を変更")},n.map((n=>t.createElement(Cl,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),xx=e=>e.reduce(((e,t)=>{const n=e.find((e=>e.groupName===t.groupName));return n?n.items.push({id:t.id,label:t.label}):e.push({groupName:t.groupName,items:[{id:t.id,label:t.label}]}),e}),[]),yx=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:a,onExcludedChange:o}=g(Nv),l=p((()=>r.includes(e)),[r,e]),s=p((()=>i.includes(e)),[i,e]),c=d((()=>{l&&a(r.filter((t=>t!==e))),s&&o(i.filter((t=>t!==e)))}),[l,s,r,i,a,o,e]);return t.createElement(ox,null,n,t.createElement("button",{type:"button","aria-label":"解除",onClick:c}))}));yx.displayName="DualListBox2SelectedItem";const wx=({label:e})=>t.createElement(lx,null,e),Cx=n((({included:e,excluded:n,disableInclude:l,disableExclude:s,menuButtons:c,children:u,loading:m,onIncludedChange:g,onExcludedChange:h,onLoadMore:f,pageSize:v=50,pageSizeOptions:x=[10,50,100,200],onPageSizeChange:y,filter:w="",onFilterChange:C},E)=>{const[I,k]=r(0),[A,M]=r(""),[H,N]=r(null),[L,Z]=r(!1),D=i(null),O=C?w:A,$=d((e=>{const t=e.target.value;C?C(t):M(t)}),[C]),S=d((()=>{C?C(""):M("")}),[C]),R=d((e=>{N(e),null===e&&S()}),[S]),z=p((()=>{let e=!1;return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&(e=!0)})),e}),[u]),T=p((()=>{const e=O.trim();return e?e.split(/\s+/):[]}),[O]),B=p((()=>Dv(u)),[u]),G=d((e=>{if(!o(e))return e;if(e.type!==Vv)return e;const t=B.find((t=>t.id===e.props.id));return t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[T,B]),W=p((()=>T.length?t.Children.map(u,(e=>{if(!o(e))return e;if(e.type===Vv)return G(e);if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Accordion"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>G(e))).filter(Boolean);return 0===n.length?null:t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Section"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>G(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):u),[u,T,G]),P=p((()=>e.map((e=>e.id))),[e]),j=p((()=>n.map((e=>e.id))),[n]),F=p((()=>B.map((e=>e.id))),[B]),X=p((()=>0===T.length?F:F.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.includes(e)))}))),[F,B,T]),J=p((()=>{if(!z)return[];if(null===H)return[];const e=[];return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&t.props.label===H&&Zv(t.props.children,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Vv.displayName&&e.push(t.props.id)}))})),e}),[H,u,z]),U=p((()=>0===T.length?J:J.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.includes(e)))}))),[J,B,T]),Q=p((()=>{if(z){if(null===H)return!0;return!!U.every((e=>P.includes(e)))}return!!X.every((e=>P.includes(e)))}),[z,H,X,U,P]),_=p((()=>{if(z){if(null===H)return!0;return!!U.every((e=>j.includes(e)))}return!!X.every((e=>j.includes(e)))}),[z,H,X,U,j]),K=d((()=>{e.length&&g([]),n.length&&h([])}),[e,n,g,h]),q=d((()=>{if(z){if(null===H)return;return g(Array.from(new Set([...P,...U]))),void h(j.filter((e=>!U.includes(e))))}g(Array.from(new Set([...P,...X]))),h(j.filter((e=>!X.includes(e))))}),[X,g,h,z,H,P,j,U]),ee=d((()=>{if(z){if(null===H)return;return h(Array.from(new Set([...j,...U]))),void g(P.filter((e=>!U.includes(e))))}h(Array.from(new Set([...j,...X]))),g(P.filter((e=>!X.includes(e))))}),[X,g,h,z,H,P,j,U]),te=d((async e=>{if(e[0].isIntersecting&&!L&&f){Z(!0);try{await f()}finally{Z(!1)}}}),[L,f]);return a((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(te,{root:null,rootMargin:"100px",threshold:.1}),t=D.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[te]),t.createElement(Rv,{ref:E,role:"region","aria-label":"デュアルリストボックス"},t.createElement(zv,{role:"tablist","aria-label":"リストの表示切り替え"},t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":0===I,"aria-expanded":0===I,"aria-controls":"list-items-panel",onClick:()=>k(0)},"リストアイテム")),t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":1===I,"aria-expanded":1===I,"aria-controls":"selected-items-panel",onClick:()=>k(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(Tv,null,e.length+n.length)))),t.createElement(Bv,null,t.createElement(Nv.Provider,{value:{filterWords:T,includedIds:P,excludedIds:j,activeSection:H,onIncludedChange:g,onExcludedChange:h,setActiveSection:R}},t.createElement(Gv,{isShow:0===I,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Pv,{hasMenu:!(!c&&!y)},t.createElement(jv,null,t.createElement(Y,{name:"search",size:"sm",color:V.basic[600]}),t.createElement("input",{"aria-label":"アイテムを検索",disabled:z&&null===H,placeholder:"検索",type:"text",value:O,onChange:$}),O&&t.createElement(Fv,{type:"button","aria-label":"検索をリセット",onClick:S})),(c||y)&&t.createElement(Ld,null,t.createElement(Nd,{trigger:t.createElement(Xv,{type:"button"},t.createElement(Y,{name:"more_vert",color:V.basic[900]}))},y&&t.createElement(vx,{pageSize:v,pageSizeOptions:x,onPageSizeChange:y}),c)),t.createElement(Yv,null,m?t.createElement(Er,{width:"16px"}):t.createElement(t.Fragment,null,z&&null===H?"-":z?U.length.toLocaleString("en-US"):X.length.toLocaleString("en-US"),"件")),t.createElement(Jv,null,!l&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:Q,onClick:q},t.createElement(Y,{name:"check_thin",color:Q?V.basic[400]:V.blue[500]}),"全て追加")),!s&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:_,onClick:ee},t.createElement(Y,{name:"forbid",color:_?V.basic[400]:V.red[500]}),"全て除外")))),t.createElement(Wv,null,W,t.createElement("div",{ref:D,style:{height:"20px"}},m&&t.createElement(hx,null,"読み込み中...")))),t.createElement(Uv,{isShow:1===I},t.createElement(Qv,null,t.createElement(Kv,null,0!==e.length&&t.createElement(ex,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),e.length),0!==n.length&&t.createElement(tx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),n.length)),t.createElement(nx,null,t.createElement(Jt,{type:"button",color:"basicLight",size:"small",disabled:!e.length&&!n.length,onClick:K},"選択をクリア"))),t.createElement(_v,null,!!e.length&&t.createElement(rx,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),"追加"),xx(e).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},e.label)))))),!!n.length&&t.createElement(rx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),"除外"),xx(n).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},e.label)))))))))))}));Cx.displayName="DualListBox2";const Ex=e.forwardRef((function({children:t},n){const r=W();return e.createElement(U,{ref:n,display:"flex",alignItems:"center"},e.createElement(Pt,{pr:.5},e.createElement(Y,{name:"alert",type:"fill",color:r.palette.danger.main,size:"md"})),e.createElement(oe,{color:r.palette.danger.main},t))})),Ix=v.div`
+`,vx=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(Nd,{width:136,trigger:t.createElement(bx,{append:e},"件数を変更")},n.map((n=>t.createElement(Cl,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),xx=e=>e.reduce(((e,t)=>{const n=e.find((e=>e.groupName===t.groupName));return n?n.items.push({id:t.id,label:t.label}):e.push({groupName:t.groupName,items:[{id:t.id,label:t.label}]}),e}),[]),yx=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:a,onExcludedChange:o}=g(Nv),l=p((()=>r.includes(e)),[r,e]),s=p((()=>i.includes(e)),[i,e]),c=d((()=>{l&&a(r.filter((t=>t!==e))),s&&o(i.filter((t=>t!==e)))}),[l,s,r,i,a,o,e]);return t.createElement(ox,null,n,t.createElement("button",{type:"button","aria-label":"解除",onClick:c},t.createElement(Y,{name:"close_circle",type:"fill",color:"currentColor"})))}));yx.displayName="DualListBox2SelectedItem";const wx=({label:e})=>t.createElement(lx,null,e),Cx=n((({included:e,excluded:n,disableInclude:l,disableExclude:s,menuButtons:c,children:u,loading:m,onIncludedChange:g,onExcludedChange:h,onLoadMore:f,pageSize:v=50,pageSizeOptions:x=[10,50,100,200],onPageSizeChange:y,filter:w="",onFilterChange:C},E)=>{const[I,k]=r(0),[A,M]=r(""),[H,N]=r(null),[L,Z]=r(!1),D=i(null),O=C?w:A,$=d((e=>{const t=e.target.value;C?C(t):M(t)}),[C]),S=d((()=>{C?C(""):M("")}),[C]),R=d((e=>{N(e),null===e&&S()}),[S]),z=p((()=>{let e=!1;return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&(e=!0)})),e}),[u]),T=p((()=>{const e=O.trim();return e?e.split(/\s+/):[]}),[O]),B=p((()=>Dv(u)),[u]),G=d((e=>{if(!o(e))return e;if(e.type!==Vv)return e;const t=B.find((t=>t.id===e.props.id));return t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[T,B]),W=p((()=>T.length?t.Children.map(u,(e=>{if(!o(e))return e;if(e.type===Vv)return G(e);if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Accordion"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>G(e))).filter(Boolean);return 0===n.length?null:t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Section"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>G(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):u),[u,T,G]),P=p((()=>e.map((e=>e.id))),[e]),j=p((()=>n.map((e=>e.id))),[n]),F=p((()=>B.map((e=>e.id))),[B]),X=p((()=>0===T.length?F:F.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[F,B,T]),J=p((()=>{if(!z)return[];if(null===H)return[];const e=[];return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&t.props.label===H&&Zv(t.props.children,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Vv.displayName&&e.push(t.props.id)}))})),e}),[H,u,z]),U=p((()=>0===T.length?J:J.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[J,B,T]),Q=p((()=>{if(z){if(null===H)return!0;return!!U.every((e=>P.includes(e)))}return!!X.every((e=>P.includes(e)))}),[z,H,X,U,P]),_=p((()=>{if(z){if(null===H)return!0;return!!U.every((e=>j.includes(e)))}return!!X.every((e=>j.includes(e)))}),[z,H,X,U,j]),K=d((()=>{e.length&&g([]),n.length&&h([])}),[e,n,g,h]),q=d((()=>{if(z){if(null===H)return;return g(Array.from(new Set([...P,...U]))),void h(j.filter((e=>!U.includes(e))))}g(Array.from(new Set([...P,...X]))),h(j.filter((e=>!X.includes(e))))}),[X,g,h,z,H,P,j,U]),ee=d((()=>{if(z){if(null===H)return;return h(Array.from(new Set([...j,...U]))),void g(P.filter((e=>!U.includes(e))))}h(Array.from(new Set([...j,...X]))),g(P.filter((e=>!X.includes(e))))}),[X,g,h,z,H,P,j,U]),te=d((async e=>{if(e[0].isIntersecting&&!L&&f){Z(!0);try{await f()}finally{Z(!1)}}}),[L,f]);return a((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(te,{root:null,rootMargin:"100px",threshold:.1}),t=D.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[te]),t.createElement(Rv,{ref:E,role:"region","aria-label":"アイテムの追加、除外選択エリア"},t.createElement(zv,{role:"tablist","aria-label":"リストの表示切り替え"},t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":0===I,"aria-expanded":0===I,"aria-controls":"list-items-panel",onClick:()=>k(0)},"リストアイテム")),t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":1===I,"aria-expanded":1===I,"aria-controls":"selected-items-panel",onClick:()=>k(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(Tv,null,e.length+n.length)))),t.createElement(Bv,null,t.createElement(Nv.Provider,{value:{filterWords:T,includedIds:P,excludedIds:j,activeSection:H,onIncludedChange:g,onExcludedChange:h,setActiveSection:R}},t.createElement(Gv,{isShow:0===I,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Pv,{hasMenu:!(!c&&!y)},t.createElement(jv,null,t.createElement(Y,{name:"search",size:"sm",color:V.basic[600]}),t.createElement("input",{"aria-label":"アイテムを検索",disabled:z&&null===H,placeholder:"検索",type:"text",value:O,onChange:$}),O&&t.createElement(Fv,{type:"button","aria-label":"検索をリセット",onClick:S},t.createElement(Y,{name:"close_circle",type:"fill",color:"currentColor"}))),(c||y)&&t.createElement(Ld,null,t.createElement(Nd,{trigger:t.createElement(Xv,{type:"button"},t.createElement(Y,{name:"more_vert",color:V.basic[900]}))},y&&t.createElement(vx,{pageSize:v,pageSizeOptions:x,onPageSizeChange:y}),c)),t.createElement(Yv,null,m?t.createElement(Er,{width:"16px"}):t.createElement(t.Fragment,null,z&&null===H?"-":z?U.length.toLocaleString("en-US"):X.length.toLocaleString("en-US"),"件")),t.createElement(Jv,null,!l&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:Q,onClick:q},t.createElement(Y,{name:"check_thin",color:Q?V.basic[400]:V.blue[500]}),"全て追加")),!s&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:_,onClick:ee},t.createElement(Y,{name:"forbid",color:_?V.basic[400]:V.red[500]}),"全て除外")))),t.createElement(Wv,null,W,t.createElement("div",{ref:D,style:{height:"20px"}},m&&t.createElement(hx,null,"読み込み中...")))),t.createElement(Uv,{isShow:1===I},t.createElement(Qv,null,t.createElement(Kv,null,0!==e.length&&t.createElement(ex,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),e.length),0!==n.length&&t.createElement(tx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),n.length)),t.createElement(nx,null,t.createElement(Jt,{type:"button",color:"basicLight",size:"small",disabled:!e.length&&!n.length,onClick:K},"選択をクリア"))),t.createElement(_v,null,!!e.length&&t.createElement(rx,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),"追加"),xx(e).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},e.label)))))),!!n.length&&t.createElement(rx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),"除外"),xx(n).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},e.label)))))))))))}));Cx.displayName="DualListBox2";const Ex=e.forwardRef((function({children:t},n){const r=W();return e.createElement(U,{ref:n,display:"flex",alignItems:"center"},e.createElement(Pt,{pr:.5},e.createElement(Y,{name:"alert",type:"fill",color:r.palette.danger.main,size:"md"})),e.createElement(oe,{color:r.palette.danger.main},t))})),Ix=v.div`
   display: flex;
   justify-content: center;
   align-items: center;