@crystallize/design-system 1.17.2 → 1.17.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.17.4
+
+### Patch Changes
+
+- 1e376d9: Since we added the `container` prop with a portal to the Dropdown and ActionMenu components all dropdowns are rendered in the `document.body` when container is not provided, a.k.a the container props is `undefined`. However sometimes we want to render the dropdown next to the trigger, which is possible if we provide a `ref` for a parent element. The problem is that sometimes the parent element ref is not set yet when the dropdown is rendered and thus the dropdown does not really show on the page. To fix this, the container prop now when set explicitly to `null` then we do not render the portal, which then render the dropdown next to the trigger (no need to custom ref to a parent element but render the dropdown in place).
+
+## 1.17.3
+
+### Patch Changes
+
+- e50edfe: Extract a @container query outside a nested selector to remove warning on it.
+
 ## 1.17.2
 
 ### Patch Changes

package/dist/index.css

@@ -2415,9 +2415,6 @@ button {
   padding-right: var(--c-rte-toolbar-pr, 0.5rem);
   container-type: inline-size;
   container-name: rich-text-toolbar;
-  @container rich-text-toolbar (max-width: 600px) {
-    .c-rte-toolbar__icon-btn { display: none; };
-  }
 }
 .c-rte-toolbar__inner {
   display: flex;
@@ -2615,6 +2612,11 @@ button {
   display: flex;
   justify-content: flex-end;
 }
+@container rich-text-toolbar (max-width: 600px) {
+  .c-rte-toolbar .c-rte-toolbar__icon-btn {
+    display: none;
+  }
+}
 
 /* src/rich-text-editor/rich-text-editor.css */
 .c-rich-text-editor {

package/dist/index.js

@@ -29126,6 +29126,13 @@ function DropdownMenuRoot({
   container,
   ...delegated
 }) {
+  const contentProps = {
+    align: alignContent,
+    sideOffset: 5,
+    className: "c-dropdown-menu-content",
+    children: content,
+    ...delegated
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuPrimitive3.Root, {
     onOpenChange,
     children: [
@@ -29134,14 +29141,12 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Portal, {
+      container === null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
+        ...contentProps
+      }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Portal, {
         container,
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
-          align: alignContent,
-          sideOffset: 5,
-          className: "c-dropdown-menu-content",
-          ...delegated,
-          children: content
+          ...contentProps
         })
       })
     ]
@@ -31400,8 +31405,8 @@ var Key = (0, import_react47.forwardRef)((delegated, ref) => {
         fill: "#BFF6F8"
       }),
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M14.2861 2.06126C15.0279 1.89233 15.5969 1.90313 16.2407 2.02139C16.8882 2.14034 17.5061 2.38935 18.0586 2.75375C19.168 3.48444 19.9256 4.59912 20.1884 5.89043C20.4159 7.00773 20.2975 8.13239 19.8345 9.13848C19.375 10.1371 18.7298 10.9082 17.607 11.4842C16.8141 11.891 16.1813 12.0232 15.3771 12.0232H15.3706C14.803 12.0461 14.2219 11.9333 13.6076 11.6916C12.8526 12.4665 12.1015 13.2514 11.3489 14.0378C9.77024 15.6873 8.18529 17.3435 6.54613 18.9277C6.17818 19.2889 5.68752 19.493 5.17496 19.4955L5.17167 19.4955C4.90609 19.4939 4.64362 19.4386 4.3993 19.3331C4.1553 19.2278 3.9344 19.0744 3.74899 18.8822C3.38162 18.5049 3.17408 17.9966 3.16855 17.4666C3.16301 16.9363 3.36003 16.4236 3.7196 16.0382C3.82475 15.9262 4.03922 15.706 4.03922 15.706C4.03922 15.706 3.32162 14.9716 3.11872 14.769C2.88007 14.5311 2.74527 14.2397 2.74527 13.9108C2.74527 13.6833 2.81488 13.3558 3.1158 13.0566C3.38648 12.787 3.63119 12.534 3.85634 12.2918C4.14888 11.9772 4.47429 11.8969 4.7078 11.8969H4.71274C5.04159 11.8969 5.33075 12.0407 5.56473 12.2869C5.74754 12.4792 6.02614 12.7657 6.25999 13.005C6.33588 13.0827 6.4069 13.1553 6.46821 13.2178L7.04848 12.6337C7.02239 12.6067 6.9947 12.5781 6.96596 12.5484C6.80638 12.3838 6.61651 12.1891 6.48996 12.0635C6.24557 11.8206 6.10766 11.5255 6.10766 11.1933C6.10815 10.9628 6.181 10.6329 6.48692 10.3331C6.75501 10.0693 7.01468 9.79536 7.21306 9.58374C7.4447 9.33431 7.73505 9.18807 8.06702 9.18807C8.29928 9.18807 8.62426 9.26401 8.91959 9.57685C9.10286 9.77043 9.28546 9.96275 9.46954 10.1527C9.68431 9.93175 9.83739 9.7722 10.0018 9.60089C10.1998 9.39453 10.4141 9.17111 10.7724 8.8027C10.5401 8.18952 10.4272 7.5352 10.4406 6.87665C10.4552 6.15474 10.5737 5.53909 10.9329 4.7827C11.3015 4.00641 11.6307 3.57251 12.3033 3.02885C12.9666 2.49276 13.4515 2.25131 14.2861 2.06126ZM7.68462 12.4291L7.88748 12.6404L6.4659 14.0716L6.25307 13.8552L6.12971 13.7296C6.05344 13.6519 5.94791 13.5442 5.83082 13.4243C5.59705 13.1851 5.31582 12.8959 5.12984 12.7003C4.98945 12.5525 4.85064 12.4969 4.71274 12.4969H4.7078C4.61699 12.4969 4.45943 12.5243 4.29579 12.7004C4.06482 12.9488 3.81465 13.2074 3.53899 13.482C3.37316 13.6468 3.34527 13.8094 3.34527 13.9108C3.34527 14.0616 3.40239 14.2047 3.54221 14.344C3.80349 14.6049 4.41991 15.2367 4.67344 15.497L4.87754 15.7065L4.6733 15.9158C4.63245 15.9577 4.59185 15.9991 4.55148 16.0404C4.41786 16.1768 4.28682 16.3106 4.15806 16.4478C3.90514 16.719 3.76457 17.0823 3.76851 17.4603C3.77246 17.8385 3.92067 18.1986 4.17922 18.464L4.18033 18.4652C4.31121 18.601 4.46652 18.7086 4.63716 18.7823C4.80725 18.8558 4.98946 18.8941 5.17354 18.8955L5.17203 18.8955L5.17532 18.8955L5.17354 18.8955C5.52759 18.8934 5.8688 18.7522 6.12651 18.4988L6.12836 18.497C7.75985 16.9203 9.33034 15.2792 10.904 13.6348C11.7056 12.7971 12.5081 11.9586 13.3198 11.1273L13.464 10.9797L13.6534 11.0615C14.2788 11.3316 14.8332 11.4453 15.3518 11.4234L15.3644 11.4229L15.3771 11.4232C16.0917 11.4232 16.6298 11.3112 17.3332 10.9504C18.3222 10.443 18.879 9.77955 19.2895 8.88764C19.6965 8.00315 19.8038 7.00887 19.6005 6.01012C19.3698 4.87684 18.7061 3.89862 17.7285 3.25473C17.2427 2.93437 16.7001 2.71582 16.1323 2.61151C15.5607 2.50651 15.0743 2.49712 14.4193 2.64628C13.677 2.81532 13.275 3.01499 12.6805 3.4955C12.082 3.97922 11.8073 4.33997 11.4749 5.04008C11.1556 5.71245 11.0536 6.24336 11.0405 6.88883C11.0274 7.53036 11.15 8.16698 11.3996 8.7549L11.4776 8.93858L11.3384 9.0815C10.9129 9.51811 10.6644 9.77704 10.4358 10.0151C10.2142 10.246 10.0114 10.4572 9.68443 10.7919L9.47093 11.0104L9.25634 10.7929C8.99434 10.5275 8.73781 10.2576 8.48371 9.98917C8.31939 9.81506 8.16187 9.78807 8.06702 9.78807C7.92755 9.78807 7.78942 9.84468 7.6524 9.99238L7.65133 9.99352C7.45148 10.2067 7.1848 10.4882 6.9075 10.761C6.73719 10.9278 6.70794 11.0923 6.70766 11.1936C6.70774 11.3447 6.76592 11.4918 6.91268 11.6377M14.6993 5.26848C14.5063 5.35343 14.3222 5.48871 14.1164 5.69732C13.9122 5.90435 13.7828 6.08986 13.7019 6.28448C13.6211 6.47884 13.5811 6.70037 13.5806 6.98968C13.5789 7.99854 14.3727 8.82602 15.3628 8.82652H15.3648C16.3635 8.82652 17.1473 8.01108 17.1592 7.00008C17.1626 6.70925 17.1266 6.48571 17.0492 6.28946C16.9719 6.09342 16.8461 5.90632 16.6446 5.69836C16.4445 5.49196 16.2651 5.35857 16.0764 5.27398C15.8889 5.18989 15.6744 5.146 15.3935 5.14381C15.109 5.14159 14.8908 5.18419 14.6993 5.26848ZM14.4576 4.71932C14.7424 4.59395 15.0479 4.5411 15.3981 4.54383C15.7422 4.54651 16.0423 4.60112 16.3219 4.7265C16.6004 4.85137 16.8405 5.03842 17.0754 5.28081C17.3164 5.5295 17.4939 5.78148 17.6074 6.06934C17.7208 6.35697 17.7632 6.66212 17.7591 7.00712C17.7437 8.32517 16.7132 9.42652 15.3648 9.42652H15.3627C14.0223 9.42584 12.9783 8.31027 12.9806 6.98862C12.9812 6.64284 13.0294 6.33921 13.1479 6.05413C13.2663 5.76932 13.4475 5.52112 13.6893 5.27599C13.9293 5.03266 14.1742 4.84405 14.4576 4.71932Z",
         fill: "#528693"
       })
