@krrli/cm-designsystem 1.34.6 → 1.34.8

package/dist/cm-designsystem.css

@@ -468,10 +468,6 @@
     margin-top: calc(var(--spacing) * -.5);
   }
 
-  .-ml-3 {
-    margin-left: calc(var(--spacing) * -3);
-  }
-
   .block {
     display: block;
   }
@@ -536,10 +532,6 @@
     height: calc(var(--spacing) * 40);
   }
 
-  .h-80 {
-    height: calc(var(--spacing) * 80);
-  }
-
   .h-\[\`\<spacing\>\`\] {
     height: ` < spacing> ` ;
   }
@@ -588,10 +580,6 @@
     width: calc(var(--spacing) * 123);
   }
 
-  .w-148 {
-    width: calc(var(--spacing) * 148);
-  }
-
   .w-170 {
     width: calc(var(--spacing) * 170);
   }
@@ -612,10 +600,26 @@
     width: 100%;
   }
 
+  .max-w-\[680px\] {
+    max-width: 680px;
+  }
+
+  .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 +660,10 @@
     flex-direction: column;
   }
 
+  .flex-row {
+    flex-direction: row;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -680,6 +688,10 @@
     justify-content: flex-start;
   }
 
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -704,10 +716,6 @@
     gap: calc(var(--spacing) * 6);
   }
 
-  .gap-10 {
-    gap: calc(var(--spacing) * 10);
-  }
-
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
@@ -764,6 +772,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 +1009,10 @@
     object-fit: cover;
   }
 
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1020,8 +1037,8 @@
     padding: ` < spacing> ` ;
   }
 
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
   }
 
   .py-2 {
@@ -1044,10 +1061,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 +1089,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 +1105,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 +1129,6 @@
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-12 {
-    padding-left: calc(var(--spacing) * 12);
-  }
-
   .align-middle {
     vertical-align: middle;
   }
@@ -1142,8 +1143,8 @@
     line-height: 100%;
   }
 
-  .text-\[18px\]\/\[140\%\] {
-    font-size: 18px;
+  .text-\[16px\]\/\[140\%\] {
+    font-size: 16px;
     line-height: 140%;
   }
 
@@ -1157,6 +1158,11 @@
     line-height: 135%;
   }
 
+  .text-\[20px\]\/\[145\%\] {
+    font-size: 20px;
+    line-height: 145%;
+  }
+
   .text-\[24px\]\/\[100\%\] {
     font-size: 24px;
     line-height: 100%;
@@ -1167,11 +1173,6 @@
     line-height: 125%;
   }
 
-  .text-\[24px\]\/\[145\%\] {
-    font-size: 24px;
-    line-height: 145%;
-  }
-
   .text-\[32px\]\/\[125\%\] {
     font-size: 32px;
     line-height: 125%;
@@ -1215,6 +1216,10 @@
     overflow-wrap: anywhere;
   }
 
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
@@ -1727,6 +1732,110 @@
     opacity: .5;
   }
 
+  @media (min-width: 40rem) {
+    .sm\:block {
+      display: block;
+    }
+
+    .sm\:hidden {
+      display: none;
+    }
+
+    .sm\:min-w-\[320px\] {
+      min-width: 320px;
+    }
+
+    .sm\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @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 (min-width: 64rem) {
+    .lg\:min-w-\[680px\] {
+      min-width: 680px;
+    }
+  }
+
   @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/post-creator/PostCreator.d.ts

@@ -2,51 +2,63 @@ import { VariantProps } from 'tailwind-variants';
 declare const PostCreatorStyles: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
             title?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             action?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            mobileHeader?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
             title?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             action?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            mobileHeader?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     content: string[];
     avatar: string[];
+    mobileHeader: string[];
     title: string[];
     input: string[];
     action: string[];
+    button: string[];
 }, undefined, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
             title?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             action?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            mobileHeader?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     content: string[];
     avatar: string[];
+    mobileHeader: string[];
     title: string[];
     input: string[];
     action: string[];
+    button: string[];
 }, import('tailwind-variants').TVReturnType<unknown, {
     content: string[];
     avatar: string[];
+    mobileHeader: string[];
     title: string[];
     input: string[];
     action: string[];
+    button: string[];
 }, undefined, unknown, unknown, undefined>>;
 type PostCreatorVariants = VariantProps<typeof PostCreatorStyles>;
 interface PostCreatorProps extends PostCreatorVariants {

package/dist/compositions/post-creator/PostCreator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/post-creator/PostCreator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAQrB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,UAAU,gBAAiB,SAAQ,mBAAmB;IACpD,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuDlD,CAAC"}
+{"version":3,"file":"PostCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/post-creator/PostCreator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmBrB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,UAAU,gBAAiB,SAAQ,mBAAmB;IACpD,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB,4CAA4C;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqElD,CAAC"}

package/dist/compositions/post-creator/PostCreator.js

@@ -14,14 +14,25 @@ import { Upload } from "../../components/icons/generated/Upload.js";
 const PostCreatorStyles = tv({
   slots: {
     content: ["flex", "flex-col", "gap-4", "w-full"],
-    avatar: ["absolute", "-left-8", "top-6"],
-    title: ["text-slate-900"],
+    avatar: ["absolute", "-left-8", "top-6", "hidden", "sm:block"],
+    mobileHeader: ["flex", "items-center", "gap-3", "sm:hidden"],
+    title: ["text-slate-900", "hidden", "sm:block"],
     input: ["w-full", "h-40"],
-    action: ["flex", "gap-4"]
+    action: ["flex", "flex-col", "sm:flex-row", "gap-4"],
+    button: [
+      "flex",
+      "items-center",
+      "justify-center",
+      "gap-2",
+      "whitespace-nowrap",
+      "flex-1",
+      "text-sm",
+      "sm:text-base"
+    ]
   }
 });
 const PostCreator = (props) => {
-  const { content, avatar, title, input, action } = PostCreatorStyles(props);
+  const { content, avatar, mobileHeader, title, input, action, button } = PostCreatorStyles(props);
   const [file, setFile] = useState(null);
   const [text, setText] = useState("");
   const imageUploadModalRef = useRef(null);
@@ -37,6 +48,18 @@ const PostCreator = (props) => {
         }
       ) }),
       /* @__PURE__ */ jsxs(Form, { className: content(), children: [
+        /* @__PURE__ */ jsxs("div", { className: mobileHeader(), children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              alt: "Profile",
+              size: "sm",
+              src: props.src,
+              onAvatarClick: props.onAvatarClick
+            }
+          ),
+          /* @__PURE__ */ jsx(Heading, { size: "4", as: "h4", className: "text-slate-900", children: "Hey, what's up?" })
+        ] }),
         /* @__PURE__ */ jsx(Heading, { size: "4", as: "h4", className: title(), children: "Hey, what's up?" }),
         /* @__PURE__ */ jsx("div", { className: input(), children: /* @__PURE__ */ jsx(
           Textarea,
@@ -54,6 +77,7 @@ const PostCreator = (props) => {
               size: "md",
               icon: Upload,
               onClick: () => imageUploadModalRef.current?.openModal(true),
+              className: button(),
               children: "Picture upload"
             }
           ),
@@ -64,6 +88,7 @@ const PostCreator = (props) => {
               size: "md",
               icon: Send,
               onClick: () => props.onSendClick(text, file),
+              className: button(),
               children: "Send"
             }
           )

package/dist/compositions/profile-banner-image/ProfileBannerImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileBannerImage.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner-image/ProfileBannerImage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwC5B,CAAC;AAEH,KAAK,0BAA0B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEhF,UAAU,uBAAwB,SAAQ,0BAA0B;IAClE,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0BhE,CAAC"}
+{"version":3,"file":"ProfileBannerImage.d.ts","sourceRoot":"","sources":["../../../src/compositions/profile-banner-image/ProfileBannerImage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwC5B,CAAC;AAEH,KAAK,0BAA0B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEhF,UAAU,uBAAwB,SAAQ,0BAA0B;IAClE,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA4BhE,CAAC"}

package/dist/compositions/profile-banner-image/ProfileBannerImage.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as AspectRatio from "@radix-ui/react-aspect-ratio";
 import { useState } from "react";
 import { tv, cn } from "tailwind-variants";
 import { Edit } from "../../components/icons/generated/Edit.js";
 const ProfileBannerImageStyles = tv({
   slots: {
-    base: ["w-170", "h-80"],
+    base: ["w-full", "max-w-[680px]", "sm:min-w-[320px]", "lg:min-w-[680px]"],
     image: [
       "h-full",
       "w-full",
@@ -48,7 +48,7 @@ const ProfileBannerImageStyles = tv({
 const ProfileBannerImage = (props) => {
   const { base, image, overlay, icon } = ProfileBannerImageStyles(props);
   const [src, setSrc] = useState(props.src ?? "");
-  return /* @__PURE__ */ jsx("div", { className: base(), children: src ? /* @__PURE__ */ jsxs(AspectRatio.Root, { ratio: 17 / 8, children: [
+  return /* @__PURE__ */ jsx("div", { className: base(), children: /* @__PURE__ */ jsx(AspectRatio.Root, { ratio: 17 / 8, children: src ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "img",
       {
@@ -59,7 +59,7 @@ const ProfileBannerImage = (props) => {
       }
     ),
     /* @__PURE__ */ jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: /* @__PURE__ */ jsx(Edit, { className: icon() }) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: image({ isFallback: true }) }) });
+  ] }) : /* @__PURE__ */ jsx("div", { className: image({ isFallback: true }) }) }) });
 };
 export {
   ProfileBannerImage

package/dist/compositions/response/Response.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Response.d.ts","sourceRoot":"","sources":["../../../src/compositions/response/Response.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAYlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,uDAAuD;IACvD,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAExB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,4CAA4C;IAC5C,aAAa,EAAE,MAAM,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,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,sDAAsD;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,uDAAuD;IACvD,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0D5C,CAAC"}
+{"version":3,"file":"Response.d.ts","sourceRoot":"","sources":["../../../src/compositions/response/Response.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmBlB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,uDAAuD;IACvD,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAExB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,4CAA4C;IAC5C,aAAa,EAAE,MAAM,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,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,yDAAyD;IACzD,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,sDAAsD;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,uDAAuD;IACvD,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0D5C,CAAC"}

package/dist/compositions/response/Response.js

@@ -13,14 +13,21 @@ import { Share } from "../../components/icons/generated/Share.js";
 const ResponseStyles = tv({
   slots: {
     base: [],
-    content: ["flex", "flex-col", "gap-4"],
+    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"
+    ]
   }
 });
 const Response = ({

package/dist/compositions/response-creator/ResponseCreator.d.ts

@@ -2,6 +2,7 @@ import { VariantProps } from 'tailwind-variants';
 declare const ResponseCreatorStyles: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
             action?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
@@ -10,6 +11,7 @@ declare const ResponseCreatorStyles: import('tailwind-variants').TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
             action?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
@@ -19,9 +21,11 @@ declare const ResponseCreatorStyles: import('tailwind-variants').TVReturnType<{
     content: string[];
     input: string[];
     action: string[];
+    button: string[];
 }, undefined, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
             action?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
@@ -31,10 +35,12 @@ declare const ResponseCreatorStyles: import('tailwind-variants').TVReturnType<{
     content: string[];
     input: string[];
     action: string[];
+    button: string[];
 }, import('tailwind-variants').TVReturnType<unknown, {
     content: string[];
     input: string[];
     action: string[];
+    button: string[];
 }, undefined, unknown, unknown, undefined>>;
 type ResponseCreatorVariants = VariantProps<typeof ResponseCreatorStyles>;
 interface ResponseCreatorProps extends ResponseCreatorVariants {

package/dist/compositions/response-creator/ResponseCreator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/response-creator/ResponseCreator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAMzB,CAAC;AAEH,KAAK,uBAAuB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE1E,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkD1D,CAAC"}
+{"version":3,"file":"ResponseCreator.d.ts","sourceRoot":"","sources":["../../../src/compositions/response-creator/ResponseCreator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAgBzB,CAAC;AAEH,KAAK,uBAAuB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE1E,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoD1D,CAAC"}

package/dist/compositions/response-creator/ResponseCreator.js

@@ -14,11 +14,21 @@ const ResponseCreatorStyles = tv({
   slots: {
     content: ["flex", "flex-col", "gap-4", "w-full"],
     input: ["w-full", "h-40"],
-    action: ["flex", "gap-4"]
+    action: ["flex", "flex-col", "sm:flex-row", "gap-4"],
+    button: [
+      "flex",
+      "items-center",
+      "justify-center",
+      "gap-2",
+      "whitespace-nowrap",
+      "flex-1",
+      "text-sm",
+      "sm:text-base"
+    ]
   }
 });
 const ResponseCreator = (props) => {
-  const { content, input, action } = ResponseCreatorStyles(props);
+  const { content, input, action, button } = ResponseCreatorStyles(props);
   const [file, setFile] = useState(null);
   const [text, setText] = useState("");
   const imageUploadModalRef = useRef(null);
@@ -50,6 +60,7 @@ const ResponseCreator = (props) => {
             size: "md",
             icon: Upload,
             onClick: () => imageUploadModalRef.current?.openModal(true),
+            className: button(),
             children: "Picture upload"
           }
         ),
@@ -60,6 +71,7 @@ const ResponseCreator = (props) => {
             size: "md",
             icon: Send,
             onClick: () => props.onSendClick(text, file),
+            className: button(),
             children: "Send"
           }
         )

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.8",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -76,8 +76,8 @@
     "eslint-plugin-storybook": "10.1.10",
     "eslint-plugin-unused-imports": "4.3.0",
     "globals": "16.5.0",
-    "jsdom": "27.3.0",
-    "knip": "5.75.2",
+    "jsdom": "27.4.0",
+    "knip": "5.78.0",
     "playwright": "1.57.0",
     "prettier": "3.7.4",
     "prettier-plugin-tailwindcss": "0.7.2",
@@ -87,7 +87,7 @@
     "tailwind-merge": "3.4.0",
     "tailwindcss": "4.1.18",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.50.0",
+    "typescript-eslint": "8.50.1",
     "vite": "7.3.0",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-svgr": "^4.5.0",