@clickhouse/click-ui 0.0.118 → 0.0.119

package/README.md

@@ -39,7 +39,7 @@ export default App
 1. Clone this repo, cd into the `click-ui` directory
 2. To install dependencies, run `npm i`
 3. To build the latest styles, run `npm run generate-tokens`
-4. To run ClickUI locally, run `npm run dev` and navigate to https://localhost:5173
+4. To run ClickUI locally, run `npm run dev` and navigate to http://localhost:5173
 5. To run Storybook locally, run `npm run storybook` and navigate to https://localhost:6006
 
 Enjoy!

package/dist/click-ui.es.js

@@ -7585,8 +7585,9 @@ const Mi = ge(A7), Lw = G.div.withConfig({
   disabled: a = !1,
   description: l,
   infoUrl: c,
-  infoText: u
-}) => /* @__PURE__ */ r.jsxs(Ew, { $disabled: a, tabIndex: 0, $hasShadow: i, children: [
+  infoText: u,
+  ...h
+}) => /* @__PURE__ */ r.jsxs(Ew, { $disabled: a, tabIndex: 0, $hasShadow: i, ...h, children: [
   /* @__PURE__ */ r.jsxs(Lw, { children: [
     /* @__PURE__ */ r.jsxs($w, { $disabled: a, children: [
       /* @__PURE__ */ r.jsx(dt, { name: t, size: "lg", "area-hidden": "" }),
@@ -11068,31 +11069,32 @@ const gS = G.div.withConfig({
 })(["display:flex;justify-content:flex-end;gap:", ";"], (e) => e.theme.click.dialog.space.gap), vS = G.div.withConfig({
   componentId: "sc-6eozxy-1"
 })(["overflow:hidden;display:flex;flex-direction:column;"]), JD = ({
-  open: e,
-  onCancel: t,
-  title: n,
+  children: e,
+  disabled: t,
+  loading: n,
   message: o,
-  loading: i,
-  primaryActionType: a = "primary",
-  primaryActionLabel: l = "Confirm",
-  secondaryActionLabel: c = "Cancel",
-  onConfirm: u,
-  children: h,
+  onCancel: i,
+  onConfirm: a,
+  open: l,
+  primaryActionLabel: c = "Confirm",
+  primaryActionType: u = "primary",
+  secondaryActionLabel: h = "Cancel",
   showClose: b,
-  ...g
+  title: g,
+  ...w
 }) => {
-  if (h && o)
+  if (e && o)
     throw new Error("You can't pass children and message props at the same time");
-  return /* @__PURE__ */ r.jsx(C1, { open: e, onOpenChange: (w) => {
-    !w && t && t();
-  }, children: /* @__PURE__ */ r.jsxs(vS, { as: C1.Content, title: n, showClose: b, ...g, children: [
-    /* @__PURE__ */ r.jsx(Gr, { overflow: "auto", grow: "1", orientation: "vertical", children: h || /* @__PURE__ */ r.jsx(Mi, { children: o }) }),
+  return /* @__PURE__ */ r.jsx(C1, { open: l, onOpenChange: (_) => {
+    !_ && i && i();
+  }, children: /* @__PURE__ */ r.jsxs(vS, { as: C1.Content, title: g, showClose: b, ...w, children: [
+    /* @__PURE__ */ r.jsx(Gr, { overflow: "auto", grow: "1", orientation: "vertical", children: e || /* @__PURE__ */ r.jsx(Mi, { children: o }) }),
     /* @__PURE__ */ r.jsx(Wa, { size: "xl" }),
     /* @__PURE__ */ r.jsxs(gS, { children: [
-      /* @__PURE__ */ r.jsx(C1.Close, { label: c }),
-      /* @__PURE__ */ r.jsx(C1.Close, { loading: !!i, disabled: !!i, type: a, label: l, onClick: () => {
-        u && u();
-      } })
+      /* @__PURE__ */ r.jsx(C1.Close, { label: h, "data-testid": "cancel-action-button" }),
+      /* @__PURE__ */ r.jsx(C1.Close, { loading: !!n, disabled: !!t || !!n, type: u, label: c, onClick: () => {
+        a && a();
+      }, "data-testid": "confirm-action-button" })
     ] })
   ] }) });
 }, Fi = ({

package/dist/click-ui.umd.js

@@ -319,7 +319,7 @@ Check the top-level render call using <`+je+">.")}return be}}function Bt(Y,be){{
   `),DC=W.div.withConfig({componentId:"sc-u5029o-2"})(["",""],({$state:e="default",$size:t="lg",theme:n})=>`
     color: ${n.click.bigStat.color.title[e]};
     font: ${n.click.bigStat.typography[t].title[e]};
-  `),AC=({options:e,selected:t,fillWidth:n,onClick:o,type:i,...a})=>{const s=e.length-1,c=e.map(({value:u,label:g,...C},v)=>{const y=v===0?"left":v===s?"right":"center";return r.jsx(ZC,{$active:u===t,$position:y,$fillWidth:n,$type:i,onClick:()=>o==null?void 0:o(u),role:"button",...C,children:g},u)});return r.jsx(RC,{$fillWidth:n,$type:i,...a,children:c})},RC=W.div.withConfig({componentId:"sc-ukgugp-0"})(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:",";border:1px solid ",";background:",";border-radius:",";width:",";"],({theme:e,$type:t="default"})=>e.click.button.group.space.gap[t],({theme:e,$type:t="default"})=>e.click.button.group.color.panel.stroke[t],({theme:e})=>e.click.button.group.color.background.panel,({theme:e})=>e.click.button.group.radii.all,({$fillWidth:e})=>e?"100%":"auto"),uc="var(--click-button-button-group-radii-end)",VC=`${uc} 0px 0px ${uc}`,BC=`0px ${uc} ${uc} 0px`,NC="var(--click-button-button-group-radii-center)",ZC=W.button.attrs(e=>({"aria-pressed":e.$active})).withConfig({componentId:"sc-ukgugp-1"})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:",";color:",";font:",";padding:"," ",";gap:",";"," cursor:pointer;&:hover{background:",";font:",";}&:disabled{cursor:not-allowed;font:",";background:",";}&:active,&:focus{background:",";font:",";&:disabled{background:",";}}border-radius:",";"],({$active:e,theme:t})=>e?t.click.button.group.color.background.active:t.click.button.group.color.background.default,({theme:e})=>e.click.button.group.color.text.default,({theme:e})=>e.click.button.group.typography.label.default,({theme:e})=>e.click.button.basic.space.y,({theme:e})=>e.click.button.basic.space.x,({theme:e})=>e.click.button.basic.space.group,({$fillWidth:e=!1})=>e?"flex: 1;":"",({theme:e})=>e.click.button.group.color.background.hover,({theme:e})=>e.click.button.group.typography.label.hover,({theme:e})=>e.click.button.group.typography.label.disabled,({theme:e,$active:t})=>e.click.button.group.color.background[t?"disabled-active":"disabled"],({theme:e})=>e.click.button.group.color.background.active,({theme:e})=>e.click.button.group.typography.label.active,({theme:e})=>e.click.button.group.color.background["disabled-active"],({theme:e,$type:t,$position:n})=>t==="borderless"?e.click.button.group.radii.all:n==="left"?VC:n==="right"?BC:NC),ul=({type:e="primary",iconLeft:t,iconRight:n,align:o="center",children:i,fillWidth:a,label:s,loading:c=!1,disabled:u,...g})=>r.jsxs(WC,{$styleType:e,$align:o,$fillWidth:a,disabled:u||c,role:"button",...g,children:[t&&r.jsx(f6,{name:t,"aria-hidden":!0,size:"sm"}),s??i,n&&r.jsx(f6,{name:n,"aria-hidden":!0,size:"sm"}),c&&r.jsx(UC,{children:r.jsx(rt,{name:"loading-animated","data-testid":"click-ui-loading-icon","aria-label":"loading"})})]}),UC=W.div.withConfig({componentId:"sc-1k4tz4c-0"})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]),WC=W(l3).withConfig({componentId:"sc-1k4tz4c-1"})(["width:",";color:",";background-color:",";border:"," solid ",";font:",";position:relative;display:flex;align-items:center;justify-content:",";white-space:nowrap;&:hover{background-color:",";border:"," solid ",";transition:",";font:",";}&:active,&:focus{background-color:",";border:1px solid ",";font:",";}&:disabled,&:disabled:hover,&:disabled:active{background-color:",";color:",";border:"," solid ",";font:",";}"],({$fillWidth:e})=>e?"100%":"revert",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.default,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.default,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.default,({theme:e})=>e.click.button.basic.typography.label.default,({$align:e})=>e==="left"?"flex-start":"center",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.hover,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.hover,({theme:e})=>e.transition.default,({theme:e})=>e.click.button.basic.typography.label.hover,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.active,({theme:e})=>e.click.button.basic.typography.label.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.disabled,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.disabled,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.disabled,({theme:e})=>e.click.button.basic.typography.label.disabled),f6=W(rt).withConfig({componentId:"sc-1k4tz4c-2"})(["height:",";width:",";svg{height:",";width:",";}"],({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all),n0=p.forwardRef(({align:e,size:t,family:n,type:o,color:i,children:a,...s},c)=>r.jsx(zC,{ref:c,$align:e,$color:i,$size:t,$family:n,as:o,...s,children:a})),zC=W.div.withConfig({componentId:"sc-1bq7thb-0"})(["font:",";color:",";margin:0;padding:0;font-style:inherit;text-align:",";a,a:visited{color:",";cursor:pointer;}a:hover{color:",";}"],({$size:e="md",$family:t="product",theme:n})=>n.typography.styles[t].titles[e],({$color:e="default",theme:t})=>t.click.global.color.title[e],({$align:e="left"})=>e,({$color:e="default",theme:t})=>t.click.global.color.title[e],({theme:e})=>e.click.global.color.title.muted),p6=({align:e,color:t,size:n,weight:o,className:i,children:a,component:s,...c},u)=>r.jsx(GC,{as:s??"p",ref:u,$align:e,$color:t,$size:n,$weight:o,className:i,...c,children:a}),GC=W.p.withConfig({componentId:"sc-6r74pj-0"})(["font:",";color:",";text-align:",";margin:0;"],({$size:e="md",$weight:t="normal",theme:n})=>n.typography.styles.product.text[t][e],({$color:e="default",theme:t})=>t.click.global.color.text[e],({$align:e="left"})=>e);p6.displayName="Text";const bo=p.forwardRef(p6),YC=W.div.withConfig({componentId:"sc-1drx130-0"})(["display:flex;justify-content:space-between;align-items:center;"]),XC=W.div.withConfig({componentId:"sc-1drx130-1"})(["display:flex;align-items:center;gap:",";h3,svg{color:",";}"],({theme:e})=>e.click.card.secondary.space.gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default),KC=W.div.withConfig({componentId:"sc-1drx130-2"})(["display:flex;flex-direction:column;flex:1;"]),JC=W.a.withConfig({componentId:"sc-1drx130-3"})(["display:flex;align-items:center;color:",";text-decoration:none;"],({theme:e})=>e.click.card.secondary.color.link.default),qC=W(rt).withConfig({componentId:"sc-1drx130-4"})(["color:",";height:",";width:",";"],({theme:e})=>e.click.card.secondary.color.link.default,({theme:e})=>e.click.image.md.size.height,({theme:e})=>e.click.image.md.size.width),r0=W(bo).withConfig({componentId:"sc-1drx130-5"})([""]),o0=W(qC).withConfig({componentId:"sc-1drx130-6"})([""]),QC=W.div.withConfig({componentId:"sc-1drx130-7"})(["background-color:",";border-radius:",";border:",";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,:focus{background-color:",";cursor:pointer;",",","{color:",";}}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;",",","{color:",";}}"],({theme:e})=>e.click.card.secondary.color.background.default,({theme:e})=>e.click.card.secondary.radii.all,({theme:e})=>`1px solid ${e.click.card.secondary.color.stroke.default}`,({theme:e})=>e.click.card.secondary.space.all,({theme:e})=>e.click.card.secondary.space.gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,r0,o0,({theme:e})=>e.click.card.secondary.color.link.hover,({theme:e})=>e.click.card.secondary.color.background.disabled,({theme:e})=>e.click.card.secondary.color.title.disabled,({theme:e})=>e.click.card.secondary.color.stroke.disabled,r0,o0,({theme:e})=>e.click.card.secondary.color.link.disabled),ex=({title:e,icon:t,badgeState:n,badgeText:o="",hasShadow:i=!1,disabled:a=!1,description:s,infoUrl:c,infoText:u})=>r.jsxs(QC,{$disabled:a,tabIndex:0,$hasShadow:i,children:[r.jsxs(YC,{children:[r.jsxs(XC,{$disabled:a,children:[r.jsx(rt,{name:t,size:"lg","area-hidden":""}),r.jsx(n0,{type:"h3",children:e})]}),o&&r.jsx(t0,{text:o,state:a==!0?"disabled":n})]}),r.jsx(KC,{children:r.jsx(bo,{color:"muted",children:s})}),(c||u)&&r.jsxs(JC,{href:a?void 0:c,as:a||!c||c.length===0?"div":"a",children:[r.jsx(r0,{children:u}),r.jsx(o0,{name:"chevron-right"})]})]}),tx=W.div.withConfig({componentId:"sc-2dguvi-0"})(["background-color:",";border-radius:",";border:",";display:flex;width:100%;max-width:100%;text-align:",";flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,&:focus{background-color:",";cursor:pointer;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}&:active{border-color:",";}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}",""],({theme:e})=>e.click.card.primary.color.background.default,({theme:e})=>e.click.card.primary.radii.all,({theme:e})=>`1px solid ${e.click.card.primary.color.stroke.default}`,({$alignContent:e})=>e==="start"?"left":e==="end"?"right":"center",({$size:e="md",theme:t})=>`${t.click.card.primary.space[e].x} ${t.click.card.primary.space[e].y}`,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,({theme:e})=>e.click.button.basic.color.primary.background.hover,({theme:e})=>e.click.button.basic.color.primary.stroke.hover,({theme:e})=>e.click.button.basic.color.primary.background.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.card.primary.color.background.disabled,({theme:e})=>e.click.card.primary.color.title.disabled,({theme:e})=>e.click.card.primary.color.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({$isSelected:e,theme:t})=>e?`border-color: ${t.click.button.basic.color.primary.stroke.active};`:""),nx=W.div.withConfig({componentId:"sc-2dguvi-1"})(["display:flex;flex-direction:column;align-items:",";gap:",";h3{color:",";}svg{height:",";width:",";}"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all),rx=W.div.withConfig({componentId:"sc-2dguvi-2"})(["width:100%;display:flex;flex-direction:column;align-self:",";gap:",";flex:1;"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap),ox=e=>e==="center"?"center":e==="start"?"left":"right",ix=({alignContent:e,title:t,icon:n,hasShadow:o=!1,description:i,infoUrl:a,infoText:s,size:c,disabled:u=!1,onButtonClick:g,isSelected:C,children:v,...y})=>{const _=M=>{typeof g=="function"&&g(M),a&&a.length>0&&window.open(a,"_blank")},j=a||typeof g=="function"?ul:"div";return r.jsxs(tx,{$alignContent:e,$hasShadow:o,$size:c,$disabled:u,$isSelected:C,tabIndex:0,...y,children:[(n||t)&&r.jsxs(nx,{$size:c,$disabled:u,$alignContent:e,children:[n&&r.jsx(rt,{name:n,"aria-hidden":!0}),t&&r.jsx(n0,{type:"h3",children:t})]}),(i||v)&&r.jsxs(rx,{$size:c,$alignContent:e,children:[i&&r.jsx(bo,{color:"muted",align:ox(e??"start"),children:i}),v]}),c=="sm"&&r.jsx(Qc,{size:"sm"}),s&&r.jsx(j,{onClick:_,disabled:u,children:s})]})},ax=W.div.withConfig({componentId:"sc-1qnbjoa-0"})(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]),I1=W.div.withConfig({componentId:"sc-1qnbjoa-1"})(["display:flex;flex-direction:column;align-self:center;gap:",";flex:1;"],({theme:e})=>e.click.card.horizontal.space.gap),lx=W.div.withConfig({componentId:"sc-1qnbjoa-2"})(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;",""],({theme:e,$color:t,$isSelected:n,$disabled:o})=>`
+  `),AC=({options:e,selected:t,fillWidth:n,onClick:o,type:i,...a})=>{const s=e.length-1,c=e.map(({value:u,label:g,...C},v)=>{const y=v===0?"left":v===s?"right":"center";return r.jsx(ZC,{$active:u===t,$position:y,$fillWidth:n,$type:i,onClick:()=>o==null?void 0:o(u),role:"button",...C,children:g},u)});return r.jsx(RC,{$fillWidth:n,$type:i,...a,children:c})},RC=W.div.withConfig({componentId:"sc-ukgugp-0"})(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:",";border:1px solid ",";background:",";border-radius:",";width:",";"],({theme:e,$type:t="default"})=>e.click.button.group.space.gap[t],({theme:e,$type:t="default"})=>e.click.button.group.color.panel.stroke[t],({theme:e})=>e.click.button.group.color.background.panel,({theme:e})=>e.click.button.group.radii.all,({$fillWidth:e})=>e?"100%":"auto"),uc="var(--click-button-button-group-radii-end)",VC=`${uc} 0px 0px ${uc}`,BC=`0px ${uc} ${uc} 0px`,NC="var(--click-button-button-group-radii-center)",ZC=W.button.attrs(e=>({"aria-pressed":e.$active})).withConfig({componentId:"sc-ukgugp-1"})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:",";color:",";font:",";padding:"," ",";gap:",";"," cursor:pointer;&:hover{background:",";font:",";}&:disabled{cursor:not-allowed;font:",";background:",";}&:active,&:focus{background:",";font:",";&:disabled{background:",";}}border-radius:",";"],({$active:e,theme:t})=>e?t.click.button.group.color.background.active:t.click.button.group.color.background.default,({theme:e})=>e.click.button.group.color.text.default,({theme:e})=>e.click.button.group.typography.label.default,({theme:e})=>e.click.button.basic.space.y,({theme:e})=>e.click.button.basic.space.x,({theme:e})=>e.click.button.basic.space.group,({$fillWidth:e=!1})=>e?"flex: 1;":"",({theme:e})=>e.click.button.group.color.background.hover,({theme:e})=>e.click.button.group.typography.label.hover,({theme:e})=>e.click.button.group.typography.label.disabled,({theme:e,$active:t})=>e.click.button.group.color.background[t?"disabled-active":"disabled"],({theme:e})=>e.click.button.group.color.background.active,({theme:e})=>e.click.button.group.typography.label.active,({theme:e})=>e.click.button.group.color.background["disabled-active"],({theme:e,$type:t,$position:n})=>t==="borderless"?e.click.button.group.radii.all:n==="left"?VC:n==="right"?BC:NC),ul=({type:e="primary",iconLeft:t,iconRight:n,align:o="center",children:i,fillWidth:a,label:s,loading:c=!1,disabled:u,...g})=>r.jsxs(WC,{$styleType:e,$align:o,$fillWidth:a,disabled:u||c,role:"button",...g,children:[t&&r.jsx(f6,{name:t,"aria-hidden":!0,size:"sm"}),s??i,n&&r.jsx(f6,{name:n,"aria-hidden":!0,size:"sm"}),c&&r.jsx(UC,{children:r.jsx(rt,{name:"loading-animated","data-testid":"click-ui-loading-icon","aria-label":"loading"})})]}),UC=W.div.withConfig({componentId:"sc-1k4tz4c-0"})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]),WC=W(l3).withConfig({componentId:"sc-1k4tz4c-1"})(["width:",";color:",";background-color:",";border:"," solid ",";font:",";position:relative;display:flex;align-items:center;justify-content:",";white-space:nowrap;&:hover{background-color:",";border:"," solid ",";transition:",";font:",";}&:active,&:focus{background-color:",";border:1px solid ",";font:",";}&:disabled,&:disabled:hover,&:disabled:active{background-color:",";color:",";border:"," solid ",";font:",";}"],({$fillWidth:e})=>e?"100%":"revert",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.default,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.default,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.default,({theme:e})=>e.click.button.basic.typography.label.default,({$align:e})=>e==="left"?"flex-start":"center",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.hover,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.hover,({theme:e})=>e.transition.default,({theme:e})=>e.click.button.basic.typography.label.hover,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.active,({theme:e})=>e.click.button.basic.typography.label.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.disabled,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.disabled,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.disabled,({theme:e})=>e.click.button.basic.typography.label.disabled),f6=W(rt).withConfig({componentId:"sc-1k4tz4c-2"})(["height:",";width:",";svg{height:",";width:",";}"],({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all),n0=p.forwardRef(({align:e,size:t,family:n,type:o,color:i,children:a,...s},c)=>r.jsx(zC,{ref:c,$align:e,$color:i,$size:t,$family:n,as:o,...s,children:a})),zC=W.div.withConfig({componentId:"sc-1bq7thb-0"})(["font:",";color:",";margin:0;padding:0;font-style:inherit;text-align:",";a,a:visited{color:",";cursor:pointer;}a:hover{color:",";}"],({$size:e="md",$family:t="product",theme:n})=>n.typography.styles[t].titles[e],({$color:e="default",theme:t})=>t.click.global.color.title[e],({$align:e="left"})=>e,({$color:e="default",theme:t})=>t.click.global.color.title[e],({theme:e})=>e.click.global.color.title.muted),p6=({align:e,color:t,size:n,weight:o,className:i,children:a,component:s,...c},u)=>r.jsx(GC,{as:s??"p",ref:u,$align:e,$color:t,$size:n,$weight:o,className:i,...c,children:a}),GC=W.p.withConfig({componentId:"sc-6r74pj-0"})(["font:",";color:",";text-align:",";margin:0;"],({$size:e="md",$weight:t="normal",theme:n})=>n.typography.styles.product.text[t][e],({$color:e="default",theme:t})=>t.click.global.color.text[e],({$align:e="left"})=>e);p6.displayName="Text";const bo=p.forwardRef(p6),YC=W.div.withConfig({componentId:"sc-1drx130-0"})(["display:flex;justify-content:space-between;align-items:center;"]),XC=W.div.withConfig({componentId:"sc-1drx130-1"})(["display:flex;align-items:center;gap:",";h3,svg{color:",";}"],({theme:e})=>e.click.card.secondary.space.gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default),KC=W.div.withConfig({componentId:"sc-1drx130-2"})(["display:flex;flex-direction:column;flex:1;"]),JC=W.a.withConfig({componentId:"sc-1drx130-3"})(["display:flex;align-items:center;color:",";text-decoration:none;"],({theme:e})=>e.click.card.secondary.color.link.default),qC=W(rt).withConfig({componentId:"sc-1drx130-4"})(["color:",";height:",";width:",";"],({theme:e})=>e.click.card.secondary.color.link.default,({theme:e})=>e.click.image.md.size.height,({theme:e})=>e.click.image.md.size.width),r0=W(bo).withConfig({componentId:"sc-1drx130-5"})([""]),o0=W(qC).withConfig({componentId:"sc-1drx130-6"})([""]),QC=W.div.withConfig({componentId:"sc-1drx130-7"})(["background-color:",";border-radius:",";border:",";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,:focus{background-color:",";cursor:pointer;",",","{color:",";}}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;",",","{color:",";}}"],({theme:e})=>e.click.card.secondary.color.background.default,({theme:e})=>e.click.card.secondary.radii.all,({theme:e})=>`1px solid ${e.click.card.secondary.color.stroke.default}`,({theme:e})=>e.click.card.secondary.space.all,({theme:e})=>e.click.card.secondary.space.gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,r0,o0,({theme:e})=>e.click.card.secondary.color.link.hover,({theme:e})=>e.click.card.secondary.color.background.disabled,({theme:e})=>e.click.card.secondary.color.title.disabled,({theme:e})=>e.click.card.secondary.color.stroke.disabled,r0,o0,({theme:e})=>e.click.card.secondary.color.link.disabled),ex=({title:e,icon:t,badgeState:n,badgeText:o="",hasShadow:i=!1,disabled:a=!1,description:s,infoUrl:c,infoText:u,...g})=>r.jsxs(QC,{$disabled:a,tabIndex:0,$hasShadow:i,...g,children:[r.jsxs(YC,{children:[r.jsxs(XC,{$disabled:a,children:[r.jsx(rt,{name:t,size:"lg","area-hidden":""}),r.jsx(n0,{type:"h3",children:e})]}),o&&r.jsx(t0,{text:o,state:a==!0?"disabled":n})]}),r.jsx(KC,{children:r.jsx(bo,{color:"muted",children:s})}),(c||u)&&r.jsxs(JC,{href:a?void 0:c,as:a||!c||c.length===0?"div":"a",children:[r.jsx(r0,{children:u}),r.jsx(o0,{name:"chevron-right"})]})]}),tx=W.div.withConfig({componentId:"sc-2dguvi-0"})(["background-color:",";border-radius:",";border:",";display:flex;width:100%;max-width:100%;text-align:",";flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,&:focus{background-color:",";cursor:pointer;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}&:active{border-color:",";}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}",""],({theme:e})=>e.click.card.primary.color.background.default,({theme:e})=>e.click.card.primary.radii.all,({theme:e})=>`1px solid ${e.click.card.primary.color.stroke.default}`,({$alignContent:e})=>e==="start"?"left":e==="end"?"right":"center",({$size:e="md",theme:t})=>`${t.click.card.primary.space[e].x} ${t.click.card.primary.space[e].y}`,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,({theme:e})=>e.click.button.basic.color.primary.background.hover,({theme:e})=>e.click.button.basic.color.primary.stroke.hover,({theme:e})=>e.click.button.basic.color.primary.background.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.card.primary.color.background.disabled,({theme:e})=>e.click.card.primary.color.title.disabled,({theme:e})=>e.click.card.primary.color.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({$isSelected:e,theme:t})=>e?`border-color: ${t.click.button.basic.color.primary.stroke.active};`:""),nx=W.div.withConfig({componentId:"sc-2dguvi-1"})(["display:flex;flex-direction:column;align-items:",";gap:",";h3{color:",";}svg{height:",";width:",";}"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all),rx=W.div.withConfig({componentId:"sc-2dguvi-2"})(["width:100%;display:flex;flex-direction:column;align-self:",";gap:",";flex:1;"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap),ox=e=>e==="center"?"center":e==="start"?"left":"right",ix=({alignContent:e,title:t,icon:n,hasShadow:o=!1,description:i,infoUrl:a,infoText:s,size:c,disabled:u=!1,onButtonClick:g,isSelected:C,children:v,...y})=>{const _=M=>{typeof g=="function"&&g(M),a&&a.length>0&&window.open(a,"_blank")},j=a||typeof g=="function"?ul:"div";return r.jsxs(tx,{$alignContent:e,$hasShadow:o,$size:c,$disabled:u,$isSelected:C,tabIndex:0,...y,children:[(n||t)&&r.jsxs(nx,{$size:c,$disabled:u,$alignContent:e,children:[n&&r.jsx(rt,{name:n,"aria-hidden":!0}),t&&r.jsx(n0,{type:"h3",children:t})]}),(i||v)&&r.jsxs(rx,{$size:c,$alignContent:e,children:[i&&r.jsx(bo,{color:"muted",align:ox(e??"start"),children:i}),v]}),c=="sm"&&r.jsx(Qc,{size:"sm"}),s&&r.jsx(j,{onClick:_,disabled:u,children:s})]})},ax=W.div.withConfig({componentId:"sc-1qnbjoa-0"})(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]),I1=W.div.withConfig({componentId:"sc-1qnbjoa-1"})(["display:flex;flex-direction:column;align-self:center;gap:",";flex:1;"],({theme:e})=>e.click.card.horizontal.space.gap),lx=W.div.withConfig({componentId:"sc-1qnbjoa-2"})(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;",""],({theme:e,$color:t,$isSelected:n,$disabled:o})=>`
     background: ${e.click.card.horizontal[t].color.background.default};
     color: ${e.click.card.horizontal[t].color.title.default};
     border-radius: ${e.click.card.horizontal.radii.all};
@@ -461,7 +461,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),gt=de,Ge=xe);const Ce=
     ${n&&`min-height: ${n}`};
   `,({$overflow:e})=>`
     ${e&&`overflow: ${e}`};
-  `,({$wrap:e="nowrap"})=>e,({theme:e,$gapSize:t})=>e.click.container.gap[t],({$maxWidth:e})=>e??"none",({$minWidth:e})=>e??"none",({theme:e,$paddingSize:t})=>e.click.container.space[t],({$fillWidth:e=!0})=>e===!0?"100%":"auto",({$orientation:e="horizontal"})=>e==="horizontal"?"row":"column",({$alignItems:e="center"})=>e,({$justifyContent:e="left"})=>e==="start"?"start":`${e}`,({theme:e})=>e.breakpoint.sizes.md,({$isResponsive:e=!0,$fillWidth:t=!0})=>e===!0||t===!0?"100%":"auto",({$isResponsive:e=!0})=>e===!0?"none":"auto",({$isResponsive:e=!0})=>e===!0?"column":"auto"),hr=p.forwardRef(py),q6="Dialog",[Q6,DA]=pn(q6),[gy,_r]=Q6(q6),e7=e=>{const{__scopeDialog:t,children:n,open:o,defaultOpen:i,onOpenChange:a,modal:s=!0}=e,c=p.useRef(null),u=p.useRef(null),[g=!1,C]=_n({prop:o,defaultProp:i,onChange:a});return p.createElement(gy,{scope:t,triggerRef:c,contentRef:u,contentId:tr(),titleId:tr(),descriptionId:tr(),open:g,onOpenChange:C,onOpenToggle:p.useCallback(()=>C(v=>!v),[C]),modal:s},n)},vy="DialogTrigger",t7=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(vy,n),a=_t(t,i.triggerRef);return p.createElement(ot.button,ue({type:"button","aria-haspopup":"dialog","aria-expanded":i.open,"aria-controls":i.contentId,"data-state":k0(i.open)},o,{ref:a,onClick:Ee(e.onClick,i.onOpenToggle)}))}),n7="DialogPortal",[my,r7]=Q6(n7,{forceMount:void 0}),o7=e=>{const{__scopeDialog:t,forceMount:n,children:o,container:i}=e,a=_r(n7,t);return p.createElement(my,{scope:t,forceMount:n},p.Children.map(o,s=>p.createElement(Cn,{present:n||a.open},p.createElement($1,{asChild:!0,container:i},s))))},y0="DialogOverlay",i7=p.forwardRef((e,t)=>{const n=r7(y0,e.__scopeDialog),{forceMount:o=n.forceMount,...i}=e,a=_r(y0,e.__scopeDialog);return a.modal?p.createElement(Cn,{present:o||a.open},p.createElement(by,ue({},i,{ref:t}))):null}),by=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(y0,n);return p.createElement(H3,{as:$i,allowPinchZoom:!0,shards:[i.contentRef]},p.createElement(ot.div,ue({"data-state":k0(i.open)},o,{ref:t,style:{pointerEvents:"auto",...o.style}})))}),gl="DialogContent",a7=p.forwardRef((e,t)=>{const n=r7(gl,e.__scopeDialog),{forceMount:o=n.forceMount,...i}=e,a=_r(gl,e.__scopeDialog);return p.createElement(Cn,{present:o||a.open},a.modal?p.createElement(Cy,ue({},i,{ref:t})):p.createElement(xy,ue({},i,{ref:t})))}),Cy=p.forwardRef((e,t)=>{const n=_r(gl,e.__scopeDialog),o=p.useRef(null),i=_t(t,n.contentRef,o);return p.useEffect(()=>{const a=o.current;if(a)return T3(a)},[]),p.createElement(l7,ue({},e,{ref:i,trapFocus:n.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:Ee(e.onCloseAutoFocus,a=>{var s;a.preventDefault(),(s=n.triggerRef.current)===null||s===void 0||s.focus()}),onPointerDownOutside:Ee(e.onPointerDownOutside,a=>{const s=a.detail.originalEvent,c=s.button===0&&s.ctrlKey===!0;(s.button===2||c)&&a.preventDefault()}),onFocusOutside:Ee(e.onFocusOutside,a=>a.preventDefault())}))}),xy=p.forwardRef((e,t)=>{const n=_r(gl,e.__scopeDialog),o=p.useRef(!1),i=p.useRef(!1);return p.createElement(l7,ue({},e,{ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:a=>{var s;if((s=e.onCloseAutoFocus)===null||s===void 0||s.call(e,a),!a.defaultPrevented){var c;o.current||(c=n.triggerRef.current)===null||c===void 0||c.focus(),a.preventDefault()}o.current=!1,i.current=!1},onInteractOutside:a=>{var s,c;(s=e.onInteractOutside)===null||s===void 0||s.call(e,a),a.defaultPrevented||(o.current=!0,a.detail.originalEvent.type==="pointerdown"&&(i.current=!0));const u=a.target;((c=n.triggerRef.current)===null||c===void 0?void 0:c.contains(u))&&a.preventDefault(),a.detail.originalEvent.type==="focusin"&&i.current&&a.preventDefault()}}))}),l7=p.forwardRef((e,t)=>{const{__scopeDialog:n,trapFocus:o,onOpenAutoFocus:i,onCloseAutoFocus:a,...s}=e,c=_r(gl,n),u=p.useRef(null),g=_t(t,u);return h3(),p.createElement(p.Fragment,null,p.createElement(m3,{asChild:!0,loop:!0,trapped:o,onMountAutoFocus:i,onUnmountAutoFocus:a},p.createElement(w1,ue({role:"dialog",id:c.contentId,"aria-describedby":c.descriptionId,"aria-labelledby":c.titleId,"data-state":k0(c.open)},s,{ref:g,onDismiss:()=>c.onOpenChange(!1)}))),!1)}),wy="DialogTitle",yy=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(wy,n);return p.createElement(ot.h2,ue({id:i.titleId},o,{ref:t}))}),ky="DialogDescription",Sy=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(ky,n);return p.createElement(ot.p,ue({id:i.descriptionId},o,{ref:t}))}),Ly="DialogClose",bc=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(Ly,n);return p.createElement(ot.button,ue({type:"button"},o,{ref:t,onClick:Ee(e.onClick,()=>i.onOpenChange(!1))}))});function k0(e){return e?"open":"closed"}const $y=e7,My=t7,jy=o7,Ey=i7,_y=a7,s7=bc,ti=({children:e,...t})=>r.jsx($y,{...t,children:e}),Iy=W(My).withConfig({componentId:"sc-1wr6otn-0"})(["width:fit-content;background:transparent;border:none;cursor:pointer;"]),c7=({children:e,...t})=>r.jsx(Iy,{...t,children:e});c7.displayName="DialogTrigger",ti.Trigger=c7;const d7=({label:e="Close",type:t="secondary",...n})=>r.jsx(s7,{asChild:!0,children:r.jsx(ul,{type:t,label:e,...n})});d7.displayName="DialogClose",ti.Close=d7;const Ty=W.keyframes({"0%":{opacity:0},"100%":{opacity:1}}),Fy=W.keyframes({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),Oy=W(Ey).withConfig({componentId:"sc-1wr6otn-1"})(["background-color:",";position:fixed;inset:0;animation:"," 150ms cubic-bezier(0.16,1,0.3,1);"],({theme:e})=>e.click.dialog.color.opaqueBackground.default,Ty),Py=W(_y).withConfig({componentId:"sc-1wr6otn-2"})(["background:",";border-radius:",";padding:"," ",";box-shadow:",";border:1px solid ",";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:"," 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"],({theme:e})=>e.click.dialog.color.background.default,({theme:e})=>e.click.dialog.radii.all,({theme:e})=>e.click.dialog.space.y,({theme:e})=>e.click.dialog.space.x,({theme:e})=>e.click.dialog.shadow.default,({theme:e})=>e.click.global.color.stroke.default,Fy),Hy=W.div.withConfig({componentId:"sc-1wr6otn-3"})(["display:flex;justify-content:space-between;align-items:center;min-height:",";"],({theme:e})=>e.sizes[9]),Dy=W.h2.withConfig({componentId:"sc-1wr6otn-4"})(["font:",";padding:0;margin:0;"],({theme:e})=>e.click.dialog.typography.title.default),Ay=({onClose:e})=>r.jsx(s7,{asChild:!0,children:r.jsx(a3,{onClick:e,children:r.jsx(rt,{name:"cross",size:"lg"})})}),u7=({title:e,children:t,showClose:n,onClose:o,forceMount:i,container:a,showOverlay:s=!0,...c})=>r.jsxs(jy,{forceMount:i,container:a,children:[s&&r.jsx(Oy,{}),r.jsxs(Py,{...c,children:[r.jsxs(Hy,{children:[r.jsx(Dy,{children:e}),n&&r.jsx(Ay,{onClose:o})]}),r.jsx(Qc,{size:"sm"}),t]})]});u7.displayName="DialogContent",ti.Content=u7;const Ry=W.div.withConfig({componentId:"sc-6eozxy-0"})(["display:flex;justify-content:flex-end;gap:",";"],e=>e.theme.click.dialog.space.gap),Vy=W.div.withConfig({componentId:"sc-6eozxy-1"})(["overflow:hidden;display:flex;flex-direction:column;"]),By=({open:e,onCancel:t,title:n,message:o,loading:i,primaryActionType:a="primary",primaryActionLabel:s="Confirm",secondaryActionLabel:c="Cancel",onConfirm:u,children:g,showClose:C,...v})=>{if(g&&o)throw new Error("You can't pass children and message props at the same time");return r.jsx(ti,{open:e,onOpenChange:y=>{!y&&t&&t()},children:r.jsxs(Vy,{as:ti.Content,title:n,showClose:C,...v,children:[r.jsx(hr,{overflow:"auto",grow:"1",orientation:"vertical",children:g||r.jsx(bo,{children:o})}),r.jsx(Vi,{size:"xl"}),r.jsxs(Ry,{children:[r.jsx(ti.Close,{label:c}),r.jsx(ti.Close,{loading:!!i,disabled:!!i,type:a,label:s,onClick:()=>{u&&u()}})]})]})})},xo=({modal:e=!1,...t})=>r.jsx(e7,{modal:e,...t}),f7=({children:e,...t})=>r.jsx(t7,{asChild:!0,...t,children:r.jsx("div",{children:e})});f7.displayName="Flyout.Trigger",xo.Trigger=f7;const Ny=()=>W.keyframes({from:{width:0},to:{width:"fit-content"}}),Zy=W(a7).withConfig({componentId:"sc-1vtv6sf-0"})(["display:flex;flex-direction:column;align-items:center;overflow:hidden;top:0;bottom:0;width:fit-content;--flyout-width:",";animation:"," 500ms cubic-bezier(0.16,1,0.3,1) forwards;",""],({theme:e,$size:t="default",$width:n})=>n||e.click.flyout.size[t].width,Ny,({theme:e,$strategy:t,$type:n="default",$align:o})=>`
+  `,({$wrap:e="nowrap"})=>e,({theme:e,$gapSize:t})=>e.click.container.gap[t],({$maxWidth:e})=>e??"none",({$minWidth:e})=>e??"none",({theme:e,$paddingSize:t})=>e.click.container.space[t],({$fillWidth:e=!0})=>e===!0?"100%":"auto",({$orientation:e="horizontal"})=>e==="horizontal"?"row":"column",({$alignItems:e="center"})=>e,({$justifyContent:e="left"})=>e==="start"?"start":`${e}`,({theme:e})=>e.breakpoint.sizes.md,({$isResponsive:e=!0,$fillWidth:t=!0})=>e===!0||t===!0?"100%":"auto",({$isResponsive:e=!0})=>e===!0?"none":"auto",({$isResponsive:e=!0})=>e===!0?"column":"auto"),hr=p.forwardRef(py),q6="Dialog",[Q6,DA]=pn(q6),[gy,_r]=Q6(q6),e7=e=>{const{__scopeDialog:t,children:n,open:o,defaultOpen:i,onOpenChange:a,modal:s=!0}=e,c=p.useRef(null),u=p.useRef(null),[g=!1,C]=_n({prop:o,defaultProp:i,onChange:a});return p.createElement(gy,{scope:t,triggerRef:c,contentRef:u,contentId:tr(),titleId:tr(),descriptionId:tr(),open:g,onOpenChange:C,onOpenToggle:p.useCallback(()=>C(v=>!v),[C]),modal:s},n)},vy="DialogTrigger",t7=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(vy,n),a=_t(t,i.triggerRef);return p.createElement(ot.button,ue({type:"button","aria-haspopup":"dialog","aria-expanded":i.open,"aria-controls":i.contentId,"data-state":k0(i.open)},o,{ref:a,onClick:Ee(e.onClick,i.onOpenToggle)}))}),n7="DialogPortal",[my,r7]=Q6(n7,{forceMount:void 0}),o7=e=>{const{__scopeDialog:t,forceMount:n,children:o,container:i}=e,a=_r(n7,t);return p.createElement(my,{scope:t,forceMount:n},p.Children.map(o,s=>p.createElement(Cn,{present:n||a.open},p.createElement($1,{asChild:!0,container:i},s))))},y0="DialogOverlay",i7=p.forwardRef((e,t)=>{const n=r7(y0,e.__scopeDialog),{forceMount:o=n.forceMount,...i}=e,a=_r(y0,e.__scopeDialog);return a.modal?p.createElement(Cn,{present:o||a.open},p.createElement(by,ue({},i,{ref:t}))):null}),by=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(y0,n);return p.createElement(H3,{as:$i,allowPinchZoom:!0,shards:[i.contentRef]},p.createElement(ot.div,ue({"data-state":k0(i.open)},o,{ref:t,style:{pointerEvents:"auto",...o.style}})))}),gl="DialogContent",a7=p.forwardRef((e,t)=>{const n=r7(gl,e.__scopeDialog),{forceMount:o=n.forceMount,...i}=e,a=_r(gl,e.__scopeDialog);return p.createElement(Cn,{present:o||a.open},a.modal?p.createElement(Cy,ue({},i,{ref:t})):p.createElement(xy,ue({},i,{ref:t})))}),Cy=p.forwardRef((e,t)=>{const n=_r(gl,e.__scopeDialog),o=p.useRef(null),i=_t(t,n.contentRef,o);return p.useEffect(()=>{const a=o.current;if(a)return T3(a)},[]),p.createElement(l7,ue({},e,{ref:i,trapFocus:n.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:Ee(e.onCloseAutoFocus,a=>{var s;a.preventDefault(),(s=n.triggerRef.current)===null||s===void 0||s.focus()}),onPointerDownOutside:Ee(e.onPointerDownOutside,a=>{const s=a.detail.originalEvent,c=s.button===0&&s.ctrlKey===!0;(s.button===2||c)&&a.preventDefault()}),onFocusOutside:Ee(e.onFocusOutside,a=>a.preventDefault())}))}),xy=p.forwardRef((e,t)=>{const n=_r(gl,e.__scopeDialog),o=p.useRef(!1),i=p.useRef(!1);return p.createElement(l7,ue({},e,{ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:a=>{var s;if((s=e.onCloseAutoFocus)===null||s===void 0||s.call(e,a),!a.defaultPrevented){var c;o.current||(c=n.triggerRef.current)===null||c===void 0||c.focus(),a.preventDefault()}o.current=!1,i.current=!1},onInteractOutside:a=>{var s,c;(s=e.onInteractOutside)===null||s===void 0||s.call(e,a),a.defaultPrevented||(o.current=!0,a.detail.originalEvent.type==="pointerdown"&&(i.current=!0));const u=a.target;((c=n.triggerRef.current)===null||c===void 0?void 0:c.contains(u))&&a.preventDefault(),a.detail.originalEvent.type==="focusin"&&i.current&&a.preventDefault()}}))}),l7=p.forwardRef((e,t)=>{const{__scopeDialog:n,trapFocus:o,onOpenAutoFocus:i,onCloseAutoFocus:a,...s}=e,c=_r(gl,n),u=p.useRef(null),g=_t(t,u);return h3(),p.createElement(p.Fragment,null,p.createElement(m3,{asChild:!0,loop:!0,trapped:o,onMountAutoFocus:i,onUnmountAutoFocus:a},p.createElement(w1,ue({role:"dialog",id:c.contentId,"aria-describedby":c.descriptionId,"aria-labelledby":c.titleId,"data-state":k0(c.open)},s,{ref:g,onDismiss:()=>c.onOpenChange(!1)}))),!1)}),wy="DialogTitle",yy=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(wy,n);return p.createElement(ot.h2,ue({id:i.titleId},o,{ref:t}))}),ky="DialogDescription",Sy=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(ky,n);return p.createElement(ot.p,ue({id:i.descriptionId},o,{ref:t}))}),Ly="DialogClose",bc=p.forwardRef((e,t)=>{const{__scopeDialog:n,...o}=e,i=_r(Ly,n);return p.createElement(ot.button,ue({type:"button"},o,{ref:t,onClick:Ee(e.onClick,()=>i.onOpenChange(!1))}))});function k0(e){return e?"open":"closed"}const $y=e7,My=t7,jy=o7,Ey=i7,_y=a7,s7=bc,ti=({children:e,...t})=>r.jsx($y,{...t,children:e}),Iy=W(My).withConfig({componentId:"sc-1wr6otn-0"})(["width:fit-content;background:transparent;border:none;cursor:pointer;"]),c7=({children:e,...t})=>r.jsx(Iy,{...t,children:e});c7.displayName="DialogTrigger",ti.Trigger=c7;const d7=({label:e="Close",type:t="secondary",...n})=>r.jsx(s7,{asChild:!0,children:r.jsx(ul,{type:t,label:e,...n})});d7.displayName="DialogClose",ti.Close=d7;const Ty=W.keyframes({"0%":{opacity:0},"100%":{opacity:1}}),Fy=W.keyframes({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),Oy=W(Ey).withConfig({componentId:"sc-1wr6otn-1"})(["background-color:",";position:fixed;inset:0;animation:"," 150ms cubic-bezier(0.16,1,0.3,1);"],({theme:e})=>e.click.dialog.color.opaqueBackground.default,Ty),Py=W(_y).withConfig({componentId:"sc-1wr6otn-2"})(["background:",";border-radius:",";padding:"," ",";box-shadow:",";border:1px solid ",";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:"," 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"],({theme:e})=>e.click.dialog.color.background.default,({theme:e})=>e.click.dialog.radii.all,({theme:e})=>e.click.dialog.space.y,({theme:e})=>e.click.dialog.space.x,({theme:e})=>e.click.dialog.shadow.default,({theme:e})=>e.click.global.color.stroke.default,Fy),Hy=W.div.withConfig({componentId:"sc-1wr6otn-3"})(["display:flex;justify-content:space-between;align-items:center;min-height:",";"],({theme:e})=>e.sizes[9]),Dy=W.h2.withConfig({componentId:"sc-1wr6otn-4"})(["font:",";padding:0;margin:0;"],({theme:e})=>e.click.dialog.typography.title.default),Ay=({onClose:e})=>r.jsx(s7,{asChild:!0,children:r.jsx(a3,{onClick:e,children:r.jsx(rt,{name:"cross",size:"lg"})})}),u7=({title:e,children:t,showClose:n,onClose:o,forceMount:i,container:a,showOverlay:s=!0,...c})=>r.jsxs(jy,{forceMount:i,container:a,children:[s&&r.jsx(Oy,{}),r.jsxs(Py,{...c,children:[r.jsxs(Hy,{children:[r.jsx(Dy,{children:e}),n&&r.jsx(Ay,{onClose:o})]}),r.jsx(Qc,{size:"sm"}),t]})]});u7.displayName="DialogContent",ti.Content=u7;const Ry=W.div.withConfig({componentId:"sc-6eozxy-0"})(["display:flex;justify-content:flex-end;gap:",";"],e=>e.theme.click.dialog.space.gap),Vy=W.div.withConfig({componentId:"sc-6eozxy-1"})(["overflow:hidden;display:flex;flex-direction:column;"]),By=({children:e,disabled:t,loading:n,message:o,onCancel:i,onConfirm:a,open:s,primaryActionLabel:c="Confirm",primaryActionType:u="primary",secondaryActionLabel:g="Cancel",showClose:C,title:v,...y})=>{if(e&&o)throw new Error("You can't pass children and message props at the same time");return r.jsx(ti,{open:s,onOpenChange:_=>{!_&&i&&i()},children:r.jsxs(Vy,{as:ti.Content,title:v,showClose:C,...y,children:[r.jsx(hr,{overflow:"auto",grow:"1",orientation:"vertical",children:e||r.jsx(bo,{children:o})}),r.jsx(Vi,{size:"xl"}),r.jsxs(Ry,{children:[r.jsx(ti.Close,{label:g,"data-testid":"cancel-action-button"}),r.jsx(ti.Close,{loading:!!n,disabled:!!t||!!n,type:u,label:c,onClick:()=>{a&&a()},"data-testid":"confirm-action-button"})]})]})})},xo=({modal:e=!1,...t})=>r.jsx(e7,{modal:e,...t}),f7=({children:e,...t})=>r.jsx(t7,{asChild:!0,...t,children:r.jsx("div",{children:e})});f7.displayName="Flyout.Trigger",xo.Trigger=f7;const Ny=()=>W.keyframes({from:{width:0},to:{width:"fit-content"}}),Zy=W(a7).withConfig({componentId:"sc-1vtv6sf-0"})(["display:flex;flex-direction:column;align-items:center;overflow:hidden;top:0;bottom:0;width:fit-content;--flyout-width:",";animation:"," 500ms cubic-bezier(0.16,1,0.3,1) forwards;",""],({theme:e,$size:t="default",$width:n})=>n||e.click.flyout.size[t].width,Ny,({theme:e,$strategy:t,$type:n="default",$align:o})=>`
     ${o==="start"?"left":"right"}: 0;
     max-width: 100%;
     position: ${t};

package/dist/components/CardSecondary/CardSecondary.d.ts

@@ -1,7 +1,7 @@
 import { IconName } from '../../components';
-import { ReactNode } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
-export interface CardSecondaryProps {
+export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     title: string;
     icon: IconName;
     badgeState?: BadgeState;
@@ -12,4 +12,4 @@ export interface CardSecondaryProps {
     infoUrl?: string;
     infoText?: string;
 }
-export declare const CardSecondary: ({ title, icon, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardSecondary: ({ title, icon, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,17 +1,18 @@
 import { ReactElement, ReactNode } from "react";
 type DialogPrimaryAction = "primary" | "danger";
 export interface ConfirmationDialogProps {
-    open?: boolean;
+    children?: ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    message?: string;
     onCancel?: () => void;
-    title: string;
-    primaryActionType?: DialogPrimaryAction;
+    onConfirm?: (() => void) | (() => Promise<void>);
+    open?: boolean;
     primaryActionLabel?: string;
+    primaryActionType?: DialogPrimaryAction;
     secondaryActionLabel?: string;
-    message?: string;
-    children?: ReactNode;
-    loading?: boolean;
     showClose?: boolean;
-    onConfirm?: (() => void) | (() => Promise<void>);
+    title: string;
 }
-export declare const ConfirmationDialog: ({ open, onCancel, title, message, loading, primaryActionType, primaryActionLabel, secondaryActionLabel, onConfirm, children, showClose, ...props }: ConfirmationDialogProps) => ReactElement;
+export declare const ConfirmationDialog: ({ children, disabled, loading, message, onCancel, onConfirm, open, primaryActionLabel, primaryActionType, secondaryActionLabel, showClose, title, ...props }: ConfirmationDialogProps) => ReactElement;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.118",
+  "version": "0.0.119",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",