@@ -33849,8 +33854,8 @@ var Video = (0, import_react93.forwardRef)((delegated, ref) => {
         fill: "white"
       }),
       /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V17C20.6 17.8837 19.8836 18.6 19 18.6H2.99999C2.11634 18.6 1.39999 17.8837 1.39999 17V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V17C1.99999 17.5523 2.44771 18 2.99999 18H19C19.5523 18 20 17.5523 20 17V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z",
         fill: "#528693"
       }),
@@ -33860,8 +33865,8 @@ var Video = (0, import_react93.forwardRef)((delegated, ref) => {
         className: "c-icon-fill"
       }),
       /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M20.6 7.60002H1.39999V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V7.60002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V7.00002H20V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z",
         fill: "#528693"
       }),
@@ -33871,8 +33876,8 @@ var Video = (0, import_react93.forwardRef)((delegated, ref) => {
         className: "c-icon-fill"
       }),
       /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M13.3176 13.3513L9.71764 15.4297C9.11764 15.7761 8.36764 15.3431 8.36764 14.6503L8.36764 10.4934C8.36764 9.80056 9.11764 9.36755 9.71764 9.71396L13.3176 11.7924C13.9176 12.1388 13.9176 13.0049 13.3176 13.3513ZM13.0176 12.8317C13.2176 12.7162 13.2176 12.4275 13.0176 12.312L9.41764 10.2336C9.21764 10.1181 8.96764 10.2624 8.96764 10.4934L8.96764 14.6503C8.96764 14.8812 9.21764 15.0256 9.41764 14.9101L13.0176 12.8317Z",
         fill: "#528693"
       })
