@dust-tt/sparkle 0.2.191 → 0.2.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.191",
+  "version": "0.2.193",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/components/ContextItem.tsx

@@ -48,7 +48,7 @@ export function ContextItem({
             <div className="s-min-w-0 s-overflow-hidden s-text-ellipsis s-whitespace-nowrap s-text-base s-font-semibold">
               {title}
             </div>
-            <div className="s-flex s-flex-shrink-0 s-items-center s-gap-3 s-whitespace-nowrap s-pt-0.5 s-text-sm s-text-element-600">
+            <div className="s-flex s-flex-shrink-0 s-items-center s-gap-3 s-overflow-hidden s-pt-0.5 s-text-sm s-text-element-600">
               {subElement}
             </div>
           </div>

package/src/components/Modal.tsx

@@ -128,7 +128,12 @@ export function Modal({
       <Dialog
         as="div"
         className="s-fixed s-absolute s-inset-0 s-z-50 s-overflow-hidden"
-        onClose={onClose}
+        onClose={() => {
+          // We allow closing the modal by clicking outside of it only if there are no changes
+          if (!hasChanged) {
+            onClose();
+          }
+        }}
       >
         {/* Smoke screen and transition */}
         <Transition.Child

package/src/stories/ContextItem.stories.tsx

@@ -39,9 +39,11 @@ export const ListItemExample = () => (
             </div>
           </>
         }
-        action={<Chip size="xs" label="Last Sync ~7 days ago" color="pink" />}
         visual={<Icon visual={FolderIcon} size="md" />}
       >
+        <div className="s-py-2">
+          <Chip size="xs" label="Last Sync ~7 days ago" color="pink" />
+        </div>
         <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
       </ContextItem>
       <ContextItem.SectionHeader