@clickhouse/click-ui 0.0.142 → 0.0.144

package/dist/click-ui.es.js

@@ -8932,21 +8932,26 @@ const Accordion = ({
   children,
   fillWidth = false,
   ...delegated
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
   /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, fillWidth, children: title })
   ] }),
   /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
     children
   ] })
 ] }) });
-const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-1ysh219-0"
+})(["", ";"], ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  componentId: "sc-1ysh219-1"
 })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
   theme: theme2,
   $size = "md",
@@ -8970,21 +8975,21 @@ const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withC
   $fillWidth
 }) => $fillWidth && "width: 100%");
 const AccordionIconWrapper = styled.div.withConfig({
-  componentId: "sc-1ysh219-1"
+  componentId: "sc-1ysh219-2"
 })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
 const AccordionIconsWrapper = styled.div.withConfig({
-  componentId: "sc-1ysh219-2"
+  componentId: "sc-1ysh219-3"
 })(["display:flex;align-items:center;justify-content:center;"]);
 const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
-  componentId: "sc-1ysh219-3"
+  componentId: "sc-1ysh219-4"
 })([""]);
 styled(Accordion).withConfig({
-  componentId: "sc-1ysh219-4"
+  componentId: "sc-1ysh219-5"
 })(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
   theme: theme2
 }) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
 const AccordionToExport = styled(Accordion).withConfig({
-  componentId: "sc-1ysh219-5"
+  componentId: "sc-1ysh219-6"
 })([""]);
 const stateIconMap = {
   neutral: "information",
@@ -10182,11 +10187,12 @@ const _Text = ({
   className,
   children,
   component,
+  fillWidth,
   ...props
-}, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, className, ...props, children });
+}, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, $fillWidth: fillWidth, className, ...props, children });
 const CuiText = styled.p.withConfig({
   componentId: "sc-6r74pj-0"
-})(["font:", ";color:", ";text-align:", ";margin:0;"], ({
+})(["font:", ";color:", ";text-align:", ";margin:0;", ";"], ({
   $size = "md",
   $weight = "normal",
   theme: theme2
@@ -10195,7 +10201,9 @@ const CuiText = styled.p.withConfig({
   theme: theme2
 }) => theme2.click.global.color.text[$color], ({
   $align = "left"
-}) => $align);
+}) => $align, ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
 _Text.displayName = "Text";
 const Text = forwardRef(_Text);
 const Header$4 = styled.div.withConfig({
@@ -10291,9 +10299,83 @@ const CardSecondary = ({
     ] })
   ] });
 };
-const TopBadgeWrapper = styled.div.withConfig({
+const _Container = ({
+  component,
+  alignItems,
+  children,
+  fillWidth = true,
+  gap = "none",
+  grow,
+  shrink,
+  isResponsive,
+  justifyContent = "start",
+  maxWidth,
+  minWidth,
+  orientation = "horizontal",
+  padding = "none",
+  wrap = "nowrap",
+  fillHeight,
+  maxHeight,
+  minHeight,
+  overflow,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$9, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
+};
+const Wrapper$9 = styled.div.withConfig({
+  componentId: "sc-bcplth-0"
+})(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
+  $grow,
+  $shrink
+}) => `
+    ${$grow && `flex: ${$grow}`};
+    ${$shrink && `flex-shrink: ${$shrink}`};
+  `, ({
+  $fillHeight,
+  $maxHeight,
+  $minHeight
+}) => `
+    ${$fillHeight && "height: 100%"};
+    ${$maxHeight && `max-height: ${$maxHeight}`};
+    ${$minHeight && `min-height: ${$minHeight}`};
+  `, ({
+  $overflow
+}) => `
+    ${$overflow && `overflow: ${$overflow}`};
+  `, ({
+  $wrap = "nowrap"
+}) => $wrap, ({
+  theme: theme2,
+  $gapSize
+}) => theme2.click.container.gap[$gapSize], ({
+  $maxWidth
+}) => $maxWidth ?? "none", ({
+  $minWidth
+}) => $minWidth ?? "none", ({
+  theme: theme2,
+  $paddingSize
+}) => theme2.click.container.space[$paddingSize], ({
+  $fillWidth = true
+}) => $fillWidth === true ? "100%" : "auto", ({
+  $orientation = "horizontal"
+}) => $orientation === "horizontal" ? "row" : "column", ({
+  $alignItems = "center"
+}) => $alignItems, ({
+  $justifyContent = "left"
+}) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.md, ({
+  $isResponsive = true,
+  $fillWidth = true
+}) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
+  $isResponsive = true
+}) => $isResponsive === true ? "none" : "auto", ({
+  $isResponsive = true
+}) => $isResponsive === true ? "column" : "auto");
+const Container = forwardRef(_Container);
+const TopBadgeWrapper = styled(Container).withConfig({
   componentId: "sc-1d5pqpo-0"
-})(["position:relative;width:100%;max-width:100%;"]);
+})(["position:relative;"]);
 const CardPrimaryTopBadge = styled(Badge).withConfig({
   componentId: "sc-1d5pqpo-1"
 })(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
@@ -10306,12 +10388,12 @@ const withTopBadge = (Component2) => ({
   topBadgeText,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TopBadgeWrapper, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TopBadgeWrapper, { alignItems: "stretch", fillWidth: true, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ...props }),
     topBadgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, $isSelected: props.isSelected || false })
   ] });
 };