@@ -34581,6 +34586,7 @@ var InputWithLabel = (0, import_react100.forwardRef)(
               !append && !errorMessage ? null : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, {
                 content: errorMessage,
                 children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", {
+                  "data-testid": "input-with-label-error-message",
                   className: "c-input-with-label-append",
                   children: errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Triangle, {}) : append
                 })

package/dist/index.mjs

@@ -238,6 +238,13 @@ function DropdownMenuRoot({
   container,
   ...delegated
 }) {
+  const contentProps = {
+    align: alignContent,
+    sideOffset: 5,
+    className: "c-dropdown-menu-content",
+    children: content,
+    ...delegated
+  };
   return /* @__PURE__ */ jsxs3(DropdownMenuPrimitive3.Root, {
     onOpenChange,
     children: [
@@ -246,14 +253,12 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Portal, {
+      container === null ? /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
+        ...contentProps
+      }) : /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Portal, {
         container,
         children: /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
-          align: alignContent,
-          sideOffset: 5,
-          className: "c-dropdown-menu-content",
-          ...delegated,
-          children: content
+          ...contentProps
         })
       })
     ]
@@ -2512,8 +2517,8 @@ var Key = forwardRef47((delegated, ref) => {
         fill: "#BFF6F8"
       }),
       /* @__PURE__ */ jsx54("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M14.2861 2.06126C15.0279 1.89233 15.5969 1.90313 16.2407 2.02139C16.8882 2.14034 17.5061 2.38935 18.0586 2.75375C19.168 3.48444 19.9256 4.59912 20.1884 5.89043C20.4159 7.00773 20.2975 8.13239 19.8345 9.13848C19.375 10.1371 18.7298 10.9082 17.607 11.4842C16.8141 11.891 16.1813 12.0232 15.3771 12.0232H15.3706C14.803 12.0461 14.2219 11.9333 13.6076 11.6916C12.8526 12.4665 12.1015 13.2514 11.3489 14.0378C9.77024 15.6873 8.18529 17.3435 6.54613 18.9277C6.17818 19.2889 5.68752 19.493 5.17496 19.4955L5.17167 19.4955C4.90609 19.4939 4.64362 19.4386 4.3993 19.3331C4.1553 19.2278 3.9344 19.0744 3.74899 18.8822C3.38162 18.5049 3.17408 17.9966 3.16855 17.4666C3.16301 16.9363 3.36003 16.4236 3.7196 16.0382C3.82475 15.9262 4.03922 15.706 4.03922 15.706C4.03922 15.706 3.32162 14.9716 3.11872 14.769C2.88007 14.5311 2.74527 14.2397 2.74527 13.9108C2.74527 13.6833 2.81488 13.3558 3.1158 13.0566C3.38648 12.787 3.63119 12.534 3.85634 12.2918C4.14888 11.9772 4.47429 11.8969 4.7078 11.8969H4.71274C5.04159 11.8969 5.33075 12.0407 5.56473 12.2869C5.74754 12.4792 6.02614 12.7657 6.25999 13.005C6.33588 13.0827 6.4069 13.1553 6.46821 13.2178L7.04848 12.6337C7.02239 12.6067 6.9947 12.5781 6.96596 12.5484C6.80638 12.3838 6.61651 12.1891 6.48996 12.0635C6.24557 11.8206 6.10766 11.5255 6.10766 11.1933C6.10815 10.9628 6.181 10.6329 6.48692 10.3331C6.75501 10.0693 7.01468 9.79536 7.21306 9.58374C7.4447 9.33431 7.73505 9.18807 8.06702 9.18807C8.29928 9.18807 8.62426 9.26401 8.91959 9.57685C9.10286 9.77043 9.28546 9.96275 9.46954 10.1527C9.68431 9.93175 9.83739 9.7722 10.0018 9.60089C10.1998 9.39453 10.4141 9.17111 10.7724 8.8027C10.5401 8.18952 10.4272 7.5352 10.4406 6.87665C10.4552 6.15474 10.5737 5.53909 10.9329 4.7827C11.3015 4.00641 11.6307 3.57251 12.3033 3.02885C12.9666 2.49276 13.4515 2.25131 14.2861 2.06126ZM7.68462 12.4291L7.88748 12.6404L6.4659 14.0716L6.25307 13.8552L6.12971 13.7296C6.05344 13.6519 5.94791 13.5442 5.83082 13.4243C5.59705 13.1851 5.31582 12.8959 5.12984 12.7003C4.98945 12.5525 4.85064 12.4969 4.71274 12.4969H4.7078C4.61699 12.4969 4.45943 12.5243 4.29579 12.7004C4.06482 12.9488 3.81465 13.2074 3.53899 13.482C3.37316 13.6468 3.34527 13.8094 3.34527 13.9108C3.34527 14.0616 3.40239 14.2047 3.54221 14.344C3.80349 14.6049 4.41991 15.2367 4.67344 15.497L4.87754 15.7065L4.6733 15.9158C4.63245 15.9577 4.59185 15.9991 4.55148 16.0404C4.41786 16.1768 4.28682 16.3106 4.15806 16.4478C3.90514 16.719 3.76457 17.0823 3.76851 17.4603C3.77246 17.8385 3.92067 18.1986 4.17922 18.464L4.18033 18.4652C4.31121 18.601 4.46652 18.7086 4.63716 18.7823C4.80725 18.8558 4.98946 18.8941 5.17354 18.8955L5.17203 18.8955L5.17532 18.8955L5.17354 18.8955C5.52759 18.8934 5.8688 18.7522 6.12651 18.4988L6.12836 18.497C7.75985 16.9203 9.33034 15.2792 10.904 13.6348C11.7056 12.7971 12.5081 11.9586 13.3198 11.1273L13.464 10.9797L13.6534 11.0615C14.2788 11.3316 14.8332 11.4453 15.3518 11.4234L15.3644 11.4229L15.3771 11.4232C16.0917 11.4232 16.6298 11.3112 17.3332 10.9504C18.3222 10.443 18.879 9.77955 19.2895 8.88764C19.6965 8.00315 19.8038 7.00887 19.6005 6.01012C19.3698 4.87684 18.7061 3.89862 17.7285 3.25473C17.2427 2.93437 16.7001 2.71582 16.1323 2.61151C15.5607 2.50651 15.0743 2.49712 14.4193 2.64628C13.677 2.81532 13.275 3.01499 12.6805 3.4955C12.082 3.97922 11.8073 4.33997 11.4749 5.04008C11.1556 5.71245 11.0536 6.24336 11.0405 6.88883C11.0274 7.53036 11.15 8.16698 11.3996 8.7549L11.4776 8.93858L11.3384 9.0815C10.9129 9.51811 10.6644 9.77704 10.4358 10.0151C10.2142 10.246 10.0114 10.4572 9.68443 10.7919L9.47093 11.0104L9.25634 10.7929C8.99434 10.5275 8.73781 10.2576 8.48371 9.98917C8.31939 9.81506 8.16187 9.78807 8.06702 9.78807C7.92755 9.78807 7.78942 9.84468 7.6524 9.99238L7.65133 9.99352C7.45148 10.2067 7.1848 10.4882 6.9075 10.761C6.73719 10.9278 6.70794 11.0923 6.70766 11.1936C6.70774 11.3447 6.76592 11.4918 6.91268 11.6377M14.6993 5.26848C14.5063 5.35343 14.3222 5.48871 14.1164 5.69732C13.9122 5.90435 13.7828 6.08986 13.7019 6.28448C13.6211 6.47884 13.5811 6.70037 13.5806 6.98968C13.5789 7.99854 14.3727 8.82602 15.3628 8.82652H15.3648C16.3635 8.82652 17.1473 8.01108 17.1592 7.00008C17.1626 6.70925 17.1266 6.48571 17.0492 6.28946C16.9719 6.09342 16.8461 5.90632 16.6446 5.69836C16.4445 5.49196 16.2651 5.35857 16.0764 5.27398C15.8889 5.18989 15.6744 5.146 15.3935 5.14381C15.109 5.14159 14.8908 5.18419 14.6993 5.26848ZM14.4576 4.71932C14.7424 4.59395 15.0479 4.5411 15.3981 4.54383C15.7422 4.54651 16.0423 4.60112 16.3219 4.7265C16.6004 4.85137 16.8405 5.03842 17.0754 5.28081C17.3164 5.5295 17.4939 5.78148 17.6074 6.06934C17.7208 6.35697 17.7632 6.66212 17.7591 7.00712C17.7437 8.32517 16.7132 9.42652 15.3648 9.42652H15.3627C14.0223 9.42584 12.9783 8.31027 12.9806 6.98862C12.9812 6.64284 13.0294 6.33921 13.1479 6.05413C13.2663 5.76932 13.4475 5.52112 13.6893 5.27599C13.9293 5.03266 14.1742 4.84405 14.4576 4.71932Z",
         fill: "#528693"
       })
