@crystallize/design-system 1.24.28 → 1.24.30

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.30
+
+### Patch Changes
+
+- 492385e: Add sorting by desc for images and logical operator AND. Fix issue in Safari with border on drop image card. Remove tooltip arrow
+
+## 1.24.29
+
+### Patch Changes
+
+- b8c9016: Upgrade storybook and vite to latest verions
+
 ## 1.24.28
 
 ### Patch Changes

package/dist/{chunk-OD4GHCZ2.mjs → chunk-ITM4FKGW.mjs}

@@ -7000,17 +7000,12 @@ function Tooltip({
           children
         }),
         /* @__PURE__ */ jsx129(RadixTooltip.Portal, {
-          children: /* @__PURE__ */ jsxs115(RadixTooltip.Content, {
+          children: /* @__PURE__ */ jsx129(RadixTooltip.Content, {
             align,
             sideOffset: 5,
             side,
             className: tooltipStyles({ variant }),
-            children: [
-              /* @__PURE__ */ jsx129(RadixTooltip.Arrow, {
-                className: "c-tooltip-arrow"
-              }),
-              content
-            ]
+            children: content
           })
         })
       ]

package/dist/index.css

@@ -1499,9 +1499,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
 }
-.c-tooltip-success .c-tooltip-arrow {
-  fill: rgb(var(--c-color-cyan-100-800) / 1);
-}
 .c-tooltip-error {
   border-width: 1px;
   border-style: solid;
@@ -1512,9 +1509,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity));
 }
-.c-tooltip-error .c-tooltip-arrow {
-  fill: rgb(var(--c-color-pink-100-800) / 1);
-}
 .c-tooltip-warning {
   border-width: 1px;
   border-style: solid;
@@ -1525,9 +1519,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
 }
-.c-tooltip-warning .c-tooltip-arrow {
-  fill: rgb(var(--c-color-orange-100-800) / 1);
-}
 .c-tooltip-info {
   border-width: 1px;
   border-style: solid;
@@ -1538,9 +1529,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
 }
-.c-tooltip-info .c-tooltip-arrow {
-  fill: #fff;
-}
 
 /* src/popover/popover.css */
 .c-popover-content {

package/dist/index.js

@@ -8039,17 +8039,12 @@ function Tooltip({
           children
         }),
         /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RadixTooltip.Portal, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(RadixTooltip.Content, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RadixTooltip.Content, {
             align,
             sideOffset: 5,
             side,
             className: tooltipStyles({ variant }),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RadixTooltip.Arrow, {
-                className: "c-tooltip-arrow"
-              }),
-              content
-            ]
+            children: content
           })
         })
       ]

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-OD4GHCZ2.mjs";
+} from "./chunk-ITM4FKGW.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -486,7 +486,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-FMYEV5BL.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-KSDXVDF5.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-FMYEV5BL.mjs → rich-text-editor-KSDXVDF5.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-OD4GHCZ2.mjs";
+} from "./chunk-ITM4FKGW.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

package/dist/{rich-text-editor-RUYX7OQE.css → rich-text-editor-KXLB6GMR.css}

@@ -1235,9 +1235,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
 }
-.c-tooltip-success .c-tooltip-arrow {
-  fill: rgb(var(--c-color-cyan-100-800) / 1);
-}
 .c-tooltip-error {
   border-width: 1px;
   border-style: solid;
@@ -1248,9 +1245,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity));
 }
-.c-tooltip-error .c-tooltip-arrow {
-  fill: rgb(var(--c-color-pink-100-800) / 1);
-}
 .c-tooltip-warning {
   border-width: 1px;
   border-style: solid;
@@ -1261,9 +1255,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
 }
-.c-tooltip-warning .c-tooltip-arrow {
-  fill: rgb(var(--c-color-orange-100-800) / 1);
-}
 .c-tooltip-info {
   border-width: 1px;
   border-style: solid;
@@ -1274,9 +1265,6 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
 }
