@krrli/cm-designsystem 1.34.6 → 1.34.7

package/dist/cm-designsystem.css

@@ -588,10 +588,6 @@
     width: calc(var(--spacing) * 123);
   }
 
-  .w-148 {
-    width: calc(var(--spacing) * 148);
-  }
-
   .w-170 {
     width: calc(var(--spacing) * 170);
   }
@@ -612,10 +608,22 @@
     width: 100%;
   }
 
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+
   .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
 
+  .flex-1 {
+    flex: 1;
+  }
+
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -656,6 +664,10 @@
     flex-direction: column;
   }
 
+  .flex-row {
+    flex-direction: row;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -680,6 +692,10 @@
     justify-content: flex-start;
   }
 
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -764,6 +780,11 @@
     border-width: 1px;
   }
 
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -996,6 +1017,10 @@
     object-fit: cover;
   }
 
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1020,8 +1045,8 @@
     padding: ` < spacing> ` ;
   }
 
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
   }
 
   .py-2 {
@@ -1044,10 +1069,6 @@
     padding-top: calc(var(--spacing) * 6);
   }
 
-  .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
-  }
-
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
@@ -1076,10 +1097,6 @@
     padding-right: calc(var(--spacing) * 10);
   }
 
-  .pr-12 {
-    padding-right: calc(var(--spacing) * 12);
-  }
-
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -1096,10 +1113,6 @@
     padding-bottom: calc(var(--spacing) * 6);
   }
 
-  .pb-8 {
-    padding-bottom: calc(var(--spacing) * 8);
-  }
-
   .pb-12 {
     padding-bottom: calc(var(--spacing) * 12);
   }
@@ -1124,10 +1137,6 @@
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-12 {
-    padding-left: calc(var(--spacing) * 12);
-  }
-
   .align-middle {
     vertical-align: middle;
   }
@@ -1142,8 +1151,8 @@
     line-height: 100%;
   }
 
-  .text-\[18px\]\/\[140\%\] {
-    font-size: 18px;
+  .text-\[16px\]\/\[140\%\] {
+    font-size: 16px;
     line-height: 140%;
   }
 
@@ -1157,6 +1166,11 @@
     line-height: 135%;
   }
 
+  .text-\[20px\]\/\[145\%\] {
+    font-size: 20px;
+    line-height: 145%;
+  }
+
   .text-\[24px\]\/\[100\%\] {
     font-size: 24px;
     line-height: 100%;
@@ -1167,11 +1181,6 @@
     line-height: 125%;
   }
 
-  .text-\[24px\]\/\[145\%\] {
-    font-size: 24px;
-    line-height: 145%;
-  }
-
   .text-\[32px\]\/\[125\%\] {
     font-size: 32px;
     line-height: 125%;
@@ -1727,6 +1736,86 @@
     opacity: .5;
   }
 
