@krrli/cm-designsystem 1.34.7 → 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> ` ;
   }
@@ -608,6 +600,10 @@
     width: 100%;
   }
 
+  .max-w-\[680px\] {
+    max-width: 680px;
+  }
+
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -720,10 +716,6 @@
     gap: calc(var(--spacing) * 6);
   }
 
-  .gap-10 {
-    gap: calc(var(--spacing) * 10);
-  }
-
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
@@ -1224,6 +1216,10 @@
     overflow-wrap: anywhere;
   }
 
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
@@ -1736,6 +1732,24 @@
     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;
@@ -1816,6 +1830,12 @@
     }
   }
 
+  @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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.7",
+  "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",