@clickhouse/click-ui 0.0.142 → 0.0.143

package/dist/click-ui.es.js

@@ -10291,9 +10291,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 +10380,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 +10490,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 +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,
@@ -10517,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 }),
@@ -10541,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
@@ -10582,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" }) })
@@ -10739,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 = ({
@@ -10751,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 })
   ] });
@@ -14299,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

@@ -10308,9 +10308,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 +10397,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 +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 })
@@ -10455,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,
@@ -10534,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 }),
@@ -10558,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
@@ -10599,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" }) })
@@ -10756,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 = ({
@@ -10768,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 })
     ] });
@@ -14316,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/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/package.json

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