@@ -4961,8 +4966,8 @@ var Video = forwardRef93((delegated, ref) => {
         fill: "white"
       }),
       /* @__PURE__ */ jsx100("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V17C20.6 17.8837 19.8836 18.6 19 18.6H2.99999C2.11634 18.6 1.39999 17.8837 1.39999 17V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V17C1.99999 17.5523 2.44771 18 2.99999 18H19C19.5523 18 20 17.5523 20 17V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z",
         fill: "#528693"
       }),
@@ -4972,8 +4977,8 @@ var Video = forwardRef93((delegated, ref) => {
         className: "c-icon-fill"
       }),
       /* @__PURE__ */ jsx100("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M20.6 7.60002H1.39999V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V7.60002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V7.00002H20V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z",
         fill: "#528693"
       }),
@@ -4983,8 +4988,8 @@ var Video = forwardRef93((delegated, ref) => {
         className: "c-icon-fill"
       }),
       /* @__PURE__ */ jsx100("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M13.3176 13.3513L9.71764 15.4297C9.11764 15.7761 8.36764 15.3431 8.36764 14.6503L8.36764 10.4934C8.36764 9.80056 9.11764 9.36755 9.71764 9.71396L13.3176 11.7924C13.9176 12.1388 13.9176 13.0049 13.3176 13.3513ZM13.0176 12.8317C13.2176 12.7162 13.2176 12.4275 13.0176 12.312L9.41764 10.2336C9.21764 10.1181 8.96764 10.2624 8.96764 10.4934L8.96764 14.6503C8.96764 14.8812 9.21764 15.0256 9.41764 14.9101L13.0176 12.8317Z",
         fill: "#528693"
       })