-const Wrapper$9 = styled.div.withConfig({
+const Wrapper$8 = styled.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:", ';}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}", ""], ({
   theme: theme2
@@ -10416,7 +10498,7 @@ const Card = ({
     }
   };
   const Component2 = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$9, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
     (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
       icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
       title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
@@ -10438,7 +10520,7 @@ const Description = styled.div.withConfig({
 })(["display:flex;flex-direction:column;align-self:center;gap:", ";flex:1;"], ({
   theme: theme2
 }) => theme2.click.card.horizontal.space.gap);
-const Wrapper$8 = styled.div.withConfig({
+const Wrapper$7 = styled.div.withConfig({
   componentId: "sc-1qnbjoa-2"
 })(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;", ""], ({
   theme: theme2,
@@ -10517,7 +10599,7 @@ const CardHorizontal = ({
   color = "default",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$7, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
     icon && /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentWrapper, { children: [
       title && /* @__PURE__ */ jsxRuntimeExports.jsx(Header$2, { children: title }),
@@ -10541,7 +10623,7 @@ const Background = styled.div.withConfig({
       background: ${theme2.click.card.promotion.color.stroke.focus};
     }
   `);
-const Wrapper$7 = styled.div.withConfig({
+const Wrapper$6 = styled.div.withConfig({
   componentId: "sc-6jamj6-1"
 })(["display:flex;width:100%;align-items:center;justify-content:flex-start;cursor:pointer;", ""], ({
   theme: theme2
@@ -10582,7 +10664,7 @@ const CardPromotion = ({
   ...props
 }) => {
   const [isVisible, setIsVisible] = useState(true);
-  return isVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Background, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$7, { $dismissible: dismissible, ...props, children: [
+  return isVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Background, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $dismissible: dismissible, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon, { name: icon, "aria-hidden": true }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: label }),
     dismissible && /* @__PURE__ */ jsxRuntimeExports.jsx(DismissWrapper, { "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "cross", "aria-label": "close" }) })
@@ -10739,7 +10821,7 @@ function $e698a72e93240346$var$getState(checked) {
 }
 const $e698a72e93240346$export$be92b6f5f03c0fe9 = $e698a72e93240346$export$48513f6b9f8ce62d;
 const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
-const Wrapper$6 = styled(FormRoot).withConfig({
+const Wrapper$5 = styled(FormRoot).withConfig({
   componentId: "sc-1sck1ja-0"
 })(["align-items:center;max-width:fit-content;"]);
 const Checkbox = ({
@@ -10751,7 +10833,7 @@ const Checkbox = ({
   ...delegated
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
     label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
@@ -14299,80 +14381,6 @@ const CodeBlock = ({
     }, showLineNumbers, wrapLines: wrap || wrapLines, wrapLongLines: wrap || wrapLines, children })
   ] });
 };
-const _Container = ({
-  component,
-  alignItems,
-  children,
-  fillWidth = true,
-  gap = "none",
-  grow,
-  shrink,
-  isResponsive,
-  justifyContent = "start",
-  maxWidth,
-  minWidth,
-  orientation = "horizontal",
-  padding = "none",
-  wrap = "nowrap",
-  fillHeight,
-  maxHeight,
-  minHeight,
-  overflow,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$5, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
-};
-const Wrapper$5 = styled.div.withConfig({
-  componentId: "sc-bcplth-0"
-})(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
-  $grow,
-  $shrink
-}) => `
-    ${$grow && `flex: ${$grow}`};
-    ${$shrink && `flex-shrink: ${$shrink}`};
-  `, ({
-  $fillHeight,
-  $maxHeight,
-  $minHeight
-}) => `
-    ${$fillHeight && "height: 100%"};
-    ${$maxHeight && `max-height: ${$maxHeight}`};
-    ${$minHeight && `min-height: ${$minHeight}`};
-  `, ({
-  $overflow
-}) => `
-    ${$overflow && `overflow: ${$overflow}`};
-  `, ({
-  $wrap = "nowrap"
-}) => $wrap, ({
-  theme: theme2,
-  $gapSize
-}) => theme2.click.container.gap[$gapSize], ({
-  $maxWidth
-}) => $maxWidth ?? "none", ({
-  $minWidth
-}) => $minWidth ?? "none", ({
-  theme: theme2,
-  $paddingSize
-}) => theme2.click.container.space[$paddingSize], ({
-  $fillWidth = true
-}) => $fillWidth === true ? "100%" : "auto", ({
-  $orientation = "horizontal"
-}) => $orientation === "horizontal" ? "row" : "column", ({
-  $alignItems = "center"
-}) => $alignItems, ({
-  $justifyContent = "left"
-}) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
-  theme: theme2
-}) => theme2.breakpoint.sizes.md, ({
-  $isResponsive = true,
-  $fillWidth = true
-}) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
-  $isResponsive = true
-}) => $isResponsive === true ? "none" : "auto", ({
-  $isResponsive = true
-}) => $isResponsive === true ? "column" : "auto");
-const Container = forwardRef(_Container);
 const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";
 const [$5d3850c4d0b4e6c7$var$createDialogContext, $5d3850c4d0b4e6c7$export$cc702773b8ea3e41] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($5d3850c4d0b4e6c7$var$DIALOG_NAME);
 const [$5d3850c4d0b4e6c7$var$DialogProvider, $5d3850c4d0b4e6c7$var$useDialogContext] = $5d3850c4d0b4e6c7$var$createDialogContext($5d3850c4d0b4e6c7$var$DIALOG_NAME);
@@ -37414,7 +37422,7 @@ const NavContext = createContext({
 });
 const CollapsibleContainer = styled.div.withConfig({
   componentId: "sc-guwmyz-0"
-})(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+})(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}']);
 const Collapsible = ({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -37464,7 +37472,7 @@ const CollapsipleHeader = forwardRef(({
     if (typeof onClickProp === "function") {
       onClickProp(e);
     }
-  }, ...props, children: [
+  }, "data-collapsible-header": true, ...props, children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {}),
     children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {})

package/dist/click-ui.umd.js

@@ -8949,21 +8949,26 @@ var __publicField = (obj, key, value) => {
     children,
     fillWidth = false,
     ...delegated
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, fillWidth, children: title })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
       children
     ] })
   ] }) });
-  const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-1ysh219-0"
+  })(["", ";"], ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
+  const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+    componentId: "sc-1ysh219-1"
   })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
     theme: theme2,
     $size = "md",
@@ -8987,21 +8992,21 @@ var __publicField = (obj, key, value) => {
     $fillWidth
   }) => $fillWidth && "width: 100%");
   const AccordionIconWrapper = styled.div.withConfig({
-    componentId: "sc-1ysh219-1"
+    componentId: "sc-1ysh219-2"
   })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
   const AccordionIconsWrapper = styled.div.withConfig({
-    componentId: "sc-1ysh219-2"
+    componentId: "sc-1ysh219-3"
   })(["display:flex;align-items:center;justify-content:center;"]);
   const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
-    componentId: "sc-1ysh219-3"
+    componentId: "sc-1ysh219-4"
   })([""]);
   styled(Accordion).withConfig({
-    componentId: "sc-1ysh219-4"
+    componentId: "sc-1ysh219-5"
   })(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
     theme: theme2
   }) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
   const AccordionToExport = styled(Accordion).withConfig({
-    componentId: "sc-1ysh219-5"
+    componentId: "sc-1ysh219-6"
   })([""]);
   const stateIconMap = {
     neutral: "information",
@@ -10199,11 +10204,12 @@ var __publicField = (obj, key, value) => {
     className,
     children,
     component,
+    fillWidth,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, className, ...props, children });
+  }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, $fillWidth: fillWidth, className, ...props, children });
   const CuiText = styled.p.withConfig({
     componentId: "sc-6r74pj-0"
-  })(["font:", ";color:", ";text-align:", ";margin:0;"], ({
+  })(["font:", ";color:", ";text-align:", ";margin:0;", ";"], ({
     $size = "md",
     $weight = "normal",
     theme: theme2
@@ -10212,7 +10218,9 @@ var __publicField = (obj, key, value) => {
     theme: theme2
   }) => theme2.click.global.color.text[$color], ({
     $align = "left"
-  }) => $align);
+  }) => $align, ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
   _Text.displayName = "Text";
   const Text = React.forwardRef(_Text);
   const Header$4 = styled.div.withConfig({
@@ -10308,9 +10316,83 @@ var __publicField = (obj, key, value) => {
       ] })
     ] });
   };
-  const TopBadgeWrapper = styled.div.withConfig({
+  const _Container = ({
+    component,
+    alignItems,
+    children,
+    fillWidth = true,
+    gap = "none",
+    grow,
+    shrink,
+    isResponsive,
+    justifyContent = "start",
+    maxWidth,
+    minWidth,
+    orientation = "horizontal",
+    padding = "none",
+    wrap = "nowrap",
+    fillHeight,
+    maxHeight,
+    minHeight,
+    overflow,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$9, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
+  };
+  const Wrapper$9 = styled.div.withConfig({
+    componentId: "sc-bcplth-0"
+  })(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
+    $grow,
+    $shrink
+  }) => `
+    ${$grow && `flex: ${$grow}`};
+    ${$shrink && `flex-shrink: ${$shrink}`};
+  `, ({
+    $fillHeight,
+    $maxHeight,
+    $minHeight
+  }) => `
+    ${$fillHeight && "height: 100%"};
+    ${$maxHeight && `max-height: ${$maxHeight}`};
+    ${$minHeight && `min-height: ${$minHeight}`};
+  `, ({
+    $overflow
+  }) => `
+    ${$overflow && `overflow: ${$overflow}`};
+  `, ({
+    $wrap = "nowrap"
+  }) => $wrap, ({
+    theme: theme2,
+    $gapSize
+  }) => theme2.click.container.gap[$gapSize], ({
+    $maxWidth
+  }) => $maxWidth ?? "none", ({
+    $minWidth
+  }) => $minWidth ?? "none", ({
+    theme: theme2,
+    $paddingSize
+  }) => theme2.click.container.space[$paddingSize], ({
+    $fillWidth = true
+  }) => $fillWidth === true ? "100%" : "auto", ({
+    $orientation = "horizontal"
+  }) => $orientation === "horizontal" ? "row" : "column", ({
+    $alignItems = "center"
+  }) => $alignItems, ({
+    $justifyContent = "left"
+  }) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.md, ({
+    $isResponsive = true,
+    $fillWidth = true
+  }) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
+    $isResponsive = true
+  }) => $isResponsive === true ? "none" : "auto", ({
+    $isResponsive = true
+  }) => $isResponsive === true ? "column" : "auto");
+  const Container = React.forwardRef(_Container);
+  const TopBadgeWrapper = styled(Container).withConfig({
     componentId: "sc-1d5pqpo-0"
-  })(["position:relative;width:100%;max-width:100%;"]);
+  })(["position:relative;"]);
   const CardPrimaryTopBadge = styled(Badge).withConfig({
     componentId: "sc-1d5pqpo-1"
   })(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
@@ -10323,12 +10405,12 @@ var __publicField = (obj, key, value) => {
     topBadgeText,
     ...props
   }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(TopBadgeWrapper, { children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(TopBadgeWrapper, { alignItems: "stretch", fillWidth: true, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props }),
       topBadgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, $isSelected: props.isSelected || false })
     ] });
   };
-  const Wrapper$9 = styled.div.withConfig({
+  const Wrapper$8 = styled.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:", ';}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}", ""], ({
     theme: theme2
@@ -10433,7 +10515,7 @@ var __publicField = (obj, key, value) => {
       }
     };
     const Component = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$9, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
       (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
         icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
         title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
@@ -10455,7 +10537,7 @@ var __publicField = (obj, key, value) => {
   })(["display:flex;flex-direction:column;align-self:center;gap:", ";flex:1;"], ({
     theme: theme2
   }) => theme2.click.card.horizontal.space.gap);
-  const Wrapper$8 = styled.div.withConfig({
+  const Wrapper$7 = styled.div.withConfig({
     componentId: "sc-1qnbjoa-2"
   })(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;", ""], ({
     theme: theme2,
@@ -10534,7 +10616,7 @@ var __publicField = (obj, key, value) => {
     color = "default",
     ...props
   }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$7, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
       icon && /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentWrapper, { children: [
         title && /* @__PURE__ */ jsxRuntimeExports.jsx(Header$2, { children: title }),
@@ -10558,7 +10640,7 @@ var __publicField = (obj, key, value) => {
       background: ${theme2.click.card.promotion.color.stroke.focus};
     }
   `);
-  const Wrapper$7 = styled.div.withConfig({
+  const Wrapper$6 = styled.div.withConfig({
     componentId: "sc-6jamj6-1"
   })(["display:flex;width:100%;align-items:center;justify-content:flex-start;cursor:pointer;", ""], ({
     theme: theme2
@@ -10599,7 +10681,7 @@ var __publicField = (obj, key, value) => {
     ...props
   }) => {
     const [isVisible, setIsVisible] = React.useState(true);
-    return isVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Background, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$7, { $dismissible: dismissible, ...props, children: [
+    return isVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Background, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $dismissible: dismissible, ...props, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon, { name: icon, "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: label }),
       dismissible && /* @__PURE__ */ jsxRuntimeExports.jsx(DismissWrapper, { "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "cross", "aria-label": "close" }) })
@@ -10756,7 +10838,7 @@ var __publicField = (obj, key, value) => {
   }
   const $e698a72e93240346$export$be92b6f5f03c0fe9 = $e698a72e93240346$export$48513f6b9f8ce62d;
   const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
-  const Wrapper$6 = styled(FormRoot).withConfig({
+  const Wrapper$5 = styled(FormRoot).withConfig({
     componentId: "sc-1sck1ja-0"
   })(["align-items:center;max-width:fit-content;"]);
   const Checkbox = ({
@@ -10768,7 +10850,7 @@ var __publicField = (obj, key, value) => {
     ...delegated
   }) => {
     const defaultId = React.useId();
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
       label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
@@ -14316,80 +14398,6 @@ var __publicField = (obj, key, value) => {
       }, showLineNumbers, wrapLines: wrap || wrapLines, wrapLongLines: wrap || wrapLines, children })
     ] });
   };
-  const _Container = ({
-    component,
-    alignItems,
-    children,
-    fillWidth = true,
-    gap = "none",
-    grow,
-    shrink,
-    isResponsive,
-    justifyContent = "start",
-    maxWidth,
-    minWidth,
-    orientation = "horizontal",
-    padding = "none",
-    wrap = "nowrap",
-    fillHeight,
-    maxHeight,
-    minHeight,
-    overflow,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$5, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
-  };
-  const Wrapper$5 = styled.div.withConfig({
-    componentId: "sc-bcplth-0"
-  })(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
-    $grow,
-    $shrink
-  }) => `
-    ${$grow && `flex: ${$grow}`};
-    ${$shrink && `flex-shrink: ${$shrink}`};
-  `, ({
-    $fillHeight,
-    $maxHeight,
-    $minHeight
-  }) => `
-    ${$fillHeight && "height: 100%"};
-    ${$maxHeight && `max-height: ${$maxHeight}`};
-    ${$minHeight && `min-height: ${$minHeight}`};
-  `, ({
-    $overflow
-  }) => `
-    ${$overflow && `overflow: ${$overflow}`};
-  `, ({
-    $wrap = "nowrap"
-  }) => $wrap, ({
-    theme: theme2,
-    $gapSize
-  }) => theme2.click.container.gap[$gapSize], ({
-    $maxWidth
-  }) => $maxWidth ?? "none", ({
-    $minWidth
-  }) => $minWidth ?? "none", ({
-    theme: theme2,
-    $paddingSize
-  }) => theme2.click.container.space[$paddingSize], ({
-    $fillWidth = true
-  }) => $fillWidth === true ? "100%" : "auto", ({
-    $orientation = "horizontal"
-  }) => $orientation === "horizontal" ? "row" : "column", ({
-    $alignItems = "center"
-  }) => $alignItems, ({
-    $justifyContent = "left"
-  }) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
-    theme: theme2
-  }) => theme2.breakpoint.sizes.md, ({
-    $isResponsive = true,
-    $fillWidth = true
-  }) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
-    $isResponsive = true
-  }) => $isResponsive === true ? "none" : "auto", ({
-    $isResponsive = true
-  }) => $isResponsive === true ? "column" : "auto");
-  const Container = React.forwardRef(_Container);
   const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";
   const [$5d3850c4d0b4e6c7$var$createDialogContext, $5d3850c4d0b4e6c7$export$cc702773b8ea3e41] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($5d3850c4d0b4e6c7$var$DIALOG_NAME);
   const [$5d3850c4d0b4e6c7$var$DialogProvider, $5d3850c4d0b4e6c7$var$useDialogContext] = $5d3850c4d0b4e6c7$var$createDialogContext($5d3850c4d0b4e6c7$var$DIALOG_NAME);
@@ -37431,7 +37439,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   });
   const CollapsibleContainer = styled.div.withConfig({
     componentId: "sc-guwmyz-0"
-  })(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+  })(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}']);
   const Collapsible = ({
     open: openProp,
     onOpenChange: onOpenChangeProp,
@@ -37481,7 +37489,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       if (typeof onClickProp === "function") {
         onClickProp(e);
       }
-    }, ...props, children: [
+    }, "data-collapsible-header": true, ...props, children: [
       indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {}),
       children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
       indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {})

package/dist/components/Accordion/Accordion.d.ts

@@ -1,12 +1,12 @@
 import { IconSize } from '../Icon/types';
 import { IconName } from '..';
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import * as RadixAccordion from "@radix-ui/react-accordion";
 type Size = "sm" | "md" | "lg";
 type Gap = "sm" | "md" | "lg";
 type Color = "default" | "link";
-export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionSingleProps, "type" | "collapsible"> {
-    title: string;
+export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionSingleProps, "type" | "collapsible" | "title"> {
+    title: ReactNode;
     color?: Color;
     icon?: IconName;
     iconSize?: IconSize;

package/dist/components/CardPrimary/CardPrimaryTopBadge.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const TopBadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TopBadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<any, never> & import('../Container/Container').ContainerProps<import('react').ElementType>, never>> & string & Omit<(<T extends import('react').ElementType = "div">(props: Omit<import('react').ComponentProps<T>, keyof T> & import('../Container/Container').ContainerProps<T>) => import('react').ReactNode), keyof import('react').Component<any, {}, any>>;
 export declare const CardPrimaryTopBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Badge/Badge').DismissibleBadge | import('../Badge/Badge').NonDismissibleBadge, {
     $isSelected?: boolean | undefined;
 }>> & string & Omit<({ icon, iconDir, text, state, size, dismissible, onClose, ...props }: import('../Badge/Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;

package/dist/components/Typography/Text/Text.d.ts

@@ -12,6 +12,7 @@ export interface TextProps<T extends ElementType = "p"> {
     weight?: TextWeight;
     className?: string;
     component?: T;
+    fillWidth?: boolean;
 }
 type TextPolymorphicComponent = <T extends ElementType = "p">(props: Omit<ComponentProps<T>, keyof T> & TextProps<T>) => ReactNode;
 declare const Text: TextPolymorphicComponent;

package/package.json

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