@moises.ai/design-system 4.14.2 → 4.14.4

package/dist/index.js

@@ -2307,16 +2307,16 @@ const nm = "_Callout_1lwt5_1", rm = "_size1_1lwt5_5", sm = "_onlyButton_1lwt5_5"
   iconButtonProps: p,
   ...A
 }) => {
-  const g = !!u, v = !!p, C = g || v, m = vm(r), I = km(r), k = r === "3" ? "3" : "2", S = te(null), E = te(null), [R, w] = V("flex-start");
+  const g = !!u, v = !!p, C = g || v, m = vm(r), I = km(r), k = r === "3" ? "3" : "2", S = te(null), E = te(null), [R, w] = V("start");
   go(() => {
     if (!C) {
-      w("flex-start");
+      w("start");
       return;
     }
     if (!S.current || !E.current) return;
     const B = () => {
-      const O = S.current.offsetHeight, x = E.current.offsetHeight;
-      w(O < x ? "center" : "flex-start");
+      const O = S.current.scrollHeight, x = E.current.scrollHeight;
+      w(O <= x ? "center" : "start");
     };
     B();
     const D = new ResizeObserver(B);
@@ -2340,13 +2340,12 @@ const nm = "_Callout_1lwt5_1", rm = "_size1_1lwt5_5", sm = "_onlyButton_1lwt5_5"
         v && !g && tn.onlyIconButton
       ),
       ...A,
-      children: /* @__PURE__ */ f(y, { justify: "between", gap: "3", width: "100%", children: [
+      children: /* @__PURE__ */ f(y, { justify: "between", gap: "3", width: "100%", align: R, children: [
         /* @__PURE__ */ f(
           y,
           {
             direction: "row",
             gap: "2",
-            align: R,
             width: "100%",
             children: [
               N(),
@@ -2357,7 +2356,7 @@ const nm = "_Callout_1lwt5_1", rm = "_size1_1lwt5_5", sm = "_onlyButton_1lwt5_5"
             ]
           }
         ),
-        C && /* @__PURE__ */ f(y, { ref: E, gap: "2", align: "center", shrink: "0", children: [
+        C && /* @__PURE__ */ f(y, { ref: E, gap: "2", align: "start", shrink: "0", children: [
           g && /* @__PURE__ */ a(
             Oe,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.14.2",
+  "version": "4.14.4",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/Callout/Callout.jsx

@@ -37,21 +37,20 @@ export const Callout = ({
 
   const contentRef = useRef(null)
   const actionsRef = useRef(null)
-  const [contentAlign, setContentAlign] = useState('flex-start')
+  const [outerAlign, setOuterAlign] = useState('start')
 
   useLayoutEffect(() => {
-
     if (!hasActions) {
-      setContentAlign('flex-start')
+      setOuterAlign('start')
       return
     }
 
     if (!contentRef.current || !actionsRef.current) return
 
     const updateAlign = () => {
-      const contentHeight = contentRef.current.offsetHeight
-      const actionsHeight = actionsRef.current.offsetHeight
-      setContentAlign(contentHeight < actionsHeight ? 'center' : 'flex-start')
+      const contentHeight = contentRef.current.scrollHeight
+      const actionsHeight = actionsRef.current.scrollHeight
+      setOuterAlign(contentHeight <= actionsHeight ? 'center' : 'start')
     }
 
     updateAlign()
@@ -90,11 +89,10 @@ export const Callout = ({
       )}
       {...props}
     >
-      <Flex justify="between" gap="3" width="100%">
+      <Flex justify="between" gap="3" width="100%" align={outerAlign}>
         <Flex
           direction="row"
           gap="2"
-          align={contentAlign}
           width="100%"
         >
           {renderIcon()}
@@ -113,7 +111,7 @@ export const Callout = ({
         </Flex>
 
         {hasActions && (
-          <Flex ref={actionsRef} gap="2" align="center" shrink="0">
+          <Flex ref={actionsRef} gap="2" align='start' shrink="0">
             {hasButton && (
               <Button
                 size={buttonSizeForCallout(size)}