@clickhouse/click-ui 0.0.141 → 0.0.143

package/dist/click-ui.es.js

@@ -2281,7 +2281,7 @@ const FormElementContainer = styled.div.withConfig({
 })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
   theme: theme2
 }) => theme2.click.field.space.gap);
-const EllipsisContainer$2 = styled.span.withConfig({
+styled.span.withConfig({
   componentId: "sc-1sddmxu-8"
 })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
 const FlagList = {
@@ -9903,7 +9903,7 @@ const SvgContainer = styled.svg.withConfig({
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
-const BadgeContent = styled(EllipsisContainer$2).withConfig({
+const BadgeContent = styled.div.withConfig({
   componentId: "sc-471xo0-3"
 })(["width:auto;overflow:hidden;svg{", "}"], ({
   $state = "default",
@@ -10291,7 +10291,101 @@ const CardSecondary = ({
     ] })
   ] });
 };
+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;"]);
+const CardPrimaryTopBadge = styled(Badge).withConfig({
+  componentId: "sc-1d5pqpo-1"
+})(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
+  $isSelected,
+  theme: theme2
+}) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "", ({
+  theme: theme2
+}) => theme2.click.button.basic.color.primary.stroke.active);
+const withTopBadge = (Component2) => ({
+  topBadgeText,
+  ...props
+}) => {
+  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$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
@@ -10372,7 +10466,7 @@ const convertCardAlignToTextAlign = (align) => {
   }
   return align === "start" ? "left" : "right";
 };
-const CardPrimary = ({
+const Card = ({
   alignContent,
   title,
   icon,
@@ -10396,7 +10490,7 @@ const CardPrimary = ({
     }
   };
   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 })
@@ -10409,6 +10503,7 @@ const CardPrimary = ({
     infoText && /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { onClick: handleClick, disabled, children: infoText })
   ] });
 };
+const CardPrimary = withTopBadge(Card);
 const Header$2 = styled.div.withConfig({
   componentId: "sc-1qnbjoa-0"
 })(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]);
@@ -10417,7 +10512,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,
@@ -10496,7 +10591,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 }),
@@ -10520,7 +10615,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
@@ -10561,7 +10656,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" }) })
@@ -10718,7 +10813,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 = ({
@@ -10730,7 +10825,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 })
   ] });
@@ -14278,80 +14373,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);

package/dist/click-ui.umd.js

@@ -2298,7 +2298,7 @@ var __publicField = (obj, key, value) => {
   })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
     theme: theme2
   }) => theme2.click.field.space.gap);
-  const EllipsisContainer$2 = styled.span.withConfig({
+  styled.span.withConfig({
     componentId: "sc-1sddmxu-8"
   })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
   const FlagList = {
@@ -9920,7 +9920,7 @@ var __publicField = (obj, key, value) => {
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
-  const BadgeContent = styled(EllipsisContainer$2).withConfig({
+  const BadgeContent = styled.div.withConfig({
     componentId: "sc-471xo0-3"
   })(["width:auto;overflow:hidden;svg{", "}"], ({
     $state = "default",
@@ -10308,7 +10308,101 @@ var __publicField = (obj, key, value) => {
       ] })
     ] });
   };
+  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;"]);
+  const CardPrimaryTopBadge = styled(Badge).withConfig({
+    componentId: "sc-1d5pqpo-1"
+  })(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
+    $isSelected,
+    theme: theme2
+  }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "", ({
+    theme: theme2
+  }) => theme2.click.button.basic.color.primary.stroke.active);
+  const withTopBadge = (Component) => ({
+    topBadgeText,
+    ...props
+  }) => {
+    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$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
@@ -10389,7 +10483,7 @@ var __publicField = (obj, key, value) => {
     }
     return align === "start" ? "left" : "right";
   };
-  const CardPrimary = ({
+  const Card = ({
     alignContent,
     title,
     icon,
@@ -10413,7 +10507,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 })
@@ -10426,6 +10520,7 @@ var __publicField = (obj, key, value) => {
       infoText && /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { onClick: handleClick, disabled, children: infoText })
     ] });
   };
+  const CardPrimary = withTopBadge(Card);
   const Header$2 = styled.div.withConfig({
     componentId: "sc-1qnbjoa-0"
   })(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]);
@@ -10434,7 +10529,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,
@@ -10513,7 +10608,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 }),
@@ -10537,7 +10632,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
@@ -10578,7 +10673,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" }) })
@@ -10735,7 +10830,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 = ({
@@ -10747,7 +10842,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 })
     ] });
@@ -14295,80 +14390,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);

package/dist/components/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
-import { HorizontalDirection, IconName } from '..';
+import { HorizontalDirection } from '..';
 import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { IconName } from '../Icon/types';
 
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
 export type BadgeSize = "sm" | "md";

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

@@ -1,9 +1,10 @@
 import { IconName } from '..';
 import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { WithTopBadgeProps } from './withTopBadge';
 
 export type CardPrimarySize = "sm" | "md";
 type ContentAlignment = "start" | "center" | "end";
-export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement>, WithTopBadgeProps {
     title?: string;
     icon?: IconName;
     hasShadow?: boolean;
@@ -17,5 +18,5 @@ export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement> {
     alignContent?: ContentAlignment;
     onButtonClick?: MouseEventHandler<HTMLElement>;
 }
-export declare const CardPrimary: ({ alignContent, title, icon, hasShadow, description, infoUrl, infoText, size, disabled, onButtonClick, isSelected, children, ...props }: CardPrimaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardPrimary: import('react').FC<CardPrimaryProps & WithTopBadgeProps>;
 export {};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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/CardPrimary/withTopBadge.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType, FC } from 'react';
+
+export interface WithTopBadgeProps {
+    topBadgeText?: string;
+    isSelected?: boolean;
+}
+export declare const withTopBadge: <P extends object>(Component: ComponentType<P>) => FC<P & WithTopBadgeProps>;

package/package.json

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