+  @media (min-width: 48rem) {
+    .md\:absolute {
+      position: absolute;
+    }
+
+    .md\:relative {
+      position: relative;
+    }
+
+    .md\:top-6 {
+      top: calc(var(--spacing) * 6);
+    }
+
+    .md\:-left-8 {
+      left: calc(var(--spacing) * -8);
+    }
+
+    .md\:inline {
+      display: inline;
+    }
+
+    .md\:w-148 {
+      width: calc(var(--spacing) * 148);
+    }
+
+    .md\:flex-row {
+      flex-direction: row;
+    }
+
+    .md\:gap-0 {
+      gap: calc(var(--spacing) * 0);
+    }
+
+    .md\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
+
+    .md\:gap-4 {
+      gap: calc(var(--spacing) * 4);
+    }
+
+    .md\:gap-6 {
+      gap: calc(var(--spacing) * 6);
+    }
+
+    .md\:gap-10 {
+      gap: calc(var(--spacing) * 10);
+    }
+
+    .md\:px-3 {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+
+    .md\:pt-8 {
+      padding-top: calc(var(--spacing) * 8);
+    }
+
+    .md\:pr-12 {
+      padding-right: calc(var(--spacing) * 12);
+    }
+
+    .md\:pb-8 {
+      padding-bottom: calc(var(--spacing) * 8);
+    }
+
+    .md\:pl-12 {
+      padding-left: calc(var(--spacing) * 12);
+    }
+
+    .md\:text-\[18px\]\/\[140\%\] {
+      font-size: 18px;
+      line-height: 140%;
+    }
+
+    .md\:text-\[24px\]\/\[145\%\] {
+      font-size: 24px;
+      line-height: 145%;
+    }
+  }
+
   @media (hover: hover) {
     .group-hover\:\[\&\>g\]\:\[\&\>path\:first-child\]\:translate-x-0\.5:is(:where(.group):hover *) > g > path:first-child {
       --tw-translate-x: calc(var(--spacing) * .5);

package/dist/components/like-toggle/LikeToggle.d.ts

@@ -27,7 +27,7 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     icon: string[];
-    label: never[];
+    label: string[];
 }, undefined, {
     pressed: {
         false: {
@@ -56,7 +56,7 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     icon: string[];
-    label: never[];
+    label: string[];
 }, import('tailwind-variants').TVReturnType<{
     pressed: {
         false: {
@@ -85,7 +85,7 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     icon: string[];
-    label: never[];
+    label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type LikeToggleVariants = VariantProps<typeof toggleStyles>;
 interface LikeToggleProps extends LikeToggleVariants {

package/dist/components/like-toggle/LikeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LikeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/like-toggle/LikeToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0IhB,CAAC;AAEH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5D,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,UAAU,GAAI,mCAIxB,eAAe,4CAyEjB,CAAC"}
+{"version":3,"file":"LikeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/like-toggle/LikeToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4IhB,CAAC;AAEH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5D,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,UAAU,GAAI,mCAIxB,eAAe,4CAyEjB,CAAC"}

package/dist/components/like-toggle/LikeToggle.js

@@ -12,9 +12,11 @@ const toggleStyles = tv({
       "inline-flex",
       "items-center",
       "justify-center",
-      "gap-2",
+      "gap-0",
+      "md:gap-2",
       "h-8",
-      "px-3",
+      "px-2",
+      "md:px-3",
       "py-2",
       "rounded-full",
       "transition-all",
@@ -28,7 +30,7 @@ const toggleStyles = tv({
       "cursor-pointer"
     ],
     icon: ["inline-flex"],
-    label: []
+    label: ["hidden", "md:inline"]
   },
   variants: {
     pressed: {

package/dist/components/timed-button/TimedButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimedButton.d.ts","sourceRoot":"","sources":["../../../src/components/timed-button/TimedButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAoErB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE;;;;;GAKG;AACH,UAAU,gBACR,SAAQ,mBAAmB,EAAE,yBAAyB;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE1C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0DlD,CAAC"}
+{"version":3,"file":"TimedButton.d.ts","sourceRoot":"","sources":["../../../src/components/timed-button/TimedButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4ErB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE;;;;;GAKG;AACH,UAAU,gBACR,SAAQ,mBAAmB,EAAE,yBAAyB;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE1C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0DlD,CAAC"}

package/dist/components/timed-button/TimedButton.js

@@ -9,9 +9,11 @@ const timedButtonStyles = tv({
       "inline-flex",
       "items-center",
       "justify-center",
-      "gap-2",
+      "gap-0",
+      "md:gap-2",
       "h-8",
-      "px-3",
+      "px-2",
+      "md:px-3",
       "py-2",
       "rounded-full",
       "focus-visible:outline-none",
@@ -23,7 +25,13 @@ const timedButtonStyles = tv({
       "overflow-hidden"
     ],
     icon: ["w-4", "h-4", "inline-flex"],
-    label: ["transition-opacity", "duration-350", "ease-in-out"]
+    label: [
+      "hidden",
+      "md:inline",
+      "transition-opacity",
+      "duration-350",
+      "ease-in-out"
+    ]
   },
   variants: {
     pressed: {

package/dist/components/toggle/Toggle.d.ts

@@ -15,7 +15,7 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     icon: string[];
-    label: never[];
+    label: string[];
 }, undefined, {
     pressed: {
         true: {
@@ -32,7 +32,7 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     icon: string[];
-    label: never[];
+    label: string[];
 }, import('tailwind-variants').TVReturnType<{
     pressed: {
         true: {
@@ -49,7 +49,7 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     icon: string[];
-    label: never[];
+    label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type ToggleVariants = VariantProps<typeof toggleStyles>;
 interface ToggleProps extends ToggleVariants {

package/dist/components/toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0DhB,CAAC;AACH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAExD,UAAU,WAAY,SAAQ,cAAc;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,GAAI,wDAMpB,WAAW,4CAyBb,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4DhB,CAAC;AACH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAExD,UAAU,WAAY,SAAQ,cAAc;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,GAAI,wDAMpB,WAAW,4CAyBb,CAAC"}

package/dist/components/toggle/Toggle.js

@@ -11,9 +11,11 @@ const toggleStyles = tv({
       "inline-flex",
       "items-center",
       "justify-center",
-      "gap-2",
+      "gap-0",
+      "md:gap-2",
       "h-8",
-      "px-3",
+      "px-2",
+      "md:px-3",
       "py-2",
       "rounded-full",
       "transition-all",
@@ -27,7 +29,7 @@ const toggleStyles = tv({
       "cursor-pointer"
     ],
     icon: ["inline-flex"],
-    label: []
+    label: ["hidden", "md:inline"]
   },
   variants: {
     pressed: {

package/dist/components/typography/styles.js

@@ -14,8 +14,8 @@ const paragraphStyles = tv({
   base: ["font-medium", "tracking-normal"],
   variants: {
     size: {
-      lg: ["text-[24px]/[145%]"],
-      md: ["text-[18px]/[140%]"]
+      lg: ["text-[20px]/[145%]", "md:text-[24px]/[145%]"],
+      md: ["text-[16px]/[140%]", "md:text-[18px]/[140%]"]
     }
   }
 });

package/dist/compositions/image-banner/ImageBanner.d.ts

@@ -43,6 +43,16 @@ interface ImageBannerProps extends ImageBannerVariants {
     alt: string;
     /** Click handler for the whole ImageBanner component */
     onClick: () => void;
+    /**
+     * Optional custom image component (e.g., Next.js Image).
+     * If not provided, uses standard HTML img element.
+     */
+    ImageComponent?: React.ComponentType<{
+        src: string;
+        alt: string;
+        className?: string;
+        onError?: () => void;
+    }>;
 }
 /**
  * ImageBanner component

package/dist/compositions/image-banner/ImageBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBanner.d.ts","sourceRoot":"","sources":["../../../src/compositions/image-banner/ImageBanner.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiCrB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,UAAU,gBAAiB,SAAQ,mBAAmB;IACpD,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,wDAAwD;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0BlD,CAAC"}
+{"version":3,"file":"ImageBanner.d.ts","sourceRoot":"","sources":["../../../src/compositions/image-banner/ImageBanner.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiCrB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,UAAU,gBAAiB,SAAQ,mBAAmB;IACpD,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,wDAAwD;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACnC,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;CACJ;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6BlD,CAAC"}

package/dist/compositions/image-banner/ImageBanner.js

@@ -6,7 +6,7 @@ import { tv, cn } from "tailwind-variants";
 import { Fullscreen } from "../../components/icons/generated/Fullscreen.js";
 const ImageBannerStyles = tv({
   slots: {
-    base: ["w-148", "h-80"],
+    base: ["w-full", "md:w-148"],
     image: ["h-full", "w-full", "cursor-pointer", "rounded-lg", "object-cover"],
     overlay: [
       "group",
@@ -38,17 +38,22 @@ const ImageBannerStyles = tv({
     }
   }
 });
-const ImageBanner = (props) => {
+const ImageBanner = ({
+  ImageComponent,
+  ...props
+}) => {
   const { base, image, overlay, icon } = ImageBannerStyles(props);
   const [src, setSrc] = useState(props.src);
+  const ImageElement = ImageComponent || "img";
   return /* @__PURE__ */ jsx("div", { className: base(), children: src ? /* @__PURE__ */ jsxs(AspectRatio.Root, { ratio: 37 / 20, children: [
     /* @__PURE__ */ jsx(
-      "img",
+      ImageElement,
       {
         className: image(),
         src,
         alt: props.alt,
-        onError: () => setSrc("")
+        onError: () => setSrc(""),
+        loading: "lazy"
       }
     ),
     /* @__PURE__ */ jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: /* @__PURE__ */ jsx(Fullscreen, { className: icon() }) })

package/dist/compositions/post/Post.d.ts

@@ -5,8 +5,10 @@ declare const PostStyles: import('tailwind-variants').TVReturnType<{
         md: {};
     };
 }, {
-    base: never[];
+    base: string[];
+    header: string[];
     avatar: string[];
+    userInfoWrapper: string[];
     content: string[];
     text: string[];
     action: string[];
@@ -16,8 +18,10 @@ declare const PostStyles: import('tailwind-variants').TVReturnType<{
         md: {};
     };
 }, {
-    base: never[];
+    base: string[];
+    header: string[];
     avatar: string[];
+    userInfoWrapper: string[];
     content: string[];
     text: string[];
     action: string[];
@@ -27,8 +31,10 @@ declare const PostStyles: import('tailwind-variants').TVReturnType<{
         md: {};
     };
 }, {
-    base: never[];
+    base: string[];
+    header: string[];
     avatar: string[];
+    userInfoWrapper: string[];
     content: string[];
     text: string[];
     action: string[];

package/dist/compositions/post/Post.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Post.d.ts","sourceRoot":"","sources":["../../../src/compositions/post/Post.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAc1D,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmBd,CAAC;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5B,UAAU,SAAU,SAAQ,YAAY;IACtC,sDAAsD;IACtD,IAAI,EAAE,QAAQ,CAAC;IAEf,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,mDAAmD;IACnD,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAExB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAE7B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,sDAAsD;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,uDAAuD;IACvD,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2EpC,CAAC"}
+{"version":3,"file":"Post.d.ts","sourceRoot":"","sources":["../../../src/compositions/post/Post.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAc1D,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4Bd,CAAC;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5B,UAAU,SAAU,SAAQ,YAAY;IACtC,sDAAsD;IACtD,IAAI,EAAE,QAAQ,CAAC;IAEf,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,mDAAmD;IACnD,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAExB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAE7B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,sDAAsD;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,uDAAuD;IACvD,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiFpC,CAAC"}

package/dist/compositions/post/Post.js

@@ -13,16 +13,25 @@ import { Share } from "../../components/icons/generated/Share.js";
 import { Paragraph } from "../../components/typography/Paragraph.js";
 const PostStyles = tv({
   slots: {
-    base: [],
-    avatar: ["absolute", "-left-8", "top-6"],
-    content: ["flex", "flex-col", "gap-6"],
+    base: ["flex", "flex-col", "gap-4", "md:gap-6", "md:relative"],
+    header: ["flex", "gap-3", "items-start", "md:gap-0"],
+    avatar: ["flex-shrink-0", "md:absolute", "md:-left-8", "md:top-6"],
+    userInfoWrapper: ["flex-1", "min-w-0"],
+    content: ["flex", "flex-col", "gap-4", "md:gap-6"],
     text: [
       "text-slate-900",
       "text-wrap",
       "wrap-anywhere",
       "whitespace-pre-wrap"
     ],
-    action: ["flex", "gap-10", "justify-start", "-ml-3"]
+    action: [
+      "flex",
+      "flex-row",
+      "gap-4",
+      "md:gap-10",
+      "justify-start",
+      "items-start"
+    ]
   },
   variants: {
     size: {
@@ -36,7 +45,7 @@ const Post = ({
   nbrOfComments = 0,
   ...props
 }) => {
-  const { base, avatar, content, text, action } = PostStyles(props);
+  const { base, header, avatar, userInfoWrapper, content, text, action } = PostStyles(props);
   const handlePostClick = () => {
     if (!props.detailLink) return;
     window.location.href = props.detailLink;
@@ -47,26 +56,29 @@ const Post = ({
       className: base(),
       onClick: props.detailLink ? handlePostClick : void 0,
       children: [
-        /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            alt: "Profile",
-            size: "md",
-            src: props.avatarSrc,
-            onAvatarClick: props.onAvatarClick
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: content(), children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: header(), children: [
+          /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              alt: "Profile",
+              size: "md",
+              src: props.avatarSrc,
+              onAvatarClick: props.onAvatarClick
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: userInfoWrapper(), children: /* @__PURE__ */ jsx(
             UserInfo,
             {
               size: props.size,
               displayName: props.displayName,
               userName: props.userName,
               timestamp: props.timestamp,
-              onClick: props.onAvatarClick
+              onClick: props.onAvatarClick,
+              src: null
             }
-          ),
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: content(), children: [
           /* @__PURE__ */ jsx(Paragraph, { size: props.size, className: text(), children: renderWithHashtags(props.text) }),
           props.imageSrc && /* @__PURE__ */ jsx(
             ImageBanner,

package/dist/compositions/post-base/PostBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostBase.d.ts","sourceRoot":"","sources":["../../../src/compositions/post-base/PostBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;2CAiBlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4B5C,CAAC"}
+{"version":3,"file":"PostBase.d.ts","sourceRoot":"","sources":["../../../src/compositions/post-base/PostBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;2CAqBlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4B5C,CAAC"}

package/dist/compositions/post-base/PostBase.js

@@ -5,10 +5,14 @@ const PostBaseStyles = tv({
     base: [
       "bg-white",
       "rounded-2xl",
-      "pl-12",
-      "pr-12",
-      "pt-8",
-      "pb-8",
+      "pl-4",
+      "pr-4",
+      "md:pl-12",
+      "md:pr-12",
+      "pt-6",
+      "pb-6",
+      "md:pt-8",
+      "md:pb-8",
       "flex",
       "relative",
       "w-full",

package/dist/compositions/user-info/UserInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-info/UserInfo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAQlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuC5C,CAAC"}
+{"version":3,"file":"UserInfo.d.ts","sourceRoot":"","sources":["../../../src/compositions/user-info/UserInfo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAclB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuC5C,CAAC"}

package/dist/compositions/user-info/UserInfo.js

@@ -11,8 +11,14 @@ const userInfoStyles = tv({
   slots: {
     base: ["flex", "gap-2", "items-center"],
     userInfo: ["flex", "flex-col", "gap-2", "justify-center", "items-start"],
-    name: ["text-slate-900", "**:cursor-pointer"],
-    detailInfo: ["flex", "flex", "gap-4"],
+    name: [
+      "text-slate-900",
+      "bg-transparent",
+      "border-0",
+      "p-0",
+      "**:cursor-pointer"
+    ],
+    detailInfo: ["flex", "flex-col", "md:flex-row", "gap-2", "md:gap-4"],
     timeInfo: ["text-slate-500"]
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.6",
+  "version": "1.34.7",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",