-.c-tooltip-info .c-tooltip-arrow {
-  fill: #fff;
-}
 
 /* src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css */
 .c-rte-floating-text-format-tb-plugin {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.28",
+  "version": "1.24.30",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -9,9 +9,9 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./tailwind-config": "./tailwind.config.cjs",
     "./styles.css": {
@@ -62,19 +62,23 @@
     "@faker-js/faker": "7.6.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-actions": "7.6.2",
-    "@storybook/addon-backgrounds": "7.6.2",
-    "@storybook/addon-docs": "7.0.0-beta.14",
-    "@storybook/addon-essentials": "7.6.2",
-    "@storybook/addon-highlight": "7.6.2",
-    "@storybook/addon-interactions": "7.6.2",
-    "@storybook/addon-links": "7.6.2",
-    "@storybook/addon-measure": "7.6.2",
-    "@storybook/addon-outline": "7.6.2",
-    "@storybook/manager-api": "7.6.2",
-    "@storybook/react": "7.6.2",
-    "@storybook/react-vite": "7.6.2",
-    "@storybook/theming": "7.6.2",
+    "@storybook/addon-actions": "8.6.11",
+    "@storybook/addon-backgrounds": "8.6.11",
+    "@storybook/addon-designs": "8.2.1",
+    "@storybook/addon-docs": "8.6.11",
+    "@storybook/addon-essentials": "8.6.11",
+    "@storybook/addon-highlight": "8.6.11",
+    "@storybook/addon-interactions": "8.6.11",
+    "@storybook/addon-links": "8.6.11",
+    "@storybook/addon-measure": "8.6.11",
+    "@storybook/addon-outline": "8.6.11",
+    "@storybook/client-logger": "8.6.11",
+    "@storybook/manager-api": "8.6.11",
+    "@storybook/preview-api": "8.6.11",
+    "@storybook/react": "8.6.11",
+    "@storybook/react-vite": "8.6.11",
+    "@storybook/theming": "8.6.11",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
@@ -87,13 +91,12 @@
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
     "prettier": "2.8.4",
-    "storybook": "7.6.2",
-    "storybook-addon-designs": "^6.3.1",
-    "storybook-dark-mode": "^2.0.5",
+    "storybook": "8.6.11",
+    "storybook-dark-mode": "4.0.2",
     "tailwindcss": "^3.3.5",
     "tsup": "^6.5.0",
     "typescript": "4.9.4",
-    "vite": "5.3.5",
+    "vite": "6.2.4",
     "vitest": "2.1.8",
     "tsconfig": "0.0.0"
   },
@@ -117,13 +120,13 @@
     "tailwind.config.cjs"
   ],
   "scripts": {
-    "build:storybook": "storybook build -s public",
+    "build:storybook": "storybook build public",
     "build:tw": "tailwindcss -c ./tailwind.config.cjs -i src/index.css -o dist/index.css",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
     "build": "pnpm build:tw && pnpm build:tsup",
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
     "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
-    "dev:storybook": "storybook dev -p 6006 --no-open -s public",
+    "dev:storybook": "storybook dev -p 6006 --no-open public",
     "dev": "concurrently \"npm:dev:*\"",
     "test": "vitest run src/",
     "test:watch": "vitest src/"

package/src/colors/Colors.stories.tsx

@@ -1,6 +1,6 @@
-import { useDarkMode } from 'storybook-dark-mode';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { useDarkMode } from '../../.storybook/use-dark-mode';
 import colorDefaults from './color-defaults.json';
 import colorPairing from './color-pairing.json';
 import rawColors from './colors.json';
@@ -65,7 +65,7 @@ export default meta;
 function ColorItem({ colorName, color }: { colorName: ColorName; color: Color }) {
   const shades = Object.keys(color);
 
-  const isDark = useDarkMode();
+  const [isDark] = useDarkMode();
 
   // @ts-expect-error
   const applicationsForMode = !isDark ? applications : applications.map(a => ({ ...a, shade: colorPairing[a.shade] }));

package/src/tooltip/tooltip.css

@@ -5,32 +5,16 @@
 
 .c-tooltip-success {
   @apply border border-solid border-cyan-300-600 bg-cyan-100-800 text-green-600-300;
-
-  .c-tooltip-arrow {
-    @apply fill-cyan-100-800;
-  }
 }
 
 .c-tooltip-error {
   @apply border border-solid border-pink-200-700 bg-pink-100-800 text-pink-700-200;
-
-  .c-tooltip-arrow {
-    @apply fill-pink-100-800;
-  }
 }
 
 .c-tooltip-warning {
   @apply border border-solid border-orange-200-700 bg-orange-100-800 text-green-600-300;
-
-  .c-tooltip-arrow {
-    @apply fill-orange-100-800;
-  }
 }
 
 .c-tooltip-info {
   @apply border border-solid border-purple-200-700 bg-white text-gray-500-400;
-
-  .c-tooltip-arrow {
-    @apply fill-white;
-  }
 }

package/src/tooltip/tooltip.tsx

@@ -47,7 +47,6 @@ export function Tooltip({
         <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
         <RadixTooltip.Portal>
           <RadixTooltip.Content align={align} sideOffset={5} side={side} className={tooltipStyles({ variant })}>
-            <RadixTooltip.Arrow className="c-tooltip-arrow" />
             {content}
           </RadixTooltip.Content>
         </RadixTooltip.Portal>