@@ -5693,6 +5698,7 @@ var InputWithLabel = forwardRef100(
               !append && !errorMessage ? null : /* @__PURE__ */ jsx112(Tooltip, {
                 content: errorMessage,
                 children: /* @__PURE__ */ jsx112("div", {
+                  "data-testid": "input-with-label-error-message",
                   className: "c-input-with-label-append",
                   children: errorMessage ? /* @__PURE__ */ jsx112(Triangle, {}) : append
                 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.17.2",
+  "version": "1.17.4",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -21,21 +21,26 @@ export function DropdownMenuRoot({
   container,
   ...delegated
 }: DropdownMenuRootProps) {
+  const contentProps = {
+    align: alignContent,
+    sideOffset: 5,
+    className: 'c-dropdown-menu-content',
+    children: content,
+    ...delegated,
+  };
+
   return (
     <DropdownMenuPrimitive.Root onOpenChange={onOpenChange}>
       <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
         {children}
       </DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Portal container={container}>
-        <DropdownMenuPrimitive.Content
-          align={alignContent}
-          sideOffset={5}
-          className="c-dropdown-menu-content"
-          {...delegated}
-        >
-          {content}
-        </DropdownMenuPrimitive.Content>
-      </DropdownMenuPrimitive.Portal>
+      {container === null ? (
+        <DropdownMenuPrimitive.Content {...contentProps} />
+      ) : (
+        <DropdownMenuPrimitive.Portal container={container}>
+          <DropdownMenuPrimitive.Content {...contentProps} />
+        </DropdownMenuPrimitive.Portal>
+      )}
     </DropdownMenuPrimitive.Root>
   );
 }

package/src/iconography/key.tsx

@@ -12,8 +12,8 @@ export const Key = forwardRef<KeyRef, KeyProps>((delegated, ref) => {
         fill="#BFF6F8"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M14.2861 2.06126C15.0279 1.89233 15.5969 1.90313 16.2407 2.02139C16.8882 2.14034 17.5061 2.38935 18.0586 2.75375C19.168 3.48444 19.9256 4.59912 20.1884 5.89043C20.4159 7.00773 20.2975 8.13239 19.8345 9.13848C19.375 10.1371 18.7298 10.9082 17.607 11.4842C16.8141 11.891 16.1813 12.0232 15.3771 12.0232H15.3706C14.803 12.0461 14.2219 11.9333 13.6076 11.6916C12.8526 12.4665 12.1015 13.2514 11.3489 14.0378C9.77024 15.6873 8.18529 17.3435 6.54613 18.9277C6.17818 19.2889 5.68752 19.493 5.17496 19.4955L5.17167 19.4955C4.90609 19.4939 4.64362 19.4386 4.3993 19.3331C4.1553 19.2278 3.9344 19.0744 3.74899 18.8822C3.38162 18.5049 3.17408 17.9966 3.16855 17.4666C3.16301 16.9363 3.36003 16.4236 3.7196 16.0382C3.82475 15.9262 4.03922 15.706 4.03922 15.706C4.03922 15.706 3.32162 14.9716 3.11872 14.769C2.88007 14.5311 2.74527 14.2397 2.74527 13.9108C2.74527 13.6833 2.81488 13.3558 3.1158 13.0566C3.38648 12.787 3.63119 12.534 3.85634 12.2918C4.14888 11.9772 4.47429 11.8969 4.7078 11.8969H4.71274C5.04159 11.8969 5.33075 12.0407 5.56473 12.2869C5.74754 12.4792 6.02614 12.7657 6.25999 13.005C6.33588 13.0827 6.4069 13.1553 6.46821 13.2178L7.04848 12.6337C7.02239 12.6067 6.9947 12.5781 6.96596 12.5484C6.80638 12.3838 6.61651 12.1891 6.48996 12.0635C6.24557 11.8206 6.10766 11.5255 6.10766 11.1933C6.10815 10.9628 6.181 10.6329 6.48692 10.3331C6.75501 10.0693 7.01468 9.79536 7.21306 9.58374C7.4447 9.33431 7.73505 9.18807 8.06702 9.18807C8.29928 9.18807 8.62426 9.26401 8.91959 9.57685C9.10286 9.77043 9.28546 9.96275 9.46954 10.1527C9.68431 9.93175 9.83739 9.7722 10.0018 9.60089C10.1998 9.39453 10.4141 9.17111 10.7724 8.8027C10.5401 8.18952 10.4272 7.5352 10.4406 6.87665C10.4552 6.15474 10.5737 5.53909 10.9329 4.7827C11.3015 4.00641 11.6307 3.57251 12.3033 3.02885C12.9666 2.49276 13.4515 2.25131 14.2861 2.06126ZM7.68462 12.4291L7.88748 12.6404L6.4659 14.0716L6.25307 13.8552L6.12971 13.7296C6.05344 13.6519 5.94791 13.5442 5.83082 13.4243C5.59705 13.1851 5.31582 12.8959 5.12984 12.7003C4.98945 12.5525 4.85064 12.4969 4.71274 12.4969H4.7078C4.61699 12.4969 4.45943 12.5243 4.29579 12.7004C4.06482 12.9488 3.81465 13.2074 3.53899 13.482C3.37316 13.6468 3.34527 13.8094 3.34527 13.9108C3.34527 14.0616 3.40239 14.2047 3.54221 14.344C3.80349 14.6049 4.41991 15.2367 4.67344 15.497L4.87754 15.7065L4.6733 15.9158C4.63245 15.9577 4.59185 15.9991 4.55148 16.0404C4.41786 16.1768 4.28682 16.3106 4.15806 16.4478C3.90514 16.719 3.76457 17.0823 3.76851 17.4603C3.77246 17.8385 3.92067 18.1986 4.17922 18.464L4.18033 18.4652C4.31121 18.601 4.46652 18.7086 4.63716 18.7823C4.80725 18.8558 4.98946 18.8941 5.17354 18.8955L5.17203 18.8955L5.17532 18.8955L5.17354 18.8955C5.52759 18.8934 5.8688 18.7522 6.12651 18.4988L6.12836 18.497C7.75985 16.9203 9.33034 15.2792 10.904 13.6348C11.7056 12.7971 12.5081 11.9586 13.3198 11.1273L13.464 10.9797L13.6534 11.0615C14.2788 11.3316 14.8332 11.4453 15.3518 11.4234L15.3644 11.4229L15.3771 11.4232C16.0917 11.4232 16.6298 11.3112 17.3332 10.9504C18.3222 10.443 18.879 9.77955 19.2895 8.88764C19.6965 8.00315 19.8038 7.00887 19.6005 6.01012C19.3698 4.87684 18.7061 3.89862 17.7285 3.25473C17.2427 2.93437 16.7001 2.71582 16.1323 2.61151C15.5607 2.50651 15.0743 2.49712 14.4193 2.64628C13.677 2.81532 13.275 3.01499 12.6805 3.4955C12.082 3.97922 11.8073 4.33997 11.4749 5.04008C11.1556 5.71245 11.0536 6.24336 11.0405 6.88883C11.0274 7.53036 11.15 8.16698 11.3996 8.7549L11.4776 8.93858L11.3384 9.0815C10.9129 9.51811 10.6644 9.77704 10.4358 10.0151C10.2142 10.246 10.0114 10.4572 9.68443 10.7919L9.47093 11.0104L9.25634 10.7929C8.99434 10.5275 8.73781 10.2576 8.48371 9.98917C8.31939 9.81506 8.16187 9.78807 8.06702 9.78807C7.92755 9.78807 7.78942 9.84468 7.6524 9.99238L7.65133 9.99352C7.45148 10.2067 7.1848 10.4882 6.9075 10.761C6.73719 10.9278 6.70794 11.0923 6.70766 11.1936C6.70774 11.3447 6.76592 11.4918 6.91268 11.6377M14.6993 5.26848C14.5063 5.35343 14.3222 5.48871 14.1164 5.69732C13.9122 5.90435 13.7828 6.08986 13.7019 6.28448C13.6211 6.47884 13.5811 6.70037 13.5806 6.98968C13.5789 7.99854 14.3727 8.82602 15.3628 8.82652H15.3648C16.3635 8.82652 17.1473 8.01108 17.1592 7.00008C17.1626 6.70925 17.1266 6.48571 17.0492 6.28946C16.9719 6.09342 16.8461 5.90632 16.6446 5.69836C16.4445 5.49196 16.2651 5.35857 16.0764 5.27398C15.8889 5.18989 15.6744 5.146 15.3935 5.14381C15.109 5.14159 14.8908 5.18419 14.6993 5.26848ZM14.4576 4.71932C14.7424 4.59395 15.0479 4.5411 15.3981 4.54383C15.7422 4.54651 16.0423 4.60112 16.3219 4.7265C16.6004 4.85137 16.8405 5.03842 17.0754 5.28081C17.3164 5.5295 17.4939 5.78148 17.6074 6.06934C17.7208 6.35697 17.7632 6.66212 17.7591 7.00712C17.7437 8.32517 16.7132 9.42652 15.3648 9.42652H15.3627C14.0223 9.42584 12.9783 8.31027 12.9806 6.98862C12.9812 6.64284 13.0294 6.33921 13.1479 6.05413C13.2663 5.76932 13.4475 5.52112 13.6893 5.27599C13.9293 5.03266 14.1742 4.84405 14.4576 4.71932Z"
         fill="#528693"
       />

package/src/iconography/video.tsx

@@ -12,8 +12,8 @@ export const Video = forwardRef<VideoRef, VideoProps>((delegated, ref) => {
         fill="white"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V17C20.6 17.8837 19.8836 18.6 19 18.6H2.99999C2.11634 18.6 1.39999 17.8837 1.39999 17V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V17C1.99999 17.5523 2.44771 18 2.99999 18H19C19.5523 18 20 17.5523 20 17V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z"
         fill="#528693"
       />
@@ -23,8 +23,8 @@ export const Video = forwardRef<VideoRef, VideoProps>((delegated, ref) => {
         className="c-icon-fill"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M20.6 7.60002H1.39999V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V7.60002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V7.00002H20V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z"
         fill="#528693"
       />
@@ -34,8 +34,8 @@ export const Video = forwardRef<VideoRef, VideoProps>((delegated, ref) => {
         className="c-icon-fill"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M13.3176 13.3513L9.71764 15.4297C9.11764 15.7761 8.36764 15.3431 8.36764 14.6503L8.36764 10.4934C8.36764 9.80056 9.11764 9.36755 9.71764 9.71396L13.3176 11.7924C13.9176 12.1388 13.9176 13.0049 13.3176 13.3513ZM13.0176 12.8317C13.2176 12.7162 13.2176 12.4275 13.0176 12.312L9.41764 10.2336C9.21764 10.1181 8.96764 10.2624 8.96764 10.4934L8.96764 14.6503C8.96764 14.8812 9.21764 15.0256 9.41764 14.9101L13.0176 12.8317Z"
         fill="#528693"
       />

package/src/input-with-label/input-with-label.tsx

@@ -47,7 +47,9 @@ export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>
             <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
             {!append && !errorMessage ? null : (
               <Tooltip content={errorMessage}>
-                <div className="c-input-with-label-append">{errorMessage ? <Triangle /> : append}</div>
+                <div data-testid="input-with-label-error-message" className="c-input-with-label-append">
+                  {errorMessage ? <Triangle /> : append}
+                </div>
               </Tooltip>
             )}
           </span>

package/src/rich-text-editor/plugins/ToolbarPlugin/index.css

@@ -9,12 +9,6 @@
   container-type: inline-size;
   container-name: rich-text-toolbar;
 
-  @container rich-text-toolbar (max-width: 600px) {
-    .c-rte-toolbar__icon-btn {
-      display: none;
-    }
-  }
-
   &__inner {
     @apply flex;
   }
@@ -127,3 +121,9 @@
     @apply mt-3 flex justify-end;
   }
 }
+
+@container rich-text-toolbar (max-width: 600px) {
+  .c-rte-toolbar .c-rte-toolbar__icon-btn {
+    display: none;
+  }
+}